@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">{{__('Create Consignment')}}</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">{{__('Create Consignment Table')}}</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>
    <div style="text-align: right;padding-right: 20px; color: whitesmoke">
        <a class="btn btn-primary" onclick="save(this)" data-url="{{route("consignment.ajax.store")}}" data-href="{{route("shipment.index")}}">
            @method("POST")
            <b> {{__("Save consignment")}} </b>
        </a>
        <form method="GET" action="{{route("ajax.consignment.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">{{__('Create Consignment')}}</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">{{__("Select Driver")}}</label>
                        <select class="form-control"  id="Stat" onchange="setDriver(this)">
                            <option value="">{{__('select driver')}}</option>
                            @foreach($drivers as $driver)
                                <option value="{{$driver->driver_id}}">{{$driver->user->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
{{--                <div class="toggle-flip change-type-user" style="width: 500px">--}}
{{--                    <label>--}}
{{--                        <select id="selectType" class="form-control form-control-sm">--}}
{{--                            <option value="">{{__('Select Driver')}}</option>--}}
{{--                            <option value="A">{{__('user A')}}</option>--}}
{{--                            <option value="B">{{__('user B')}}</option>--}}
{{--                        </select>--}}
{{--                    </label>--}}
{{--                </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">{{__('Selection')}}</th>
                            <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>
                                    <input type="checkbox" id="checkbox{{$order->id}}" value="{{$order->id}}" onchange="consignmentAction(this,{{$order->id}})">
                                </td>
                                <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}}</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" 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>

        //TODO delete local storage on success AJAX
        var warning = true;
        if(window.localStorage.getItem("consignment") == null){
            console.log("consignment null but ... ")
            var data ={
                "driverId":null,
                "consignmentIds":[]
            }
            window.localStorage.setItem("consignment",JSON.stringify(data))
            console.log("consignment created ... ")
        }else {
            console.log("consignment Exists")
            let consignments =window.localStorage.getItem("consignment")
            consignments = JSON.parse(consignments);
            if(consignments.consignmentIds.length > 0){
                console.log("Entered")
                consignments.consignmentIds.forEach(function (id){
                    $("#checkbox"+ id).prop("checked",true)
                })
            }
            console.log(consignments)
        }

        var consignment =window.localStorage.getItem("consignment")
        consignment = JSON.parse(consignment);

        function consignmentAction(checkbox,orderId){
            if ($(checkbox).is(":checked")){
                if(!consignment.consignmentIds.includes(orderId)){
                    consignment.consignmentIds.push(orderId)
                    setLocalStorage("consignment",consignment)
                }
            }else{
                if(consignment.consignmentIds.includes(orderId)) {
                    let indexOfId = consignment.consignmentIds.indexOf(orderId)
                    consignment.consignmentIds.splice(indexOfId,1)
                    setLocalStorage("consignment",consignment)
                }
            }
        }

        function setDriver(driver){
            driver = $(driver).val() === ""? null : $(driver).val();
            consignment.driverId = driver;
            setLocalStorage("consignment",consignment)
        }

        function setLocalStorage(key,consignment){
            window.localStorage.setItem(key,JSON.stringify(consignment))
        }

        function save(submit){
            warning= false;
            let url = $(submit).data("url"),href= $(submit).data("href");
            if(consignment.consignmentIds.length > 0){
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    type: "POST",
                    url:url,
                    data:consignment,
                    success:function (response){
                        if(response.success === 1){
                            console.log(response)
                            window.localStorage.removeItem("consignment")
                            window.location.replace(href)
                        }else {
                            alert("Error ... ")
                        }

                    },
                    error:function (){
                        alert("Error ... ")
                    }
                })
            }else {
                alert("Please chose order to create consignment! ...")
            }

        }

        $(window).bind('beforeunload', function(){
            if (consignment.consignmentIds.length > 0)
                if(warning)
                    return 'Are you sure you want to leave?';
        });

        $(window).on('unload', function(e) {
            window.localStorage.removeItem("consignment")
        });
    </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