@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">
                    <form class="form" method="POST" action="/parachaJob/{{$response[0]->id}}" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="form-body">
                            <h4 class="form-section">
                                <i class="icon-user"></i> ADD NEW JOB</h4>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="job_no">Job No</label>
                                        <input type="text" id="job_no" class="form-control" value="{{$response[0]->job_no}}" name="job_no" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="opening_date">Opening Date</label>
                                        <input type="date" id="opening_date" value="{{$response[0]->opening_date}}" class="form-control" name="opening_date">
                                    </div>
                                </div>
                            </div>

                            <h4 class="form-section">
                                <i class="icon-book-open"></i>CONSIGNEE DETAILS</h4>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="consignee_id">Consignee Name</label>
                                        <a class="float-right" href="#addConsignee" data-toggle="modal" data-keyboard="false">Add Consignee</a>
                                        <select id="consignee_id" name="consignee_id" class="form-control consignee_lists">
                                            <option disabled="">Select Consignee</option>
                                            @foreach ($consignee as $consignees)
                                                <option {{$response[0]->consignee_id ==$consignees->id 
                                                        ? 'selected'
                                                        : '' }} 
                                                value="{{$consignees->id}}">{{$consignees->consignee_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="client_id">Client Name</label>
                                        <a class="float-right" href="#addClient" data-toggle="modal" data-keyboard="false">Add Client</a>
                                        <select id="client_id" name="client_id" class="form-control client_lists">
                                            <option disabled="">Select Client</option>
                                            @foreach ($client as $clients)
                                                <option {{$response[0]->client_id ==$clients->id 
                                                    ? 'selected'
                                                    : '' }} 
                                                value="{{$clients->id}}">{{$clients->client_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <h4 class="form-section">
                                <i class="icon-book-open"></i>SHIPPING DETAILS</h4>
                            
                                <input type="hidden" name="shipping_detail_id" value={{$response[0]->shipping_detail->id}}>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="shipping_id">Shipping Line</label>
                                        <a class="float-right" href="#addShipping" data-toggle="modal" data-keyboard="false">Add Shipping</a>
                                        <select id="shipping_id" name="shipping_id" class="form-control shipping_lists">
                                            <option disabled="">Select Shipping Line</option>
                                            @foreach ($shipping as $ship)
                                            @if ($response[1]!=null)
                                                
                                            <option {{$response[1]->id == $ship->id
                                            ? 'selected'
                                            : ''
                                            }}
                                            value="{{$ship->id}}">{{$ship->shipping_name}}</option>
                                            @else
                                            <option value="{{$ship->id}}">{{$ship->shipping_name}}</option>
                                                
                                            @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Vessel Name</label>
                                        <input type="text" value="{{$response[0]->shipping_detail->vessel_name}}" class="form-control" name="vessel_name" placeholder="Vessel Name">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">BL Number#</label>
                                        <input type="text" class="form-control" name="bl_number" value="{{$response[0]->shipping_detail->bl_number}}" placeholder="BL Number#">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">BL Date</label>
                                        <input type="date" class="form-control" name="bl_date" value="{{$response[0]->shipping_detail->bl_date}}" placeholder="Vessel Name">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">IGM No</label>
                                        <input type="text" class="form-control" name="igm_no" value="{{$response[0]->shipping_detail->igm_no}}" placeholder="IGM No">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">IGM Date</label>
                                        <input type="date" class="form-control" name="igm_date" value="{{$response[0]->shipping_detail->igm_date}}" placeholder="Vessel Name">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Index No</label>
                                        <input type="text" class="form-control" name="index_no" value="{{$response[0]->shipping_detail->index_no}}" placeholder="Index No">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Containers Free Days</label>
                                        <input type="text" class="form-control" name="container_free_days" value="{{$response[0]->shipping_detail->container_free_days}}" placeholder="Containers Free Days">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Arrival Date</label>
                                        <input type="date" class="form-control" name="arrival_date" value="{{$response[0]->shipping_detail->arrival_date}}" placeholder="BL Number#">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">D/O Charges</label>
                                        <input type="text" class="form-control" name="do_charges" value="{{$response[0]->shipping_detail->do_charges}}" placeholder="PKR">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Deposit Charges</label>
                                        <input type="text" class="form-control" name="deposit_charges" value="{{$response[0]->shipping_detail->deposit_charges}}" placeholder="PKR">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">LOLO Charges</label>
                                        <input type="text" class="form-control" name="lolo_charges" value="{{$response[0]->shipping_detail->lolo_charges}}" placeholder="PKR">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Late D/O</label>
                                        <input type="text" class="form-control" name="late_do" value="{{$response[0]->shipping_detail->late_do}}" placeholder="PKR">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Endorsement Charges</label>
                                        <input type="text" class="form-control" name="endorsment_charges" value="{{$response[0]->shipping_detail->endorsment_charges}}" placeholder="PKR">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Detention Charges (USD to PKR)</label>
                                        <input type="text" class="form-control" name="detention_charges" value="{{$response[0]->shipping_detail->detention_charges}}" placeholder="USD to PKR">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Frieght Charges (USD to PKR)</label>
                                        <input type="text" class="form-control" name="freight_charges" value="{{$response[0]->shipping_detail->freight_charges}}" placeholder="USD to PKR">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Container Service Or Damage Charges</label>
                                        <input type="text" class="form-control" name="container_service_charges" value="{{$response[0]->shipping_detail->container_service_charges}}" placeholder="PKR">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Remarks</label>
                                        <input type="text" class="form-control" name="remarks" value="{{$response[0]->shipping_detail->remarks}}" placeholder="Remarks">
                                    </div>
                                </div>
                            </div>
                            <h4 class="form-section">
                                <i class="icon-book-open"></i>DETAILS OF CONSIGNMENT</h4>
                                <input type="hidden" name="consignment_detail_id" value={{$response[0]->consignment_detail->id}}>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Origin Country</label>
                                        <input type="text" class="form-control" name="origin_country" value="{{$response[0]->consignment_detail->origin_country}}" placeholder="Origin Country">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Load From</label>
                                        <input type="text" class="form-control" name="load_from" value="{{$response[0]->consignment_detail->load_from}}" placeholder="Load From">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">QTY/BAGS/CARTON</label>
                                        <input type="text" class="form-control" name="qty" value="{{$response[0]->consignment_detail->qty}}" placeholder="QTY/BAGS/CARTON">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Gross Weight</label>
                                        <input type="text" class="form-control" name="gross_weight" value="{{$response[0]->consignment_detail->gross_weight}}" placeholder="Gross Weight">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Net Weight</label>
                                        <input type="text" class="form-control" name="net_weight" value="{{$response[0]->consignment_detail->net_weight}}" placeholder="Net Weight">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Invoice No.</label>
                                        <input type="text" class="form-control" name="invoice_no" value="{{$response[0]->consignment_detail->invoice_no}}" placeholder="Invoice No.">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Invoice Date</label>
                                        <input type="date" class="form-control" name="invoice_date" value="{{$response[0]->consignment_detail->invoice_date}}" placeholder="PKR">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Invoice Value</label>
                                        <input type="text" class="form-control" name="invoice_value" value="{{$response[0]->consignment_detail->invoice_value}}" placeholder="Invoice Value">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Shipping Marks</label>
                                        <input type="text" class="form-control" name="shipping_marks" value="{{$response[0]->consignment_detail->shipping_marks}}" placeholder="Shipping Marks">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Description</label>
                                        <input type="text" class="form-control" name="description" value="{{$response[0]->consignment_detail->description}}" placeholder="Description">
                                    </div>
                                </div>
                            </div>
                            @foreach ($response[3] as $containers)
                            <input type="hidden" name="container_consignment_id[]" value="{{$containers->id}}">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="">Container Number</label>
                                            <input type="text" name="container_no[]" value={{$containers->container_no}} class="form-control" placeholder="Container Number">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="">Container Sizes</label>
                                            <a class="float-right" href="#addContainerSize" data-toggle="modal" data-keyboard="false">Add Container Size</a>
                                            <select name="container_size_id[]" class="form-control size size_lists">
                                                <option value="" selected disabled>Select Container Sizes</option>
                                                @foreach ($size as $sizes)
                                                    <option {{$containers->container_size_id == $sizes->id
                                                    ? 'selected'
                                                    : ''
                                                    }}
                                                    value="{{$sizes->id}}">{{$sizes->size}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="">Container Discharging Date</label>
                                            <input type="date" name="port_discharge_datetime[]" value="{{$containers->port_discharge_datetime}}" class="form-control">
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            <div id="containers"></div>
                            <div class="row">
                                <div class="col-md-12">
                                    <button type="button" class="btn btn-success addContainer">
                                        <i class="icon-plus"></i> Add More
                                    </button>
                                </div>
                            </div>

                            <h4 class="form-section">
                                <i class="icon-book-open"></i>PORT DETAILS</h4>
                                <input type="hidden" name="port_discharge_id" value="{{$response[0]->port_discharge->id}}">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="port_id">Discharge Port Name</label>
                                        <a class="float-right" href="#addPort" data-toggle="modal" data-keyboard="false">Add Port</a>
                                        <select id="port_id" name="port_id" class="form-control port_lists">
                                            <option disabled="">Select Discharge Port Name</option>
                                            @foreach ($port as $ports)
                                                <option {{$response[0]->port_discharge->port_id == $ports->id
                                                ? 'selected'
                                                : ''
                                                }} 
                                                value="{{$ports->id}}">{{$ports->port_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                {{-- <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Container Discharging Date</label>
                                        <input type="date" name="port_discharge_datetime" value="{{$response[0]->port_discharge->port_discharge_datetime}}" class="form-control">
                                    </div>
                                </div> --}}
                                
                            </div>
                            {{-- <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Container Discharging Time</label>
                                        <input type="time" class="form-control">
                                    </div>
                                </div>
                            </div> --}}
                            
                            <h4 class="form-section">
                                <i class="icon-book-open"></i>UPLOAD DOCUMENTS</h4>
                            @foreach ($response[4] as $job_docs)
                                <input type="text" name="job_document_id[]" value="{{$job_docs->id}}">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="doc_id">Document Name</label>
                                            <a class="float-right" href="#addDoc" data-toggle="modal" data-keyboard="false">Add Document</a>
                                            <select name="doc_id[]" class="doc_id form-control">
                                                <option disabled="">Select Document Name</option>
                                                @foreach ($docs as $doc)
                                                    <option {{$job_docs->doc_id == $doc->id
                                                    ? 'selected'
                                                    : ''
                                                    }}
                                                    value="{{$doc->id}}">{{$doc->doc_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">File</label>
                                            <input type="file" name="doc_file[]" class="form-control">
                                            <label for="">View Uploaded Document: </label>
                                            <a href="/files/jobs/{{$job_docs->file_name}}" target="_blank" style="cursor: pointer">{{$job_docs->file_name}}</a> 
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            <div id="documents"></div>
                            <div class="row ">
                                <div class="col-md-12">
                                    <button type="button" class="btn btn-success addDocs">
                                        <i class="icon-plus"></i> Add More Documents
                                    </button>
                                </div>
                            </div>
                            <h4 class="form-section">
                                <i class="icon-book-open"></i>BASIC JOB DOCUMENT</h4>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">

                                        <label for="job_type_id">Job Type</label>
                                        <a class="float-right" href="#addJobType" data-toggle="modal" data-keyboard="false">Add Job Type</a>
                                        <select id="job_type_id" name="job_type_id" class="form-control job_type_list">
                                            <option disabled="">Select Job Type</option>
                                            @foreach ($job_type as $job_types)
                                                <option {{$response[0]->job_type_id == $job_types->id
                                                ? 'selected'
                                                : ''
                                                }} 
                                                value="{{$job_types->id}}">{{$job_types->job_type}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="checkbox" id="is_pta" {{$response[0]->is_pta=="yes" ? 'checked' : ''}} name="is_pta" class="custom-control-input">
                                            <label class="custom-control-label" for="is_pta">PTA ?</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="checkbox" id="is_ppro" {{$response[0]->is_ppro=="yes" ? 'checked' : ''}} name="is_ppro" class="custom-control-input">
                                            <label class="custom-control-label" for="is_ppro">PPRO ?</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="checkbox" id="is_psqca" {{$response[0]->is_psqca=="yes" ? 'checked' : ''}} name="is_psqca" class="custom-control-input">
                                            <label class="custom-control-label" for="is_psqca">PSQCA ?</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="checkbox" id="is_quarantine" {{$response[0]->is_quarantine=="yes" ? 'checked' : ''}} name="is_quarantine" class="custom-control-input">
                                            <label class="custom-control-label" for="is_quarantine">Quarantine ?</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-actions">
                            <button type="button" class="btn btn-danger mr-1">
                                <i class="icon-trash"></i> Cancel
                            </button>
                            <button type="submit" id="saveBtn" class="btn btn-success">
                                <i class="icon-note"></i> Save
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
  
<div class="modal fade text-left" id="addConsignee" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header gradient-green-tea">
                <h3 class="modal-title text-white" id="myModalLabel3">Add Consignee</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form" id="consigneeForm" method="POST" action="">
                    <div class="row">
                       <div class="col-md-6">
                            <div class="form-group">
                                <label for="consignee_name">Consignee Name</label>
                                <input type="text" id="consignee_name" placeholder="Consignee Name" class="form-control" name="consignee_name">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="text" placeholder="Email" id="email" class="form-control" name="email">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="ntn">NTN</label>
                                <input type="text" placeholder="NTN" id="ntn" class="form-control" name="ntn">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="srtn">SRTN</label>
                                <input type="text" placeholder="SRTN" id="srtn" class="form-control" name="srtn">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="consignee_type_id">Consignee Type</label>
                                <select name="consignee_type_id" id="consignee_type_id" class="form-control">
                                    <option value="" disabled selected>Select Consignee Type</option>
                                    @foreach ($consignee_type as $item)
                                        <option value="{{$item->id}}">{{$item->consignee_type}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-actions center pt-2">
                        <a href="javascript:;" data-dismiss="modal">
                            <button type="button" class="btn btn-danger mr-1">
                                <i class="icon-trash"></i> Cancel
                            </button>
                        </a>
                        <button type="button" class="btn btn-raised btn-success" id="addConsigneeForm">
                            <i class="icon-note"></i> Save
                        </button>
                    </div>
                </form>    
            </div>
        </div>
    </div>
</div>
<div class="modal fade text-left" id="addClient" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header gradient-green-tea">
                <h3 class="modal-title text-white" id="myModalLabel3">Add Client</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form" id="clientForm" method="POST" action="">
                    <div class="row">
                       <div class="col-md-6">
                            <div class="form-group">
                                <label for="client_name">Client Name</label>
                                <input type="text" id="client_name" placeholder="Client Name" class="form-control" name="client_name">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="text" placeholder="Email" id="email" class="form-control" name="email">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="phone">Phone</label>
                                <input type="text" placeholder="Phone" id="phone" class="form-control" name="phone">
                            </div>
                        </div>
                    </div>
                    <div class="form-actions center pt-2">
                        <a href="javascript:;" data-dismiss="modal">
                            <button type="button" class="btn btn-danger mr-1">
                                <i class="icon-trash"></i> Cancel
                            </button>
                        </a>
                        <button type="button" class="btn btn-raised btn-success" id="addClientForm">
                            <i class="icon-note"></i> Save
                        </button>
                    </div>
                </form>    
            </div>
        </div>
    </div>
</div>
<div class="modal fade text-left" id="addPort" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header gradient-green-tea">
                <h3 class="modal-title text-white" id="myModalLabel3">Add Port</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form" id="portForm" method="POST" action="">
                    <div class="row">
                       <div class="col-md-6">
                            <div class="form-group">
                                <label for="port_name">Port Name</label>
                                <input type="text" id="port_name" class="form-control" name="port_name">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="address">Address</label>
                                <input type="text" id="address" class="form-control" name="address">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="contact">Contact No.</label>
                                <input type="text" id="contact" class="form-control" name="contact">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="web_link">Web Link</label>
                                <input type="text" id="web_link" class="form-control" name="web_link">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="remarks">Remarks</label>
                                <input type="text" id="remarks" class="form-control" name="remarks">
                            </div>
                        </div>
                    </div>
                    <div class="form-actions center pt-2">
                        <a href="javascript:;" data-dismiss="modal">
                            <button type="button" class="btn btn-danger mr-1">
                                <i class="icon-trash"></i> Cancel
                            </button>
                        </a>
                        <button type="button" class="btn btn-raised btn-success" id="addPortForm">
                            <i class="icon-note"></i> Save
                        </button>
                    </div>
                </form>    
            </div>
        </div>
    </div>
</div>
<div class="modal fade text-left" id="addContainerSize" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header gradient-green-tea">
                <h3 class="modal-title text-white" id="myModalLabel3">Add Container Size</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form" id="containerSizeForm" method="POST" action="">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="size">Container Size</label>
                                <input type="text" class="form-control" name="size">
                            </div>
                        </div>
                    </div>
                    <div class="form-actions center pt-2">
                        <a href="javascript:;" data-dismiss="modal">
                            <button type="button" class="btn btn-danger mr-1">
                                <i class="icon-trash"></i> Cancel
                            </button>
                        </a>
                        <button type="button" class="btn btn-raised btn-success" id="addContainerSizeForm">
                            <i class="icon-note"></i> Save
                        </button>
                    </div>
                </form>    
            </div>
        </div>
    </div>
</div>
<div class="modal fade text-left" id="addDoc" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header gradient-green-tea">
                <h3 class="modal-title text-white" id="myModalLabel3">Add Document</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form" id="docForm" method="POST" action="">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="doc_name">Document Name</label>
                                <input type="text" id="doc_name" class="form-control" name="doc_name" required>
                            </div>
                        </div>
                    </div>
                    <div class="form-actions center pt-2">
                        <a href="javascript:;" data-dismiss="modal">
                            <button type="button" class="btn btn-danger mr-1">
                                <i class="icon-trash"></i> Cancel
                            </button>
                        </a>
                        <button type="button" class="btn btn-raised btn-success" id="addDocForm">
                            <i class="icon-note"></i> Save
                        </button>
                    </div>
                </form>    
            </div>
        </div>
    </div>
</div>
<div class="modal fade text-left" id="addJobType" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header gradient-green-tea">
                <h3 class="modal-title text-white" id="myModalLabel3">Add Job Type</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form" id="jobTypeForm" method="POST" action="">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="job_type">Job Type</label>
                                <input type="text" id="job_type" class="form-control" name="job_type">
                            </div>
                        </div>
                    </div>
                    <div class="form-actions center pt-2">
                        <a href="javascript:;" data-dismiss="modal">
                            <button type="button" class="btn btn-danger mr-1">
                                <i class="icon-trash"></i> Cancel
                            </button>
                        </a>
                        <button type="button" class="btn btn-raised btn-success" id="addJobTypeForm">
                            <i class="icon-note"></i> Save
                        </button>
                    </div>
                </form>    
            </div>
        </div>
    </div>
</div>
<div class="modal fade text-left" id="addShipping" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header gradient-green-tea">
                <h3 class="modal-title text-white" id="myModalLabel3">Add Shipping</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form" id="shippingForm" method="POST" action="">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="shipping_name">Shipping Name</label>
                                <input type="text" id="shipping_name" placeholder="Shipping Name" class="form-control" name="shipping_name">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="contact_person">Contact Person</label>
                                <input type="text" placeholder="Contact Person" id="contact_person" class="form-control" name="contact_person">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="address">Address</label>
                                <input type="text" id="address" placeholder="Address" class="form-control" name="address">
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="contact">Contact</label>
                                <input type="text" id="contact" placeholder="Contact" class="form-control" name="contact">
                            </div>
                        </div>
                    </div>
                    
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="strn">STRN</label>
                                <input type="text" id="strn" placeholder="STRN" class="form-control" name="strn">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="agent_for">Agent For</label>
                                <input type="text" id="agent_for" class="form-control" name="agent_for">
                            </div>
                        </div>
                        
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="ntn">NTN</label>
                                <input type="text" placeholder="NTN" id="ntn" class="form-control" name="ntn">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="pref_refund_mode">Prefered Refund Mode</label>
                                <select name="pref_refund_mode" id="pref_refund_mode" class="form-control">
                                    <option disabled selected>Select Preferred Mode</option>
                                    <option >Value 1</option>
                                    <option >Value 2</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="do_req_doc">Upload D.O Request Format</label>
                                <input type="file" name="do_req_doc" class="form-control" id="do_req_doc">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="auth_letter">Upload Authority Letter Form  </label>
                                <input type="file" name="auth_letter" class="form-control" id="auth_letter">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="dep_undertake">Upload Security Deposit undertake</label>
                                <input type="file" name="dep_undertake" class="form-control" id="dep_undertake">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="endor_letter">Upload Endorsment Letter Format</label>
                                <input type="file" name="endor_letter" class="form-control" id="endor_letter">
                            </div>
                        </div>
                    </div>
                    <div class="form-actions center pt-2">
                        <a href="javascript:;" data-dismiss="modal">
                            <button type="button" class="btn btn-danger mr-1">
                                <i class="icon-trash"></i> Cancel
                            </button>
                        </a>
                        <button type="button" class="btn btn-raised btn-success" id="addShippingForm">
                            <i class="icon-note"></i> Save
                        </button>
                    </div>
                </form>    
            </div>
        </div>
    </div>
</div>  
@endsection

@section('afterScript')
<script>
    $(document).ready(function(){
        $('#saveBtn').removeAttr('disabled');

        $('#consignee_id').select2({
            allowClear: true,
        });
        $('#client_id').select2({
            allowClear: true,
        });
        $('#shipping_id').select2({
            allowClear: true,
        });
        $('.size').select2({
            allowClear: true,
        });
        $('#port_id').select2({
            allowClear: true,
        });
        $('.doc_id').select2({
            allowClear: true,
        });
        $('#job_type_id').select2({
            allowClear: true,
        }); 


        var count = 1;
        var doc_count = 1;


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

            var html='<input type="hidden" name="container_consignment_id[]" value="0">';
                html +='<div class="row" id="container_'+count+'">';
                html +='<div class="col-md-4">';
                html +='<div class="form-group">';
                html +='<label for="">Container Number</label>';
                html +='<input type="text" name="container_no[]" class="form-control" placeholder="Container Number">';
                html +='</div>';
                html +='</div>';
                html +='<div class="col-md-4">';
                html +='<div class="form-group">';
                html +='<label for="">Container Sizes</label>';
                html +='<select name="container_size_id[]" class="form-control size">';
                html +='<option value="" selected disabled>Select Container Sizes</option>';
                html +='@foreach ($size as $sizes)';
                html +='<option value="{{$sizes->id}}">{{$sizes->size}}</option>';
                html +='@endforeach';
                html +='</select>';
                html +='</div>';
                html +='</div>';
                html +='<div class="col-md-4">';
                html +='<div class="form-group">';
                html +='<label for="">Container Discharging Date</label>';
                html +='<input type="date" name="port_discharge_datetime[]" class="form-control">';
                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 removeContainer" data-id="'+count+'">Remove</button>'
                html +='</div>';
                html +='</div>';

                $('#containers').append(html);
                $('.size').select2();
                count=count+1;
        });

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

            var data_id =$(this).attr('data-id');
            $('#container_'+data_id).remove();
        });


        $(document).on('click','.addDocs',function(e){
            e.preventDefault();
            var html= '<div class="row" id="document_'+doc_count+'">';
                html+= '<div class="col-md-6">';
                html+= '<div class="form-group">';
                html+= '<label for="doc_id">Document Name</label>';
                html+= '<select name="doc_id[]" class="doc_id form-control">';
                html+= '<option disabled="">Select Document Name</option>';
                html+= '@foreach ($docs as $doc)';
                html+= '<option value="{{$doc->id}}">{{$doc->doc_name}}</option>';
                html+= '@endforeach';
                html+= '</select>';
                html+= '</div>';
                html+= '</div>';
                html+= '<div class="col-md-6">';
                html+= '<div class="form-group">';
                html+= '<label for="">File</label>';
                html+= '<input type="file" name="doc_file[]" class="form-control">';
                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 removeDocs" data-id="'+doc_count+'">Remove</button>'
                html +='</div>';
                html+= '</div>';

                $('#documents').append(html);
                doc_count=doc_count+1;
        });

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

            var data_id =$(this).attr('data-id');
            $('#document_'+data_id).remove();
        });

        $(document).on('click','#is_pta',function(){
            if($(this).is(':checked'))
            {
                $('[name=is_pta]').val('yes');
            } else  {
                $('[name=is_pta]').val('no');
            }
        });
        $(document).on('click','#is_ppro',function(){
            if($(this).is(':checked'))
            {
                $('[name=is_ppro]').val('yes');
            } else  {
                $('[name=is_ppro]').val('no');
            }
        });
        $(document).on('click','#is_psqca',function(){
            if($(this).is(':checked'))
            {
                $('[name=is_psqca]').val('yes');
            } else  {
                $('[name=is_psqca]').val('no');
            }
        });

        $(document).on('click',"#addClientForm", function(e){
            e.preventDefault();
        
            var form_data = new FormData($("#clientForm")[0]);
            $.ajaxSetup({
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url : "{{ route('client.store') }}",
                type: "POST",
                data : form_data,
                async: false,
                cache: false,
                contentType: false,
                enctype: 'multipart/form-data',
                processData: false,
                success: function (res) {
                    swal("Inserted!", "Client has been Added Successfully!", "success");
                    $('.client_lists').append('<option value="'+res.id+'">'+res.client_name+'</option>');
                    $('#clientForm')[0].reset();
                    $('#addClient').modal('hide');
                    $('.client_lists').val(res.id).trigger('change');
                },
                error: function(err) {
                    swal('Not Valid',err.responseJSON.message,'error');
                    // setTimeout(function() { 
                    //     location.reload();
                    // }, 1000);
                
                }
            });
        });

        $(document).on('click',"#addConsigneeForm", function(e){
            e.preventDefault();
        
            var form_data = new FormData($("#consigneeForm")[0]);
            $.ajaxSetup({
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url : "{{ route('consignee.store') }}",
                type: "POST",
                data : form_data,
                async: false,
                cache: false,
                contentType: false,
                enctype: 'multipart/form-data',
                processData: false,
                success: function (res) {
                    swal("Inserted!", "Consignee has been Added Successfully!", "success");
                    $('.consignee_lists').append('<option value="'+res.id+'">'+res.consignee_name+'</option>');
                    $('#addConsignee').modal('hide');
                    $('#consigneeForm')[0].reset();
                    $('.consignee_lists').val(res.id).trigger('change');

                },
                error: function(err) {
                    swal('Not Valid',err.responseJSON.message,'error');
                    // setTimeout(function() { 
                    //     location.reload();
                    // }, 1000);
                
                }
            });
        });

        $(document).on('click',"#addPortForm", function(e){
            e.preventDefault();
        
            var form_data = new FormData($("#portForm")[0]);
            $.ajaxSetup({
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url : "{{ route('port.store') }}",
                type: "POST",
                data : form_data,
                async: false,
                cache: false,
                contentType: false,
                enctype: 'multipart/form-data',
                processData: false,
                success: function (res) {
                    swal("Inserted!", "Port has been Added Successfully!", "success");
                    $('.port_lists').append('<option value="'+res.id+'">'+res.port_name+'</option>');
                    $('#addPort').modal('hide');
                    $('#portForm')[0].reset();
                    $('.port_lists').val(res.id).trigger('change');

                },
                error: function(err) {
                    swal('Not Valid',err.responseJSON.message,'error');
                    // setTimeout(function() { 
                    //     location.reload();
                    // }, 1000);
                
                }
            });
        });

        $(document).on('click',"#addContainerSizeForm", function(e){
            e.preventDefault();
        
            var form_data = new FormData($("#containerSizeForm")[0]);
            $.ajaxSetup({
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url : "{{ route('container_size.store') }}",
                type: "POST",
                data : form_data,
                async: false,
                cache: false,
                contentType: false,
                enctype: 'multipart/form-data',
                processData: false,
                success: function (res) {
                    swal("Inserted!", "Container Size has been Added Successfully!", "success");
                    $('.size_lists').append('<option value="'+res.id+'">'+res.size+'</option>');
                    $('#addContainerSize').modal('hide');
                    $('#containerSizeForm')[0].reset();
                    $('.size_lists').val(res.id).trigger('change');
                },
                error: function(err) {
                    swal('Not Valid',err.responseJSON.message,'error');
                    // setTimeout(function() { 
                    //     location.reload();
                    // }, 1000);
                
                }
            });
        });

        $(document).on('click',"#addShippingForm", function(e){
            e.preventDefault();
        
            var form_data = new FormData($("#shippingForm")[0]);
            $.ajaxSetup({
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url : "{{ route('shipping.store') }}",
                type: "POST",
                data : form_data,
                async: false,
                cache: false,
                contentType: false,
                enctype: 'multipart/form-data',
                processData: false,
                success: function (res) {
                    swal("Inserted!", "Shipping has been Added Successfully!", "success");
                    $('.shipping_lists').append('<option value="'+res.id+'">'+res.shipping_name+'</option>');
                    $('#addShipping').modal('hide');
                    $('#shippingForm')[0].reset();
                    $('.shipping_lists').val(res.id).trigger('change');
                },
                error: function(err) {
                    swal('Not Valid',err.responseJSON.message,'error');
                    // setTimeout(function() { 
                    //     location.reload();
                    // }, 1000);
                
                }
            });
        });

        $(document).on('click',"#addDocForm", function(e){
            e.preventDefault();
        
            var form_data = new FormData($("#docForm")[0]);
            $.ajaxSetup({
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url : "{{ route('document.store') }}",
                type: "POST",
                data : form_data,
                async: false,
                cache: false,
                contentType: false,
                enctype: 'multipart/form-data',
                processData: false,
                success: function (res) {
                    swal("Inserted!", "Document has been Added Successfully!", "success");
                    $('.doc_lists').append('<option value="'+res.id+'">'+res.doc_name+'</option>');
                    $('#addDoc').modal('hide');
                    $('#docForm')[0].reset();
                    $('.doc_lists').val(res.id).trigger('change');
                },
                error: function(err) {
                    swal('Not Valid',err.responseJSON.message,'error');
                    // setTimeout(function() { 
                    //     location.reload();
                    // }, 1000);
                
                }
            });
        });

        $(document).on('click',"#addJobTypeForm", function(e){
            e.preventDefault();
        
            var form_data = new FormData($("#jobTypeForm")[0]);
            $.ajaxSetup({
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url : "{{ route('job_type.store') }}",
                type: "POST",
                data : form_data,
                async: false,
                cache: false,
                contentType: false,
                enctype: 'multipart/form-data',
                processData: false,
                success: function (res) {
                    swal("Inserted!", "Job Type has been Added Successfully!", "success");
                    $('.job_type_list').append('<option value="'+res.id+'">'+res.job_type+'</option>');
                    $('#addJobType').modal('hide');
                    $('#jobTypeForm')[0].reset();
                    $('.job_type_list').val(res.id).trigger('change');
                },
                error: function(err) {
                    swal('Not Valid',err.responseJSON.message,'error');
                    // setTimeout(function() { 
                    //     location.reload();
                    // }, 1000);
                
                }
            });
        });
    })

</script>
    
@endsection