@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <style>
        .purchases-page .ui-card {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            overflow: hidden;
        }

        .purchases-page .ui-card__header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid #eef2f7;
            background: #fff;
        }

        .purchases-table-wrap {
            width: 100%;
            overflow-x: auto;
        }

        .purchases-page table {
            min-width: 1100px;
            width: 100%;
            vertical-align: middle;
        }

        .purchases-page table thead th {
            background: #f8fafc;
            color: #475569;
            font-size: 0.78rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.035em;
            border-bottom: 1px solid #e5e7eb;
            white-space: nowrap;
        }

        .purchases-page table tbody td {
            color: #334155;
            font-size: 0.9rem;
            font-weight: 600;
            border-color: #eef2f7;
            vertical-align: middle;
            white-space: nowrap;
        }

        .purchases-page table tbody tr {
            transition: 0.16s ease;
        }

        .purchases-page table tbody tr:hover {
            background: #f8fafc;
        }

        .purchase-index {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            height: 30px;
            border-radius: 999px;
            background: #f3f4f6;
            color: #374151;
            font-size: 0.78rem;
            font-weight: 850;
        }

        .purchase-number-cell {
            display: inline-flex;
            align-items: center;
            gap: 0.65rem;
            min-width: 190px;
        }

        .purchase-number-icon {
            width: 38px;
            height: 38px;
            border-radius: 13px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #2563eb;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .purchase-number-link,
        .purchase-number-text {
            color: #111827;
            font-size: 0.9rem;
            font-weight: 850;
            line-height: 1.35;
            text-decoration: none;
            max-width: 160px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            vertical-align: middle;
        }

        .purchase-number-link:hover {
            color: #2563eb;
            text-decoration: underline;
        }

        .purchase-number-sub {
            color: #94a3b8;
            font-size: 0.76rem;
            font-weight: 650;
            margin-top: 0.1rem;
        }

        .purchase-name {
            color: #111827;
            font-weight: 850;
            max-width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .requested-staff-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            justify-content: center;
            min-width: 220px;
        }

        .staff-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.34rem 0.68rem;
            background: #eef2ff;
            color: #4338ca;
            font-size: 0.74rem;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }

        .purchase-money {
            color: #166534;
            font-size: 0.95rem;
            font-weight: 900;
        }

        .purchase-date {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.36rem 0.72rem;
            background: #f3f4f6;
            color: #374151;
            font-size: 0.74rem;
            font-weight: 850;
            white-space: nowrap;
        }

        .purchase-actions {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
        }

        .table-empty-state {
            padding: 3rem 1rem;
            text-align: center;
            color: #94a3b8;
            background: #fff;
        }

        .table-empty-state i {
            display: block;
            font-size: 2.3rem;
            color: #cbd5e1;
            margin-bottom: 0.75rem;
        }

        .table-empty-state h6 {
            margin: 0;
            color: #475569;
            font-weight: 850;
        }

        .table-empty-state p {
            margin: 0.35rem 0 0;
            font-size: 0.9rem;
        }

        .table-pagination {
            padding: 1rem 1.25rem;
            border-top: 1px solid #eef2f7;
            background: #fff;
        }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.36rem 0.72rem;
            font-size: 0.74rem;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }

        .ui-pill--primary {
            background: #eff6ff;
            color: #1d4ed8;
        }

        .ui-pill--info {
            background: #eef2ff;
            color: #4338ca;
        }

        .ui-pill--success {
            background: #f0fdf4;
            color: #166534;
        }

        .ui-pill--warn {
            background: #fffbeb;
            color: #92400e;
        }

        .ui-pill--danger {
            background: #fef2f2;
            color: #b91c1c;
        }

        .ui-pill--neutral {
            background: #f3f4f6;
            color: #374151;
        }

        .purchases-page .table-controls-form {
            max-width: 100%;
            overflow-x: auto;
            padding-bottom: 0.1rem;
        }

        .purchases-page .table-controls-form::-webkit-scrollbar {
            height: 6px;
        }

        .purchases-page .table-controls-form::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 999px;
        }

        .purchases-page .table-controls-form::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 999px;
        }

        @media (max-width: 991.98px) {
            .purchases-page .ui-card__header > .d-flex {
                align-items: flex-start !important;
            }

            .purchases-page .table-controls-form {
                width: 100%;
            }
        }

        @media (max-width: 575.98px) {
            .purchases-page .ui-card__header,
            .table-pagination {
                padding: 1rem;
            }
        }
    </style>

    <div class="container-fluid app-bg purchases-page">
        <div class="page-shell">
            <div class="space-y-4">

                @php
                    $activeTab = request('type', 'so');
                    $isPurchaseOrders = $activeTab === 'po';
                    $indexRoute = $isPurchaseOrders ? route('purchase.orders.index') : route('purchase.index');
                    $createRoute = route('purchase.create', ['type' => $isPurchaseOrders ? 'purchase' : 'sale']);
                @endphp

                <x-page-title
                    title="{{ $isPurchaseOrders ? 'Purchase Orders' : 'Sales Orders' }}"
                    description="{{ $isPurchaseOrders ? 'Manage internal purchase orders, requesters, vendors, statuses, totals, and created dates.' : 'Manage sales orders, students, statuses, totals, and created dates.' }}">
                    @if($isPurchaseOrders)
                        <a href="{{ route('purchase.invoice.index') }}" class="btn btn-outline-primary rounded-pill">
                            Purchase Invoices
                        </a>
                    @else
                        <a href="{{ route('student_invoices.index') }}" class="btn btn-outline-primary rounded-pill">
                            Sales Invoices
                        </a>
                    @endif
                </x-page-title>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-wrap w-100">
                            {{-- <h6 class="mb-0 font-semibold text-gray-800 whitespace-nowrap" style="margin-right: auto;">
                                Filters
                            </h6> --}}

                            <x-table-controls
                                :action="$indexRoute"
                                :date="true"
                                :filters="[
                                    'status' => [
                                        'pending' => 'Pending',
                                        'invoiced' => 'Invoiced',
                                    ],
                                    'staff_id' => $staffs->pluck('full_name', 'id')->toArray(),
                                    'vendor_id' => $vendors->pluck('name', 'id')->toArray(),
                                ]"
                                formId="purchases-table-controls"
                                :clearUrl="$indexRoute"
                            />

                            <x-table-action type="create" url="{{ $createRoute }}" label="{{ $isPurchaseOrders ? 'Create PO' : 'Create SO' }}" class="d-flex align-items-center gap-2 ms-auto" />
                        </div>
                    </div>

                    <div class="purchases-table-wrap">
                        <x-table :headers="['#', 'Order Number', 'Name', 'Requested By', 'Status', 'Total', 'Created Date', 'Actions']">
                            @forelse ($purchases as $purchase)
                                @php
                                    $hasInvoice = $purchase->purchase_invoice_id
                                        || $purchase->student_invoice_id
                                        || $purchase->details->contains(fn ($detail) => !empty($detail->student_invoice_id));
                                    $statusClass = $hasInvoice ? 'ui-pill--success' : 'ui-pill--warn';
                                    $statusLabel = $hasInvoice ? 'Invoiced' : 'Pending';
                                @endphp

                                <tr>
                                    <td class="text-center">
                                        <span class="purchase-index">
                                            {{ method_exists($purchases, 'firstItem') ? $purchases->firstItem() + $loop->index : $loop->iteration }}
                                        </span>
                                    </td>

                                    <td class="text-center">
                                        <div class="purchase-number-cell">
                                            <div class="purchase-number-icon">
                                                <i class="fas {{ $activeTab === 'so' ? 'fa-file-invoice-dollar' : 'fa-shopping-cart' }}"></i>
                                            </div>

                                            <div class="text-start">
                                                @can('it_purchase_show')
                                                    <a href="{{ route('purchase.show', $purchase->id) }}"
                                                       class="purchase-number-link"
                                                       title="{{ $purchase->purchase_number }}">
                                                        {{ $purchase->purchase_number }}
                                                    </a>
                                                @else
                                                    <span class="purchase-number-text" title="{{ $purchase->purchase_number }}">
                                                        {{ $purchase->purchase_number }}
                                                    </span>
                                                @endcan

                                                <div class="purchase-number-sub">
                                                    {{ $activeTab === 'so' ? 'Sales Order' : 'Purchase Order' }}
                                                </div>
                                            </div>
                                        </div>
                                    </td>

                                    <td class="text-center">
                                        <div class="purchase-name" title="{{ $purchase->name }}">
                                            {{ $purchase->name }}
                                        </div>
                                    </td>

                                    <td class="text-center">
                                        <div class="requested-staff-list">
                                            @if (($purchase->invoice_type ?? null) === 'sale' && ($purchase->party_type ?? null) === 'student' && $purchase->student)
                                                @php
                                                    $studentName = $purchase->student->full_name
                                                        ?: trim(($purchase->student->first_name ?? '') . ' ' . ($purchase->student->last_name ?? ''));
                                                @endphp
                                                <span class="staff-chip">
                                                    <i class="fas fa-user-graduate"></i>
                                                    {{ $studentName ?: 'Student #' . $purchase->student->id }}
                                                </span>
                                            @else
                                            @forelse ($purchase->requestedStaffs as $staff)
                                                <span class="staff-chip">
                                                    <i class="fas fa-user"></i>
                                                    {{ trim(($staff->first_name ?? '') . ' ' . ($staff->last_name ?? '')) ?: 'Staff #' . $staff->id }}
                                                </span>
                                            @empty
                                                <span class="ui-pill ui-pill--neutral">—</span>
                                            @endforelse
                                            @endif
                                        </div>
                                    </td>

                                    <td class="text-center">
                                        <span class="ui-pill {{ $statusClass }}">
                                            {{ $statusLabel }}
                                        </span>
                                    </td>

                                    <td class="text-center">
                                        <strong class="purchase-money">
                                            ${{ number_format($purchase->total, 2) }}
                                        </strong>
                                    </td>

                                    <td class="text-center">
                                        <span class="purchase-date">
                                            <i class="fas fa-calendar-alt"></i>
                                            {{ $purchase->created_at->format('M d, Y') }}
                                        </span>
                                    </td>

                                    <td class="text-center">
                                        <div class="purchase-actions">
                                            @can('it_purchase_show')
                                                <x-table-action type="view" url="{{ route('purchase.show', $purchase->id) }}" />
                                                <x-table-action type="edit" url="{{ route('purchase.edit', $purchase->id) }}" />
                                            @else
                                                <span class="text-muted">—</span>
                                            @endcan
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8">
                                        <div class="table-empty-state">
                                            <i class="fas {{ $activeTab === 'so' ? 'fa-file-invoice-dollar' : 'fa-shopping-cart' }}"></i>
                                            <h6>No {{ $activeTab === 'so' ? 'Sales' : 'Purchase' }} Orders found.</h6>
                                            <p>No {{ $activeTab === 'so' ? 'Sales' : 'Purchase' }} Orders found matching the current criteria.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </x-table>
                    </div>

                    @if ($purchases->hasPages())
                        <div class="table-pagination">
                            {{ $purchases->appends(request()->except('page'))->links('pagination::bootstrap-5') }}
                        </div>
                    @endif
                </div>

            </div>
        </div>
    </div>
@endsection