@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
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

    <section class="section">
        <div class="section-header">
            <a href="{{ route('orders.today') }}" class="btn btn-primary" style="margin-right:10px">Today</a>
            <a href="{{ route('orders.deliverToday') }}" class="btn btn-primary" style="margin-right:10px">Deliver Today</a>
            <a href="{{ route('orders.deliverTomorrow') }}" class="btn btn-primary" style="margin-right:10px">Deliver
                Tomorrow</a>
            <a href="{{ route('orders.unpaid') }}" class="btn btn-primary" style="margin-right:10px">Unpaid</a>
            <a href="{{ route('orders.unhandled') }}" class="btn btn-primary" style="margin-right:10px">Unhandle</a>



            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
                <div class="breadcrumb-item"><a href="#">Components</a></div>
                <div class="breadcrumb-item">Table</div>
            </div>
        </div>
        @php
            $color = "#fff"
        @endphp
        <div class="section-body">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            {{ $orders->withQueryString()->links('vendor.pagination.custom') }}

                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table ">
                                    <thead >
                                        <tr style="border-bottom: 3px solid #aaa;">
                                            <th style="background-color:#fff;">ID</th>
                                            <th style="background-color:#fff;">Customer Name</th>
                                            <th style="background-color:#fff;">Phone</th>
                                            <th style="background-color:#fff;">Order Date</th>
                                            <th style="background-color:#fff;">Delivery Date</th>
                                            <th style="background-color:#fff;">Delivery Address</th>
                                            <th style="background-color:#fff;">Items</th>
                                            <th style="background-color:#fff;">Price</th>
                                            <th style="background-color:#fff;">Paid status</th>
                                            <th style="background-color:#fff;">Comments</th>

                                        </tr>
                                    </thead>
                                    @foreach ($orders as $order)
                                        @php
                                            $latestStatus = $order->latestStatusChange;
                                            $statusColor = 'grey'; // Default color
                                            if($color=="#fff")
                                                $color="#eee";
                                            else{
                                                $color="#fff";
                                            }
                                            // Set $statusColor based on $latestStatus
                                        @endphp
                                        <tr style="background-color: {{$color}}">
                                            <td class="py-3">
                                                <a href="/backend/edit/{{ $order->id }}">{{ $order->id }}</a>
                                            </td>
                                            <td class="py-3">{{ $order->customer_name }}</td>
                                            <td class="py-3">
                                                @php
                                                    $message1 = "$order->customer_name 你好, 關於你在HK-basket.com的訂單 #$order->id %0A我們需進一步的資料:";
                                                @endphp
                                                <a href="https://web.whatsapp.com/send?phone={{ $order->customer_phone }}&text={{ $message1 }}"
                                                    target="WA">
                                                    {{ $order->customer_phone }}
                                                </a><br>
                                                <span title="{{ $order->customer_email }}">
                                                    {{ strlen($order->customer_email) > 20 ? substr($order->customer_email, 0, 20) . '...' : $order->customer_email }}
                                                </span>
                                            </td>


                                            <td class="py-3">
                                                {{ date('m-d', strtotime($order->created_at)) }}<br>
                                                {{ date('H:i', strtotime($order->created_at)) }}
                                            </td>
                                            <td>
                                                @php
                                                    $deliveryDate = strtotime($order->deliver_date);
                                                    $today = strtotime(date('Y-m-d'));
                                                    $tomorrow = strtotime('+1 day', $today);
                                                @endphp

                                                @if ($deliveryDate == $today)
                                                    <span style="color: red;">{{ date('m-d', $deliveryDate) }}</span>
                                                @elseif($deliveryDate == $tomorrow)
                                                    <span style="color: orange;">{{ date('m-d', $deliveryDate) }}</span>
                                                @else
                                                    {{ date('m-d', $deliveryDate) }}
                                                @endif
                                            </td>
                                            <td class="py-3">{{ $order->deliver_address }}</td>
                                            <td class="align-middle py-3"
                                                style="        white-space: nowrap;
                                            overflow: visible;
                                            text-overflow: clip;">
                                                @foreach ($order->items as $item)
                                                    @if ($item->product)
                                                        {{ $item->product->name_chi }}
                                                    @else
                                                        <font class="btn-danger">NA</font>
                                                    @endif
                                                    x {{ $item->qty }} <br>
                                                @endforeach
                                            </td>
                                            <td class="py-3">{{ $order->price }}</td>
                                            <td class="py-3">
                                                @if ($order->paid == 1)
                                                    <font class="btn btn-success">PayPal</font>
                                                @elseif ($order->paid == 2)
                                                    <font class="btn btn-info">ATM</font>
                                                @else
                                                    <font class="btn btn-danger">Unpaid</font>
                                                @endif
                                            </td>
                                            <td class="py-3">{{ $order->comments }}</td>




                                        </tr>
                                        <tr style="background-color: {{$color}}">
                                            <td colspan="10" class="py-3">Remarks : {{ $order->remark }}</td>
                                        </tr>

                                        @php
                                            $latestStatus = $order->latestStatusChange;
                                            $statusColor = 'grey'; // default color

                                            if ($latestStatus) {
                                                switch ($latestStatus->status) {
                                                    case '1. New Order':
                                                        $statusColor = 'yellow';
                                                        break;
                                                    case '2. Contacted customer and no more problem':
                                                        $statusColor = 'green';
                                                        break;
                                                    case '3. Customer cannot be reached':
                                                        $statusColor = 'red';
                                                        break;
                                                    // Add more cases if needed
                                                }
                                            }
                                        @endphp

                                        <tr style="background-color: {{$color}};border-bottom: 3px solid #aaa; /* Adjust as needed */
                                        ">
                                            <td colspan="4" class="pb-3">
                                                <form action="{{ route('orders.updateStatus', $order->id) }}"
                                                    method="POST" style="display: flex; align-items: center;">
                                                    @csrf
                                                    <i class="fas fa-circle"
                                                        style="color: {{ $statusColor }}; margin-right: 8px;"></i>
                                                    <!-- Colored dot -->

                                                    <select name="status" class="form-control"
                                                        style="width: auto; display: inline-block; margin-right: 10px;background-color: {{$color}}">
                                                        <option value="1. New Order"
                                                            {{ !$latestStatus ? 'selected' : '' }}>1. New Order</option>
                                                        <option value="2. Contacted customer and no more problem"
                                                            {{ $latestStatus && $latestStatus->status == '2. Contacted customer and no more problem' ? 'selected' : '' }}>
                                                            2. Contacted customer and no more problem</option>
                                                        <option value="3. Customer cannot be reached"
                                                            {{ $latestStatus && $latestStatus->status == '3. Customer cannot be reached' ? 'selected' : '' }}>
                                                            3. Customer cannot be reached</option>
                                                        <!-- Add more statuses as needed -->
                                                    </select>

                                                    <button type="submit" class="btn btn-primary"
                                                        style="display: inline-block;">Update Status</button>
                                                </form>
                                            </td>
                                            <td colspan="5" class="pb-3">
                                                @if ($latestStatus)
                                                    <div style="cursor: pointer;"
                                                        onclick="toggleStatusHistory({{ $loop->index }})">
                                                        Last updated by: {{ $latestStatus->user->name }} at
                                                        {{ \Carbon\Carbon::parse($latestStatus->changed_at)->format('Y-m-d H:i:s') }}
                                                    </div>
                                                    <div id="statusHistory{{ $loop->index }}" style="display: none;">
                                                        @foreach ($order->statusChanges as $statusChange)
                                                            <div>
                                                                {{ $statusChange->status }}, Updated by: <font
                                                                    color="green" bold> {{ $statusChange->user->name }}
                                                                </font>, At: <font color="green" bold>
                                                                    {{ \Carbon\Carbon::parse($statusChange->changed_at)->format('Y-m-d H:i:s') }}
                                                                </font>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @endif
                                            </td>
                                            <td>
                     
                                                {{-- Display the number of photos for this order --}}
                                                <span>Photo : {{ $order->photos->count() }}</span>
                                           
                                        </td>

                                        </tr>
                                    @endforeach
                                </table>
                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <div class="card-header">
                {{ $orders->withQueryString()->links('vendor.pagination.custom') }}

            </div>
        </div>

    </section>
    <script>
        function toggleStatusHistory(index) {
            var element = document.getElementById('statusHistory' + index);
            if (element) {
                element.style.display = element.style.display === 'none' ? 'block' : 'none';
            }

            // Close other opened status histories
            document.querySelectorAll('[id^="statusHistory"]').forEach(function(el) {
                if (el.id !== 'statusHistory' + index) {
                    el.style.display = 'none';
                }
            });
        }
    </script>
@endsection