@extends('pages.admin.layout')

@section('content')
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-6">
                <h2 class="content-heading d-print-none mt-0 pt-0">
                    Click N Collect Manager
                </h2>
            </div>
            <div class="col-6 text-right">
                <a href="?past=1" class="btn btn-info">Past Orders</a>
                <a href="/admin/clickcollect" class="btn btn-info">Future</a>
            </div>
        </div>
        <div class="block py-3 px-3">
            <div class="box-header">

            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="row">
                    <div class="col-12">
                        @if($orderdates->count())
                            @foreach($orderdates as $date => $orders)
                                <div class="card mb-2">
                                    <div class="card-header bg-info text-white h4 mb-0">{{\Carbon\Carbon::parse($date . " 09:00:00")->format("l jS F Y")}}
                                        <a href="/admin/collectsupplierPDF?date={{$date}}" class="pull-right float-right btn btn-primary">Supplier Report</a>
                                    </div>
                                    <div class="card-body p-0">

                                        <div class="table-report">

                                            <div class="collectionOrder">
                                                <div class="ordersContain">

                                                    <table class="table table-striped table-vcenter mb-0"
                                                           id="orderReport">
                                                        <thead class="thead-light">
                                                        <tr>
                                                            <th>Order ID</th>
                                                            <th>Name</th>
                                                            <th>Type</th>
                                                            <th>Instant (Next Day)</th>
                                                            <th>Status</th>
                                                            <th>Value</th>
                                                            <th>Actions</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        @foreach($orders as $order)
                                                            <tr class="@if($order->LocationID == null) bg-success-light
                                            @elseif($order->LocationID == 5) bg-info-light
                                            @elseif($order->LocationID == 6) bg-warning-light
                                            @endif">
                                                                <td><a href="/admin/orders/{{$order->id}}/edit"
                                                                       target="_blank">{{$order->id}}</a></td>
                                                                <td><a href="/admin/customers/{{$order->user_id}}/edit"
                                                                       target="_blank">{{$order->DeliveryFirstName}}
                                                                        {{$order->DeliveryLastName}}</a></td>
                                                                <td>@if($order->LocationID == null)
                                                                        Delivery: {{$order->DeliveryPostcode}}
                                                                    @elseif($order->LocationID == 5) Collection:
                                                                        Waterloo
                                                                    @elseif($order->LocationID == 6) Collection:
                                                                        EcoVillage
                                                                    @endif
                                                                </td>
                                                                <td>@if($order->NextDayCollect)
                                                                        <label for=""
                                                                               class="label bg-success color-dark btn btn-success">Instant</label>
                                                                    @else
                                                                        <label for=""
                                                                               class="bg-warning label btn btn-warning text-black">Requires
                                                                            Supplier</label>
                                                                    @endif
                                                                </td>
                                                                <td>
                                                                    @if($order->status == '0')
                                                                        Unpaid / Failed Payment
                                                                    @elseif($order->status == 'cancelled')
                                                                        Declined Order
                                                                    @elseif($order->status == 'LostSlot')
                                                                        Lost Slot (Requires new order)
                                                                    @elseif($order->status == 'HIGHDEMAND')
                                                                        Backup Orders (High Demand)
                                                                    @else
                                                                        {{ucfirst($order->status)}}
                                                                    @endif
                                                                </td>
                                                                <td>&pound;{{number_format($order->total, 2)}}</td>
                                                                <td>
                                                                    <div class="btn-group" role="group">
                                                                        <button type="button"
                                                                                class="btn btn-primary dropdown-toggle"
                                                                                id="btnGroupDrop1"
                                                                                data-toggle="dropdown"
                                                                                aria-haspopup="true"
                                                                                aria-expanded="false">Actions
                                                                        </button>
                                                                        <div class="dropdown-menu"
                                                                             aria-labelledby="btnGroupDrop1">
                                                                            <a class="dropdown-item"
                                                                               href="{{ route('admin.orders.edit', $order->getKey()) }}">
                                                                                <i class="fa fa-fw fa-eye mr-5"></i>Open
                                                                                Order
                                                                            </a>
                                                                            <div class="dropdown-divider"></div>
                                                                            <div class="dropdown-divider"></div>
                                                                            <a href="javascript:void(0)"
                                                                               class="dropdown-item" data-toggle="modal"
                                                                               data-target="#viewordermodal"
                                                                               data-orderID="{{$order->id}}"><i
                                                                                        class="fa fa-print mr-5"></i>
                                                                                Quick View Order</a>
                                                                            <div class="dropdown-divider"></div>
                                                                            <a href="/admin/orders/{{$order->id}}/labelPrint?full=1"
                                                                               target="_blank"
                                                                               class="dropdown-item"><i
                                                                                        class="fa fa-print mr-5"></i>
                                                                                Print Receipt</a>
                                                                            <div class="dropdown-divider"></div>
                                                                            <a href="/admin/orders/{{$order->id}}/labelPrint"
                                                                               target="_blank"
                                                                               class="dropdown-item"><i
                                                                                        class="fa fa-print mr-5"></i>
                                                                                Print Packing Label</a>
                                                                            <div class="dropdown-divider"></div>
                                                                            <a class="dropdown-item"
                                                                               href="{{ route('admin.ordersAdmin.deleteOrder', $order->getKey()) }}">
                                                                                <i class="fa fa-fw fa-trash mr-5"></i>Delete
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                        </tbody>

                                                    </table>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                            @endforeach
                        @else
                            <div class="alert alert-info">No Click and Collect Orders found.
                            </div>
                        @endif
                    </div>
                </div>

            </div>
            <!-- /.box-footer-->
        </div>
        <!-- /.box -->

    </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