@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.update")}}" data-href="{{route("consignment.index")}}">
            @method("POST")
            <b> {{__("Save update")}} </b>
        </a>
    </div>
    <br>

    <div class="row">
        <div class="col">
            <div class="card">
                <!-- Card header -->
                <div>
                    <h3 class="mb-0 ml-4 mt-4">{{__('Update Consignment')}}</h3><br>
                </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>
                <br>
                <!-- 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>

    <input type="hidden" id="consignment_driver" value="{{$consignment_driver}}">

    @foreach($consignments_order as $value)
        <input type="hidden" class="consignments_order" name="consignments_order[]" value="{{$value}}">
    @endforeach

    <!-- 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>
        var hrefVariable =new URLSearchParams(window.location.search)

        //TODO delete local storage on success AJAX
        var warning = true;
        if(window.localStorage.getItem("consignmentEdit") == null){
            console.log("consignmentEdit null but ... ")

            var values = $("input[name^='consignments_order']").map(function (idx, ele) {
                return +$(ele).val();
            }).get(), consignmentDriver= $("#consignment_driver").val()

            var data ={
                "driverId":consignmentDriver,
                "consignmentIds":values
            }
            window.localStorage.setItem("consignmentEdit",JSON.stringify(data))

            data.consignmentIds.forEach(function (id){
                $("#checkbox"+ id).prop("checked",true)
            })

            console.log("consignmentEdit created ... ")
        }else {
            console.log("consignmentEdit Exists")
            let consignments =window.localStorage.getItem("consignmentEdit")
            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("consignmentEdit")
        consignment = JSON.parse(consignment);

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

        function setDriver(driver){
            driver = $(driver).val() === ""? null : $(driver).val();
            consignment.driverId = driver;
            setLocalStorage("consignmentEdit",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){
                consignment.before = values;
                consignment.id = hrefVariable.get("id");

                $.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("consignmentEdit")
                            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("consignmentEdit")
        });
    </script>
@endsection