@extends('layouts.app')

@section('content')
<style>
    .input-container {
  position: relative;
  width: 100%;
}

.input-container input {
  width: 100%;
}

.input-container .unit {
  position: absolute;
  display: block;
  top: 4px;
  right: 3px;
  color: grey;
  padding-left: 5px;
  width: 45px;
}
</style>
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="pt-3 px-3">
                    <form class="form" id="jobForm">
                        {{-- @csrf --}}
                        <div class="form-body">
                            <h4 class="form-section">
                                <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="{{$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" 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 value="" selected disabled>Select Consignee</option>
                                                @foreach ($consignee as $consignees)
                                                <option 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 value="" selected disabled>Select Client</option>
                                                @foreach ($client as $clients)
                                                <option 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>


                                <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 value="" selected disabled>Select Shipping Line</option>
                                                @foreach ($shipping as $ship)
                                                <option value="{{$ship->id}}">{{$ship->shipping_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Vessel Name</label>
                                            <input type="text" 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" 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" 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" 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" 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" 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" 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" 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" placeholder="PKR">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Security Deposit Amount</label>
                                            <input type="text" class="form-control" name="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" 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" 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" 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" 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" 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" 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" placeholder="Remarks">
                                        </div>
                                    </div>
                                </div>
                                <h4 class="form-section">
                                    <i class="icon-book-open"></i>DETAILS OF CONSIGNMENT
                                </h4>
                                <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" 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" 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" 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" placeholder="Gross Weight">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Net Weight</label>
                                            <div class="input-container">

                                                <input type="number" class="form-control" name="net_weight" placeholder="Net Weight">
                                                <span class="unit">KG</span>
                                            </div>
                                        </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" 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" 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" 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" 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" placeholder="Description">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="">Container Number</label>
                                            <input type="text" min="7" name="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 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[]" class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <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>
                                <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 value="" selected disabled>Select Discharge Port Name</option>
                                                @foreach ($port as $ports)
                                                <option 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" 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>
                                <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 doc_lists">
                                                <option value="" selected disabled>Select Document Name</option>
                                                @foreach ($docs as $doc)
                                                <option 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">
                                        </div>
                                    </div>
                                </div>
                                <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_lists">
                                                <option value="" selected disabled>Select Job Type</option>
                                                @foreach ($job_type as $job_types)
                                                <option 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" 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" 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" 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" 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">
                            <a href="javascript:history.back()">
                                <button type="button" class="btn btn-danger mr-1">
                                    <i class="icon-trash"></i> Cancel
                                </button>
                            </a>
                            <button type="button" 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>Cash</option>
                                    <option>Pay Order by Cancel</option>
                                    <option>Cheque</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="email">Email Address</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="online_payment">Online Payment Details</label>
                                <input type="text" placeholder="online_payment" id="online_payment" class="form-control" name="online_payment">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="note">Note</label>
                                <input type="text" placeholder="note" id="note" class="form-control" name="online_payment">
                            </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>
    $('#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,
    });
    $('#is_pta').trigger('click');
    $('#is_ppro').trigger('click');
    $('#is_psqca').trigger('click');
</script>

<script>
    var count = 1;
    var doc_count = 1;

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

        var form_data = new FormData($("#jobForm")[0]);
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: "{{ route('parachaJob.store') }}",
            type: "POST",
            data: form_data,
            async: false,
            cache: false,
            contentType: false,
            enctype: 'multipart/form-data',
            processData: false,
            success: function(res) {
                swal("Inserted!", "Job has been Added Successfully!", "success");
                 
                $('#jobForm')[0].reset();
                setTimeout(function() { 
                    location.reload();
                }, 1000);
            },
            error: function(err) {
                swal('Not Valid', err.responseJSON.message, 'error');
                // setTimeout(function() { 
                //     location.reload();
                // }, 1000);

            }
        });
    });

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

        var options = '';
        var 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 size_lists  sizeListing_' + count + '">';
        html += '<option value="" selected disabled>Select Container Sizes</option>';
        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);


        $.ajax({
            url: "{{ route('parachaJob.getContainer') }}",
            type: "GET",
            dataType: "json",
            success: function(res) {
                $.each(res, function(key, value) {
                    options += '<option value="' + value.id + '">' + value.size + '</option>';
                });
                console.log(res, options);
            },
            complete: function() {
                $('.sizeListing_' + count).append(options);
                $('.sizeListing_' + count).select2({
                    allowClear: true,
                });
                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 options = '';

        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 doc_lists documentListing_' + doc_count + '">';
        html += '<option value="" selected 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);

        $.ajax({
            url: "{{ route('parachaJob.getDocument') }}",
            type: "GET",
            dataType: "json",
            success: function(res) {
                $.each(res, function(key, value) {
                    options += '<option value="' + value.id + '">' + value.doc_name + '</option>';
                });
                console.log(res, options);
            },
            complete: function() {
                $('.documentListing_' + doc_count).append(options);
                $('.documentListing_' + doc_count).select2({
                    allowClear: true,
                });
                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_lists').append('<option value="' + res.id + '">' + res.job_type + '</option>');
                $('#addJobType').modal('hide');
                $('#jobTypeForm')[0].reset();
                $('.job_type_lists').val(res.id).trigger('change');
            },
            error: function(err) {
                swal('Not Valid', err.responseJSON.message, 'error');
            }
        });
    });

    // $(document).ajaxStop(function() {
    //     setInterval(function() {
    //         location.reload();
    //     }, 3000);
    // });
</script>

@endsection