@extends('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><br>
                </div>
            </div>
        </div>
    </div>

    <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>
                <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">{{__('ID')}}</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>{{$order->id}}</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 == 1 ? 'City' : 'City-City'}}</td>
                                <td>{{$order->weight}}</td>
                                <td>{{$order->within}}</td>
                                <td>{{$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"  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>
                                                                                    {{-- {{dd(env("GOOGLE_API_KEY"))}} --}}
                                                                                    <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>
        $("#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
        });
    </script>
@endsection