@extends('layouts.app')

@section('content')
<section id="dom">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between">
                    <div class="card-title-wrap bar-teal">
                        <h4 class="card-title">Job List</h4>
                        <p class="card-text">Here you can see the list of existing Jobs.</p>
                    </div>
                    
                </div>
                <div class="card-body collapse show">
                    <div class="card-block card-dashboard table-responsive">
                        <table class="table table-striped table-bordered" id="dTable">
                            <thead>
                                <tr>
                                    <th>Job No</th>
                                    <th>Opening Date</th>
                                    <th>Client Name</th>
                                    <th>Consignee Name</th>
                                    <th>Shipping Marks</th>
                                    <th>Port of Delivery</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($jobs as $j)
                                <tr>
                                    <td>{{$j->job_no}}</td>
                                    <td>{{$j->opening_date}}</td>
                                    <td>{{$j->client_name}}</td>
                                    <td>{{$j->consignee_name}}</td>
                                    <td>{{$j->shipping_name}}</td>
                                    <td>{{$j->port_name}}</td>
                                    <td>
                                        <span class="badge {{$j->is_closed==0 ? 'bg-success' : 'bg-danger'}}  white">
                                            {{$j->is_closed==0 ? 'Open' : 'Closed'}}
                                        </span>
                                    </td>
                                    <td>
                                        <a class="success mr-2 viewBtn" title="View" data-id="{{$j->id}}" data-toggle="modal" data-keyboard="false" data-target="#editDetail">
                                            <i class="ft-eye font-medium-3"></i> 
                                        </a>
                                    </td>
                                </tr>
                                    
                                @empty
                                    <tr>
                                        <td colspan="3">No record Found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{{-- Modal --}}
<div class="modal fade text-left" id="editDetail" 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">
                <h4 class="modal-title text-white" id="myModalLabel3">View Job</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
                            <label class="text-bold-500" for="job_no">Job No: </label>
                            <input type="text" id="job_no" class="form-control border-primary" disabled name="job_no">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label class="text-bold-500" for="opening_date">Opening Date: </label>
                            <input type="text" id="opening_date" class="form-control border-primary" disabled name="opening_date">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label class="text-bold-500" for="consignee_name">Consignee Name: </label>
                            <input type="text" id="consignee_name" class="form-control border-primary" disabled name="consignee_name">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label class="text-bold-500" for="client_name">Client Name: </label>
                            <input type="text" id="client_name" class="form-control border-primary" disabled name="client_name">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label class="text-bold-500" for="shipping_name">Shipping Marks: </label>
                            <input type="text" id="shipping_name" class="form-control border-primary" disabled name="shipping_name">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label class="text-bold-500" for="port">Port of Delivery: </label>
                            <input type="text" id="port" class="form-control border-primary" disabled name="port">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label class="text-bold-500" for="container_no">Container No: </label>
                            <input type="text" id="container_no" class="form-control border-primary" disabled name="container_no">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label class="text-bold-500" for="gross_weight">Gross Weight: </label>
                            <input type="text" id="gross_weight" class="form-control border-primary" disabled name="gross_weight">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label class="text-bold-500" for="net_weight">Net Weight: </label>
                            <input type="text" id="net_weight" class="form-control border-primary" disabled name="net_weight">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label class="text-bold-500" for="description">Description: </label>
                            <input type="text" id="description" class="form-control border-primary" disabled name="description">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('afterScript')
    <script>
        $(document).ready(function(){
            $('#dTable').DataTable();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            }); 
            $(document).on('click','.viewBtn',function(){
                var id = $(this).attr('data-id');
                $.ajax({
                    url: 'parachaJob/'+id,
                    method:'GET',
                    dataType:'json',
                    success:function(data)
                    {
                        // debugger
                        $('#job_no').val(data[0].job_no);
                        $('#opening_date').val(data[0].opening_date);
                        $('#consignee_name').val(data[0].consignee.consignee_name);
                        $('#client_name').val(data[0].client.client_name);
                        $('#gross_weight').val(data[0].consignment_detail.gross_weight);
                        $('#net_weight').val(data[0].consignment_detail.net_weight);
                        $('#description').val(data[0].consignment_detail.description);
                        $('#shipping_name').val(data['shipping']!=null  && data['shipping'].shipping_name);
                        $('#port').val(data['port']!=null && data['port'].port_name);
                        $('#container_no').val(data['contatiner']!=null  && data['contatiner'].container_no);
                    
                    },
                    error: function(e) {
                        console.log(e);
                    }
                });
            });

        });
    </script>
@endsection