@extends('layouts.app')

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="card-title-wrap bar-success">
                        <h4 class="card-title" id="basic-layout-form">Add Item</h4>
                    </div>
                    {{-- <p class="mb-0">This is the most basic and cost estimation form is the default position.</p> --}}
                </div>
                <div class="card-body">
                    <div class="px-3">
                        <form class="form" id="itemForm">
                            <div class="form-body">
                                {{-- <h4 class="form-section">
                                <i class="icon-user"></i> Personal Details</h4> --}}
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="type">Select Type</label>
                                            <select name="type" id="type" class="form-control">
                                                <option value="" selected disabled>Select Type</option>
                                                <option>Service</option>
                                                <option>Non-Inventory</option>
                                                <option>Inventory</option>
                                                <option>Group</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="item_name" id="item_name_label">Item Name</label>
                                            <input type="text" name="item_name" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="is_sub_account">Has Sub Item ?</label>
                                            <select name="is_sub_account" id="is_sub_account" disabled
                                                class="form-control">
                                                <option value="" selected disabled>Select Option</option>
                                                <option>Yes</option>
                                                <option>No</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6 d-none" id="sub_accounts">
                                        <div class="form-group">
                                            <label for="sub_account">Select Item</label>
                                            <select name="sub_account" id="sub_account" class="form-control">
                                                <option value="" selected disabled>Select Option</option>

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6 d-none servic_non">
                                        <div class="form-group">
                                            <label for="description">Description</label>
                                            <input type="text" name="description" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-6 d-none servic_non">
                                        <div class="form-group">
                                            <label for="rate">Rate</label>
                                            <input type="text" name="rate" class="form-control" value="0">
                                        </div>
                                    </div>
                                    <div class="col-md-6 d-none service">
                                        <div class="form-group">
                                            <label for="tax_code">Tax Code</label>
                                            <select name="tax_code" class="form-control" id="tax_code">
                                                <option value="">Please Select</option>
                                                @foreach ($sales_tax as $item)
                                                    <option value="{{$item->tax}}">{{$item->type}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6 d-none group_non">
                                        <div class="form-group">
                                            <label for="">Items</label>
                                            <select name="item_group[]" id="item_group" class="form-control"
                                                multiple="multiple">
                                                <option value="">Please Select</option>
                                                @foreach ($item_group as $item)
                                                    <option value="{{ $item->id }}">{{ $item->item_name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6 d-none servic_non" id="account_div">
                                        <div class="form-group">
                                            <label for="account_id">Select Account</label>
                                            <a class="float-right" href="#addAccount" data-toggle="modal"
                                                data-keyboard="false">Add Account</a>
                                            <select name="account_id" id="account_id" class="form-control account_lists">
                                                <option value="" selected disabled>Select Account</option>
                                                @foreach ($accounts as $a)
                                                    <option value="{{ $a->id }}">{{ $a->name }} -
                                                        {{ $a->category }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row d-none" id="inventory">
                                    <div class="col-md-12">
                                        <h4 class="form-section">Purchase Information</h4>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="purchase_description">Description</label>
                                            <input type="text" name="purchase_description" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="purchase_cost">Cost</label>
                                            <input type="text" name="purchase_cost" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="cost_of_goods_id">Cost of Goods Sold Account</label>
                                            <a class="float-right" href="#addAccount" data-toggle="modal"
                                                data-keyboard="false">Add Account</a>
                                            <select name="cost_of_goods_id" id="cost_of_goods_id"
                                                class="form-control account_lists">
                                                <option value="" selected disabled>Select Account</option>
                                                @foreach ($cost_goods as $acc)
                                                    <option value="{{ $acc->id }}">{{ $acc->name }} -
                                                        {{ $acc->category }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <h4 class="form-section">Sale Information</h4>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="sale_description">Description</label>
                                            <input type="text" name="sale_description" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="sale_cost">Sale Price</label>
                                            <input type="text" name="sale_cost" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="income_account_id">Income Account</label>
                                            <a class="float-right" href="#addAccount" data-toggle="modal"
                                                data-keyboard="false">Add Account</a>
                                            <select name="income_account_id" id="income_account_id"
                                                class="form-control account_lists">
                                                <option value="" selected disabled>Select Account</option>
                                                @foreach ($income_accounts as $account)
                                                    <option value="{{ $account->id }}">{{ $account->name }} -
                                                        {{ $account->category }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <h4 class="form-section">Inventory Information</h4>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="asset_account_id">Asset Account</label>
                                            <a class="float-right" href="#addAccount" data-toggle="modal"
                                                data-keyboard="false">Add Account</a>
                                            <select name="asset_account_id" id="asset_account_id"
                                                class="form-control account_lists">
                                                <option value="" selected disabled>Select Account</option>
                                                @foreach ($asset_accounts as $accountss)
                                                    <option value="{{ $accountss->id }}">{{ $accountss->name }} -
                                                        {{ $accountss->category }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="form-actions">
                                <button type="button" class="btn btn-danger mr-1">
                                    <i class="icon-trash"></i> Cancel
                                </button>
                                <button type="button" class="btn btn-success" id="saveBtn">
                                    <i class="icon-note"></i> Save
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade text-left" id="addAccount" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header gradient-green-tea">
                    <h3 class="modal-title text-white" id="myModalLabel3">Add Account</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form" id="accountForm">
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="text-bold-500" for="category"> Select Category: </label>
                                    <select name="category" class="form-control" data-id="add">
                                        <option selected disabled>Select Option</option>
                                        <option>Income</option>
                                        <option>Expense</option>
                                        <option>Fixed Asset</option>
                                        <option>Loan</option>
                                        <option>Equity</option>
                                        <option>Inventory</option>
                                        <option>Account Receivable</option>
                                        <option>Account Payable</option>
                                        <option>Other Income</option>
                                        <option>Other Expense</option>
                                        <option>Other Asset</option>
                                        <option>Other Liability</option>
                                        <option>Cost Of Good Sold</option>
                                        <option>Current Asset</option>
                                        <option>Long Term Liability</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="text-bold-500" for="name"> Name: </label>
                                    <input type="text" class="form-control border-primary" name="name">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="text-bold-500" for="is_sub_account"> Has Sub Account ? </label>
                                    <select name="is_sub_account" class="form-control add_form_sub">
                                        <option selected disabled>Select Option</option>
                                        <option>Yes</option>
                                        <option>No</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-6 d-none" id="add_form_sub">
                                <div class="form-group">
                                    <label class="text-bold-500" for="sub_account"> Sub Account: </label>
                                    <select name="sub_account" id="sub_account_add" class="form-control">
                                        <option selected disabled>Select Option</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="text-bold-500" for="desc"> Description: </label>
                                    <input type="text" class="form-control border-primary" name="desc">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="text-bold-500" for="note"> Note: </label>
                                    <input type="text" class="form-control border-primary" name="note">
                                </div>
                            </div>
                        </div>
                        <div class="form-actions center pt-2">
                            <a href="javascript:;" data-dismiss="modal">
                                <button type="button" class="btn btn-danger mr-1">
                                    <i class="icon-trash"></i> Cancel
                                </button>
                            </a>
                            <button type="button" class="btn btn-raised btn-success" id="addAccountForm">
                                <i class="icon-note"></i> Save
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


@endsection


@section('afterScript')
    <script src="{{ asset('app-assets/vendors/js/core/jquery-3.3.1.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('.account_lists').select2()
            $('#item_group').select2()
            $(document).on('change', '#type', function() {
                $('#is_sub_account').attr('disabled', false)
                if ($(this).val() == 'Service') {
                    $('.servic_non').removeClass('d-none');
                    $('.service').removeClass('d-none');
                    $('#inventory').addClass('d-none');
                    $('.group_non').addClass('d-none');
                    $('#item_name_label').html('Item Name');
                    $('#account_div').show();
                } else if ($(this).val() == 'Non-Inventory') {
                    $('.servic_non').removeClass('d-none');
                    $('.service').addClass('d-none');
                    $('#inventory').addClass('d-none');
                    $('.group_non').addClass('d-none');
                    $('#item_name_label').html('Item Name');
                    $('#account_div').show();

                } else if ($(this).val() == 'Inventory') {
                    $('.servic_non').addClass('d-none');
                    $('.service').addClass('d-none');
                    $('#inventory').removeClass('d-none');
                    $('.group_non').addClass('d-none');
                    $('#item_name_label').html('Item Name');
                    $('#account_div').show();
                } else if ($(this).val() == 'Group') {
                    $('.servic_non').addClass('d-none');
                    $('.service').addClass('d-none');
                    $('#inventory').addClass('d-none');
                    $('.group_non').removeClass('d-none');
                    $('#account_div').removeClass('d-none');
                    $('#item_name_label').html('Group Name');
                    $('#account_div').hide();
                }
                var id = $(this).val();

                $.ajax({
                    url: '/fetch_item/' + id,
                    method: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        var html = '';
                        data.forEach(element => {
                            html += '<option>' + element.item_name + '</option>';
                        });

                        $('#sub_account').append(html);

                    },
                    error: function(e) {
                        console.log(e);
                    }
                });
            });

            $(document).on('change', '#is_sub_account', function() {
                if ($(this).val() == 'Yes') {
                    $('#sub_accounts').removeClass('d-none');
                } else {
                    $('#sub_accounts').addClass('d-none');
                }
            });

            $('#category').select2();
            $(document).on('change', '[name=category]', function() {
                var id = $(this).val();
                var data_id = $(this).attr('data-id');
                console.log(data_id);
                $.ajax({
                    url: '/fetch_account/' + id,
                    method: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        var html = '';
                        data.forEach(element => {
                            html += '<option>' + element.name + '</option>';
                        });

                        if (data_id == 'add') {
                            $('#sub_account_add').append(html);
                        } else {
                            $('#sub_account').append(html);
                        }
                    },
                    error: function(e) {
                        console.log(e);
                    }
                });
            });








            $(document).on('change', '.add_form_sub', function() {
                if ($(this).val() == 'Yes') {
                    $('#add_form_sub').removeClass('d-none');
                } else {
                    $('#add_form_sub').addClass('d-none');
                }
            });

            $(document).on('click', "#addAccountForm", function(e) {
                e.preventDefault();



                var form_data = new FormData($("#accountForm")[0]);
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: "{{ route('chart_account.store') }}",
                    type: "POST",
                    data: form_data,
                    async: false,
                    cache: false,
                    contentType: false,
                    enctype: 'multipart/form-data',
                    processData: false,
                    success: function(res) {
                        console.log(res);
                        swal("Inserted!", "Account has been Added Successfully!", "success");
                        $('.account_lists').append('<option value="' + res.id + '">' + res
                            .name + ' - ' + res.category + '</option>');
                        $('#addAccount').modal('hide');
                        $('#accountForm')[0].reset();
                        // $('.account_lists').val(res.id).trigger('change');
                    },
                    error: function(err) {
                        swal('Not Valid', err.responseJSON.message, 'error');
                        // setTimeout(function() { 
                        //     location.reload();
                        // }, 1000);

                    }
                });
            });


            $(document).on('click', "#saveBtn", function(e) {
                e.preventDefault();

                var form_data = new FormData($("#itemForm")[0]);
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: "{{ route('item_creation.store') }}",
                    type: "POST",
                    data: form_data,
                    async: false,
                    cache: false,
                    contentType: false,
                    enctype: 'multipart/form-data',
                    processData: false,
                    success: function(res) {
                        swal("Inserted!", "Item has been Added Successfully!", "success");
                        //  setTimeout(function() { 
                        //     // location.reload();
                        // }, 1000);
                        $('#itemForm')[0].reset();
                    },
                    error: function(err) {
                        swal('Not Valid', err.responseJSON.message, 'error');
                        // setTimeout(function() { 
                        //     location.reload();
                        // }, 1000);

                    }
                });
            });
        })
    </script>