@extends('pages.admin.layout')

@section('content')

<style type="text/css">
    .accountBalance {
        font-size: 24pt;
        letter-spacing: 3pt;
        margin-bottom: 14px;
        background: #f2f4f6;
        color: #17b834;
        border-radius: 10px;
        padding: 10px;
        display: block;
        float: none;
        clear: both;
        max-width: 225px;
    }

    td.sorting_1 .badge {
    font-size: 14pt;
    padding: 10px 14px;
    text-align: center;
    margin: 0 auto;
    display: block;
    width: auto;
}
</style>
<!-- Main content -->
<section class="content">

    <h2 class="content-heading d-print-none mt-0 pt-0">
        Deliveries
    </h2>

    <div class="az-content-body az-contact-info-body">
        <div class="card card-invoice">
            <div class="card-body pt-15">
                <div class="row">
                    <div class="col-6"><h3>Total orders: <strong class="text-success">{{$orders->count()}}</strong></h3>
                        @if(count($excludes) > 0) <h4>Excluding: <strong>{{implode(", ", $excludes)}}</strong></h4>
                        @endif
                    </div>

                    <div class="col-6">

                        <div class="button-group pull-right float-right">
                            <div class="dropdown">
                                <button type="button" class="btn btn-info dropdown-toggle mb-1"
                                        data-toggle="dropdown"><span
                                            class="fa fa-cog"></span> Exclude Items <span class="caret"></span></button>
                                <form action="/admin/delivery/assignDrivers" method="GET">
                                    {{ method_field('get') }}
                                    @csrf
                                    <ul class="dropdown-menu">

                                        <li><input name="items[Milk]" id="item_Milk" type="checkbox" @if($items["Milk"])
                                            checked="checked" @endif />&nbsp;
                                            <label for="item_Milk">Milk</label></li>
                                        <li><input name="items[Eggs]" id="item_Eggs" type="checkbox" @if($items["Eggs"])
                                            checked="checked" @endif />&nbsp;
                                            <label for="item_Eggs">Eggs</label></li>
                                        <li><input name="items[Ice]" id="item_Ice" type="checkbox" @if($items["Ice"])
                                            checked="checked" @endif />&nbsp;
                                            <label for="item_Ice">Ice Cream</label></li>
                                        <li><input name="items[Bread]" id="item_Bread" type="checkbox" @if($items["Bread"])
                                            checked="checked" @endif />&nbsp;
                                            <label for="item_Bread">Bread</label></li>
                                        <li><input name="items[Farrenheight]" id="item_Farrenheight" type="checkbox"
                                                   @if($items["Farrenheight"]) checked="checked" @endif />&nbsp;
                                            <label for="item_Farrenheight">Farrenheight</label></li>
                                        <li><input name="items[Hambleton]" id="item_Hambleton" type="checkbox"
                                                   @if($items["Hambleton"]) checked="checked" @endif />&nbsp;
                                            <label for="item_Hambleton">Hambleton</label></li>
                                        <li><input name="items[Wesse]" id="item_Wesse" type="checkbox"
                                                   @if($items["Wesse"]) checked="checked" @endif />&nbsp;
                                            <label for="item_Wesse">Wesse</label></li>


                                        <li>
                                            <button class="btn btn-sm btn-success btn-block" type="submit">Filter
                                            </button>
                                        </li>
                                    </ul>
                                </form>
                            </div>
                        </div>
                    </div>


                    <div class="col-12">
                        <div class="card">
                            <div class="card-header bg-info text-white">Orders
                            </div>
                            <div class="card-header">

                                <div class="table-report">
                                    @if($orders->count())
                                    <table id="productsTable"
                                           class="table table-bordered table-hover  table-vcenter  js-dataTable-ful"
                                           data-order="[[ 5, &quot;desc&quot; ]]"
                                           data-page-length="50">
                                        <thead class="thead-light">
                                        <tr>
                                            <th>Order ID</th>
                                            <th>Name</th>
                                            <th>Status</th>
                                            <th>Address</th>
                                            <th>Picker</th>
                                            <th>Driver</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($orders as $order)
                                        <tr class="@if($order->DriveryID == null) bg-danger-light
                                            @else bg-success-light
                                            @endif">
                                            <td>
                                <a href="javascript:void(0)" data-toggle="modal" data-target="#viewordermodal"
                                   data-orderID="{{$order->id}}">{{$order->id}}</a></td>
                                            <td><a href="/admin/customers/{{$order->user_id}}/edit" target="_blank">{{$order->DeliveryFirstName}}
                                                    {{$order->DeliveryLastName}}</a></td>
                                            <td>

                                                @if($order->DeliveryAddressLine1)
                                                <div class="addressLine">{{$order->DeliveryAddressLine1}},</div>
                                                @endif
                                                @if($order->DeliveryAddressLine2)
                                                <div class="addressLine">{{$order->DeliveryAddressLine2}},</div>
                                                @endif
                                                @if($order->DeliveryAddressLine3)
                                                <div class="addressLine">{{$order->DeliveryAddressLine3}},</div>
                                                @endif
                                                @if($order->DeliveryCity)
                                                <div class="addressLine">{{$order->DeliveryCity}},</div>
                                                @endif
                                                @if($order->DeliveryCounty)
                                                <div class="addressLine">{{$order->DeliveryCounty}},</div>
                                                @endif
                                                @if($order->DeliveryPostcode)
                                                <div class="addressLine">{{$order->DeliveryPostcode}}</div>
                                                @endif
                                            </td>
                                            <td class="order_{{$order->id}}_status">@if($order->status == "0")
                    <div class="badge badge-danger">UNPAID</div>
                    @else
                    @if($order->status == "paid")
                    <div class="badge badge-info">{{strtoupper($order->status)}}</div>
                    @elseif($order->status == "picking")
                    <div class="badge badge-info">{{strtoupper($order->status)}}</div>
                    @elseif($order->status == "picked")
                    <div class="badge badge-warning">{{strtoupper($order->status)}}</div>
                    @elseif($order->status == "completed")
                    <div class="badge badge-success">{{strtoupper($order->status)}}</div>
                    @elseif($order->status == "ReadyForPicking")
                    <div class="badge badge-success">{{strtoupper('Ready for Picking')}}</div>
                    @else
                    <div class="badge badge-success">{{strtoupper($order->status)}}</div>
                    @endif
                    @endif
                                            </td>
                                            <td>
                                                <select name="deliveryPicker_{{$order->id}}" orderID="{{$order->id}}"
                                                        id="deliveryPicker_{{$order->id}}"
                                                        class="deliveryPicker form-control">
                                                    <option value="">Select a picker</option>
                                                    @foreach(App\Drivers::orderby("name", "asc")->get() as $driver)
                                                    <option value="{{$driver->id}}" @if($driver->id ==
                                                        $order->PickerID) selected="selected" @endif>{{$driver->name}}
                                                        ({{$driver->telephone}})
                                                    </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td data-order="{{$order->LocationID ?? '-1' }}">
                                                @if($order->LocationID == null)
                                                <select name="deliveryDriver_{{$order->id}}" orderID="{{$order->id}}"
                                                        id="deliveryDriver_{{$order->id}}"
                                                        class="deliveryDriver form-control">
                                                    <option value="">Select a driver</option>
                                                    @foreach(App\Drivers::orderby("name", "asc")->get() as $driver)
                                                    <option value="{{$driver->id}}" @if($driver->id ==
                                                        $order->DriveryID) selected="selected" @endif>{{$driver->name}}
                                                        ({{$driver->telephone}})
                                                    </option>
                                                    @endforeach
                                                </select>
                                                @else
                                                <label for="#" class="badge badge-info" style="font-size: 16pt;">Collection
                                                    Order</label>
                                                @endif
                                            </td>
                                        </tr>
                                        @endforeach
                                        </tbody>

                                    </table>
                                    @else
                                    <div class="alert alert-info">You need to add a driver below to be able to use them
                                        for
                                        Deliveries
                                    </div>
                                    @endif
                                </div>

                            </div>
                            <div class="card-footer">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="modal" tabindex="-1" role="dialog" id="viewordermodal">
    <div class="modal-dialog modal-lg" role="document" style="max-width: 1080px; width: 100%">
        <div class="modal-content">
            <h3>Loading Order - Please Wait</h3>
        </div>
    </div>
</div>
@endsection
@section('scripts')

<style>
    .dataTables_filter input.form-control.form-control-sm {
        font-size: 18pt;
    }

    @media screen {
        #printSection {
            display: none;
        }
    }

    @media print {
        section.mainPage {
            visibility: hidden;
            display: none;
        }

        #printSection, #printSection * {
            visibility: visible;
        }

        #printSection {
            position: absolute;
            left: 0;
            top: 0;
        }
    }


</style>

<link rel="stylesheet" href="/admin/assets/js/plugins/datatables/dataTables.bootstrap4.css">
<script src="/admin/assets/js/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/admin/assets/js/plugins/datatables/dataTables.bootstrap4.min.js"></script>
<script>


    $(document).ready(function () {


        jQuery('#viewordermodal').on('show.bs.modal', function (e) {
            $("#viewordermodal .modal-content").html('<h5 class="text-center p-20 text-success" style="padding: 20px;" ng - Please wait</h5>')
        });

        jQuery('#viewordermodal').on('shown.bs.modal', function (e) {
            var rowid = $(e.relatedTarget).attr('data-orderid');


            $.ajax({
                url: '/admin/orders/' + rowid + '/edit?print=1',
                type: 'GET',
                processData: false,
                error: function (jq, status, message) {
                    $("#viewordermodal").modal("hide");
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            }).then((htmlResponse) => {
                $("#viewordermodal .modal-content").html(htmlResponse);
            });
        })


        function printElement(elem) {
            var domClone = elem.cloneNode(true);

            var $printSection = document.getElementById("printSection");

            if (!$printSection) {
                var $printSection = document.createElement("div");
                $printSection.id = "printSection";
                document.body.appendChild($printSection);
            }

            $printSection.innerHTML = "";
            $printSection.appendChild(domClone);
            window.print();
        }

        $(document).on("click", ".PrintOrder", (ev) => {
            console.log(ev.target);
            console.log($(ev.target).data("orderid"));
        })


        let table = $('#productsTable').DataTable({
            drawCallback: function () {
                var api = this.api();
            },

            stateSave: true
        })

    });
</script>
<script>
    $(document).ready(function() {
        $(document).on("change", ".deliveryPicker", (res) => {
            console.log(res);
            let driverID = $(res.target).val();
            let orderID = $(res.target).attr('orderID')
            let name = $(res.target).children("option:selected").text()
            console.log(driverID, orderID)
            $.ajax({
                method: 'GET',
                url: "/admin/delivery/assign_picker/" + orderID + "/" + driverID,
                success: (res) => {
                    console.log(res)
                    let status = '';
                    if(res.status == 'paid')
                        status = 'Paid';
                    if(res.status == 'picking')
                        status = 'Picking';
                    if(res.status == 'picked')
                        status = 'Picked';
                    if(res.status == 'ReadyForPicking')
                        status = 'Ready For Picking';
                    if(res.status == 'ReadyForDelivery')
                        status = 'Ready For Delivery';
                    if(res.status == 'OutForDelivery')
                        status = 'Out For Delivery';
                    if(res.status == 'OnRoute')
                        status = 'On Route';
                    if(res.status == 'Completed')
                        status = 'Completed';

                    $(".order_" + res.id + "_status .badge").text(status)

                    swal("Order ID: " + orderID + " - picker changed to: " + name, {
                        icon: "success",
                    });
                }, error: (res) => {
                    swal("Could not update the picker for order: " + orderID, {
                        icon: 'error'
                    })
                }
            })
        })
        $(document).on("change", ".deliveryDriver", (res) => {
            console.log(res);
            let driverID = $(res.target).val();
            let orderID = $(res.target).attr('orderID')
            let name = $(res.target).children("option:selected").text()
            console.log(driverID, orderID)
            $.ajax({
                method: 'GET',
                url: "/admin/delivery/assign_driver/" + orderID + "/" + driverID,
                success: (res) => {
                    console.log(res)
                    swal("Order ID: " + orderID + " - driver changed to: " + name, {
                        icon: "success",
                    });
                }, error: (res) => {
                    swal("Could not update the driver for order: " + orderID, {
                        icon: 'error'
                    })
                }
            })
        })
    })
</script>

@endsection