@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">PSQCA List</h4>
                        <p class="card-text">Here you can see the list of existing PSQCA.</p>
                    </div>
                    <a class="float-right" href="{{route('psqca.create')}}">
                        <button type="button" class="btn btn-success mr-1">
                            <i class="icon-plus"></i> Create
                        </button>
                    </a>
                </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>Consignee Name</th>
                                    <th>Shipping Marks</th>
                                    <th>Description</th>
                                    <th>PSQCA Submitted Date</th>
                                    <th>PSQCA Submitted By</th>
                                    <th>Delivery Port</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($psqca as $p)
                                <tr>
                                    <td>{{$p->job->job_no}}</td>
                                    <td>{{$p->job->consignee->consignee_name}}</td>
                                    <td>{{$p->job->consignment_detail->shipping_marks}}</td>
                                    <td>{{$p->job->consignment_detail->description}}</td>
                                    <td>{{$p->submission_date}}</td>
                                    <td>{{$p->usersSubmitted->name}}</td>
                                    <td>{{$p->job->port_discharge->port_id!= null ? $p->job->port_discharge->port->port_name : 'No Port'}}</td>
                                    <td>
                                        <span class="badge {{$p->is_received==1 ? 'bg-success' : 'bg-danger'}}  white">
                                            {{$p->is_received==1 ? 'Received' : 'Pending'}}
                                        </span>
                                    </td>
                                    <td>
                                        @if ($p->is_received==0)
                                        <a class="btn btn-success white mr-2 viewBtn" title="View" href="/psqca/{{$p->id}}/edit">
                                             Receive
                                        </a>
                                        @endif
                                        <form action="/psqca/{{$p->id}}" method="post">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-danger white mr-2 delete" >
                                                Delete 
                                            </button>
                                        </form>
                                        {{-- <a href="javascript:void();" id="{{$j->id}}"class="danger p-0 mr-2 delete" title="delete" >
                                            <i class="ft-trash-2 font-medium-3"></i>
                                        </a> --}}
                                    </td>
                                </tr>
                                    
                                @empty
                                    <tr align="center">
                                        <td colspan="9">No record Found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

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

            $.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