@extends('layouts.admin')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="mb-3">
                    <label for="orderStatus" class="form-label"><strong>Filter by Status:</strong></label>
                    <select id="orderStatus" class="form-select">
                        <option value="all">All Orders</option>
                        <option value="0">Pending</option>
                        <option value="1">Approved Order</option>
                        <option value="2">Order Packed</option>
                        <option value="3">Ready for Delivery</option>
                        <option value="4">Assigned to a rider</option>
                        <option value="5">Picked up</option>
                        <option value="6">Order is on the way</option>
                        <option value="7">Order Done</option>
                        <option value="8">Order Recieved </option>
                    </select>
                    <br>
                    <div class="mb-2">
                    <div class="mb-3">
                    <div class="mb-3">
    <label for="municipalFilter" class="form-label"><strong>Filter by Municipal:</strong></label>
    <select id="municipalFilter" class="form-select">
        <option value="all">All Municipalities</option>
        @foreach ($municipalities as $municipality)
            <option value="{{ $municipality }}">{{ $municipality }}</option>
        @endforeach
    </select>
</div>

<script>
    document.getElementById('municipalFilter').addEventListener('change', function() {
        var selectedMunicipal = this.value;

        orderRows.forEach(function(row) {
            const municipal = row.querySelector('td:first-child').textContent.trim();

            if (selectedMunicipal === 'all' || municipal === selectedMunicipal) {
                row.style.display = 'table-row';
            } else {
                row.style.display = 'none';
            }
        });
    });
</script>


                <div class="card">
                    <div class="card-header">
                        <h4>ORDERS LIST</h4>
                    </div>
                    <div class="card-body table-responsive">
                        <table class="table table-bordered align-middle text-center">
                            <thead>
                                <tr>
                                    <th>Tracking Number</th>
                                    <th>Total Price</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach ($orders as $order)
                            <tr class="order-row" data-status="{{ $order->status }}">
                       
                                            <td>{{ $order->tracking_no }}</td>
                                          
                                          
                                          @php
    if (!function_exists('getDeliveryFee')) {
        function getDeliveryFee($shopId) {
            $deliveryRate = \App\Models\DeliveryRate::
                                                    where('is_active', 1)
                                                      ->value('delivery_fee');
            return $deliveryRate ? $deliveryRate : 0;
        }
    }
@endphp
                                          <td>₱{{ number_format(
    $order->orderItems->sum(function ($orderItem) {
        $productPrice = $orderItem->product->productPrices()
            ->where('is_active', 1)
            ->where('created_at', '<', $orderItem->created_at)
            ->orderBy('created_at', 'desc')
            ->value('price');

        return $productPrice ? $productPrice * $orderItem->qty : 0;
    }) + ($order->delivery_option == 2 ? getDeliveryFee($order->shop_id) : 0),
    2, '.', ','
) }}</td>
                                                                               <td>
                                            @if ($order->status == '0')
                                                    <span class="badge bg-warning text-dark">Pending</span> 
                                                @elseif ($order->status == '1')
                                                    <span class="badge bg-primary text-white">Approved Order </span>
                                                @elseif ($order->status == '2')
                                                    <span class="badge bg-secondary text-white">Order Packed</span> 
                                                @elseif ($order->status == '3')
                                                    <span class="badge bg-info text-white">Ready for Delivery</span>
                                                @elseif ($order->status == '4')
                                                    <span class="badge bg-info text-white">Assigned to a rider</span>
                                                    @elseif ($order->status == '5')
                                                    <span class="badge bg-info text-white">Picked up</span>
                                                    @elseif ($order->status == '6')
                                                    <span class="badge bg-info text-white">Order is on the way</span>
                                                @elseif ($order->status == '7')
                                                    <span class="badge bg-success text-white">Order Done </span>
                                                    @elseif ($order->status == '8')
                                                    <span class="badge bg-success text-white">Order Recieved </span>
                                                @endif
                                            </td>                                            <td>
                                                <a  href="{{ route('admin.view.order', ['id' => $order->id]) }}"  class="btn btn-secondary">
                                                <i class="fas fa-eye"></i></a>
                                            </td>
                                        </tr>
                                    @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
        </div>
    </div>

   
    <script>
    const orderStatusDropdown = document.getElementById("orderStatus");
    const orderRows = document.querySelectorAll(".order-row");

    orderStatusDropdown.addEventListener("change", function () {
        const selectedStatus = this.value;

        orderRows.forEach(function (row) {
            const status = row.getAttribute("data-status");

            if (selectedStatus === "all" || status === selectedStatus) {
                row.style.display = "table-row";
            } else {
                row.style.display = "none";
            }
        });
    });
</script>

@endsection