@extends('dashboard.layouts.app')
@section('content')
<style>
    .select2-container--default .select2-selection--single {
        height: 44px !important;
        width: 570px !important;
    }
</style>
<div class="container-fluid py-4">
    <div class="card shadow-lg border-0">
        <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center p-4">
            <h4 class="card-title mb-0 text-primary fw-bold">
                <i class="fas fa-list-alt me-2"></i>Purchases List
            </h4>
        </div>
        {{-- FILTER CARD --}}
        <div class="card m-4 shadow-sm border-info bg-light">
            <div class="card-body p-4">
                <form method="GET" action="{{ url()->current() }}" class="row g-3 align-items-end">
                    {{-- Purchase Number --}}
                    <div class="col-md-3 col-sm-6">
                        <label for="purchase_number" class="form-label text-muted fw-semibold">Purchase Number</label>
                        <input type="text" id="purchase_number" name="purchase_number" value="{{ request('purchase_number') }}"
                            class="form-control form-control-sm" placeholder="e.g. PO-12345">
                    </div>
                    {{-- Status --}}
                    <div class="col-md-3 col-sm-6">
                        <label for="status" class="form-label text-muted fw-semibold">Status</label>
                        <select id="status" name="status" class="form-select form-select-sm">
                            <option value="">All Statuses</option>
                            <option value="pending" {{ request('status')=='pending'?'selected':'' }}>Pending</option>
                            <option value="approved" {{ request('status')=='approved'?'selected':'' }}>Approved</option>
                            <option value="rejected" {{ request('status')=='rejected'?'selected':'' }}>Rejected</option>
                            <option value="completed" {{ request('status')=='completed'?'selected':'' }}>Completed</option>
                        </select>
                    </div>
                    {{-- Date Range --}}
                    <div class="col-md-3 col-sm-6">
                        <label for="from_date" class="form-label text-muted fw-semibold">From Date</label>
                        <input type="date" id="from_date" name="from_date" value="{{ request('from_date') }}" class="form-control form-control-sm">
                    </div>

                    <div class="col-md-3 col-sm-6">
                        <label for="to_date" class="form-label text-muted fw-semibold">To Date</label>
                        <input type="date" id="to_date" name="to_date" value="{{ request('to_date') }}" class="form-control form-control-sm">
                    </div>

                    {{-- Staff --}}

                    <div class="col-md-3 col-sm-6">
                        <label for="staff_id" class="form-label text-muted fw-semibold">Staff</label>
                        <select id="staff_id" name="staff_id" class="form-select form-select-sm">
                            <option value="">All Staff</option>
                            @foreach($staffs as $staff)
                            <option value="{{ $staff->id }}"
                                {{ request('staff_id') == $staff->id ? 'selected' : '' }}>
                                {{ $staff->first_name }} {{ $staff->last_name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    {{-- Vendors --}}

                    <div class="col-md-3 col-sm-6">
                        <label for="vendor_id" class="form-label text-muted fw-semibold">Vendors</label>
                        <select id="vendor_id" name="vendor_id" class="form-select form-select-sm">
                            <option value="">All Vendors</option>
                            @foreach($vendors as $vendor)
                            <option value="{{ $vendor->id }}"
                                {{ request('vendor_id') == $vendor->id ? 'selected' : '' }}>
                                {{ $vendor->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Buttons --}}
                    <div class="col-md-3 col-sm-6 d-grid">
                        <button class="btn btn-primary btn-sm shadow-sm" type="submit">
                            <i class="fas fa-filter me-1"></i>Filter
                        </button>
                    </div>
                    <div class="col-md-3 col-sm-6 d-grid">
                        <a href="{{ url()->current() }}" class="btn btn-secondary btn-sm shadow-sm">
                            <i class="fas fa-sync me-1"></i> Reset
                        </a>
                    </div>
                </form>
            </div>
        </div>

        {{-- DATA TABLE --}}
        <div class="card-body p-4 pt-0">
            <div style="overFlow:auto !important">
                <table class="text-center table table-bordered table-sm table bordered-table sm-table mb-0">
                    <thead class="bg-dark text-white ">
                        <tr>
                            <th class="text-center">#</th>
                            <th>Purchase Number</th>
                            <th>Name</th>
                            <th>Requested By</th>
                            <th class="text-center">Status</th>
                            <th class="text-end">Total</th>
                            <th>Created Date</th>
                            @if(auth()->user()->can('it_purchase_show') || auth()->user()->can('finance_purchase_update_status'))
                            <th class="text-center">Actions</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($purchases as $purchase)
                        <tr>
                            <td class="text-center">{{ $loop->iteration }}</td>
                            <td>
                                @can('it_purchase_show')
                                <a href="{{ route('purchase.show', $purchase->id) }}" class="text-primary fw-bold">
                                    {{ $purchase->purchase_number }}
                                </a>
                                @else
                                <span class="fw-bold text-muted">
                                    {{ $purchase->purchase_number }}
                                </span>
                                @endcan
                            </td>
                            <td>{{ $purchase->name }}</td>
                            <td>
                                <div class="d-flex flex-wrap gap-1">
                                    @foreach ($purchase->requestedStaffs as $staff)
                                    <span class="badge bg-info text-dark shadow-sm">{{ $staff->first_name }} {{ $staff->last_name }}</span>
                                    @endforeach
                                </div>
                            </td>
                            <td class="text-center">
                                <span class="badge rounded-pill text-uppercase py-2 px-3
                                    @if($purchase->status == 'pending') bg-warning text-dark
                                    @elseif($purchase->status == 'approved') bg-success
                                    @elseif($purchase->status == 'rejected') bg-danger
                                    @else bg-primary 
                                    @endif">
                                    {{ ucfirst($purchase->status) }}
                                </span>
                            </td>
                            <td class="text-end fw-bold text-success">${{ number_format($purchase->total, 2) }}</td>
                            <td>{{ $purchase->created_at->format('M d, Y') }}</td>
                            <td class="text-center">
                                @can('it_purchase_show')
                                <a href="{{ route('purchase.show', $purchase->id) }}" class="btn btn-sm btn-primary me-1" title="View Details">
                                    <i class="fas fa-eye"></i>
                                </a>
                                @endcan
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center py-4 text-muted fst-italic">
                                <i class="fas fa-exclamation-circle me-1"></i> No purchases found matching the current criteria.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="d-flex justify-content-center mt-4">
                {{ $purchases->links() }}
            </div>
        </div>
    </div>
</div>
@endsection