@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">Job Number</label>
                                <h2>{{$ppro->job_id}}</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<form class="form" id="PPROForm">
<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">...</h4>
                                    </div>
                                </div>
                                
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>BL#</label>
                                        <h4 class="bl_no">...</h4>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Shipping Marks</label>
                                        <h4 class="shipping_marks">...</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>No Of Containers</label>
                                        <h4 class="container">...</h4>
                                    </div>
                                </div>
                            </div>
                            <h4 class="form-section">
                                <i class="icon-book-open"></i>Submit PPRO  to department</h4>
                            <div class="row">
                                
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Submission Date</label>
                                        <input type="date" disabled class="form-control" name="submission_date" placeholder="Submission Date">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Submitted through</label>
                                        <select disabled id="submitted_through" class="form-control" name="submitted_through">
                                            <option disabled selected  value="">Select Submitted through</option>
                                            <option  value="Self">Self</option>
                                            <option value="Vendor">Vendor</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6" id="submitted_by_employee">
                                    <div class="form-group">
                                        <label for="">Submitted By</label>
                                        <select disabled class="form-control employees" name="submitted_by">
                                            <option disabled selected value="">Select Submitted By</option>
                                            @foreach ($users as $items)
                                                <option value="{{$items->id}}">{{$items->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6 d-none" id="submitted_by_vendor">
                                    <div class="form-group">
                                        <label for="">Submitted By</label>
                                        <select disabled class="form-control vendors" name="submitted_by">
                                            <option disabled selected value="">Select Submitted By</option>
                                            @foreach ($vendors as $items)
                                                <option value="{{$items->id}}">{{$items->v_fname}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">PPRO Challan Paid on</label>
                                        <input disabled type="date" class="form-control" name="challan_paid_on" id="challan_paid_on">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">PPRO Challan Amount</label>
                                        <input disabled type="text" class="form-control" name="ppro_challan_amount" id="ppro_challan_amount">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">PPRO Processing Amount</label>
                                        <input disabled type="text" class="form-control" name="ppro_processing" id="ppro_processing">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">PPRO Challan Paid By</label>
                                        <select disabled id="challan_paid_by" class="form-control" name="challan_paid_by">
                                            <option disabled>Select PTA Submitted By</option>
                                            @foreach ($users as $item)
                                                <option value="{{$item->id}}">{{$item->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                
                            </div>
                            <input type="hidden" name="job_no">
                            <input type="hidden" name="ppro_id">
                        <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 PPRO
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</form>
@endsection

@section('afterScript')
    <script>
        $(document).ready(function(){
            $('.employees,.vendors').select2();

            $(document).on('change','#submitted_through',function(){
                var id = $(this).val();
                if(id=="Self")
                {
                    $('#submitted_by_employee').removeClass('d-none');
                    $('#submitted_by_vendor').addClass('d-none');
                } else {
                    $('#submitted_by_employee').addClass('d-none');
                    $('#submitted_by_vendor').removeClass('d-none');
                }
            })
            function getJobDetail(){
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });
                var id = '{{$ppro->job_id}}';
                $.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').text(data[0].client.client_name);
                        $('.bl_no').text(data[0].shipping_detail.bl_number);
                        $('.shipping_marks').text(data[0].consignment_detail.shipping_marks);
                        $('.description').text(data[0].consignment_detail.description);
                        $('.container').text(data['containers_details'].length);
                        $('[name=job_no]').val(id);
                        
                        if(data['ppro']!=null)
                        {
                            $('[name=ppro_id]').val(data['ppro'].id);
                            $('[name=submission_date]').val(data['ppro'].submission_date);
                            $('[name=submitted_through]').val(data['ppro'].submitted_through).trigger('change');
                            $('[name=submitted_by]').val(data['ppro'].submitted_by).trigger('change');
                            $('[name=challan_paid_on]').val(data['ppro'].challan_paid_on);
                            $('[name=challan_paid_by]').val(data['ppro'].challan_paid_by);
                            $('[name=ppro_challan_amount]').val(data['ppro'].ppro_challan_amount);
                            $('[name=ppro_processing]').val(data['ppro'].ppro_processing);
                            $('#ppro_challan').attr('src','/files/ppro/'+data['ppro'].ppro_challan).parent().removeClass('d-none');
                            $('#ppro_application').attr('src','/files/ppro/'+data['ppro'].ppro_application).parent().removeClass('d-none');
                        } else {
                            $('[name=ppro_id]').val();
                            $('[name=submission_date]').val();
                            $('[name=submitted_through]').val(null);
                            $('[name=submitted_by]').val(null);
                            $('[name=challan_paid_on]').val();
                            $('[name=challan_paid_by]').val();
                            $('#ppro_challan').attr('src','').parent().addClass('d-none');
                            $('#ppro_application').attr('src','').parent().addClass('d-none');
                        }
                    },
                    error: function(e) {
                        console.log(e);
                    }
                });
            }
            getJobDetail();

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