@extends('layouts.app')

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="px-3 mt-3">
                        <form class="form" id="vendorBillForm">
                            <div class="form-body">
                                <h4 class="form-section">
                                    <i class="icon-user"></i> Enter Bill
                                </h4>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="bill_date">Bill Date</label>
                                            <input type="date" id="bill_date" class="form-control" name="bill_date">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="vendor_id">Bill From</label>
                                            <select name="vendor_id" class="form-control" id="vendor_id">
                                                <option disabled selected>Select Option</option>
                                                @foreach ($vendor as $v)
                                                    <option value="{{ $v->id }}">{{ $v->v_fname }}
                                                        {{ $v->v_lname }}</option>
                                                @endforeach

                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="reference">Reference</label>
                                            <input type="text" id="reference" placeholder="Reference" class="form-control"
                                                name="reference">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="bill_due_date">Bill Due Date</label>
                                            <input type="date" id="bill_due_date" class="form-control"
                                                name="bill_due_date">
                                        </div>
                                    </div>
                                </div>
                                <h4 class="form-section">
                                    <i class="icon-user"></i> Expense Item
                                </h4>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="card" style="">
                                            <div class="card-body">
                                                <div class="card-block">
                                                    <ul class="nav nav-tabs ">
                                                        <li class="nav-item">
                                                            <a class="nav-link active show" id="active-tab"
                                                                data-toggle="tab" href="#active" aria-controls="active"
                                                                aria-expanded="true">Expense</a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" id="link-tab" data-toggle="tab"
                                                                href="#link" aria-controls="link"
                                                                aria-expanded="false">Item</a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" id="link-tab" data-toggle="tab"
                                                                href="#cosignee" aria-controls="link"
                                                                aria-expanded="false">Consignee Item</a>
                                                        </li>
                                                    </ul>
                                                    <div class="tab-content px-1 pt-1">
                                                        <div role="tabpanel" class="tab-pane active show" id="active"
                                                            aria-labelledby="active-tab" aria-expanded="true">
                                                            <div class="expense_tab">
                                                                <div class="row">
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="exp_account">Select Account</label>
                                                                            <select name="exp_account[]"
                                                                                class="form-control account">
                                                                                <option value="" disabled selected>Select
                                                                                    Account</option>
                                                                                @foreach ($exp_accounts as $acc)
                                                                                    <option value="{{ $acc->id }}">
                                                                                        {{ $acc->name }}</option>
                                                                                @endforeach
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                    <input type="hidden" placeholder="Account"
                                                                        class="form-control" name="bill_from[]"
                                                                        value="expense">
                                                                    <input type="hidden" placeholder="Account"
                                                                        class="form-control" name="exp_qty[]" value="0">
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="amount">Amount</label>
                                                                            <input type="number" name="exp_amount[]"
                                                                                placeholder="Amount" class="form-control">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="memo">Memo</label>
                                                                            <input type="text" placeholder="Memo"
                                                                                class="form-control" name="exp_memo[]">
                                                                        </div>
                                                                    </div>
                                                                    {{-- <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label for="client_id">Select Client</label>
                                                                        <select name="exp_client_id[]" class="form-control client_id">
                                                                            <option disabled selected>Select Client</option>
                                                                            @foreach ($clients as $client)
                                                                                <option value="{{$client->id}}">{{$client->client_name}}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                    </div> --}}
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="job_id">Job No#</label>
                                                                            <select name="exp_job_id[]"
                                                                                class="form-control job_id">
                                                                                <option disabled selected>Select Job No#
                                                                                </option>
                                                                                @foreach ($jobs as $job)
                                                                                    <option value="{{ $job->id }}">
                                                                                        {{ $job->job_no }}</option>
                                                                                @endforeach
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div>
                                                                <button type="button" class="btn btn-success" id="add_expense">Add More</button>
                                                            </div>
                                                        </div>
                                                        <div class="tab-pane" id="link" role="tabpanel"
                                                            aria-labelledby="link-tab" aria-expanded="false">
                                                            <div class="item_tab">
                                                                <div class="row">
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="account">Select Item</label>
                                                                            <select name="account[]"
                                                                                class="account form-control">
                                                                                <option value="" disabled selected>Select Item
                                                                                </option>
                                                                                @foreach ($accounts as $a)
                                                                                    <option value="{{ $a->id }}">
                                                                                        {{ $a->item_name }}</option>
                                                                                @endforeach
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                    <input type="hidden" placeholder="Account"
                                                                        class="form-control" name="bill_from[]" value="items">
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="qty">Quantity</label>
                                                                            <input type="number" name="qty[]"
                                                                                placeholder="Quantity" class="form-control"
                                                                                id="item_qty_0">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label>Cost</label>
                                                                            <input type="number" placeholder="Cost"
                                                                                data-cost="0" class="form-control item_cost">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="amount">Amount</label>
                                                                            <input type="number" name="amount[]"
                                                                                placeholder="Amount" class="form-control"
                                                                                id="item_amount_0">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="memo">Memo</label>
                                                                            <input type="text" placeholder="Memo"
                                                                                class="form-control" name="memo[]">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="job_id">Job No#</label>
                                                                            <select name="job_id[]" class="job_id form-control">
                                                                                <option disabled selected>Select Job No#
                                                                                </option>
                                                                                @foreach ($jobs as $job)
                                                                                    <option value="{{ $job->id }}">
                                                                                        {{ $job->job_no }}</option>
                                                                                @endforeach
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div>
                                                                <button type="button" class="btn btn-success" id="add_item">Add More</button>
                                                            </div>
                                                        </div>
                                                        <div class="tab-pane" id="cosignee" role="tabpanel"
                                                            aria-labelledby="link-tab" aria-expanded="false">
                                                            <div style="width: 50%;margin-left:25%">
                                                                <div class="form-group">
                                                                    <label for="job_id">Job No#</label>
                                                                    <select name="job_id" class="job_id form-control">
                                                                        <option disabled selected>Select Job No#
                                                                        </option>
                                                                        @foreach ($jobs as $job)
                                                                            <option value="{{ $job->id }}">
                                                                                {{ $job->job_no }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="consignee_item_tab">
                                                                <div class="row">
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="account">Select Item</label>
                                                                            <select name="consignee_account[]"
                                                                                class="account form-control">
                                                                                <option value="" disabled selected>Select Item
                                                                                </option>
                                                                                @foreach ($accounts as $a)
                                                                                    <option value="{{ $a->id }}">
                                                                                        {{ $a->item_name }}</option>
                                                                                @endforeach
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                    <input type="hidden" placeholder="Account"
                                                                        class="form-control" name="bill_from[]" value="items">
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="amount">Amount</label>
                                                                            <input type="number" name="consignee_amount[]"
                                                                                placeholder="Amount" class="form-control"
                                                                                id="consignee_item_amount">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="memo">Memo</label>
                                                                            <input type="text" placeholder="Memo"
                                                                                class="form-control" name="consignee_memo[]">
                                                                        </div>
                                                                    </div>
                                                                    
                                                                </div>
                                                            </div>
                                                            <div>
                                                                <button type="button" class="btn btn-success" id="add_consignee_item">Add More</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </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>
@endsection

@section('afterScript')
    {{-- <script src="{{ asset('app-assets/vendors/js/core/jquery-3.3.1.min.js')}}"></script> --}}
    <script>
        $(document).ready(function() {
            $('#vendor_id').select2();
            $('.account').select2();
            $('.client_id').select2();
            $('.job_id').select2();

            $('#add_expense').click(function(){
                var output='';
                output+='<div class="row expense_row" style="border-top:1px solid grey;">';
                output+='<div class="col-md-6">';
                output+='<div class="form-group">';
                output+='<label for="exp_account">Select Account</label>';
                output+='<select name="exp_account[]" class="form-control account">';
                output+='<option value="" disabled selected>Select';
                output+='Account</option>';
                output+='@foreach ($exp_accounts as $acc)';
                output+='<option value="{{ $acc->id }}">';
                output+='{{ $acc->name }}</option>';
                output+='@endforeach';
                output+='</select>';
                output+='</div>';
                output+='</div>';
                output+='<input type="hidden" placeholder="Account" class="form-control" name="bill_from[]" value="expense">';
                output+='<input type="hidden" placeholder="Account" class="form-control" name="exp_qty[]" value="0">';
                output+='<div class="col-md-6">';
                output+='<div class="form-group">';
                output+='<label for="amount">Amount</label>';
                output+='<input type="number" name="exp_amount[]" placeholder="Amount" class="form-control">';
                output+='</div>';
                output+='</div>';
                output+='<div class="col-md-6">';
                output+='<div class="form-group">';
                output+='<label for="memo">Memo</label>';
                output+='<input type="text" placeholder="Memo" class="form-control" name="exp_memo[]">';
                output+='</div>';
                output+='</div>';
                output+='<div class="col-md-6">';
                output+='<div class="form-group">';
                output+='<label for="job_id">Job No#</label>';
                output+='<select name="exp_job_id[]" class="form-control job_id">';
                output+='<option disabled selected>Select Job No#';
                output+='</option>';
                output+='@foreach ($jobs as $job)';
                output+='<option value="{{ $job->id }}">';
                output+='{{ $job->job_no }}</option>';
                output+='@endforeach';
                output+='</select>';
                output+='</div>';
                output+='</div>';

                // output+='<div class="col-md-6">';
                output+='<button type="button" class="btn btn-danger remove_btn">Remove</button>';
                // output+='</div>';
                output+='</div>';

                $('.expense_tab').append(output);
            });

$(document).on('click','.remove_btn',function(){
    $(this).parent().remove();
});
$(document).on('click','.remove_item',function(){
    $(this).parent().remove();
});

$(document).on('click','#add_item',function(){
    var output='';
    output+='<div class="row" style="border-top:1px solid grey;">';
    output+='<div class="col-md-6">';
    output+='<div class="form-group">';
    output+='<label for="account">Select Item</label>';
    output+='<select name="account[]" class="account form-control">';
    output+='<option value="" disabled selected>Select Item';
    output+='</option>';
    output+='@foreach ($accounts as $a)';
    output+='<option value="{{ $a->id }}">';
    output+='{{ $a->item_name }}</option>';
    output+='@endforeach';
    output+='</select>';
    output+='</div>';
    output+='</div>';
    output+='<input type="hidden" placeholder="Account" class="form-control" name="bill_from[]" value="items">';
    output+='<div class="col-md-6">';
    output+='<div class="form-group">';
    output+='<label for="qty">Quantity</label>';
    output+='<input type="number" name="qty[]" placeholder="Quantity" class="form-control" id="item_qty_0">';
    output+='</div>';
    output+='</div>';
    output+='<div class="col-md-6">';
    output+='<div class="form-group">';
    output+='<label>Cost</label>';
    output+='<input type="number" placeholder="Cost" data-cost="0" class="form-control item_cost">';
    output+='</div>';
    output+='</div>';
    output+='<div class="col-md-6">';
    output+='<div class="form-group">';
    output+='<label for="amount">Amount</label>';
    output+='<input type="number" name="amount[]" placeholder="Amount" class="form-control" id="item_amount_0">';
    output+='</div>';
    output+='</div>';
    output+='<div class="col-md-6">';
    output+='<div class="form-group">';
    output+='<label for="memo">Memo</label>';
    output+='<input type="text" placeholder="Memo" class="form-control" name="memo[]">';
    output+='</div>';
    output+='</div>';
    output+='<div class="col-md-6">';
    output+='<div class="form-group">';
    output+='<label for="job_id">Job No#</label>';
    output+='<select name="job_id[]" class="job_id form-control">';
    output+='<option disabled selected>Select Job No#';
    output+='</option>';
    output+='@foreach ($jobs as $job)';
    output+='<option value="{{ $job->id }}">';
    output+='{{ $job->job_no }}</option>';
    output+='@endforeach';
    output+='</select>';
    output+='</div>';
    output+='</div>';
    output+='<button type="button" class="btn btn-danger remove_item">Remove</button>';
    output+='</div>';
    $('.item_tab').append(output);
});

$(document).on('click','#add_consignee_item',function(){
    var output='';
    output+='<div class="row cosignee_item" style="border-top:1px solid grey;">';
output+='<div class="col-md-6">';
output+='<div class="form-group">';
output+='<label for="account">Select Item</label>';
output+='<select name="consignee_account[]" class="account form-control">';
output+='<option value="" disabled selected>Select Item';
output+='</option>';
output+='@foreach ($accounts as $a)';
output+='<option value="{{ $a->id }}">';
output+='{{ $a->item_name }}</option>';
output+='@endforeach';
output+='</select>';
output+='</div>';
output+='</div>';
output+='<input type="hidden" placeholder="Account" class="form-control" name="bill_from[]" value="items">';
output+='<div class="col-md-6">';
output+='<div class="form-group">';
output+='<label for="amount">Amount</label>';
output+='<input type="number" name="consignee_amount[]" placeholder="Amount" class="form-control">';
output+='</div>';
output+='</div>';
output+='<div class="col-md-6">';
output+='<div class="form-group">';
output+='<label for="memo">Memo</label>';
output+='<input type="text" placeholder="Memo" class="form-control" name="consignee_memo[]">';
output+='</div>';
output+='</div>';
output+='<div class="col-md-6"></div>';
output+='<button type="button" class="btn btn-danger remove_btn">Remove</button>';
output+='</div>';

$('.consignee_item_tab').append(output);
})

            $('.item_cost').on('keyup', function() {
                var val = $(this).val();
                var id = $(this).attr('data-cost');
                var qty = $('#item_qty_' + id).val();
                var amount = qty * val;
                $('#item_amount_' + id).val(amount)
            });

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

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

                    }
                });
            });
        })
    </script>
@endsection