@extends('layouts.app')
@section('title', 'Suppliers')
@php $breadcrumbs = [['label' => 'Masters', 'url' => '#'], ['label' => 'Suppliers']]; @endphp

@section('content')
<div class="d-flex flex-wrap align-items-center justify-content-between mb-3">
    <div>
        <h4 class="fw-bold mb-1">Supplier Master</h4>
        <p class="text-muted mb-0" style="font-size:0.85rem;">Manage your supplier database</p>
    </div>
    <div class="d-flex gap-2">
        <button class="btn btn-outline-secondary btn-sm" data-bs-toggle="collapse" data-bs-target="#filterCollapse"><i class="bi bi-funnel me-1"></i>Filters</button>
        @can('suppliers.create')
            <a href="{{ route('masters.suppliers.create') }}" class="btn btn-primary btn-sm"><i class="bi bi-plus-lg me-1"></i>New Supplier</a>
        @endcan
    </div>
</div>

<div class="collapse mb-3" id="filterCollapse">
    <div class="card border shadow-sm">
        <div class="card-body py-3">
            <form id="supplierFilterForm">
                <div class="row g-2 align-items-end">
                    <div class="col-md-2"><label class="form-label" style="font-size:0.78rem;">Type</label><select class="form-select form-select-sm" id="filterType"><option value="">All Types</option><option value="manufacturer">Manufacturer</option><option value="trader">Trader</option><option value="agent">Agent</option><option value="service">Service Provider</option></select></div>
                    <div class="col-md-2"><label class="form-label" style="font-size:0.78rem;">City</label><input type="text" class="form-control form-control-sm" id="filterCity" placeholder="City"></div>
                    <div class="col-md-2"><label class="form-label" style="font-size:0.78rem;">Status</label><select class="form-select form-select-sm" id="filterStatus"><option value="">All</option><option value="active">Active</option><option value="inactive">Inactive</option></select></div>
                    <div class="col-md-2"><button type="submit" class="btn btn-primary btn-sm w-100"><i class="bi bi-search me-1"></i>Apply</button></div>
                    <div class="col-md-2"><button type="reset" class="btn btn-outline-secondary btn-sm w-100"><i class="bi bi-arrow-counterclockwise me-1"></i>Reset</button></div>
                </div>
            </form>
        </div>
    </div>
</div>

<x-data-table id="suppliersTable" title="Supplier List"
    :columns="[
        ['key' => 'code', 'label' => 'Code', 'width' => '100px'],
        ['key' => 'name', 'label' => 'Supplier Name'],
        ['key' => 'type', 'label' => 'Type'],
        ['key' => 'city', 'label' => 'City'],
        ['key' => 'country', 'label' => 'Country'],
        ['key' => 'contact_person', 'label' => 'Contact'],
        ['key' => 'phone', 'label' => 'Phone'],
        ['key' => 'status', 'label' => 'Status'],
    ]"
    source="{{ route('masters.suppliers.index') }}"
/>
@endsection