@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="deliveryOrderForm">
<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>Shipment of Marks</label>
                                        <h4 class="shipping_remarks">...</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Shipping Company</label>
                                        <h4 class="shipping">...</h4>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>GD Status</label>
                                        <h4 class="gd_status">...</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>Number of Containers</label>
                                        <h4 class="container">...</h4>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Qty</label>
                                        <h4 class="qty">...</h4>
                                    </div>
                                </div>
                            </div>

                            <h4 class="form-section">
                                <i class="icon-book-open"></i>Add Delivery Record</h4>
                                <input type="hidden" name="job_no">
                                <input type="hidden" name="do_id">
                                <div {{(auth()->user()->roles[0]->hasPermissionTo('shipping-delivery-order-approval'))==false ? 'hidden' : ''}}>
                                    <button type="button" class="btn btn-success d-none approveDeliveryOrder">Approve Transaction</button>
                                </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="do_amount">D.O Amount</label>
                                        <input type="text" class="form-control" name="do_amount">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="mode_payment">Mode of Payment</label>
                                        <select id="mode_payment" name="mode_payment" class="form-control">
                                            <option selected="" value="">Select Option</option>
                                            @foreach ($mode_payment as $item)
                                                <option value="{{$item->mode_name}}">{{$item->mode_name}}</option>    
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                            </div>
                            <div class="row">
                                <div class="col-md-6 employee">
                                    <div class="form-group">
                                        <label for="do_receiving_date">Employee Name</label>
                                        <select name="employee_name" id="employee_name" class="form-control">
                                            <option value="">Please Select</option>
                                            @foreach ($employee as $item)
                                             <option value="{{$item->id}}">{{$item->emp_name}}</option>   
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="do_receiving_date">D.O Receiving Date</label>
                                        <input type="date" class="form-control" placeholder="Vendor" name="do_receiving_date">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="do_received_by">D.O Received By</label>
                                        <select id="do_received_by" name="do_received_by" class="form-control">
                                            <option selected="" disabled="">Select Option</option>
                                            @foreach ($users as $user)
                                                <option value="{{$user->id}}">{{$user->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row" id="cash_hide">
                                <div class="col-md-6">
                                    <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">
                                    <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">
                                    <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>
                            <div class="row attachements">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Upload D.O</label>
                                        <input type="file" class="form-control" name="do_file" placeholder="Truck Number">
                                    </div>
                                </div>
                                <div class="col-md-6 d-none">
                                    <img src="" id="do_file" alt="do_file" class="w-25">
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Upload P.O</label>
                                        <input type="file" class="form-control" name="po_file" placeholder="Truck Number">
                                    </div>
                                </div>
                                <div class="col-md-6 d-none">
                                    <img src="" id="po_file" alt="po_file" class="w-25">
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Upload D.O Payment Slip</label>
                                        <input type="file" class="form-control" name="do_payment_slip" placeholder="Truck Number">
                                    </div>
                                </div>
                                <div class="col-md-6 d-none">
                                    <img src="" id="do_payment_slip" alt="do_payment_slip" class="w-25">
                                </div>
                            </div>
                          
                            <div class="row">
                                <div class="col-md-12">
                                    <button type="button" class="btn btn-success deposit_show">
                                        <i class="icon-plus"></i> Deposit 
                                    </button>
                                </div>
                            </div>
                            <input type="hidden" name="is_deposit" value="0">
                            <div class="row d-none  deposit_section">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Deposit Amount</label>
                                        <input type="text" class="form-control" name="deposit_amount[]" id="deposit_amount" placeholder="Enter Amount">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">PO Number</label>
                                        <input type="text" class="form-control" name="po_number_detail[]" id="po_number_detail" placeholder="Enter PO Number">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="deposit_bank">Deposit Bank</label>
                                        <input type="text" class="form-control" name="deposit_bank[]" id="deposit_bank" placeholder="Deposit Bank">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Pay Order Date</label>
                                        <input type="date" class="form-control" name="deposit_date[]" id="deposit_date" placeholder="Truck Number">
                                    </div>
                                </div>
                            </div>
                            <div id="dos"></div>
                            {{-- <div class="row d-none  deposit_section">
                                <div class="col-md-12">
                                    <button type="button" class="btn btn-success addMoreDO">
                                        <i class="icon-plus"></i> Add More Deposit
                                    </button>
                                </div>
                            </div> --}}
                            {{-- <h4 class="form-section">
                                <i class="icon-book-open"></i>Record Detention Charges</h4> --}}
                            {{-- <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">NOC Validity Date</label>
                                        <input type="date" class="form-control" name="" placeholder="Warefage Amount">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">NOC Renew By</label>
                                        <select id="" name="" class="form-control">
                                            <option selected="" disabled="">Select Option</option>
                                            @foreach ($users as $userss)
                                                <option value="{{$userss->id}}">{{$userss->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Empty Return Yard</label>
                                        <input type="text" class="form-control" name="" 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="" placeholder="Other Amount">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Upload NOC</label>
                                        <input type="file" class="form-control" name="">
                                    </div>
                                </div>
                                <div class="col-md-6 d-none">
                                    <img src="" id="" alt="" class="w-25">
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Upload Deposit</label>
                                        <input type="file" class="form-control" name="">
                                    </div>
                                </div>
                                <div class="col-md-6 d-none">
                                    <img src="" id="" alt="" class="w-25">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Upload P.O</label>
                                        <input type="file" class="form-control" name="">
                                    </div>
                                </div>
                                <div class="col-md-6 d-none">
                                    <img src="" id="" alt="" class="w-25">
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Upload Detention Charges Slip</label>
                                        <input type="file" class="form-control" name="">
                                    </div>
                                </div>
                                <div class="col-md-6 d-none">
                                    <img src="" id="" 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 Order
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</form>

@endsection
@section('afterScript')
    <script>
        $(document).ready(function(){
            var do_count = 1;
            $('#shipping_id').select2();
            $('#mode_payment').on('change',function(){
                if($(this).val().toLowerCase()=='cash')
                {
                    $('#cash_hide').hide();
                    $('.employee').hide();
                } else  {
                    $('.employee').show();
                }
            });

            $(document).on('click','.deposit_show',function(){
                $('.deposit_section').removeClass('d-none');
                $('[name=is_deposit]').val(1);
            })

            $('#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);
                        $('.shipping_remarks').text(data[0].consignment_detail.shipping_marks);
                        $('.shipping').text(data['shipping']!=null && data['shipping'].shipping_name);
                        $('.descripton').text(data[0].consignment_detail.description);
                        $('.gd_status').text(data[0].gd_status);
                        $('.container').text(data['containers_details'].length);
                        $('.qty').text(data[0].consignment_detail.qty);
                        $('[name=job_no]').val(id);
                        
                        if(data['delivery_order']!=null)
                        {
                            if(data['delivery_order'].mode_payment=="Cash" || data['delivery_order'].mode_payment=="cash" || data['delivery_order'].mode_payment=="CASH")
                            {
                                $('.approveDeliveryOrder').removeClass('d-none');
                            }
                            $('[name=do_id]').val(data['delivery_order'].id);
                            $('[name=do_amount]').val(data['delivery_order'].do_amount);
                            // $('[name=mode_payment]').val(data['delivery_order'].mode_payment).trigger('change');
                            $('[name=do_receiving_date]').val(data['delivery_order'].do_receiving_date);
                            $('[name=do_received_by]').val(data['delivery_order'].do_received_by);
                            $('[name=po_number]').val(data['delivery_order'].po_number);
                            $('[name=drawing_bank]').val(data['delivery_order'].drawing_bank);
                            $('[name=drawing_bank_date]').val(data['delivery_order'].drawing_bank_date);
                            
                            if(data['delivery_order'].do_file.includes('.Pdf') || data['delivery_order'].do_file.includes('.pdf')) {
                                $('#do_file').before('<a href="files/delivery_orders/'+data['delivery_order'].do_file+'" >'+data['delivery_order'].do_file+'</a>').addClass('d-none').parent().removeClass('d-none');
                            } else {
                                $('#do_file').attr('src','files/delivery_orders/'+data['delivery_order'].do_file).parent().removeClass('d-none');
                            }

                            if(data['delivery_order'].po_file.includes('.Pdf') || data['delivery_order'].po_file.includes('.pdf')) {
                                $('#po_file').before('<a href="files/delivery_orders/'+data['delivery_order'].po_file+'" >'+data['delivery_order'].po_file+'</a>').addClass('d-none').parent().removeClass('d-none');
                            } else {
                                $('#po_file').attr('src','files/delivery_orders/'+data['delivery_order'].po_file).parent().removeClass('d-none');
                            }

                            if(data['delivery_order'].do_payment_slip.includes('.Pdf') || data['delivery_order'].do_payment_slip.includes('.pdf')) {
                                $('#do_payment_slip').before('<a href="files/delivery_orders/'+data['delivery_order'].do_payment_slip+'" >'+data['delivery_order'].do_payment_slip+'</a>').addClass('d-none').parent().removeClass('d-none');
                            } else {
                                $('#do_payment_slip').attr('src','files/delivery_orders/'+data['delivery_order'].do_payment_slip).parent().removeClass('d-none');
                            }

                            
                        } else {
                            $('.approveDeliveryOrder').addClass('d-none');
                            if(data['delivery_order_cheque'].length>0)
                            {
                                $('[name=do_amount]').val(data['delivery_order_cheque_amount']);
                                // $('[name=mode_payment]').val('Cheque').trigger('change').prop('readonly',true).css('pointer-events','none');
                                
                            } else {

                                $('[name=do_amount]').val(data[0].shipping_detail.do_charges);
                                // $('[name=mode_payment]').val('Cash').trigger('change').prop('readonly',true).css('pointer-events','none');
                            }
                            $('[name=do_id]').val(null);
                            $('[name=do_receiving_date]').val(null);
                            $('[name=do_received_by]').val(null);
                            $('[name=po_number]').val(null);
                            $('[name=drawing_bank]').val(null);
                            $('[name=drawing_bank_date]').val(null);
                            $('#do_file').attr('src','').parent().addClass('d-none');
                            $('#po_file').attr('src','').parent().addClass('d-none');
                            $('#do_payment_slip').attr('src','').parent().addClass('d-none');
                        }

                        if(data['delivery_order_detail'].length>0) 
                        {
                            $('#deposit_amount').val(data['delivery_order_detail'][0].deposit_amount);
                            $('#po_number_detail').val(data['delivery_order_detail'][0].po_number);
                            $('#deposit_bank').val(data['delivery_order_detail'][0].deposit_bank);
                            $('#deposit_date').val(data['delivery_order_detail'][0].deposit_date);
                            if(data['delivery_order_detail'].length>1)
                            {
                                for (let index = 1; index <data['delivery_order_detail'].length; index++) {
                                    var rand = Math.floor(Math.random() * 100001);
                                    
                                    var html= '<div class="row" id="do_record_'+rand+'">'
                                    html += '<div class="col-md-6">'
                                    html += '<div class="form-group">'
                                    html += '<label for="">Deposit Amount</label>'
                                    html += '<input type="text" class="form-control" value="'+data['delivery_order_detail'][index].deposit_amount+'" name="deposit_amount[]" placeholder="Enter Amount">'
                                    html += '</div>'
                                    html += '</div>'
                                    html += '<div class="col-md-6">'
                                    html += '<div class="form-group">'
                                    html += '<label for="">PO Number</label>'
                                    html += '<input type="text" class="form-control" name="po_number_detail[]" value="'+data['delivery_order_detail'][index].po_number+'" placeholder="Enter PO Number">'
                                    html += '</div>'
                                    html += '</div>'
                                    html += '<div class="col-md-6">'
                                    html += '<div class="form-group">'
                                    html += '<label for="deposit_bank">Deposit Bank</label>'
                                    html += '<input type="text" class="form-control" name="deposit_bank[]" placeholder="Deposit Bank">'
                                    html += '</div>'
                                    html += '</div>'
                                    html += '<div class="col-md-6">'
                                    html += '<div class="form-group">'
                                    html += '<label for="">Deposit Date</label>'
                                    html += '<input type="date" class="form-control" name="deposit_date[]" value="'+data['delivery_order_detail'][index].deposit_date+'" placeholder="Truck Number">'
                                    html += '</div>'
                                    html += '</div>'
                                    html +='<div class="col-md-6">';
                                    html +='</div>';
                                    html +='<div class="col-md-6 text-left text-md-right">';
                                    html +='<button class="btn btn-danger removeDO" data-id="'+rand+'">Remove</button>'
                                    html +='</div>';
                                    html+= '</div>';
                                    console.log(data['delivery_order_detail'][index].deposit_bank);
                                    $('#'+rand).val(data['delivery_order_detail'][index].deposit_bank);
                                    $('#dos').append(html);
                                    
                                }
                            }
                        } else {
                            if(data['security_deposit_cheque'].length>0)
                            {
                                $('#deposit_amount').val(data['security_deposit_cheque_amount'] == 0 ? null : data['security_deposit_cheque_amount']);
                                
                            } else {

                                $('#deposit_amount').val(0);
                            }
                        }
                        if(data['count']!=0){
                            $('#mode_payment').val('1');
                            $('[name=mode_payment]').prop('readonly',true).css('pointer-events','none');
                            $('.employee').hide();
                            // $('.employee').empty();
                        }
                        else{
                            $('#mode_payment').removeAttr('disabled');
                            $('.employee').show();
                        }
                    },
                    error: function(e) {
                        console.log(e);
                    }
                });
            });

            

            $(document).on('click',"#saveBtn", function(e){
                e.preventDefault();
            
                var form_data = new FormData($("#deliveryOrderForm")[0]);
                $.ajaxSetup({
                    headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url : "{{ route('add_delivery_order.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);
                        $('#deliveryOrderForm')[0].reset();
                    },
                    error: function(err) {
                        swal('Not Valid',err.responseJSON.message,'error');
                        // setTimeout(function() { 
                        //     location.reload();
                        // }, 1000);
                    
                    }
                });
            });


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

                $.ajaxSetup({
                    headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url : "/delivery_order_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','.addMoreDO',function(e){
                e.preventDefault();
                var html= '<div class="row" id="do_record_'+do_count+'">'
                    html += '<div class="col-md-6">'
                    html += '<div class="form-group">'
                    html += '<label for="">Deposit Amount</label>'
                    html += '<input type="text" class="form-control" name="deposit_amount[]" placeholder="Enter Amount">'
                    html += '</div>'
                    html += '</div>'
                    html += '<div class="col-md-6">'
                    html += '<div class="form-group">'
                    html += '<label for="">PO Number</label>'
                    html += '<input type="text" class="form-control" name="po_number_detail[]" placeholder="Enter PO Number">'
                    html += '</div>'
                    html += '</div>'
                    html += '<div class="col-md-6">'
                    html += '<div class="form-group">'
                    html += '<label for="deposit_bank">Deposit Bank</label>'
                    html += '<select name="deposit_bank[]" class="form-control">'
                    html += '<option selected disabled>Select Bank</option>'
                    html += '@foreach ($banks as $bank)'
                    html += '<option>{{$bank->bank_name}}</option>'
                    html += '@endforeach'
                    html += '</select>'
                    html += '</div>'
                    html += '</div>'
                    html += '<div class="col-md-6">'
                    html += '<div class="form-group">'
                    html += '<label for="">Deposit Date</label>'
                    html += '<input type="date" class="form-control" name="deposit_date[]" placeholder="Truck Number">'
                    html += '</div>'
                    html += '</div>'
                    html +='<div class="col-md-6">';
                    html +='</div>';
                    html +='<div class="col-md-6 text-left text-md-right">';
                    html +='<button class="btn btn-danger removeDO" data-id="'+do_count+'">Remove</button>'
                    html +='</div>';
                    html+= '</div>';

                    $('#dos').append(html);
                    do_count=do_count+1;
            });

            $(document).on('click','.removeDO',function(e){
                e.preventDefault();

                var data_id =$(this).attr('data-id');
                $('#do_record_'+data_id).remove();
            });
        })
    </script>
@endsection