@extends('layouts.app')

@section('content')
<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>
<form class="form" id="deliveryRecordForm">
    <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>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Description</label>
                                            <h4 class="descripton">...</h4>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Port of Delivery</label>
                                            <h4 class="port">...</h4>
                                        </div>
                                    </div>
                                </div>

                                <h4 class="form-section">
                                    <i class="icon-book-open"></i>Add Delivery Record
                                </h4>
                                <input type="hidden" name="job_no">
                                <div {{ auth()->user()->roles[0]->hasPermissionTo('port-delivery-approval') == false? 'hidden': '' }}>
                                    <button type="button" class="btn btn-success d-none approveDeliveryRecord">Approve
                                        Transaction</button>
                                </div>
                                <div class="row cloneDiv">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="container_no">Entry truck Details For Container</label>
                                            <input type="text" class="form-control container" name="container_no[]" readonly>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="projectinput6">Destination</label>
                                            <input type="text" class="form-control destination" name="destination[]">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="projectinput5">Transporter</label>
                                            <select name="vendor[]" class="form-control vendor">
                                                <option value="" selected disabled>Select Vendor</option>
                                                @foreach ($vendors as $v)
                                                <option value="{{ $v->id }}">{{ $v->v_fname }} -
                                                    {{ $v->v_lname }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Empty return Yard</label>
                                            <select name="empty_return[]" id="empty_return" class="form-control">
                                                <option value="">Please Select</option>
                                                @foreach ($empty_yard as $item)
                                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Gate Out Time</label>
                                            <input type="time" class="form-control gate_out_time" name="gate_out_time[]" placeholder="BL Number#">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Gate Out Date</label>
                                            <input type="date" class="form-control gate_out_date" name="gate_out_date[]" placeholder="Vessel Name">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Truck Number</label>
                                            <input type="text" class="form-control truck_no" name="truck_no[]" placeholder="Truck Number">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Delivery By (Employee Name)</label>
                                            <select class="form-control delivery_by" name="delivery_by[]">
                                                <option disabled="">Select Employee</option>
                                                @foreach ($users as $user)
                                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div id="extraContainers">

                                </div>
                                {{-- <div class="row">
                                <div class="col-md-12">
                                    <button type="button" class="btn btn-success">
                                        <i class="icon-plus"></i> Add More Delivery
                                    </button>
                                </div>
                            </div> --}}
                                <h4 class="form-section">
                                    <i class="icon-book-open"></i>Record Terminal Charges
                                </h4>
                                <input type="hidden" name="termimal_id">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Warefage Amount</label>
                                            <input type="text" class="form-control" name="warefage_amount" placeholder="Warefage Amount">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Bill No#</label>
                                            <input type="text" class="form-control" name="bill_no" placeholder="Bill No#">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Bill Date</label>
                                            <input type="date" class="form-control" name="bill_date" placeholder="Bill Date">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Other Amount</label>
                                            <input type="text" class="form-control" name="other_amount" placeholder="Other Amount">
                                        </div>
                                    </div>
                                </div>
                                <!-- <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Bill No#</label>
                                            <input type="text" class="form-control" name="other_bill_no" placeholder="Bill No#">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Bill Date</label>
                                            <input type="date" class="form-control" name="other_bill_date" placeholder="Bill Date">
                                        </div>
                                    </div>
                                </div> -->
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Paid Through</label>
                                            <select id="paid_through" class="form-control" name="paid_through">
                                                <option value="">Please Select</option>
                                                @foreach ($mode_payment as $item)
                                                <option value="{{ $item->id }}">{{ $item->mode_name }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6 employee">
                                        <div class="form-group">
                                            <label for="">Paid By</label>
                                            <select class="form-control" name="paid_by">
                                                <option disabled="">Select Employee</option>
                                                @foreach ($users as $u)
                                                <option value="{{ $u->id }}">{{ $u->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Remarks</label>
                                            <input type="text" class="form-control" name="remarks" placeholder="Remarks">
                                        </div>
                                    </div>
                                    <div class="col-md-6 cash_hide">
                                        <div class="form-group">
                                            <label for="">P.O Number</label>
                                            <input type="text" class="form-control" name="po_number" placeholder="PO Number#">
                                        </div>
                                    </div>
                                    <div class="col-md-6 cash_hide">
                                        <div class="form-group">
                                            <label for="">Bank Details</label>
                                            <input type="text" class="form-control" name="drawing_bank" placeholder="Bank Details">
                                        </div>
                                    </div>
                                    <div class="col-md-6 cash_hide">
                                        <div class="form-group">
                                            <label for="">PO & Drawing Bank Date</label>
                                            <input type="date" class="form-control" name="drawing_bank_date" placeholder="Truck Number">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Upload Terminal Bill</label>
                                            <input type="file" class="form-control" name="terminal_bill_file">
                                        </div>
                                    </div>
                                    <div class="col-md-6 d-none">
                                        <img src="" id="terminal_bill_file" alt="" class="w-25">
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Upload Payment Proof</label>
                                            <input type="file" class="form-control" name="payment_proof_file">
                                        </div>
                                    </div>
                                    <div class="col-md-6 d-none">
                                        <img src="" id="payment_proof_file" alt="" class="w-25">
                                    </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> Add Delivery Record
                                    </button>
                                </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection
@section('afterScript')
<script>
    $(document).ready(function() {
        $('[name=paid_through]').on('change', function() {

            var e = document.getElementById("paid_through");
            var value = e.value;
            var text = e.options[e.selectedIndex].text;

            // alert(text);

            if (text == 'Cash') {
                $('.cash_hide').addClass('d-none')
            } else {
                $('.cash_hide').removeClass('d-none')
            }
        });

        $('#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);
                    $('#delivery_data').removeClass('d-none');
                    $('.consignee_name').text(data[0].consignee.consignee_name);
                    $('.client_name').text(data[0].client.client_name);
                    $('.descripton').text(data[0].consignment_detail.description);
                    $('.port').text(data['port'] != null && data['port'].port_name);
                    $('#shipping_id').val(data['shipping'] != null && data['shipping'].id)
                        .trigger('change');
                    $('[name=job_no]').val(id);

                    if (data['delivery_record'].length > 0) {
                        $('.cloneDiv .container').val(data['containers_details'][0]
                            .container_no);
                        $('.cloneDiv .destination').val(data['delivery_record'][0]
                            .destination);
                        $('.cloneDiv .vendor').val(data['delivery_record'][0].vendor);
                        $('.cloneDiv .empty_return').val(data['delivery_record'][0]
                            .empty_return);
                        $('.cloneDiv .gate_out_time').val(data['delivery_record'][0]
                            .gate_out_time);
                        $('.cloneDiv .gate_out_date').val(data['delivery_record'][0]
                            .gate_out_date);
                        $('.cloneDiv .truck_no').val(data['delivery_record'][0].truck_no);
                        $('.cloneDiv .delivery_by').val(data['delivery_record'][0]
                            .delivery_by);
                        for (let index = 1; index < data['delivery_record']
                            .length; index++) {
                            $('.cloneDiv').clone().appendTo('#extraContainers').attr(
                                'data-id', 'id_' + index)
                            $('[data-id=id_' + index + '] .container').val(data[
                                'containers_details'][index].container_no);
                            $('[data-id=id_' + index + '] .destination').val(data[
                                'delivery_record'][index].destination);
                            $('[data-id=id_' + index + '] .vendor').val(data[
                                'delivery_record'][index].vendor);
                            $('[data-id=id_' + index + '] .empty_return').val(data[
                                'delivery_record'][index].empty_return);
                            $('[data-id=id_' + index + '] .gate_out_time').val(data[
                                'delivery_record'][index].gate_out_time);
                            $('[data-id=id_' + index + '] .gate_out_date').val(data[
                                'delivery_record'][index].gate_out_date);
                            $('[data-id=id_' + index + '] .truck_no').val(data[
                                'delivery_record'][index].truck_no);
                            $('[data-id=id_' + index + '] .delivery_by').val(data[
                                'delivery_record'][index].delivery_by);
                        }
                        $('.approveDeliveryRecord').removeClass('d-none');
                        // $('[name=destination]').val(data['delivery_record'].destination);
                        // $('[name=vendor]').val(data['delivery_record'].vendor);
                        // $('[name=empty_return]').val(data['delivery_record'].empty_return);
                        // $('[name=gate_out_time]').val(data['delivery_record'].gate_out_time);
                        // $('[name=gate_out_date]').val(data['delivery_record'].gate_out_date);
                        // $('[name=truck_no]').val(data['delivery_record'].truck_no);
                        // $('[name=delivery_by]').val(data['delivery_record'].delivery_by);
                    } else {
                        $('#extraContainers').html('');
                        $('.approveDeliveryRecord').addClass('d-none');
                        if (data['containers_details'].length > 0) {
                            $('.cloneDiv .container').val(data['containers_details'][0]
                                .container_no);
                            for (let index = 1; index < data['containers_details']
                                .length; index++) {
                                $('.cloneDiv').clone().appendTo('#extraContainers').attr(
                                    'data-id', 'id_' + index)
                                $('[data-id=id_' + index + '] .container').val(data[
                                    'containers_details'][index].container_no);
                            }
                        } else {
                            $('.cloneDiv .container').val(null);
                        }
                        $('.cloneDiv .destination').val(null);
                        $('.cloneDiv .vendor').val(null);
                        $('.cloneDiv .empty_return').val(null);
                        $('.cloneDiv .gate_out_time').val(null);
                        $('.cloneDiv .gate_out_date').val(null);
                        $('.cloneDiv .truck_no').val(null);
                        $('.cloneDiv .delivery_by').val(null);
                    }
                    if (data['terminal_charge'] != null) {
                        $('[name=termimal_id]').val(data['terminal_charge'].id);
                        $('[name=warefage_amount]').val(data['terminal_charge']
                            .warefage_amount);
                        $('[name=bill_no]').val(data['terminal_charge'].bill_no);
                        $('[name=bill_date]').val(data['terminal_charge'].bill_date);
                        $('[name=other_amount]').val(data['terminal_charge'].other_amount);
                        $('[name=other_bill_no]').val(data['terminal_charge']
                            .other_bill_no);
                        $('[name=other_bill_date]').val(data['terminal_charge']
                            .other_bill_date);
                        // $('[name=paid_through]').val(data['terminal_charge'].paid_through).trigger('change');
                        $('[name=paid_by]').val(data['terminal_charge'].paid_by);
                        $('[name=remarks]').val(data['terminal_charge'].remarks);
                        $('[name=po_number]').val(data['terminal_charge'].po_number);
                        $('[name=drawing_bank]').val(data['terminal_charge'].drawing_bank);
                        $('[name=drawing_bank_date]').val(data['terminal_charge']
                            .drawing_bank_date);
                        if (data['terminal_charge'].terminal_bill_file.includes('.Pdf') ||
                            data['terminal_charge'].terminal_bill_file.includes('.pdf')) {
                            $('#terminal_bill_file').before(
                                    '<a href="files/record_terminal_charges/' + data[
                                        'terminal_charge'].terminal_bill_file + '" >' +
                                    data['terminal_charge'].terminal_bill_file + '</a>')
                                .addClass('d-none').parent().removeClass('d-none');
                        } else {
                            $('#terminal_bill_file').attr('src',
                                    'files/record_terminal_charges/' + data[
                                        'terminal_charge'].terminal_bill_file).parent()
                                .removeClass('d-none');
                        }

                        if (data['terminal_charge'].payment_proof_file.includes('.Pdf') ||
                            data['terminal_charge'].payment_proof_file.includes('.pdf')) {
                            $('#payment_proof_file').before(
                                    '<a href="files/record_terminal_charges/' + data[
                                        'terminal_charge'].payment_proof_file + '" >' +
                                    data['terminal_charge'].payment_proof_file + '</a>')
                                .addClass('d-none').parent().removeClass('d-none');
                        } else {
                            $('#payment_proof_file').attr('src',
                                    'files/record_terminal_charges/' + data[
                                        'terminal_charge'].payment_proof_file).parent()
                                .removeClass('d-none');
                        }
                    } else {
                        if (data['wharfage_cheque'].length > 0) {
                            $('[name=warefage_amount]').val(data['wharfage_cheque_amount']);
                            // $('[name=paid_through]').val('Cheque').trigger('change').prop('readonly',true).css('pointer-events','none');

                        } else {

                            $('[name=warefage_amount]').val(null);
                            // $('[name=paid_through]').val('Cash').trigger('change').prop('readonly',true).css('pointer-events','none');

                        }
                        $('[name=termimal_id]').val(null);
                        $('[name=bill_no]').val(null);
                        $('[name=bill_date]').val(null);
                        $('[name=other_amount]').val(null);
                        $('[name=other_bill_no]').val(null);
                        $('[name=other_bill_date]').val(null);
                        $('[name=paid_by]').val(null);
                        $('[name=remarks]').val(null);
                        $('[name=po_number]').val(null);
                        $('[name=drawing_bank]').val(null);
                        $('[name=drawing_bank_date]').val(null);
                        $('#terminal_bill_file').attr('src', '').parent().addClass(
                            'd-none');
                        $('#payment_proof_file').attr('src', '').parent().addClass(
                            'd-none');
                        if (data['count'] != 0) {
                            $('[name=paid_through]').prop('readonly', true).css('pointer-events', 'none');
                            $('#paid_through').val('1');
                            $('.employee').hide();
                            // $('.employee').empty();
                        } else {
                            $('#paid_through').removeAttr('disabled');
                            $('.employee').show();
                        }
                    }
                },
                error: function(e) {
                    console.log(e);
                }
            });
        });

        $(document).on('click', ".approveDeliveryRecord", function(e) {
            e.preventDefault();
            var id = $('[name=job_no]').val();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: "/delivery_record_approval/" + id,
                type: "GET",
                async: false,
                cache: false,
                contentType: false,
                enctype: 'multipart/form-data',
                processData: false,
                success: function(res) {
                    swal("Approved!", res.message, "success");

                },
                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($("#deliveryRecordForm")[0]);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{ route('delivery_record.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");
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                    $('#deliveryRecordForm')[0].reset();
                },
                error: function(err) {
                    swal('Not Valid', err.responseJSON.message, 'error');
                    // setTimeout(function() { 
                    //     location.reload();
                    // }, 1000);

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