@extends('WarehouseDashboard.header.header')
@section('content')

    <div class="header bg-primary pb-6  pt-5">
        <div class="container-fluid">
            <div class="header-body">
                <div class="row align-items-center py-4">
                    <div class="col-lg-6 col-7">
                        <h6 class="h2 text-white d-inline-block mb-0">{{__('Orders Shipment')}}</h6>
                        <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                            <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                                <li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i></a></li>
                                <li class="breadcrumb-item"><a href="/">{{__('Dashboard')}}</a></li>
                                <li class="breadcrumb-item active" aria-current="page">{{__('Orders Shipment Tables')}}</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>

    <div style="display: flex;justify-content: space-between">
        <a class="btn btn-primary" href="{{route("consignment.create")}}">
            @csrf
            @method("GET")
            {{__("Make consignment")}}
        </a>
        <form method="GET" action="{{route("ajax.shipment.index")}}" id="form_search">
            @csrf
            @method("GET")
            <input name="input_search" id="input_search" value="" type="hidden">
            {{--        <button type="submit"></button>--}}
        </form>
    </div>
    <br>

    <div class="row">
        <div class="col">
            <div class="card">
                <!-- Card header -->
                <div>
                    <h3 class="mb-0 ml-4 mt-4">{{__('Orders Shipment table')}}</h3><br>
                </div>
                <br>
                <div class="d-flex mb-3">
                    <div class="col-lg-3">
                        <label class="control-label">{{__("Select Area")}}</label>
                        <select class="form-control"  id="Stat" onchange="getOrdersByAdministrativeArea(this);" data-url="{{route("ajax.shipment.index")}}">
                            <option value="">{{__('select administrative area')}}</option>
                                @foreach($pick_off_place_administrativeArea as $administrativeArea)
                                    @if($administrativeArea)
                                        <option value="{{$administrativeArea}}">{{$administrativeArea}}</option>
                                    @endif
                            @endforeach
                        </select>
                    </div>
                </div>
                <br>
{{--                <div class="d-flex mb-3">--}}
{{--                    <div class="col-lg-3">--}}
{{--                        <label class="control-label">{{__("Status")}}</label>--}}
{{--                        <select class="form-control"  id="Stat">--}}
{{--                            <option value="status"  {{ "status" ? "selected": ""}} selected disabled>{{__('All Status')}}</option>--}}
{{--                            <option value="all" {{ "all" ? "selected": ""}}>{{__('All')}}</option>--}}
{{--                            <option value="1" {{ $status === "1" ? "selected": ""}}>{{__('Pending')}}</option>--}}
{{--                            <option value="2" {{ $status === "2" ? "selected": ""}}>{{__('Accepted')}}</option>--}}
{{--                            <option value="3" {{ $status === "3" ? "selected": ""}}>{{__('Pickup')}}</option>--}}
{{--                            <option value="4" {{ $status === "4" ? "selected": ""}}>{{__('Completed')}}</option>--}}
{{--                            <option value="5" {{ $status === "5" ? "selected": ""}}>{{__('Rejected')}}</option>--}}
{{--                            <option value="6" {{ $status === "6" ? "selected": ""}}>{{__('Delivered')}}</option>--}}
{{--                            <option value="7" {{ $status ==="7" ? "selected": ""}}>{{__('Canceled')}}</option>--}}
{{--                        </select>--}}
{{--                    </div>--}}
{{--                    <div class="col-lg-3">--}}
{{--                        <label class="control-label">{{__("Start Date")}}</label><br>--}}
{{--                        <input type="date" class="form-control" name="start-date" id="start-date" value="{{$startDate}}"/>--}}
{{--                    </div>--}}
{{--                    <div class="col-lg-3">--}}
{{--                        <label class="control-label">{{__("End Date")}}</label><br>--}}
{{--                        <input type="date" class="form-control" name="end-date" id="end-date" value="{{$endDate}}"/>--}}
{{--                    </div>--}}
{{--                    <div class="col-lg-2">--}}
{{--                        <label class="control-label">{{__("________")}}</label><br>--}}
{{--                        <button class="btn btn-primary" id="FilterButton" data-url="{{route('shipment.indexShipment')}}">{{__('Filter')}}</button>--}}
{{--                    </div>--}}
{{--                </div>--}}

                <!-- Light table -->
                <div class="table-responsive">
                    <table class="table align-items-center table-flush" id="sampleTable">
                        <thead class="thead-light">
                        <tr >
                            <th scope="col" class="sort" data-sort="budget">{{__('Confirm Delivery')}}</th>
                            <th scope="col" class="sort" data-sort="budget">{{__('ID')}}</th>
                            <th scope="col" class="sort" data-sort="budget">{{__('Order Area')}}</th>
                            <th scope="col" class="sort" data-sort="budget">{{__('Order Rate')}}</th>
                            <th scope="col" class="sort" data-sort="budget">{{__('Order Tax')}}</th>
                            <th scope="col" class="sort" data-sort="budget">{{__('user Name')}}</th>
                            <th scope="col" class="sort" data-sort="budget">{{__('Phone Number')}}</th>
                            <th scope="col" class="sort" data-sort="budget">{{__('Type')}}</th>
                            <th scope="col" class="sort" data-sort="budget">{{__('Weight')}}</th>
                            <th scope="col" class="sort" data-sort="budget">{{__('Within')}}</th>
                            <th scope="col" class="sort" data-sort="budget">{{__('Status')}}</th>
                            <th scope="col" class="sort" data-sort="budget">{{__('Payment Method')}}</th>
                            <th scope="col" class="sort" data-sort="budget">{{__('Total Amount')}}</th>
                            <th scope="col" class="sort" data-sort="budget">{{__('Created at')}}</th>
                            <th scope="col" class="sort" data-sort="completion">{{__('Locations')}}</th>
                            <th scope="col"></th>
                        </tr>
                        </thead>
                        <tbody class="list" id="myTable">
                        @foreach($ordersShipment as $order)
                            <tr id="orderRow{{$order->id}}">
                                <td style="color: green">
                                    @if($order->status == 41)
{{--                                        Confirm Delivery To Warehouse--}}
                                        <form action="{{route("shipment.confirm",$order->id)}}" method="post" id="update{{$order->id}}" style="display: none" data-swal-title="{{__('Confirm Delivery')}}" data-swal-text="{{__('Are Your Sure To Confirm Delivery This Order ?')}}" data-yes="{{__('Yes')}}" data-no="{{__('No')}}" data-success-msg="{{__('the order has been confirmed successfully')}}">@csrf @method("put")</form>
                                        <span href="#" class="control-link btn btn-outline-primary  form-confirm" data-form-id="#update{{$order->id}}"><i class="fa fa-check-circle"></i></span>
                                    @elseif($order->status == 42)
{{--                                        Confirm Delivery By Warehouse--}}
                                        {{__("Delivery Confirmed")}}
                                    @else
                                        <span style="color: red"> {{__("Waiting Driver")}}</span>
                                    @endif
                                </td>
                                <td>{{$order->id}}</td>
                                <td>{{$order->pick_off_place_administrativeArea != null ? $order->pick_off_place_administrativeArea : __("Unknown") }}</td>
                                <td>{{$order->rate}}</td>
                                <td>{{$order->tax}}</td>
                                <td>{{$order->user ? $order->user->name : null }}</td>
                                <td>{{$order->phone_number ?? null}}</td>
                                <td>{{$order->type}}</td>
                                <td>{{$order->weight}}</td>
                                <td>{{$order->within}}</td>
                                <td style="color: green">{{$order->getStatusText()}}</td>
                                <td>{{$order->paymentMethod}}</td>
                                <td>{{$order->total}}</td>
                                <td>{{$order->created_at}}</td>
                                <td id="ignorStyle">
                                    <button type="button" class="btn btn-outline-default" data-toggle="modal" onclick="getItemOrder({{$order->id}})" data-target="#Orders{{$order->id}}">
                                        <i class="fas fa-eye fa-lg"></i>
                                    </button>
                                    <!-- Modal -->
                                    <div class="modal fade" id="Orders{{$order->id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-lg">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body" id="contentDownload{{$order->id}}">
                                                    <div class="card">
                                                        <div class="card-body">
                                                            <blockquote class="blockquote mb-0">
                                                                <div class="row">
                                                                        <div class="col-12">
                                                                            <div class="card">
                                                                                <div class="card-body">
                                                                                    <footer class="blockquote-footer">{{__('Pick Up Address')}}</footer><br>
                                                                                    <iframe
                                                                                        id="map"
                                                                                        allowfullscreen
                                                                                        src="https://www.google.com/maps/embed/v1/place?key={{env("GOOGLE_API_KEY")}}&q={{$order->lat_pick_up}},{{$order->long_pick_up}}">
                                                                                    </iframe>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-12">
                                                                        <div class="card">
                                                                            <div class="card-body">
                                                                                <footer class="blockquote-footer">{{__('Drop Off Address')}}</footer><br>
                                                                                <iframe
                                                                                    id="map"
                                                                                    allowfullscreen
                                                                                    src="https://www.google.com/maps/embed/v1/place?key={{env("GOOGLE_API_KEY")}}&q={{$order->lat_drop_off}},{{$order->long_drop_off}}">
                                                                                </iframe>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </blockquote>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('Close')}}</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                    {{ $ordersShipment->links() }}
                </div>
            </div>
        </div>
    </div>
    <!-- Dark table -->
@endsection
@section('js-scripts')
    <script>
        import {App} from "../../../../public/js/app";
        $("#FilterButton").on("click", function (){
            let  url = $(this).data("url"),
                Stat = $("#Stat").val(),
                startDate =$('#start-date').val(),
                endDate = $('#end-date').val()

            url = ((Stat && startDate && endDate) ? `${url}/${Stat}/${startDate}/${endDate}` : ((startDate && endDate) ? `${url}/all/${startDate}/${endDate}` : ((Stat && endDate) ? `${url}/${Stat}/none/${endDate}`: (Stat ? `${url}/${Stat}` : (startDate ? `${url}/all/${startDate}` : (startDate && Stat ? `${url}/${Stat}/${startDate}` : url) ) ))));
            window.location = url
        });
        export default {
            components: {App}
        }
    </script>


    <script>
        function getOrdersByAdministrativeArea(select){
            {{--console.log()--}}
            let area = $(select).val(), url = $(select).data("url");
            let input_search = $("#input_search").val(area)
            $("#form_search").submit()
            console.log("Yessss");
        }
    </script>
@endsection