@extends('layouts.app')

@section('content')
    <form class="form" id="ClientInventoryTransferForm">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="pt-3 px-3">
                            <div class="row justify-content-center">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="job_id">Select Job Number</label>
                                        <select id="job_id" name="job_id" class="form-control">
                                            <option selected disabled="">Select Job</option>
                                            @foreach ($jobs as $item)
                                                <option value="{{ $item->id }}">{{ $item->job_no }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row d-none" id="delivery_data">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="pt-3 px-3">
                            <form class="form">
                                <div class="form-body">
                                    <h4 class="form-section">
                                        <i class="icon-user"></i> Job Details
                                    </h4>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Consignee Name</label>
                                                <h4 class="consignee_name">...</h4>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Client Name</label>
                                                <h4 class="client_name">...</h4>
                                                <input type="text" hidden id="hidden_client_id">
                                            </div>
                                        </div>

                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Description</label>
                                                <h4 class="description">...</h4>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Shipping Marks</label>
                                                <h4 class="shipping_marks">...</h4>
                                            </div>
                                        </div>
                                    </div>
                                    <h4 class="form-section">
                                        <i class="icon-book-open"></i>Clients Inventory
                                    </h4>
                                    <div class="row warehouse_qty">
                                    </div>
                                    <h4 class="form-section">
                                        <i class="icon-book-open"></i>Add Transfer Clients Inventory
                                    </h4>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Client</label>
                                                <a class="float-right" href="#addClient" data-toggle="modal"
                                                    data-keyboard="false">Add Client</a>
                                                <select name="transfer_client" id="transfer_client" class="form-control">
                                                    <option value="">Please Select</option>
                                                    @foreach ($clients as $item)
                                                        <option value="{{ $item->id }}">{{ $item->client_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Warehouse</label>
                                                <select name="transfer_warehouse" id="transfer_warehouse"
                                                    class="form-control">
                                                    <option value="">Please Select</option>
                                                    @foreach ($warehouse as $item)
                                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Transfer Qty (Bags)</label>
                                                <input type="number" class="form-control" name="transfer_qty">
                                            </div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="job_no">

                                    <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> Add Client Transfer Inventory
                                        </button>
                                    </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div class="modal fade text-left" id="addClient" 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 Client</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="clientForm" method="POST" action="">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="client_name">Client Name</label>
                                    <input type="text" id="client_name" placeholder="Client Name" class="form-control"
                                        name="client_name">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="email">Email</label>
                                    <input type="text" placeholder="Email" id="email" class="form-control" name="email">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="phone">Phone</label>
                                    <input type="text" placeholder="Phone" id="phone" class="form-control" name="phone">
                                </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="addClientForm">
                                <i class="icon-note"></i> Save
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('afterScript')
    <script>
        $(document).ready(function() {
            $('#client_id').select2();
            $('#job_id').select2().on('change', function() {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });
                var id = $(this).val();
                $.ajax({
                    url: 'getJob/' + id,
                    method: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        // console.log(data);
                        console.log();
                        $('.warehouse_qty').empty();
                        var output = '';
                        for (var i = 0; i < data.client_inventory_all.length; i++) {
                            output += '<div class="col-md-6">';
                            output += '<div class="form-group">';
                            output += '<label for="warehouse">Warehouse Name:</label>';
                            output +=
                                '<select name="warehouse" id="warehouse" class="form-control">';
                            output += '<option value="' + data.client_inventory_all[i].warehouse
                                .id + '">' + data.client_inventory_all[i].warehouse.name +
                                '</option></select></div></div><div class="col-md-6"><div class="form-group"><label for="">Qty (Bags)</label>';
                            output += '<h3>' + data.client_inventory_all[i].qty_bags + '</h3>';
                            output += '</div></div>';
                        }
                        $('.warehouse_qty').append(output);

                        $('#delivery_data').removeClass('d-none');
                        $('.consignee_name').text(data[0].consignee.consignee_name);
                        $('.description').text(data[0].consignment_detail.description);
                        $('.shipping_marks').text(data[0].consignment_detail.shipping_marks);
                        $('.client_name').text(data[0].client.client_name);
                        $('#hidden_client_id').val(data[0].client.id);
                        $('.container_no').text(data['contatiner'] != null && data['contatiner']
                            .container_no);
                        $('[name=job_no]').val(id);

                        if (data['client_inventory_transfer'] != null) {
                            $('[name=client_id]').val(data['client_inventory_transfer']
                                .client_id).trigger('change');
                            $('[name=transfer_qty_bags]').val(data['client_inventory_transfer']
                                .transfer_qty_bags);
                            $('[name=transfer_qty_cntr]').val(data['client_inventory_transfer']
                                .transfer_qty_cntr);
                            $('[name=rent_rate_per_bag]').val(data['client_inventory_transfer']
                                .rent_rate_per_bag);
                            $('[name=cartage_charges]').val(data['client_inventory_transfer']
                                .cartage_charges);
                            $('[name=transfer_date]').val(data['client_inventory_transfer']
                                .transfer_date);
                            $('[name=weight_charges]').val(data['client_inventory_transfer']
                                .weight_charges);
                            $('[name=unloading_charges]').val(data['client_inventory_transfer']
                                .unloading_charges);
                            $('[name=other_charges]').val(data['client_inventory_transfer']
                                .other_charges);
                            $('[name=do_charges]').val(data['client_inventory_transfer']
                                .do_charges);
                        } else {
                            $('[name=client_id]').val(null).trigger('change');
                            $('[name=transfer_qty_bags]').val(null);
                            $('[name=transfer_qty_cntr]').val(null);
                            $('[name=rent_rate_per_bag]').val(null);
                            $('[name=cartage_charges]').val(null);
                            $('[name=transfer_date]').val(null);
                            $('[name=weight_charges]').val(null);
                            $('[name=unloading_charges]').val(null);
                            $('[name=other_charges]').val(null);
                            $('[name=do_charges]').val(null);

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

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

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

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

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

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