@extends('pages.admin.layout')


@section('content')

    @php
        $carbon = new Carbon\Carbon($order->created_at);
        $now = \Carbon\Carbon::now();
        if($now->format('l') !== "Tuesday")
        $now = \Carbon\Carbon::parse('next tuesday');
        $prevWeek = App\OrderAvailablity::where("week_year",
        ($now->weekOfYear).$now->year)->first();
        $selected = $order->WeekID ?? FALSE;
        $currentWeekID = ($selected) ? App\OrderAvailablity::where("id",$selected)->first() : $prevWeek;
        $type = Request::query('type') ?? FALSE;
        $orderArea = $order->OrderArea ?? FALSE;

    @endphp
    <style type="text/css">
        .deliveryAddressDetails.hide {
            display: none;
        }

        .block-content {
            background: white;
            padding: 40px;
        }

        .ChristmasOrder {
            font-size: 13pt;
            background: red;
            color: white;
            padding: 20px;
        }

        .highlightBoxes .block {
            box-shadow: none;
        }

        form#markPayment {
            border: 1px solid #c7c7c7;
            text-align: left;
            padding: 10px;
        }

        span.select2 {
            width: 100% !important;
        }
    </style>
    <!-- Main content -->
    <section class="content">
        <div class="block">
            <div class="block-header block-header-default">
                <div class="row">
                    <div class="col-12">
                        <h1>Invoice #{{$order->id}} - Date:
                            {{$carbon->format('l jS F Y @ h:i:s
                            A')}}</h1>

                    </div>
                    @if($printMode == FALSE)
                        <div class="col-8">

                            <form role="form" enctype="multipart/form-data" method="post" id="formDetails"
                                  action="{{ route('admin.ordersAdmin.modifyOrder', $order->id) }}" autocomplete="nope">
                                {{ method_field('post') }}
                                @csrf
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                           Modify Order
                                        </span>
                                    </div>
                                    <select name="orderArea" id="orderArea" class="form-control form-control-lg">
                                        <option value="Edible16" @if($orderArea==
                                'Edible16') selected="selected" @endif>Area: Edible16
                                        </option>
                                        <option value="Waterloo" @if($orderArea==
                                'Waterloo') selected="selected" @endif>Area: Waterloo Cottage
                                        </option>
                                        <option value="Pearmans" @if($orderArea==
                                'Pearmans') selected="selected" @endif>Area: Pearmans
                                        </option>
                                    </select>
                                    <select name="weekID" id="weekID"
                                            class="form-control form-control-lg pull-left">
                                        @php $newDate = \Carbon\Carbon::parse($prevWeek->end_date)->subDays("21"); @endphp
                                        @foreach(App\OrderAvailablity::where("end_date",">=",$newDate)->orderBy("end_date", "desc")->limit(20)->get()
                                        as $week)
                                            <option value="{{$week->id}}" @if($selected== $week->id) selected="selected"
                                                    @endif >
                                                {{str_replace("Delivery/Collection on", "",
                                                $week->title)}}
                                            </option>
                                        @endforeach
                                    </select>
                                    <div class="input-group-append">
                                        <button type="submit"
                                                class="btn btn-primary btn-lg loadDeliveryCost">Save Changes
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="col-4 text-right">
                            <a class="btn btn-success"
                               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" 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>
                        </div>
                        @if($order->WeekID == 469)
                            <div class="col-8 mt-3">

                                <form role="form" enctype="multipart/form-data" method="post" id="formDetails"
                                      action="{{ route('admin.ordersAdmin.modifyOrder', $order->id) }}"
                                      autocomplete="nope">
                                    {{ method_field('post') }}
                                    @csrf
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                        <span class="input-group-text">
                                           Christmas Order
                                        </span>
                                        </div>
                                        <select name="IsChristmas" id="IsChristmas"
                                                class="form-control form-control-lg">
                                            <option value="1" @if($order->IsChristmas) selected="selected" @endif>
                                                Christmas
                                                Order
                                            </option>
                                            <option value="0" @if(!$order->IsChristmas) selected="selected" @endif>
                                                Weekly
                                                Order
                                            </option>
                                        </select>
                                        <select name="CollectionTime" id="CollectionTime"
                                                class="form-control  form-control-lg pull-left">
                                              <option value="null"
                                                                                @if($order->CollectionTime == null) selected="selected" @endif>
                                                                            Delivery on: Monday 23rd  of December
                                                                        </option>
                                                <option value="31" @if($order->CollectionTime == "31") selected="selected" @endif>Collection on: Saturday 21st of December</option>
                                                <option value="32" @if($order->CollectionTime == "32") selected="selected" @endif>Collection on: Sunday 22nd of December</option>
                                                <option value="33" @if($order->CollectionTime == "33") selected="selected" @endif>Collection on: Monday 23rd of December</option>


                                        </select>
                                        <div class="input-group-append">
                                            <button type="submit"
                                                    class="btn btn-primary btn-lg loadDeliveryCost">Save
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        @endif
                </div>
                @endif
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="row gutters-tiny highlightBoxes">
                    <div class="col-md-6 col-xl-6">
                        <div class="block">
                            <div class="block-content block-content-full">
                                @if($order->IsChristmas)
                                    <div class="font-size-h2 font-w700">
                                        <form role="form" enctype="multipart/form-data" method="post" id="changeDate"
                                              action="{{ route('admin.ordersAdmin.changeDate', $order->id) }}"
                                              autocomplete="nope">
                                            {{ method_field('post') }}
                                            @csrf

                                            <select name="collectionTime" id="collectionTime"
                                                    class="form-control pull-left">

                                                <option value="null"
                                                        @if($order->CollectionTime == null) selected="selected" @endif>Delivery on: Monday 23rd  of December</option>
                        <option value="31" @if($order->CollectionTime == "31") selected="selected" @endif>Collection on: Saturday 21st of December</option>
                        <option value="32" @if($order->CollectionTime == "32") selected="selected" @endif>Collection on: Sunday 22nd of December</option>
                        <option value="33" @if($order->CollectionTime == "33") selected="selected" @endif>Collection on: Monday 23rd of December</option>

                                            </select>

                                            <button type="submit" name="changeDate" class="btn btn-info btn-full mt-5">
                                                Change Date
                                            </button>
                                        </form>

                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-xl-2">
                        <div class="block block-link-shadow">
                            <div class="block-content block-content-full text-right">
                                <div class="font-size-h2 font-w700"> &pound;{{ number_format(($order->total),
                            2) }}</div>
                                <div class="font-size-sm font-w600 text-uppercase text-muted">Order Total</div>
                                          <form role="form" enctype="multipart/form-data" method="post" id="markPayment"
                                          action="{{ route('admin.ordersAdmin.orderTotalChange', $order->id) }}"
                                          autocomplete="nope">
                                        {{ method_field('post') }}
                                        @csrf

                                        <label for="deliveryCost">Order Total</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control"
                                                   id="orderTotalChange" value="{{ number_format(($order->total),
                            2) }}"
                                                   name="orderTotalChange"
                                                   placeholder="0.00">
                                        </div>
                                        <button type="submit" name="markPaid" class="btn btn-info btn-full mt-5">Change Total
                                        </button>
                                    </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-xl-2">
                        <div class="block block-link-shadow">
                            <div class="block-content block-content-full text-right">
                                <div class="font-size-h2 font-w700">
                                    @if($order->AmountRemaning > 0)
                                    &pound;{{ number_format($order->AmountPaid, 2) }}
                                    @else
                                    &pound;{{ number_format($order->total, 2) }}
                                    @endif
                                </div>
                                <div class="font-size-sm font-w600 text-uppercase text-muted">Total Paid</div>
                            </div>
                     </div>
                    </div>
                    <div class="col-md-4 col-xl-2">
                        <div class="block block-link-shadow">
                            <div class="block-content block-content-full text-right">
                                <div class="font-size-h2 font-w700">
                                    &pound;{{ number_format($order->AmountRemaning, 2) }}
                                </div>
                                <div class="font-size-sm font-w600 text-uppercase text-muted">Balance Remaining</div>
                                @if($order->AmountRemaning > 0)
                                    <form role="form" enctype="multipart/form-data" method="post" id="markPayment"
                                          action="{{ route('admin.ordersAdmin.takePaymentOrder', $order->id) }}"
                                          autocomplete="nope">
                                        {{ method_field('post') }}
                                        @csrf

                                        <label for="deliveryCost">Payment Amount</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control"
                                                   id="payToday"
                                                   name="payToday"
                                                   placeholder="0.00">
                                        </div>
                                        <button type="submit" name="markPaid" class="btn btn-info btn-full mt-5">Mark
                                            Payment
                                        </button>
                                    </form>

                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="block-content">

            <div class="row my-20">
                <div class="col-12">
                    @if($order->DiscountCode == "ADMINAPPLIED")
                        <div class="alert alert-info text-center p-30"><h2>PLACED VIA WATERLOO COTTAGE</h2></div>
                    @endif
                </div>
                <div class="col-6">
                    <h1 class="invoice-title">

                            <img src="https://edible16.org.uk/wp-content/uploads/2017/02/weblogo.png" width="160">
                    </h1>
                    <address>

                            <strong>Edible16</strong><br>
                            34 Harborough Rd,<br>Great Oxendon,<br>Market Harborough<br>LE16 8NA

                    </address>
                    <a href="#" class="btn btn-info btn-lg iconButton" data-toggle="modal" data-target="#modifyOrder"
                       data-orderID="{{$order->id}}"><i class="fa fa-edit"></i> Modify Address/Collection</a>
                </div>
                <div class="col-6 text-right">

                    <p class="h3">{{$order->DeliveryFirstName}} {{$order->DeliveryLastName}},</p>
                    <address>
                        @if($order->LocationID == null)
                            @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
                        @else
                            <h4>Collection:<br><strong>@if($order->LocationID == 5) Waterloo Cottage Farm @else
                                        EcoVillage @endif</strong></h4>
                        @endif

                        @if($order->DeliveryMobileNumber)
                            <div class="addressLine">Telephone: <strong>{{$order->DeliveryMobileNumber}}</strong></div>
                        @endif


                        @if($order->status == "paid")
                            <div class="alert alert-solid-info alert-info d-inline-block">{{strtoupper($order->status)}}</div>
                        @else
                            <div class="alert alert-solid-success alert-success d-inline-block">{{strtoupper($order->status)}}</div>
                        @endif
                    </address>
                </div>
            </div>
            <div class="table-responsive push">
                @if($order->status == "0" || $order->status == 'cancelled' || $order->status == 'HIGHDEMAND' ||
                $order->status == 'LostSlot')
                    <div class="alert alert-solid-danger alert-danger">
                        <h2 class="mb-2 text-danger mt-2">Order is UNPAID</h2>
                        <p class="mb-0">To get the customer to pay simply send them to:<br><a
                                    href="https://store.edible16.org.uk/approve-order/{{$order->id}}/{{$order->user_id}}">https://store.edible16.org.uk/approve-order/{{$order->id}}/{{$order->user_id}}</a>
                        </p>
                    </div>
                @endif


                @if($order->DeliveryNotes != '')
                    <div class="alert alert-solid-info alert-info"><h4>Delivery Notes:<br>{{$order->DeliveryNotes}}</h4>
                    </div>
                @endif
                <table class="table table-bordered table-hover">
                    <thead>

                    @if($order->SelfIsolating)
                        <tr>
                            <td colspan="5">
                                <div class="alert alert-danger" style="text-align: center">
                                    <h4 style="margin-bottom:5px; color: red; margin-top: 10px;">Coronavirus
                                        <strong>COVID19</strong> - Self Isolation Notice</h4>
                                    <p>As you have declared you are self isolating. We will contact you prior to
                                        Delivery /
                                        Collection to ensure it is contact-free.</p>
                                </div>
                            </td>
                        </tr>
                    @endif
                    <tr>
                        <th>Supplier</th>
                        <th>Product</th>
                        <th class="text-right" style="width: 120px;">Unit</th>
                        <th class="text-right" style="width: 90px;">Qty</th>
                        <th class="text-right" style="width: 120px;">Amount</th>
                        <th style="width: 100px;">Action</th>
                    </tr>
                    </thead>
                    <tbody>

                    @foreach($order->order_items()->get() as $item)
                        @php
                            $product = $item->product()->withoutGlobalScope('App\Scopes\WebsiteScope')->get()->first();

                        if(!$product) {
                            $product = \App\Product::where("id", $item->product_id)->withoutGlobalScope('App\Scopes\WebsiteScope')->toSQL();
                            continue;
                        }

                        $product_item =
                    $item->product_item()->withoutGlobalScope('App\Scopes\WebsiteScope')->get()->first();
                    $supplier = ($product) ? $product->suppliers()->withoutGlobalScope('App\Scopes\WebsiteScope')->get()[0] : \App\Supplier::get()->first();
                        @endphp

                        <tr class="itemTR">
                            <td>
                                {{ $supplier->name}}
                            </td>
                            <td>
                                {{ $product->name}}
                                @if($product_item)
                                    - {{$product_item->name}}
                                @endif
                            </td>

                            <td class="text-right">
                                &pound;{{ number_format( $item->price, 2)}}
                            </td>
                            <td class="text-right">
                                {{ $item->quantity}}
                            </td>
                            <td class="text-right">
                                &pound;{{ number_format( $item->total, 2)}}
                            </td>
                            <td>
                                <a href="javascript:void(0)" data-toggle="modal" data-target="#editOrderItem"
                                   class="btn btn-sm btn-warning editMode" data-itemid="{{$item->id}}"><i
                                            class="fa fa-pencil"></i></a>
                                <a href="javascript:void(0)" data-truehref="/admin/removeOrderItem/{{$item->id}}"
                                   class="btn btn-sm btn-danger deleteButton"><i class="fa fa-trash"></i></a>
                            </td>
                        </tr>
                    @endforeach
                    <tr>
                        <td colspan="4" class="font-w600 text-right">Subtotal</td>
                        <td class="text-right"><strong>&pound;{{ number_format(($order->total - $order->DeliveryPrice),
                                2)
                                }}</strong></td>
                    </tr>
                    <tr>
                        <td colspan="4" class="font-w600 text-right">Delivery</td>
                        <td class="text-right">&pound;{{ number_format($order->DeliveryPrice, 2) }}</td>
                    </tr>
                    <tr class="table-warning">
                        <td colspan="4" class="font-w700 text-uppercase text-right">Total</td>
                        <td class="font-w700 text-right"> &pound;{{ number_format(($order->total),
                            2) }}
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" class="font-w600 text-right">Paid so far</td>
                        @if($order->AmountRemaning > 0)
                            <td class="text-right">&pound;{{ number_format($order->AmountPaid, 2) }}</td>
                        @else
                            <td class="text-right">&pound;{{ number_format($order->total, 2) }}</td>
                        @endif
                    </tr>
                    <tr>
                        <td colspan="4" class="font-w600 text-right">Balance Remaining</td>
                        <td class="text-right">&pound;{{ number_format($order->AmountRemaning, 2) }}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <h4>Payments</h4>
            <div class="table-responsive push">
                <table class="table table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>Payment ID</th>
                        <th>Method</th>
                        <th>Date Submitted</th>
                        <th>Status</th>
                        <th>Card Details</th>
                        <th class="text-right" style="width: 120px;">Amount</th>
                        <th class="text-right">actions</th>
                    </tr>
                    </thead>
                    <tbody>

                    @foreach($order->payments()->orderby("created_at", "desc")->get() as $payment)
                        @php $carbon = new Carbon\Carbon($payment->created_at);
                        $response = json_decode($payment->details);
                        if($response == false) {
                            $response = $payment->details;
                        } else {
                            $response = $response->StatusDetail;
                        }

                        $color = '';
                        switch(strtoupper($payment->status)) {
                            case 'AUTHORIZE':
                                $color = 'warning';
                                break;
                            case 'FAILED':
                                $color = 'danger';
                                break;
                            case 'SUCCESS':
                                $color = 'success';
                                break;
                            case 'COMPLETED':
                                $color = 'success';
                                break;
                            case 'REFUNDED':
                                $color = 'info';
                                break;
                            default:
                                $color = 'info';
                                break;
                        }

                        @endphp
                        <tr class="itemTR">
                            <td>
                                {{ $payment->id}}
                            </td>
                            <td>
                                {{ strtoupper($payment->method) }}
                            </td>
                            <td>{{$carbon->format('l jS F Y @ h:i:s A')}}</td>
                            <td>
                                {{ strtoupper($payment->status) }}
                                <div class="alert alert-{{$color}}">{{$response}}</div>
                            </td>
                            <td>
                                {{ $payment->CardDetails}}
                            </td>
                            <td class="text-right">
                                &pound;{{ number_format( $payment->amount, 2)}}
                            </td>
                            <td class="text-right">
                                <button class="btn btn-disabled disabled btn-info" disabled="disabled">Refund</button>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        </div>

    </section>
    <!-- Modal -->
    <div class="modal fade" id="editOrderItem" tabindex="-1" role="dialog" aria-labelledby="editOrderItem"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="productOptions">Edit Order Item</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="existingItem">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>Supplier</th>
                                <th>Product</th>
                                <th>Item</th>
                                <th>Price</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td class="itemSupplier"></td>
                                <td class="itemProduct"></td>
                                <td class="itemDetails"></td>
                                <td class="itemPrice"></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="addNew">
                        <div class="mb-3">
                            <label for="Suppluer">Supplier</label>
                            <select name="Delivery[deliveryId][supplierId]" id="supplier_0"
                                    class="form-control select2 supplierSelect">
                                <option value="">Loading</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="">Product</label>
                            <select name="Delivery[deliveryId][productId]" id="product_0"
                                    class="form-control select2 productSelect">
                                <option value="">Loading</option>
                            </select>
                        </div>
                        <div>
                            <label for="Ite">Item</label>
                            <select name="Delivery[deliveryId][productItemId]" id="productItem_0"
                                    class="form-control select2 productItemSelect">
                                <option value="">Loading</option>
                            </select>
                        </div>
                        <div class="row mt-3">
                            <div class="col-4">QTY</div>
                            <div class="col-8">
                                <input type="number" class="form-control" id="stockLevel_0"
                                       name="Delivery[deliveryId][stockLevel]" min="1" max="99999"
                                       value="1">
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-4">Item Price</div>
                            <div class="col-8">
                                <input type="number" class="form-control editPriceItem" id="editPriceItem"
                                       name="Delivery[deliveryId][itemPrice]" min="1" max="99999">
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-4">Total</div>
                            <div class="col-8">
                                <input type="number" class="form-control totalPriceItem" id="totalPriceItem"
                                       name="Delivery[deliveryId][totalPriceItem]" min="1" max="99999"
                                       value="1">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="javascript:void(0)" class="btn btn-success saveOrderItem">Change Order Item</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modifyOrder" tabindex="-1" role="dialog" aria-labelledby="modifyOrder"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="productOptions">Modify Delivery/Collection Information</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="#" method="POST" (submit)="javascript:void(0)" novalidate>
                    <div class="modal-body">
                        <div class="hidden">
                            <input type="hidden" id="order-id" name="order-id" value="{{$order->id}}"/>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="firstname">First Name</label>
                                    <input type="text" class="form-control" name="firstname" id="firstname"
                                           value="{{$order->DeliveryFirstName}}"
                                           placeholder="Enter first name">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="lastname">Last Name</label>
                                    <input type="text" class="form-control" name="lastname" id="lastname"
                                           value="{{$order->DeliveryLastName}}"
                                           placeholder="Enter last name">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="mobile">Mobile Number</label>
                                    <input type="tel" class="form-control" name="mobile" id="mobile"
                                           value="{{$order->DeliveryMobileNumber}}"
                                           placeholder="Enter mobile number">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="email">Email Address</label>
                                    <input type="email" class="form-control" name="email" id="email"
                                           value="{{$order->DeliveryEmail}}"
                                           placeholder="Enter email">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="LocationID">Delivery Type</label>
                                    <select name="LocationID" id="LocationID" class="form-control">
                                        <option value="" @if($order->LocationID == null) selected="selected" @endif
                                        >Delivery
                                        </option>
                                        <option value="5" @if($order->LocationID == 5) selected="selected" @endif>
                                            Waterloo
                                            Cottage Farm (Collection)
                                        </option>
                                        <option value="6" @if($order->LocationID == 6) selected="selected" @endif>
                                            EcoVillage
                                            (Collection)
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 deliveryAddressDetails @if($order->LocationID == null) show @else hide @endif">

                                <div class="form-group">
                                    <label for="DeliveryAddressLine1">Address Line 1</label>
                                    <input type="text" class="form-control" name="DeliveryAddressLine1"
                                           id="DeliveryAddressLine1" value="{{$order->DeliveryAddressLine1}}"
                                           placeholder="Enter Address Line 1">
                                </div>

                                <div class="form-group">
                                    <label for="DeliveryAddressLine2">Address Line 2</label>
                                    <input type="text" class="form-control" name="DeliveryAddressLine2"
                                           id="DeliveryAddressLine2" value="{{$order->DeliveryAddressLine2}}"
                                           placeholder="Enter Address Line 2">
                                </div>
                                <div class="form-group">
                                    <label for="DeliveryAddressLine3">Address Line 3</label>
                                    <input type="text" class="form-control" name="DeliveryAddressLine3"
                                           id="DeliveryAddressLine3" value="{{$order->DeliveryAddressLine3}}"
                                           placeholder="Enter Address Line 3">
                                </div>

                                <div class="form-group">
                                    <label for="DeliveryCity">City / Town</label>
                                    <input type="text" class="form-control" name="DeliveryCity" id="DeliveryCity"
                                           value="{{$order->DeliveryCity}}"
                                           placeholder="Enter City">
                                </div>

                                <div class="form-group">
                                    <label for="DeliveryPostcode">Postcode</label>
                                    <input type="text" class="form-control" name="DeliveryPostcode"
                                           id="DeliveryPostcode" value="{{$order->DeliveryPostcode}}"
                                           placeholder="Enter Postcode">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" id="item-save" class="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        $(function () {
            'use strict'

            $(document).ready(function () {
                $(document).on("change", "#LocationID", (data) => {
                    console.log($(data.target).val());
                    if ($(data.target).val() == "5" || $(data.target).val() == "6") {
                        $(".deliveryAddressDetails").removeClass("hide").addClass("hide");
                    } else {
                        $(".deliveryAddressDetails").removeClass("hide");
                    }
                })


                $(document).on('submit', '#takePayment', function (e) {
                    swal({
                        title: 'Your order is being processed - please wait',
                        closeOnClickOutside: false,
                        allowOutsideClick: false,
                        closeOnEsc: false,
                        icon: 'info',
                        buttons: false,
                        showConfirmButton: false,
                        allowEnterKey: false,
                    });
                });

                $(document).on('click', '.saveOrderItem', function (e) {
                    swal({
                        title: 'Your order is being processed - please wait',
                        closeOnClickOutside: false,
                        allowOutsideClick: false,
                        closeOnEsc: false,
                        icon: 'info',
                        buttons: false,
                        showConfirmButton: false,
                        allowEnterKey: false,
                    });
                    saveOrderItem();
                });


                loadInputs(0);
                var orderItem = false;

                function saveOrderItem() {
                    let method = "PUT";

                    var url = "/admin/orders/{{$order->id}}/updateOrderItem/" + orderItem;

                    var data = {}
                    data.orderid = {{$order->id}};
                    data.orderItem = orderItem;
                    data.supplier = $("#supplier_0").val();
                    data.product_id = $("#product_0").val();
                    data.productitem_id = $("#productItem_0").val();
                    data.price = $(".editPriceItem").val();
                    data.total = $(".totalPriceItem").val();
                    data.quantity = $("#stockLevel_0").val()

                    console.log(data);

                    $.ajax({
                        method: "PUT",
                        data: data,
                        json: true,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: url, success: function (result) {
                            if (result) {
                                 window.location.reload();
                            }
                            console.log(result);

                        }

                    });
                }

                $("#editOrderItem").on("shown.bs.modal", function (event) {
                    var button = $(event.relatedTarget) // Button that triggered the modal
                    var itemid = button.data('itemid') // Extract info from data-* attributes
                    orderItem = itemid;
                    var url = "/admin/getOrderItem/" + itemid;
                    $.ajax({
                        method: "GET",
                        url: url,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (result) {
                            if (result && result.product) {
                                $(".itemSupplier").text(result.supplier.name)
                                $(".itemProduct").text(result.product.name)
                                $(".itemDetails").text(result.product_item.name)
                                $(".itemPrice").text(result.price + " x " + result.quantity + " = " + result.total)
                            } else {
                                $("#editOrderItem").modal("closed");
                                swal("Could not find the Product from the original Order - please delete this Item")
                            }
                        }
                    });
                })

                $(document).on('click', '#item-save', function (e) {
                    e.preventDefault();

                    var data = {
                        'DeliveryFirstName': $("#firstname").val(),
                        'DeliveryLastName': $("#lastname").val(),
                        'DeliveryMobileNumber': $("#mobile").val(),
                        'DeliveryEmail': $("#email").val(),
                        'LocationID': $("#LocationID").val()
                    };

                    if ($("#LocationID").val() == '') {
                        data.AddressLine1 = $("#DeliveryAddressLine1").val();
                        data.AddressLine2 = $("#DeliveryAddressLine2").val();
                        data.AddressLine3 = $("#DeliveryAddressLine3").val();
                        data.DeliveryCity = $("#DeliveryCity").val();
                        data.DeliveryPostcode = $("#DeliveryPostcode").val();
                        data.LocationID = null;
                    }


                    var id = $("#order-id").val();
                    let method = "PUT";

                    var url = "/admin/orders/" + id + "/updateDeliveryDetails";

                    data.id = id;
                    data._method = method;

                    $.ajax({
                        method: "PUT",
                        data: data,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: url, success: function (result) {

                            swal("Your order delivery information has been saved!", {
                                icon: "success",
                            });
                            setTimeout(function (e) {
                                window.location.reload();
                            }, 3000);

                        }, error: function (err, body) {
                            return swal({
                                type: 'error',
                                title: err.responseJSON.error
                            })
                        }
                    });
                })


            });
        });

        function loadInputs(id) {

            let product = false;

            window.setTimeout(function () {
                console.log(id);

                $('#supplier_' + id).select2({
                    placeholder: 'Search for a supplier',
                    ajax: {
                        type: 'GET',
                        url: '/admin/loadSuppliers',
                        processResults: function (data) {
                            // Tranforms the top-level key of the response object from 'items' to 'results'
                            return {
                                results: $.map(data, function (obj) {
                                    obj.text = obj.text || obj.name; // replace name with the property used for the text

                                    return obj;
                                })
                            };
                        }
                    }
                });

                $("#supplier_" + id).on("select2:select", (e) => {
                    console.log(e);
                    $('#product_' + id).val(null).trigger('change');
                    $('#product_' + id).select2("open");
                    $('#productItem_' + id).val(null).trigger('change');
                })

                $('#product_' + id).select2({
                    placeholder: 'Search for a product',
                    ajax: {
                        type: 'GET',
                        url: '/admin/loadProducts',
                        data: (params) => {
                            var supplierId = $("#supplier_" + id).val();
                            var query = {
                                term: params.term,
                                supplierId: supplierId
                            }
                            return query;
                        },
                        processResults: function (data) {
                            // Tranforms the top-level key of the response object from 'items' to 'results'
                            return {
                                results: $.map(data, function (obj) {
                                    obj.text = obj.text || obj.name; // replace name with the property used for the text

                                    return obj;
                                })
                            };
                        }
                    }
                });

                $("#product_" + id).on("select2:select", (e) => {
                    product = e.params.data;
                    console.log(e);
                    $('#productItem_' + id).select2("open");
                })


                $('#productItem_' + id).select2({
                    placeholder: 'Search for a product option',
                    ajax: {
                        type: 'GET',
                        url: '/admin/loadProductItems',
                        data: (params) => {
                            var supplierId = $("#product_" + id).val();
                            var query = {
                                term: params.term,
                                productId: supplierId
                            }
                            return query;
                        },
                        processResults: function (data) {
                            // Tranforms the top-level key of the response object from 'items' to 'results'
                            return {
                                results: $.map(data, function (obj) {
                                    obj.text = obj.text || obj.name; // replace name with the property used for the text

                                    return obj;
                                })
                            };
                        }
                    }
                });

                $('#productItem_' + id).on("select2:select", (e) => {
                    let item = e.params.data;
                    console.log(product);
                    $(e.target).parent().parent().find(".optionFields").children(".active").text((product.active && item.active) ? 'Active' : 'Not for Sale');

                    if (item.stock == "" || item.stock == null) {
                        item.stock = 'Unlimited';
                    }
                    let price = (item.price) ? item.price : product.price;
                    $(e.target).parent().parent().find(".optionFields").children(".stock").text((product.active && item.active) ? "Stock: " + item.stock : '');
                    $(e.target).parent().parent().find(".optionFields").children(".priceBadge").children(".price").text(parseFloat(price).toFixed(2));
                    $(e.target).parent().parent().find(".editPriceItem").val(parseFloat(price).toFixed(2));
                    $(e.target).parent().parent().find(".totalPriceItem").val(parseFloat(price).toFixed(2));


                })

                $(document).on("change", "#stockLevel_" + id, (e) => {
                    let pricePer = parseFloat($(".editPriceItem").val());
                    let total = parseFloat(pricePer * $(e.target).val()).toFixed(2)
                    console.log(pricePer, total);
                    $(".totalPriceItem").val(parseFloat(total).toFixed(2));
                })

                $(document).on("change", ".editPriceItem", (e) => {
                    let pricePer = parseFloat($(".editPriceItem").val());
                    let total = parseFloat(pricePer * $(e.target).val()).toFixed(2)
                    console.log(pricePer, total);
                    $(".totalPriceItem").val(parseFloat(total).toFixed(2));
                })


            }, 200);
        }

    </script>
@endsection