@extends('layout.layout')


@section('content')
<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>
            {{-- Assuming a route for creating new purchases --}}
            <a href="{{ route('purchase.create') }}" class="btn btn-success shadow-sm">
                <i class="fas fa-plus me-2"></i>New Purchase Order
            </a>
        </div>

        {{-- FILTER CARD --}}
        <div class="card m-4 shadow-sm border-info bg-light">
            <div class="card-body p-4">
                <form method="GET" action="{{ route('purchase.index') }}" 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 general-select">
                            <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>

                    {{-- 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="{{ route('purchase.index') }}" 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>
                            <th class="text-center">Actions</th>
                        </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
                                @if(auth()->user()->can('it_purchase_edit') && $purchase->status == 'approved')
                                <a href="{{ route('purchase.edit', $purchase->id) }}" class="btn btn-sm btn-info me-1" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                @endcan
                                @can('it_purchase_destroy' && in_array($purchase->status, ['pending', 'rejected']))
                                <form action="{{ route('purchase.destroy', $purchase->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" onclick="return confirm('Are you sure you want to delete this purchase order?')"
                                        class="btn btn-sm btn-danger" title="Delete">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </form>
                                @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>

            {{-- PAGINATION --}}
            <div class="d-flex justify-content-center mt-4">
                {{ $purchases->links() }}
            </div>
        </div>
    </div>
</div>
@endsection