@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->job_id}}">{{$item->job_id}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<form class="form" id="recordSecurityFundForm">
<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>Shipment Go</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>Container No(s)</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 class="col-md-6">
                                    <div class="form-group">
                                        <label>Deposit Amount</label>
                                        <h4 class="refund_amount deposit_amount_check">...</h4>
                                    </div>
                                </div>
                            </div>

                            <h4 class="form-section">
                                <i class="icon-book-open"></i>Add Deposit Refunds</h4>
                                <input type="hidden" name="job_no">
                                <input type="hidden" name="record_securiy_id">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="refund_amount">Refund Amount</label>
                                        <input type="text" class="form-control" id="refund_amount" name="refund_amount" placeholder="Refund Amount">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="damage_charges">Container Service or Damage Charges</label>
                                        <input type="text" class="form-control" id="damage_charges" name="damage_charges" placeholder="Container Service or Damage Charges">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="detention_charges">Further Detention Charges </label>
                                        <input type="text" class="form-control" id="detention_charges" name="detention_charges" placeholder="Further Detention Charges ">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Mode of Refund</label>
                                        <select id="mode_of_refund" name="mode_of_refund" class="form-control">
                                            <option selected="" disabled="">Select Option</option>
                                            <option>Cash</option>
                                            <option>Cheque</option>
                                            <option>P.O</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="memo">Memo</label>
                                        <input type="text" class="form-control" name="memo" placeholder="Memo">
                                    </div>
                                </div>
                                <div class="col-md-6 hidden">
                                    <div class="form-group">
                                        <label for="refund_deposit_by">Refund Deposit By</label>
                                        <select id="refund_deposit_by" name="refund_deposit_by" class="form-control" value=1>
                                            <option selected="" disabled="">Select Option</option>
                                            @foreach ($users as $user)
                                                <option value="{{$user->id}}">{{$user->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Refund Date</label>
                                        <input type="date" class="form-control" name="refund_date" placeholder="Drawing Bank">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="refund_by">Refund By</label>
                                        <select id="refund_by" name="refund_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">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Upload Refund Instruement Pic</label>
                                        <input type="file" class="form-control" name="refund_instrument_file" placeholder="Truck Number">
                                    </div>
                                </div>
                                <div class="col-md-6 d-none">
                                    <img src="" id="refund_instrument_file" alt="refund_instrument_file" class="w-25">
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Upload Refund Slip</label>
                                        <input type="file" class="form-control" name="refund_slip" placeholder="Truck Number">
                                    </div>
                                </div>
                                <div class="col-md-6 d-none">
                                    <img src="" id="refund_slip" alt="refund_slip" class="w-25">
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Upload Refund RCVD of Employee</label>
                                        <input type="file" class="form-control" name="refund_rcvd" placeholder="Truck Number">
                                    </div>
                                </div>
                                <div class="col-md-6 d-none">
                                    <img src="" id="refund_rcvd" alt="refund_rcvd" 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> Record  Refund
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</form>
@endsection
@section('afterScript')
    <script>
        $(document).ready(function(){
            var do_count = 1;
            $('#shipping_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);
                        $('#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);
                        $('.container').text(data['containers_details'].length>0  ? data['containers_details'].length :  'No Container found');
                        $('.qty').text(data[0].consignment_detail.qty);
                        $('.refund_amount').text(data['deposit_amount'].deposit_amount);

                       
                        $('[name=job_no]').val(id);

                        if(data['security_funds']!=null)
                        {
                            $('[name=record_securiy_id]').val(data['security_funds'].id);
                            $('[name=refund_amount]').val(data['security_funds'].refund_amount);
                            $('[name=mode_of_refund]').val(data['security_funds'].mode_of_refund);
                            $('[name=memo]').val(data['security_funds'].memo);
                            $('[name=refund_deposit_by]').val(data['security_funds'].refund_deposit_by);
                            $('[name=refund_date]').val(data['security_funds'].refund_date);
                            $('[name=refund_by]').val(data['security_funds'].refund_by);
                            $('#refund_instrument_file').attr('src','files/security_fund/'+data['security_funds'].refund_instrument_file).parent().removeClass('d-none');
                            $('#refund_slip').attr('src','files/security_fund/'+data['security_funds'].refund_slip).parent().removeClass('d-none');
                            $('#refund_rcvd').attr('src','files/security_fund/'+data['security_funds'].refund_rcvd).parent().removeClass('d-none');

                            
                        } else {
                            $('[name=record_securiy_id]').val(null);
                            $('[name=refund_amount]').val(data['deposit_amount'].deposit_amount);
                            $('[name=mode_of_refund]').val(null);
                            $('[name=memo]').val(null);
                            $('[name=refund_deposit_by]').val(null);
                            $('[name=refund_date]').val(null);
                            $('[name=refund_by]').val(null);
                            $('#refund_instrument_file').attr('src','').parent().addClass('d-none');
                            $('#refund_slip').attr('src','').parent().addClass('d-none');
                            $('#refund_rcvd').attr('src','').parent().addClass('d-none');
                        }

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

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

                e.preventDefault();
                var deposit_amount_check=$('.deposit_amount_check').text();
                deposit_amount_check=parseInt(deposit_amount_check);
                var refund_amount=$('#refund_amount').val();
                var damage_charges=$('#damage_charges').val(); 
                var detention_charges=$('#detention_charges').val(); 
                var total=parseInt(refund_amount)+parseInt(damage_charges)+parseInt(detention_charges);
                if(deposit_amount_check!=total){
                    alert("The amounts entered are not equal to deposit amount");
                }
                else{
                    var form_data = new FormData($("#recordSecurityFundForm")[0]);
                    $.ajaxSetup({
                        headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        url : "{{ route('add_record_security_fund.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);
                            $('#recordSecurityFundForm')[0].reset();
    
                        },
                        error: function(err) {
                            swal('Not Valid',err.responseJSON.message,'error');
                            // setTimeout(function() { 
                            //     location.reload();
                            // }, 1000);
                        
                        }
                    });
                }
            
            });

        })
    </script>
@endsection