@extends('garage.layouts.app')

@section('title', 'Parts issuance')

@push('styles')
@include('shared.garage-parts-issuance-ui-styles')
@endpush

@section('content')
<div class="gpi-page container-fluid px-2 px-lg-3 py-2">
    <div class="gpi-hero mb-3">
        <div class="d-flex flex-wrap align-items-start justify-content-between gap-2">
            <div>
                <h1 class="mb-1"><i class="bi bi-box-arrow-right me-2" style="color:#d97706;"></i>Parts issuance</h1>
                <p class="mb-0">Stock removed from inventory for work orders or the floor. Each issue is recorded and cannot be edited here.</p>
            </div>
            <a href="{{ route('garage.parts-issuance.create') }}" class="gpi-btn-save text-decoration-none d-inline-flex align-items-center gap-1"><i class="bi bi-plus-lg"></i>New issuance</a>
        </div>
    </div>

    <form method="GET" action="{{ route('garage.parts-issuance.index') }}" class="d-flex flex-wrap gap-2 align-items-center mb-3">
        <div class="position-relative flex-grow-1" style="min-width: 12rem; max-width: 22rem;">
            <i class="bi bi-search position-absolute text-muted" style="left:10px;top:50%;transform:translateY(-50%);font-size:0.85rem;"></i>
            <input type="search" name="search" class="form-control form-control-sm ps-4 rounded-3" placeholder="Issuance # or work order…" value="{{ $search ?? '' }}">
        </div>
        <button type="submit" class="btn btn-sm btn-outline-secondary rounded-3">Search</button>
        @if($search)
            <a href="{{ route('garage.parts-issuance.index') }}" class="btn btn-sm btn-outline-secondary rounded-3">Clear</a>
        @endif
    </form>

    <div class="gpi-table-card">
        <div class="table-responsive">
            <table class="gpi-table mb-0">
                <thead>
                    <tr>
                        <th>Issuance #</th>
                        <th>Date</th>
                        <th>Work order</th>
                        <th>Issued by</th>
                        <th>Lines</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($issuances as $row)
                    <tr>
                        <td><span class="gpi-code">{{ $row->issuance_number }}</span></td>
                        <td>{{ \Carbon\Carbon::parse($row->issued_at)->format('M j, Y') }}</td>
                        <td>{{ $row->work_order_number ?? '—' }}</td>
                        <td>{{ $row->admin_name ?? '—' }}</td>
                        <td>{{ $lineCounts[$row->id] ?? 0 }}</td>
                        <td class="text-end">
                            <a href="{{ route('garage.parts-issuance.show', $row->id) }}" class="btn btn-sm btn-outline-primary rounded-3"><i class="bi bi-eye"></i></a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center py-5 text-muted">
                            <i class="bi bi-inbox d-block fs-1 mb-2 opacity-25"></i>
                            No issuances yet. <a href="{{ route('garage.parts-issuance.create') }}">Issue parts</a> from stock.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($issuances->hasPages())
        <div class="p-3 border-top bg-light">
            {{ $issuances->withQueryString()->links() }}
        </div>
        @endif
    </div>
</div>
@endsection