@extends('layouts.app')
@section('title', 'Suppliers')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <h4 class="mb-0 fw-bold"><i class="bi bi-truck text-primary me-2"></i>Suppliers</h4>
        <p class="text-muted mb-0 small">{{ $suppliers->total() }} total suppliers</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('suppliers.export') }}" class="btn btn-outline-success btn-sm"><i class="bi bi-download me-1"></i>Export</a>
        <a href="{{ route('suppliers.create') }}" class="btn btn-primary btn-sm"><i class="bi bi-plus-lg me-1"></i>New Supplier</a>
    </div>
</div>

<div class="card border-0 shadow-sm mb-3">
    <div class="card-body py-2">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-5">
                <input type="text" name="search" class="form-control form-control-sm" placeholder="Name, code, mobile, VAT..." value="{{ request('search') }}">
            </div>
            <div class="col-md-3">
                <input type="text" name="city" class="form-control form-control-sm" placeholder="City..." value="{{ request('city') }}">
            </div>
            <div class="col-md-2">
                <button class="btn btn-primary btn-sm w-100" type="submit"><i class="bi bi-search me-1"></i>Search</button>
            </div>
            <div class="col-md-2">
                <a href="{{ route('suppliers.index') }}" class="btn btn-outline-secondary btn-sm w-100">Clear</a>
            </div>
        </form>
    </div>
</div>

<div class="card border-0 shadow-sm">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover table-dense mb-0">
                <thead>
                    <tr>
                        <th>Code</th>
                        <th>Name</th>
                        <th>Mobile</th>
                        <th>City</th>
                        <th>VAT No.</th>
                        <th>IBAN</th>
                        <th class="text-center">Credit Days</th>
                        <th class="text-center">Status</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($suppliers as $supplier)
                    <tr>
                        <td class="font-monospace small fw-semibold">{{ $supplier->supplier_code }}</td>
                        <td>
                            <div class="fw-semibold">{{ $supplier->name_en }}</div>
                            <div class="text-muted small" dir="rtl">{{ $supplier->name_ar }}</div>
                        </td>
                        <td class="small">{{ $supplier->mobile ?? $supplier->phone ?? '—' }}</td>
                        <td class="small">{{ $supplier->city ?? '—' }}</td>
                        <td class="small font-monospace">{{ $supplier->vat_number ?? '—' }}</td>
                        <td class="small">{{ $supplier->iban ? substr($supplier->iban, 0, 10) . '...' : '—' }}</td>
                        <td class="text-center small">{{ $supplier->credit_days ?? 0 }} days</td>
                        <td class="text-center">
                            <span class="badge {{ $supplier->status == 'active' ? 'bg-success-subtle text-success' : 'bg-danger-subtle text-danger' }}">{{ ucfirst($supplier->status) }}</span>
                        </td>
                        <td class="text-center">
                            <div class="d-flex justify-content-center gap-1">
                                <a href="{{ route('suppliers.edit', $supplier) }}" class="btn btn-xs btn-outline-primary"><i class="bi bi-pencil"></i></a>
                                <a href="{{ route('suppliers.statement', $supplier) }}" class="btn btn-xs btn-outline-info"><i class="bi bi-journal-text"></i></a>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center py-5 text-muted">
                            <i class="bi bi-truck display-6 d-block mb-2"></i>
                            No suppliers found. <a href="{{ route('suppliers.create') }}">Create one</a>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($suppliers->hasPages())
    <div class="card-footer bg-transparent d-flex justify-content-between">
        <small class="text-muted">{{ $suppliers->firstItem() }}–{{ $suppliers->lastItem() }} of {{ $suppliers->total() }}</small>
        {{ $suppliers->links() }}
    </div>
    @endif
</div>
<style>.btn-xs{padding:.15rem .45rem;font-size:.75rem;}</style>
@endsection