@extends('admin.master')

@section('content')
<style>
    .order-page .page-title {
        font-size: 26px;
        font-weight: 700;
        color: #1f2937;
    }

    .order-page .page-subtitle {
        color: #6b7280;
        font-size: 14px;
    }

    .order-page .card {
        border: 1px solid #dbe3ea;
        border-radius: 12px;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
        overflow: hidden;
    }

    .order-page .card-header {
        background: #f8fafc;
        border-bottom: 1px solid #dbe3ea;
        padding: 16px 20px;
    }

    .order-page .table {
        margin-bottom: 0;
    }

    .order-page .table thead th {
        background: #0f5f8f;
        color: #fff;
        font-weight: 600;
        font-size: 14px;
        border: 1px solid #dbe3ea !important;
        vertical-align: middle;
        white-space: nowrap;
    }

    .order-page .table tbody td {
        border: 1px solid #e5e7eb !important;
        vertical-align: middle;
        font-size: 14px;
        color: #374151;
    }

    .order-page .table tbody tr:hover {
        background: #f9fbfd;
    }

    .order-page .form-control,
    .order-page .form-select {
        border: 1px solid #cfd8e3;
        border-radius: 10px;
        min-height: 44px;
        box-shadow: none;
    }

    .order-page .form-control:focus,
    .order-page .form-select:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.12);
    }

    .order-page .btn {
        border-radius: 10px;
        font-weight: 600;
    }

    .order-page .badge-soft-warning {
        background: #fff7e6;
        color: #b26a00;
        border: 1px solid #ffe0a3;
        padding: 6px 10px;
        border-radius: 30px;
        font-size: 12px;
        font-weight: 600;
    }

    .order-page .badge-soft-info {
        background: #e8f3ff;
        color: #0b63c9;
        border: 1px solid #b9d7ff;
        padding: 5px 6px;
        border-radius: 30px;
        font-size: 11px;
        font-weight: 600;
    }

    .order-page .payment-method {
        font-weight: 600;
        color: #111827;
    }

    .order-page .payment-status {
        font-size: 11px;
        margin-top: 2px;
        display: inline-block;
    }

    .order-page .amount {
        font-weight: 700;
        color: #0f172a;
    }

    .order-page .btn-view {
        padding: 6px 10px;
        font-size: 13px;
    }
</style>

<div class="container-fluid py-4 order-page">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-3">
        <div>
            <h3 class="page-title mb-1">
                <i class="fa-solid fa-cart-shopping me-2 text-primary"></i>Order Manage
            </h3>
            <p class="page-subtitle mb-0">All customer orders</p>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm">
            <i class="fa-solid fa-circle-check me-2"></i>{{ session('success') }}
        </div>
    @endif

    <div class="card">
        <style>
/* Header Box */
._cus-card-header{
    background:#ffffff !important;
    padding:24px !important;
    border-bottom:1px solid #e5e7eb !important;
    border-radius:18px 18px 0 0 !important;
}

/* Grid Layout */
._cus-filter-form{
    display:grid !important;
    grid-template-columns:repeat(12,1fr) !important;
    gap:18px !important;
    align-items:center !important;
}

/* Search */
._cus-col-5{
    grid-column:span 5 !important;
}

._cus-search-wrap{
    position:relative !important;
}

._cus-search-icon{
    position:absolute !important;
    left:18px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    color:#9ca3af !important;
    font-size:18px !important;
}

._cus-input{
    width:100% !important;
    height:42px !important;
    padding:0 18px 0 48px !important;
    border:1px solid #d1d5db !important;
    border-radius:16px !important;
    font-size:15px !important;
    outline:none !important;
    transition:0.3s ease !important;
}

._cus-input:focus{
    border-color:#2563eb !important;
    box-shadow:0 0 0 3px rgba(37,99,235,.15) !important;
}

/* Select */
._cus-col-4{
    grid-column:span 4 !important;
}

._cus-select{
    width:100% !important;
    height:42px !important;
    padding:0 18px !important;
    border:1px solid #d1d5db !important;
    border-radius:16px !important;
    font-size:15px !important;
    background:#fff !important;
    outline:none !important;
    transition:0.3s ease !important;
}

._cus-select:focus{
    border-color:#2563eb !important;
    box-shadow:0 0 0 3px rgba(37,99,235,.15) !important;
}

/* Button */
._cus-col-3{
    grid-column:span 3 !important;
}

._cus-btn{
    width:100% !important;
    height:42px !important;
    border:none !important;
    border-radius:16px !important;
    background:linear-gradient(90deg,#2563eb,#4f46e5) !important;
    color:#fff !important;
    font-size:15px !important;
    font-weight:600 !important;
    cursor:pointer !important;
    transition:0.3s ease !important;
    box-shadow:0 4px 12px rgba(0,0,0,.08) !important;
}

._cus-btn:hover{
    transform:translateY(-1px) !important;
    box-shadow:0 8px 18px rgba(0,0,0,.12) !important;
}

/* Mobile */
@media(max-width:991px){
    ._cus-filter-form{
        grid-template-columns:1fr !important;
    }

    ._cus-col-5,
    ._cus-col-4,
    ._cus-col-3{
        grid-column:span 12 !important;
    }
}
</style>

<div class="card-header _cus-card-header">
    <form method="GET" class="_cus-filter-form">

        <!-- Search -->
        <div class="_cus-col-5">
            <div class="_cus-search-wrap">
                <span class="_cus-search-icon">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </span>

                <input
                    type="text"
                    name="search"
                    value="{{ request('search') }}"
                    class="_cus-input"
                    placeholder="Search order / customer / phone"
                >
            </div>
        </div>

        <!-- Status -->
        <div class="_cus-col-4">
            <select name="status" class="_cus-select">
                <option value="">All Status</option>
                @foreach(['pending','processing','approved','partial_delivered','delivered','partial_canceled','canceled'] as $status)
                    <option value="{{ $status }}" {{ request('status') === $status ? 'selected' : '' }}>
                        {{ ucfirst(str_replace('_', ' ', $status)) }}
                    </option>
                @endforeach
            </select>
        </div>

        <!-- Button -->
        <div class="_cus-col-3">
            <button class="_cus-btn">
                <i class="fa-solid fa-filter me-2"></i>
                Filter Orders
            </button>
        </div>

    </form>
</div>
        <div class="card-body table-responsive p-0">
            <table class="table table-bordered align-middle">
                <thead>
                    <tr>
                        <th width="60">#</th>
                        <th><i class="fa-solid fa-receipt me-1"></i>Order No</th>
                        <th><i class="fa-solid fa-user me-1"></i>Customer</th>
                        <th><i class="fa-solid fa-phone me-1"></i>Phone</th>
                        <th><i class="fa-solid fa-bangladeshi-taka-sign me-1"></i>Total</th>
                        <th><i class="fa-solid fa-credit-card me-1"></i>Payment</th>
                        <th><i class="fa-solid fa-signal me-1"></i>Status</th>
                        <th><i class="fa-solid fa-boxes-stacked me-1"></i>Sub Orders</th>
                        <th width="130" class="text-center"><i class="fa-solid fa-gear me-1"></i>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($orders as $key => $order)
                        <tr>
                            <td>{{ $orders->firstItem() + $key }}</td>
                            <td class="fw-semibold text-dark">{{ $order->order_number }}</td>
                            <td>{{ $order->name }}</td>
                            <td>{{ $order->phone }}</td>
                            <td class="amount">৳{{ number_format($order->total, 2) }}</td>
                            <td style="display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 13px;">
                                <div class="payment-method">{{ strtoupper($order->payment_method) }}</div>
                                <span class="payment-status {{ $order->payment_status === 'paid' ? 'badge-soft-info' : 'badge-soft-warning' }}">
                                    {{ ucfirst($order->payment_status) }}
                                </span>
                            </td>
                            <td>
                                <span class="badge-soft-warning">
                                    {{ ucfirst(str_replace('_', ' ', $order->status)) }}
                                </span>
                            </td>
                            <td>{{ $order->subOrders->count() }}</td>
                            <td class="text-center">
                                <a href="{{ route('admin.orders.show', $order->id) }}" class="btn btn-sm btn-primary btn-view">
                                    <i class="fa-solid fa-eye me-1"></i>Show
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center text-muted py-4">
                                <i class="fa-regular fa-folder-open me-2"></i>No orders found.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if(method_exists($orders, 'links'))
            <div class="card-footer bg-white border-top">
                {{ $orders->links() }}
            </div>
        @endif
    </div>
</div>
@endsection