@extends('pages.admin.layout')

@section('content')
<!-- Main content -->
<section class="content mainPage">


    <h2 class="content-heading d-print-none mt-0 pt-0">
        All Orders
    </h2>
    <div class="block py-3 px-3">
        <div class="box-header">
            @if(isset($success))
            <div class="col-12">
                <div class="alert alert-solid-success">We have successfully marked your order as: {{$success}}</div>
            </div>
            @endif
            <!--

            <form method="get" class="row">

                <div class="col-4">
                    <div class="form-inline form-group">
                        <input type="text" name="search" placeholder="Enter search term"
                               value="{{ request('search') }}" class="form-control">
                        <button type="submit" class="btn btn-xs">Search</button>
                    </div>
                </div>

                <div class="col-4">
                    @if(env('IS_MIN_ONLINE') == 0)
                    <a href="?markPicking=1" class="btn btn-info">Mark as Picking</a>
                    <a href="?markCompleted=1" class="btn btn-success">Mark as Completed</a>
                    @endif
                </div>
                <div class="col-4">
                    <div class="text-right mb-4">
                        <a href="?unpaid=1" class="btn-danger btn mb-1">View Unpaid Orders</a>
                        @if(env('IS_MIN_ONLINE') == 0)
                        <a href="?edibleOrders=1" class="btn-info btn mb-1">View Edible Orders</a>
                        @endif
                        <a href="?minOrders=1" class="btn-warning btn mb-1">View MIN Orders</a>
                        <br>
                        <a href="?highdemand=1" class="btn-info btn">High Demand</a>
                        <a href="?thisweek=1" class="btn-success btn">This Week</a>
                        <a href="?delivering=1" class="btn-success btn">Delivering / Collecting</a>
                        <a href="?paid=1" class="btn-success btn">Paid</a>
                        <a href="?all=1" class="btn-info btn">All Orders</a>
                    </div>
                </div>
            </form>-->
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            <div class="row">
                <div class="col-7">
                    <h3>Orders (Count: <span id="orderCount"></span> - Total: &pound;<span class="orderTotal"
                                                                                           id="orderTotal"></span>)</h3>
                </div>
                <div class="col-5">
                    <div class="row">

                        <div class="col-6">
                            @php
                            $now = \Carbon\Carbon::now();
                            if($now->format('l') !== "Tuesday")
                            $now = \Carbon\Carbon::parse('next tuesday');
                            $currentWeek = App\OrderAvailablity::where("week_year",
                            $now->weekOfYear.$now->year)->first();
                            @endphp
                            <select name="weekID" id="weekID" class="form-control pull-left">
                                <option value="{{$currentWeek->id}}" selected>{{str_replace("Delivery/Collection on",
                                    "Delivery: ", $currentWeek->title)}}
                                </option>
                                @foreach(App\OrderAvailablity::where("id", "!=",
                                $currentWeek->id)->where("end_date","<=",
                                $currentWeek->end_date)->orderBy("end_date", "desc")->get() as $week)
                                <option value="{{$week->id}}">{{str_replace("Delivery/Collection on", "Delivery: ",
                                    $week->title)}}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-6">
                            <select name="statusType" id="statusType" class="form-control  pull-right d-inline-block">
                                <option value="" selected>Filter by Order Type</option>
                                <option value="unpaid">Unpaid</option>
                                <option value="highdemand">High Demand</option>
                                <option value="paid">Paid</option>
                                <option value="picking">Picking</option>
                                <option value="delivering">Delivering</option>
                                <option value="collection">Collection</option>
                                <option value="completed">Completed</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <table id="productsTable" class="table table-bordered table-hover  table-vcenter  js-dataTable-ful"
                   data-page-length="50" data-order="[[ 0, &quot;desc&quot; ]]">
                <thead class="thead-light">
                <tr>
                    <th>Invoice ID</th>
                    <th>Type</th>
                    <th>Customer Name</th>
                    <th>Order Details</th>
                    <th>Self Isolation</th>
                    <th>Status</th>
                    <th>Total</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                @if($orders && count($orders) > 0)
                @foreach($orders as $order)
                @php $carbon = new Carbon\Carbon($order->created_at); @endphp
                <tr>
                    <td>{{ $order->id }}</td>
                    <td>{{ ($order->IsEdible == '1') ? 'Edible16' : 'MINOnline'}}</td>
                    <td><h6 style="margin-bottom: 5px;">{{$order->DeliveryFirstName}} {{$order->DeliveryLastName}},</h6>

                        @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 data-search="{{$order->WeekID}}">
                        <div class="date">Ordered: {{$carbon->format('l jS F Y @ h:i:s A')}}</div>
                        @if($order->DeliveryNotes)
                        <div class="notesTaken" style="    max-width: 300px;
    background: #dadada;
    color: black;
    padding: 10px;"><strong>Notes:</strong> {{$order->DeliveryNotes}}
                        </div>
                        @endif
                    </td>
                    <td>@if($order->SelfIsolating)
                        <div class="alert alert-danger">YES - SELF ISOLATION</div>
                        @else
                        <div class="alert alert-success">NO</div>

                        @endif
                    </td>
                    <td>@if($order->status == "0")
                        <div class="alert alert-danger">UNPAID</div>
                        @else
                        @if($order->status == "paid")
                        <div class="alert alert-info">{{strtoupper($order->status)}}</div>
                        @elseif($order->status == "picking")
                        <div class="alert alert-info">{{strtoupper($order->status)}}</div>
                        @elseif($order->status == "picked")
                        <div class="alert alert-warning">DELIVERING</div>
                        @elseif($order->status == "completed")
                        <div class="alert alert-success">{{strtoupper($order->status)}}</div>
                        @else
                        <div class="alert alert-success">{{strtoupper($order->status)}}</div>
                        @endif
                        @endif
                        @if($order->DriveryID != null)
                            @php $driver = App\Drivers::where("id",$order->DriveryID)->first(); @endphp
                            @if($driver)
                            <div class="badge badge-info"><i class="fa fa-user mr-5"></i> <label for="name">{{$driver->name}}</label></div>
                            @endif
                        @endif
                    </td>
                    <td>&pound;{{ number_format( $order->total, 2)}}</td>
                    <td>    <a class="btn btn-success mb-2 mr-2" href="{{ route('admin.orders.edit', $order->getKey()) }}">
                                    <i class="fa fa-fw fa-eye mr-5"></i>View
                                </a><div class="btn-group" role="group">
                            <button type="button" class="btn btn-secondary dropdown-toggle mb-2" id="btnGroupDrop12"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Status
                            </button>
                            <div class="dropdown-menu" aria-labelledby="btnGroupDrop12">


                            <a class="dropdown-item" href="/admin/orders/{{$order->id}}/paid">
                                <i class="fa fa-fw fa-money mr-5"></i> Mark as Paid
                            </a>

                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="/admin/orders/{{$order->id}}/picking">
                                <i class="fa fa-fw fa-box mr-5"></i>Picking Order
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="/admin/orders/{{$order->id}}/picked">
                                <i class="far fa-fw fa-envelope mr-5"></i>Ready for Delivery
                            </a>

                            <a class="dropdown-item" href="/admin/orders/{{$order->id}}/collection">
                                <i class="far fa-fw fa-envelope mr-5"></i>Ready for Collection
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="/admin/orders/{{$order->id}}/remindcustomer">
                                <i class="fa fa-fw fa-recycle mr-5"></i> Remind Customer
                            </a>
                            <div class="dropdown-divider"></div>

                            <a class="dropdown-item" href="/admin/orders/{{$order->id}}/completed">
                                <i class="fa fa-fw fa-check mr-5"></i>Completed
                            </a>
                            </div>
                        </div>
                        <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>View
                                </a>
                                <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="/admin/deliverySlotEmails/{{$order->id}}">
                                <i class="far fa-fw fa-envelope mr-5"></i> Request Payment
                            </a>

                                <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> Print 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
                @endif
                </tbody>
            </table>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">

            @if(env('IS_MIN_ONLINE') == 0)
            <div class="text-right">
                <a href="/admin/emailSupplierReport?type=picking" class="btn btn-secondary">Send Supplier Report
                    Email</a>
                <a href="/admin/supplierPDF?type=picking" class="btn btn-info">Supplier Report</a>
                <a href="/admin/loadOrderReport" class="btn btn-success">Order Report (Picking)</a>
                <div class="mt-1">
                    <a href="/admin/loadDeliveryReport" class="btn btn-primary">Delivery Report (Picking)</a>
                </div>
            </div>
            @endif
        </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="assets/js/plugins/datatables/dataTables.bootstrap4.css">
<script src="assets/js/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="assets/js/plugins/datatables/dataTables.bootstrap4.min.js"></script>
<script>


    $(document).ready(function () {
        var WeekID = localStorage.getItem('WeekID');
        var statusType = localStorage.getItem('statusType');
        if (WeekID) {
            console.log(WeekID);
            $("#weekID").val(WeekID);
        }
        if (statusType) {
            console.log(statusType);
            $("#statusType").val(statusType);
        }


        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);
                printElement(document.getElementById("viewordermodal"));
            });
        })


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();
                $("#orderTotal").text(api.column(6, {search: 'applied'}).data().sum().toFixed(2))
                $("#orderCount").text(api.column(6, {search: 'applied'}).data().length);
            },

            stateSave: true
        })

        // Event listener to the two range filtering inputs to redraw on input
        $('#weekID').change(function () {
            localStorage.setItem('WeekID', $("#weekID option:selected").val());
            table.draw();
        });
        // Event listener to the two range filtering inputs to redraw on input
        $('#statusType').change(function () {
            localStorage.setItem('statusType', $("#statusType option:selected").val());
            table.draw();
        });
    });
    $.fn.dataTable.Api.register('sum()', function () {
        return this.flatten().reduce(function (a, b) {
            if (typeof a === 'string') {
                a = a.replace(/[^\d.-]/g, '') * 1;
            }
            if (typeof b === 'string') {
                b = b.replace(/[^\d.-]/g, '') * 1;
            }

            return a + b;
        }, 0);
    });
    $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
            var statusType = $('#weekID').val();
            var currentType = data[3] || ''; // use data for the age column
            if (statusType == "" || statusType == currentType) {
                console.log(statusType, currentType);
                return true;
            }
            return false;
        }
    );
    $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
            var statusType = $('#statusType').val().toUpperCase();
            var currentType = data[5] || ''; // use data for the age column
            if (statusType == "" || statusType == currentType) {
                return true;
            }
            return false;
        }
    );
</script>
@append