@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="transferPaymentForm">
    <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="description">...</h4>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Available Qty</label>
                                                <h4 class="qty">...</h4>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>No Of Container</label>
                                                <h4 class="containers">...</h4>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Warehouse</label>
                                                <h4 class="warehouse">...</h4>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Delivery Date</label>
                                                <h4 class="delivery_date">...</h4>
                                            </div>
                                        </div>
                                    </div>
                                <h4 class="form-section">
                                    <i class="icon-book-open"></i>Add Payment to Transporter</h4>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">PMT To</label>
                                            <select name="pmt_to" id="" class="form-control">
                                                <option value="" selected disabled>Select PMT</option>
                                                @foreach ($transporter as $tr)
                                                    <option value="{{$tr->id}}">{{$tr->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Slip Number</label>
                                            <input type="number" placeholder="32" name="slip_number" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">PMT for Rent</label>
                                            <input type="number" placeholder="32" name="pmt_rent" class="form-control">
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">PMT For unloading</label>
                                            <input type="number" placeholder="32" name="pmt_unloading" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">PMT for Cartage</label>
                                            <input type="number" placeholder="32" name="pmt_cartage" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Total Payment Amount</label>
                                            <input type="number" placeholder="32" name="total_pmt" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">PMT Date</label>
                                            <input type="date" placeholder="32" name="pmt_date" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">PMT for Weight</label>
                                            <input type="number" placeholder="32" name="pmt_weight" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">PMT for Goods Adjustment</label>
                                            <input type="number" placeholder="32" name="pmt_goods" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">PMT for Other charges</label>
                                            <input type="number" placeholder="32" name="pmt_other_goods" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">PMT From</label>
                                            <select name="pmt_from" id="" class="form-control">
                                                <option value="" selected disabled>Select PMT</option>
                                                @foreach ($banks as $bank)
                                                    <option value="{{$bank->id}}">{{$bank->account_name}}-{{$bank->banks->bank_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Payment Slip</label>
                                            <input type="file" name="pmt_file" id="" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-6 d-none">
                                        <img src="" id="pmt_file" alt="" class="w-25">
                                    </div>
                                </div>
                                <input type="hidden" name="transfer_pmt_id">
                                <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 Delivery of Goods
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@section('afterScript')
    <script>
        $(document).ready(function(){
            $('#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);
                        $('.description').text(data[0].consignment_detail.description);
                        $('.client_name').text(data[0].client.client_name);
                        $('.container_no').text(data['contatiner']!=null  && data['contatiner'].container_no);
                        $('.qty').text(data[0].consignment_detail.qty);
                        $('.containers').text(data['containers_details'].length);
                        if(data['client_inventory']!=null)
                        {
                           $('.warehouse').text(data['client_inventory'].warehouse.name);
                           $('.delivery_date').text(data['client_inventory'].delivery_date);
                        }
                        $('[name=job_no]').val(id);
                        if(data['transfer_payment']!=null)
                        {
                            $('[name=transfer_pmt_id]').val(data['transfer_payment'].id);
                            $('[name=slip_number]').val(data['transfer_payment'].slip_number);
                            $('[name=pmt_rent]').val(data['transfer_payment'].pmt_rent);
                            $('[name=pmt_unloading]').val(data['transfer_payment'].pmt_unloading);
                            $('[name=pmt_cartage]').val(data['transfer_payment'].pmt_cartage);
                            $('[name=total_pmt]').val(data['transfer_payment'].total_pmt);
                            $('[name=pmt_date]').val(data['transfer_payment'].pmt_date);
                            $('[name=pmt_weight]').val(data['transfer_payment'].pmt_weight);
                            $('[name=pmt_goods]').val(data['transfer_payment'].pmt_goods);
                            $('[name=pmt_other_goods]').val(data['transfer_payment'].pmt_other_goods);
                            $('[name=pmt_from]').val(data['transfer_payment'].pmt_from);
                            $('[name=pmt_to]').val(data['transfer_payment'].pmt_to);
                            $('#pmt_file').attr('src','files/transfer_payment/'+data['transfer_payment'].pmt_file).parent().removeClass('d-none');

                        } else {
                            $('[name=transfer_pmt_id]').val(null);
                            $('[name=slip_number]').val(null);
                            $('[name=pmt_rent]').val(null);
                            $('[name=pmt_unloading]').val(null);
                            $('[name=pmt_cartage]').val(null);
                            $('[name=total_pmt]').val(null);
                            $('[name=pmt_date]').val(null);
                            $('[name=pmt_weight]').val(null);
                            $('[name=pmt_goods]').val(null);
                            $('[name=pmt_other_goods]').val(null);
                            $('[name=pmt_from]').val(null);
                            $('[name=pmt_to]').val(null);
                            $('#pmt_file').attr('src','').parent().addClass('d-none');
                        }
                    },
                    error: function(e) {
                        console.log(e);
                    }
                });
            });

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