@extends('admin.layout.master')



@section('content')
    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif
    <form action="{{ route('customer.update', $order->id) }}" method="POST">
        @csrf
        @method('PUT')
        <div class="row">
            {{-- ROW1 --}}
            <div class="col-12 col-md-4 col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h4>Order # {{ $order->id }} @ {{ $order->created_at }}</h4>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info">
                            <b>Customer's Information</b>
                        </div>

                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" class="form-control" name="customer_name"
                                value="{{ $order->customer_name }}">
                            @if ($paidCount > 1)
                                Returning customer {{ $paidCount }} times
                            @endif
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="text" class="form-control" name="customer_email"
                                value="{{ $order->customer_email }}">
                        </div>
                        <div class="form-group">
                            <label>Phone</label>
                            <input type="text" class="form-control" name="customer_phone"
                                value="{{ $order->customer_phone }}">
                        </div>
                        <div class="form-group">
                            <label>Deliver Date</label>
                            <input type="date" class="form-control" name="deliver_date"
                                value="{{ $order->deliver_date }}">
                        </div>

                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </div>
    </form>
    <div class="card">
        <div class="card-body">
            <div class="alert alert-info">
                <b>Customer Comments</b>
            </div>
            <div class="form-group">
                {{ $order->comments }}
            </div>

            {{-- Start of form --}}
            <form action="{{ route('orders.updateRemark', $order->id) }}" method="POST">
                @csrf
                @method('PUT') {{-- Assuming you are updating an existing order --}}

                <div class="alert alert-info">
                    <b>Office Remark</b>
                </div>

                <div class="form-group">
                    <textarea class="form-control" name="remark" style="min-height: 100px;">{{ $order->remark }}</textarea>
                </div>

                {{-- Submit Button --}}
                <button type="submit" class="btn btn-primary">Save Changes</button>
            </form>
            {{-- End of form --}}
        </div>
    </div>

    </div>






    {{-- ROW2 --}}
    <div class="col-12 col-md-3 col-lg-3">
        <div class="card">
            <div class="card-header">
                <h4></h4>
            </div>
            <form action="{{ route('delivery.update', $order->id) }}" method="POST">
                @csrf
                @method('PUT') <!-- Use PUT for updating existing resources -->
                <div class="card-body">
                    <div class="alert alert-info">
                        <b>Deliver Information</b>
                    </div>
                    <div class="form-group">
                        <label>Deliver Date</label>
                        <input type="date" class="form-control" value="{{ $order->deliver_date }}" name="deliver_date">
                    </div>
                    <div class="form-group">
                        <label>Time</label>
                        <select name="time" id="time-select" class="form-control" onchange="showTimeRange()"
                            name="arrival_time">
                            <option value="">Select a time</option>
                            <option value="9" {{ $order->arrival_time == '09' ? 'selected' : '' }}>09:00 AM
                            </option>
                            <option value="10" {{ $order->arrival_time == '10' ? 'selected' : '' }}>10:00 AM
                            </option>
                            <option value="11" {{ $order->arrival_time == '11' ? 'selected' : '' }}>11:00 AM
                            </option>
                            <option value="12" {{ $order->arrival_time == '12' ? 'selected' : '' }}>12:00 PM
                            </option> <!-- Noon -->
                            <option value="13" {{ $order->arrival_time == '13' ? 'selected' : '' }}>01:00 PM
                            </option> <!-- 1 PM -->
                            <option value="14" {{ $order->arrival_time == '14' ? 'selected' : '' }}>02:00 PM
                            </option>
                            <option value="15" {{ $order->arrival_time == '15' ? 'selected' : '' }}>03:00 PM
                            </option>
                            <option value="16" {{ $order->arrival_time == '16' ? 'selected' : '' }}>04:00 PM
                            </option>
                            <option value="17" {{ $order->arrival_time == '17' ? 'selected' : '' }}>05:00 PM
                            </option>
                            <option value="18" {{ $order->arrival_time == '18' ? 'selected' : '' }}>06:00 PM
                            </option>
                            <option value="19" {{ $order->arrival_time == '19' ? 'selected' : '' }}>07:00 PM
                            </option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Delivery Address</label>
                        <input type="text" class="form-control" value="{{ $order->deliver_address }}"
                            name="deliver_address">
                    </div>
                    <div class="form-group">
                        <label>District</label>
                        <select class="form-control" name="deliveryFees" id="districtSelect">
                            @php
                                $oldRegionCost = $order->district . '|' . $order->deliveryFees;
                            @endphp
                            <option value="central_and_western|100" @if ($oldRegionCost == 'central_and_western|100') selected @endif>
                                中西區 (Central and Western) -
                                約HK$100</option>
                            <option value="eastern|120" @if ($oldRegionCost == 'eastern|120') selected @endif>東區
                                (Eastern) - 約HK$120</option>
                            <option value="southern|150" @if ($oldRegionCost == 'southern|150') selected @endif>南區
                                (Southern) - 約HK$150</option>
                            <option value="wan_chai|90" @if ($oldRegionCost == 'wan_chai|90') selected @endif>灣仔
                                (Wan Chai) - 約HK$90</option>
                            <option value="kowloon_city|70" @if ($oldRegionCost == 'kowloon_city|70') selected @endif>
                                九龍城區 (Kowloon City) - 約HK$70</option>
                            <option value="kwun_tong|130" @if ($oldRegionCost == 'kwun_tong|130') selected @endif>觀塘區
                                (Kwun Tong) - 約HK$130</option>
                            <option value="sham_shui_po|80" @if ($oldRegionCost == 'sham_shui_po|80') selected @endif>
                                深水埗區 (Sham Shui Po) - 約HK$80</option>
                            <option value="wong_tai_sin|75" @if ($oldRegionCost == 'wong_tai_sin|75') selected @endif>
                                黃大仙區 (Wong Tai Sin) - 約HK$75</option>
                            <option value="yau_tsim_mong|60" @if ($oldRegionCost == 'yau_tsim_mong|60') selected @endif>
                                油尖旺區 (Yau Tsim Mong) - 約HK$60</option>
                            <option value="islands|300" @if ($oldRegionCost == 'islands|300') selected @endif>離島區
                                (Islands) - 約HK$300</option>
                            <option value="kwai_tsing|140" @if ($oldRegionCost == 'kwai_tsing|140') selected @endif>
                                葵青區 (Kwai Tsing) - 約HK$140</option>
                            <option value="north|200" @if ($oldRegionCost == 'north|200') selected @endif>北區
                                (North) - 約HK$200</option>
                            <option value="sai_kung|220" @if ($oldRegionCost == 'sai_kung|220') selected @endif>西貢區
                                (Sai Kung) - 約HK$220</option>
                            <option value="sha_tin|160" @if ($oldRegionCost == 'sha_tin|160') selected @endif>沙田區
                                (Sha Tin) - 約HK$160</option>
                            <option value="tai_po|180" @if ($oldRegionCost == 'tai_po|180') selected @endif>大埔區
                                (Tai Po) - 約HK$180</option>
                            <option value="tsuen_wan|130" @if ($oldRegionCost == 'tsuen_wan|130') selected @endif>
                                荃灣區 (Tsuen Wan) - 約HK$130</option>
                            <option value="tuen_mun|210" @if ($oldRegionCost == 'tuen_mun|210') selected @endif>屯門區
                                (Tuen Mun) - 約HK$210</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Delivery Fees</label>
                        <input type="text" class="form-control" id="deliveryFeesInput" name="deliveryFees2"
                            value="{{ $order->deliveryFees }}">
                    </div>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
        <div class="card mt-3">
            <div class="card-body">
                <div class="alert alert-info">
                    <b>Photos</b>
                </div>
                <div class="form-check mb-3">
                    <input class="form-check-input" type="checkbox" id="selectAll">
                    <label class="form-check-label" for="selectAll">Select All</label>
                </div>
                <form action="{{ route('send.email', $order->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @if ($order->photos && $order->photos->count() > 0)
                        <div class="row">
                            @foreach ($order->photos as $photo)
                                <div class="col-md-4 mb-3">
                                    <img src="{{ asset($photo->photo_path) }}" alt="Photo" class="img-thumbnail">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="photos[]"
                                            value="{{ $photo->id }}" id="photo{{ $photo->id }}">
                                        <label class="form-check-label" for="photo{{ $photo->id }}">
                                            Select
                                        </label>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <button type="submit" class="btn btn-primary">Send Email</button>
                    @else
                        <p>No photos available for this order.</p>
                    @endif
            </div>
        </div>
        </form>

    </div>



    {{-- ROW3 --}}
    <div class="col-12 col-md-5 col-lg-5">
        <div class="card">
            <div class="card-header">
                <h4></h4>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <b>Summary</b>
                </div>

                @foreach ($order->items as $item)
                    <div class="row m-3">
                        <div class="col">
                            @if ($item->product)
                                {{ $item->product->name_chi }}
                            @else
                                NA
                            @endif
                        </div>
                        <div class="col">
                            ${{ number_format($item->unitPrice, 2) }}
                        </div>
                        <div class="col">
                            {{ $item->qty }}
                        </div>
                        <div class="col">
                            ${{ number_format($item->qty * $item->unitPrice, 2) }}
                        </div>
                    </div>
                @endforeach

                <div class="row m-3">
                    <div class="col">
                        <span>Delivery Fees</span>
                    </div>
                    <div class="col">

                    </div>
                    <div class="col">

                    </div>
                    <div class="col text-left">
                        <span>${{ number_format($order->deliveryFees, 2) }}</span>
                    </div>
                </div>

                <div class="row m-3">
                    <div class="col">
                        <strong>Total:</strong>
                    </div>
                    <div class="col">
                    </div>
                    <div class="col">
                    </div>
                    <div class="col text-left">
                        <strong>
                            ${{ number_format(
                                $order->items->sum(function ($item) {
                                    return $item->qty * $item->unitPrice;
                                }) + $order->deliveryFees,
                                2,
                            ) }}
                        </strong>
                    </div>
                </div>
                @php
                    $color = 'btn-primary';
                    $paid = '';
                    $paymentDate = '';
                    $paymentAmount = '';

                    switch ($order->paid) {
                        case 0:
                            $paid = 'Unpaid';
                            $color = 'btn-danger';
                            break;
                        case 1:
                            $paid = 'Paypal';
                            $paymentDate = $order->paypal_date ?? 'N/A';
                            $paymentAmount = $order->paypal_amount ?? 'N/A'; // Assuming you have a paypal_amount field
                            break;
                        case 2:
                            $paid = 'ATM';
                            $paymentDate = $order->atm_date ?? 'N/A';
                            $paymentAmount = $order->atm_amount !== null ? '$' . number_format($order->atm_amount, 2) : 'N/A';
                            break;
                        case 3:
                            $paid = 'Cash';
                            $paymentDate = $order->cash_date ?? 'N/A';
                            $paymentAmount = $order->cash_amount !== null ? '$' . number_format($order->cash_amount, 2) : 'N/A';
                            break;
                    }
                @endphp
                <div class="row m-3">
                    <div class="col">
                        <strong>Payment</strong>
                    </div>
                    <div class="col">
                        <b class="p-1 {{ $color }}">{{ $paid }}</b>
                    </div>
                    <div class="col">
                        <strong>{{ $paymentDate }}</strong>
                    </div>
                    <div class="col text-left">
                        <strong>{{ $paymentAmount }}</strong>
                    </div>
                </div>


            </div>

            <div class="card-body">
                <div class="alert alert-info">
                    <b>Modify
                </div>

                @foreach ($order->items as $item)
                    <div class="row align-items-center m-3">
                        <div class="col-auto" style='width:160px'>
                            @if ($item->product)
                                {{ $item->product->name_chi }}
                            @else
                                NA
                            @endif
                        </div>
                        <div class="col-auto">
                            <form action="{{ route('items.update', $item->id) }}" method="POST" class="form-inline">
                                @csrf
                                @method('PUT') <!-- For updating, we use the PUT method -->

                                <input type="text" name="unitPrice" class="form-control mb-2 mr-sm-2"
                                    value="{{ $item->unitPrice }}" size=2>
                                <input type="text" name="qty" class="form-control mb-2 mr-sm-2"
                                    value="{{ $item->qty }}" size=2>
                                <button type="submit" class="btn btn-info mb-2 mr-sm-2">Update</button>
                            </form>
                        </div>
                        <div class="col-auto">
                            <form action="{{ route('items.destroy', $item->id) }}" method="POST">
                                @csrf
                                @method('DELETE') <!-- For deleting, we use the DELETE method -->
                                <button type="submit" class="btn btn-danger mb-2">Del</button>
                            </form>
                        </div>
                    </div>
                @endforeach

                <hr>
                <form action="{{ route('orders.addItem', $order->id) }}" method="POST">
                    @csrf

                    <div class="card-header">Add new item to this order</div>

                    <div class="d-flex align-items-center justify-content-start mb-3">
                        {{-- Product Dropdown --}}
                        <select name="product_id" class="form-control mr-2" id="productDropdown">

                            @foreach ($products as $product)
                                <option value="{{ $product->id }}" data-unit-price="{{ $product->price }}">
                                    {{ $product->name_chi }}</option>
                            @endforeach
                        </select>

                        {{-- Quantity Input --}}
                        <input type="text" name="qty" value="1" class="form-control mr-2"
                            style="width: 100px;">
                        <input type="text" name="unitPriceNew" value="0.00" class="form-control mr-2"
                            style="width: 100px;">

                        {{-- Submit Button --}}
                        <button type="submit" class="btn btn-primary">Add</button>
                    </div>
                </form>


                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        var productDropdown = document.getElementById('productDropdown');
                        var unitPriceInput = document.querySelector('input[name="unitPriceNew"]');

                        productDropdown.addEventListener('change', function() {
                            var selectedOption = this.options[this.selectedIndex];
                            var unitPrice = selectedOption.getAttribute('data-unit-price');
                            unitPriceInput.value = unitPrice;
                        });
                    });

                    document.addEventListener('DOMContentLoaded', function() {
                        var districtSelect = document.getElementById('districtSelect');
                        var deliveryFeesInput = document.getElementById('deliveryFeesInput');

                        districtSelect.addEventListener('change', function() {
                            var selectedOption = this.options[this.selectedIndex];
                            var fees = selectedOption.value.split('|')[
                                1]; // Assuming the value is in the format 'district|fees'
                            deliveryFeesInput.value = fees; // Update the delivery fees input
                        });
                    });
                </script>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <b>Discount</b>
                </div>
                <form action="{{ route('addDiscount', $order->id) }}" method="POST">
                    @csrf
                    <div class="form-group">
                        <input type="number" name="discountPercentage" id="discountPercentage" class="form-control"
                            placeholder="Enter discount percentage" step="0.01" min="0" max="100">
                        @error('discountPercentage')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <input type="number" name="unitPrice" id="unitPrice" class="form-control"
                            placeholder="Enter discount amount (negative value)" step="0.01" min="-99999"
                            max="0">
                        @error('unitPrice')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <button type="submit" class="btn btn-primary">Add Discount</button>
                </form>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <b>Payment (paid_status)</b>
                </div>
                <div>
                    Payment Status:
                    @switch($order->paid)
                        @case(0)
                            Unpaid
                        @break

                        @case(1)
                            PayPal - Date: {{ $order->paypal_date ?? 'N/A' }}, Ref: {{ $order->paypal_ref ?? 'N/A' }}
                        @break

                        @case(2)
                            ATM - Date: {{ $order->atm_date ?? 'N/A' }}, Amount: {{ $order->atm_amount ?? 'N/A' }}
                        @break

                        @case(3)
                            Cash - Date: {{ $order->cash_date ?? 'N/A' }}, Amount: {{ $order->cash_amount ?? 'N/A' }}
                        @break
                    @endswitch
                </div>
                <!-- ATM Payment Form -->
                <form action="{{ route('payment.atm', $order->id) }}" method="POST">
                    @csrf
                    <div class="row align-items-center m-3">
                        <div class="col-auto">ATM</div>
                        <div class="col-auto">Date <input type="date" name="atm_date" size="4"></div>
                        <div class="col-auto">Amount <input type="text" name="atm_amount" size="4"></div>
                        <div class="col-auto"><button type="submit">Save</button></div>
                    </div>
                </form>
                <!-- Cash Payment Form -->
                <form action="{{ route('payment.cash', $order->id) }}" method="POST">
                    @csrf
                    <div class="row align-items-center m-3">
                        <div class="col-auto">Cash</div>
                        <div class="col-auto">Date <input type="date" name="cash_date" size="4"></div>
                        <div class="col-auto">Amount <input type="text" name="cash_amount" size="4"></div>
                        <div class="col-auto"><button type="submit">Save</button></div>
                    </div>
                </form>
            </div>

        </div>

    </div>
    <script>
        document.getElementById('selectAll').addEventListener('change', function() {
            let checkboxes = document.querySelectorAll('input[type="checkbox"][name="photos[]"]');
            checkboxes.forEach((checkbox) => {
                checkbox.checked = this.checked;
            });
        });
    </script>
@endsection