@extends('layouts.app')

@section('title', 'Suppliers')

@section('content')
<x-breadcrumb :items="[['label' => 'Suppliers']]" />

<x-page-header title="Suppliers" subtitle="Manage supplier directory, channels and performance.">
    <x-slot name="actions">
        <a href="{{ route('suppliers.create') }}" class="procure-btn-primary">
            <i class="fas fa-plus"></i> Add Supplier
        </a>
    </x-slot>
</x-page-header>

<div class="procure-filters">
    <form method="GET" action="{{ route('suppliers.index') }}" class="row align-items-end">
        <div class="col-md-4 mb-2">
            <label class="small text-muted">Search</label>
            <div class="procure-search" style="width:100%;">
                <i class="fas fa-search"></i>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Name, code, email..." style="width:100%;">
            </div>
        </div>
        <div class="col-md-3 mb-2">
            <label class="small text-muted">Status</label>
            <select name="status" class="form-control form-control-sm" style="border-radius:8px;">
                <option value="">All statuses</option>
                <option value="active" @selected(request('status') === 'active')>Active</option>
                <option value="inactive" @selected(request('status') === 'inactive')>Inactive</option>
            </select>
        </div>
        <div class="col-md-3 mb-2">
            <label class="small text-muted">Channel</label>
            <select name="channel_type" class="form-control form-control-sm" style="border-radius:8px;">
                <option value="">All channels</option>
                <option value="equipment" @selected(request('channel_type') === 'equipment')>Equipment</option>
                <option value="chemistry_consumables" @selected(request('channel_type') === 'chemistry_consumables')>Chemistry Consumables</option>
                <option value="packaging" @selected(request('channel_type') === 'packaging')>Packaging</option>
                <option value="direct_import" @selected(request('channel_type') === 'direct_import')>Direct Import</option>
                <option value="other" @selected(request('channel_type') === 'other')>Other</option>
            </select>
        </div>
        <div class="col-md-2 mb-2">
            <button type="submit" class="procure-btn w-100"><i class="fas fa-filter"></i> Filter</button>
        </div>
    </form>
</div>

@if(($suppliers ?? collect())->isEmpty())
    <div class="chart-card">
        <div class="chart-card-body">
            <x-empty-state
                icon="fas fa-truck"
                title="No suppliers found"
                message="Add your first supplier to start managing procurement channels."
                :action-url="route('suppliers.create')"
                action-label="Add Supplier" />
        </div>
    </div>
@else
    <div class="chart-card">
        <div class="chart-card-body" style="overflow-x:auto;">
            <table class="procure-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Code</th>
                        <th>Channel</th>
                        <th>Status</th>
                        <th>Lead Time</th>
                        <th class="text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($suppliers as $supplier)
                        <tr>
                            <td>
                                <a href="{{ route('suppliers.show', $supplier) }}" class="font-weight-bold" style="color:#1e293b;">
                                    {{ $supplier->name }}
                                </a>
                                @if($supplier->is_regional_reexporter)
                                    <span class="badge badge-warning ml-1" style="font-size:10px;">Re-exporter</span>
                                @endif
                            </td>
                            <td>{{ $supplier->code ?? '—' }}</td>
                            <td>{{ ucfirst(str_replace('_', ' ', $supplier->channel_type ?? '')) }}</td>
                            <td><x-status-badge :status="$supplier->status" /></td>
                            <td>{{ $supplier->lead_time_days !== null ? $supplier->lead_time_days.' days' : '—' }}</td>
                            <td class="text-right text-nowrap">
                                <a href="{{ route('suppliers.show', $supplier) }}" class="procure-btn" title="View"><i class="fas fa-eye"></i></a>
                                <a href="{{ route('suppliers.edit', $supplier) }}" class="procure-btn" title="Edit"><i class="fas fa-edit"></i></a>
                                <button type="button" class="procure-btn text-danger"
                                    onclick="confirmAction({
                                        title: 'Delete Supplier',
                                        message: 'Are you sure you want to delete {{ addslashes($supplier->name) }}?',
                                        confirmText: 'Delete',
                                        onConfirm: function() { document.getElementById('delete-supplier-{{ $supplier->id }}').submit(); }
                                    })">
                                    <i class="fas fa-trash"></i>
                                </button>
                                <form id="delete-supplier-{{ $supplier->id }}" action="{{ route('suppliers.destroy', $supplier) }}" method="POST" class="d-none">
                                    @csrf
                                    @method('DELETE')
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @if(method_exists($suppliers, 'links'))
            <div class="px-3 pb-3">{{ $suppliers->withQueryString()->links() }}</div>
        @endif
    </div>
@endif
@endsection