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

@section('content')
<style>
    /* Card Styles */
    .supplier-card {
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
        border: none;
        margin-top: 20px;
    }
    .supplier-card .card-body {
        padding: 20px;
    }
    
    /* Table Styles */
    .supplier-table {
        background: #ffffff !important;
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        margin-bottom: 0;
    }
    .supplier-table thead th {
        background: #f8f9fa !important;
        color: #495057;
        font-weight: 600;
        font-size: 13px;
        padding: 12px 15px;
        border-bottom: 2px solid #dee2e6;
        white-space: nowrap;
    }
    .supplier-table tbody td {
        padding: 10px 15px;
        font-size: 13px;
        vertical-align: middle;
        border-bottom: 1px solid #e9ecef;
    }
    .supplier-table tbody tr:hover {
        background-color: #f5f7fa !important;
    }
    .supplier-table tbody tr:last-child td {
        border-bottom: none;
    }
    
    /* Button Styles */
    .btn-action {
        border-radius: 6px;
        padding: 4px 10px;
        font-size: 12px;
        margin: 0 2px;
        transition: all 0.2s ease;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .btn-action:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
    .btn-action svg {
        width: 16px;
        height: 16px;
    }
    
    .btn-view {
        background: #17a2b8;
        color: #fff;
    }
    .btn-view:hover {
        background: #138496;
        color: #fff;
    }
    
    .btn-edit {
        background: #ffc107;
        color: #212529;
    }
    .btn-edit:hover {
        background: #e0a800;
        color: #212529;
    }
    
    .btn-delete {
        background: #dc3545;
        color: #fff;
    }
    .btn-delete:hover {
        background: #c82333;
        color: #fff;
    }
    
    .btn-primary-custom {
        background: #007bff;
        color: #fff;
        border-radius: 8px;
        padding: 8px 20px;
        border: none;
        transition: all 0.2s ease;
        font-size: 13px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .btn-primary-custom:hover {
        background: #0069d9;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
    }
    .btn-primary-custom svg {
        width: 18px;
        height: 18px;
    }
    
    .btn-success-custom {
        background: #28a745;
        color: #fff;
        border-radius: 8px;
        padding: 8px 20px;
        border: none;
        transition: all 0.2s ease;
        font-size: 13px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .btn-success-custom:hover {
        background: #218838;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
    }
    .btn-success-custom svg {
        width: 18px;
        height: 18px;
    }
    
    .btn-filter {
        background: #007bff;
        color: #fff;
        border-radius: 8px;
        padding: 8px 18px;
        border: none;
        font-size: 13px;
        transition: all 0.2s ease;
        white-space: nowrap;
        height: 38px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .btn-filter:hover {
        background: #0069d9;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
    }
    .btn-filter svg {
        width: 16px;
        height: 16px;
    }
    
    .btn-clear {
        background: #6c757d;
        color: #fff;
        border-radius: 8px;
        padding: 8px 18px;
        border: none;
        font-size: 13px;
        transition: all 0.2s ease;
        white-space: nowrap;
        height: 38px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .btn-clear:hover {
        background: #5a6268;
        color: #fff;
        transform: translateY(-1px);
    }
    .btn-clear svg {
        width: 16px;
        height: 16px;
    }
    
    /* Alert Styles */
    .alert-custom {
        border-radius: 8px;
        padding: 12px 20px;
        margin-bottom: 20px;
        border: none;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .alert-success-custom {
        background: #d4edda;
        color: #155724;
        border-left: 4px solid #28a745;
    }
    .alert-success-custom .close {
        color: #155724;
        opacity: 0.7;
        margin-left: auto;
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
    }
    .alert-success-custom svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
    
    /* Empty State */
    .empty-state {
        padding: 40px 20px;
        text-align: center;
    }
    .empty-state svg {
        width: 48px;
        height: 48px;
        color: #ccc;
    }
    .empty-state p {
        margin-top: 10px;
        color: #6c757d;
        font-size: 14px;
    }
    
    /* Pagination */
    .pagination-custom {
        margin: 0;
    }
    .pagination-custom .page-link {
        border-radius: 6px;
        padding: 6px 14px;
        margin: 0 2px;
        color: #495057;
        border: 1px solid #dee2e6;
    }
    .pagination-custom .page-item.active .page-link {
        background: #007bff;
        border-color: #007bff;
        color: #fff;
    }
    .pagination-custom .page-link:hover {
        background: #e9ecef;
        border-color: #dee2e6;
    }
    
    /* Checkbox Styles */
    .form-check-input-custom {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: #007bff;
    }
    
    /* Status Badge */
    .badge-custom {
        padding: 5px 14px;
        font-size: 11px;
        font-weight: 600;
        border-radius: 20px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .badge-active {
        background: #d4edda;
        color: #155724;
    }
    .badge-inactive {
        background: #f8d7da;
        color: #721c24;
    }
    
    /* Rating Stars */
    .rating-stars {
        color: #ffc107;
        font-size: 13px;
    }
    .rating-stars small {
        color: #6c757d;
        font-size: 11px;
    }
    
    /* Filter Row - Right Aligned */
    .filter-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        margin-bottom: 15px;
    }
    .filter-row .filter-group {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .filter-row .filter-group .input-group {
        min-width: 220px;
        display: flex;
        align-items: center;
    }
    .filter-row .filter-group select,
    .filter-row .filter-group input[type="date"] {
        min-width: 150px;
        height: 38px;
        border-radius: 8px;
        font-size: 13px;
        border: 1px solid #ced4da;
        padding: 0 12px;
        background: #ffffff;
        transition: all 0.2s ease;
    }
    .filter-row .filter-group select:focus,
    .filter-row .filter-group input[type="date"]:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
        outline: none;
    }
    .filter-row .input-group-text {
        background: #f8f9fa;
        border-radius: 8px 0 0 8px;
        border: 1px solid #ced4da;
        border-right: none;
        height: 38px;
        display: flex;
        align-items: center;
        padding: 0 12px;
    }
    .filter-row .input-group-text svg {
        width: 16px;
        height: 16px;
        color: #6c757d;
    }
    .filter-row .input-group .form-control {
        border-radius: 0 8px 8px 0;
        font-size: 13px;
        height: 38px;
        border: 1px solid #ced4da;
        border-left: none;
    }
    .filter-row .input-group .form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
        outline: none;
    }
    .filter-row .filter-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }
    
    /* Modal Styles */
    .modal-content-custom {
        border-radius: 12px;
        border: none;
        box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    }
    .modal-header-custom {
        background: #dc3545;
        color: #fff;
        border-radius: 12px 12px 0 0;
        padding: 15px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .modal-header-custom svg {
        width: 20px;
        height: 20px;
        margin-right: 8px;
    }
    .modal-body-custom {
        padding: 25px 20px;
    }
    .modal-footer-custom {
        border-top: 1px solid #e9ecef;
        padding: 15px 20px;
        border-radius: 0 0 12px 12px;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }
    .btn-close-white {
        background: none;
        border: none;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        opacity: 0.8;
    }
    .btn-close-white:hover {
        opacity: 1;
    }
    
    /* Responsive */
    @media (max-width: 992px) {
        .filter-row {
            flex-direction: column;
            align-items: stretch;
        }
        .filter-row .filter-group {
            width: 100%;
        }
        .filter-row .filter-group .input-group {
            min-width: 100%;
        }
        .filter-row .filter-group select,
        .filter-row .filter-group input[type="date"] {
            min-width: 100%;
            width: 100%;
        }
        .filter-row .filter-actions {
            justify-content: flex-end;
            order: -1;
        }
    }
    
    @media (max-width: 576px) {
        .filter-row .filter-actions {
            justify-content: stretch;
        }
        .filter-row .filter-actions .btn {
            flex: 1;
            text-align: center;
            justify-content: center;
        }
    }
    
    @media (max-width: 768px) {
        .supplier-table thead th {
            font-size: 11px;
            padding: 8px 10px;
        }
        .supplier-table tbody td {
            font-size: 11px;
            padding: 6px 10px;
        }
        .btn-action {
            padding: 3px 6px;
            font-size: 10px;
        }
        .btn-action svg {
            width: 14px;
            height: 14px;
        }
        .btn-primary-custom,
        .btn-success-custom {
            font-size: 11px;
            padding: 6px 12px;
        }
        .btn-primary-custom svg,
        .btn-success-custom svg {
            width: 14px;
            height: 14px;
        }
    }
</style>

<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-users" style="display: inline-block; vertical-align: middle; margin-right: 8px;">
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
            <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
            <path d="M16 3.13a4 4 0 0 1 0 7.75" />
            <path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />
        </svg>
        Suppliers
    </h1>
</section>

<section class="content">
    <!-- Include Navigation -->
    @include('manufacturing.partials.navigation')
    
    <div class="supplier-card">
        @if(session('success'))
            <div class="alert alert-success-custom alert-custom alert-dismissible" style="margin: 15px 20px 0 20px;">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-check-circle">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
                    <path d="M9 12l2 2l4 -4" />
                </svg>
                {{ session('success') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        <div class="card-body">
            <!-- Header -->
            <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
                <div>
                    <h5 class="mb-0" style="font-weight: 600; font-size: 16px; color: #212529;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-users-group" style="display: inline-block; vertical-align: middle; margin-right: 6px; color: #007bff;">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M10 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                            <path d="M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1" />
                            <path d="M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                            <path d="M17 10h2a2 2 0 0 1 2 2v1" />
                            <path d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                            <path d="M3 13v-1a2 2 0 0 1 2 -2h2" />
                        </svg>
                        Supplier Management
                    </h5>
                    <small class="text-muted" style="font-size: 13px;">Manage all your suppliers</small>
                </div>
                <div class="d-flex flex-wrap gap-2 mt-2 mt-sm-0">
                    <a href="{{ route('manufacturing.procurement.suppliers.create') }}" class="btn btn-primary-custom">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-plus">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M12 5l0 14" />
                            <path d="M5 12l14 0" />
                        </svg>
                        Add Supplier
                    </a>
                    <button class="btn btn-success-custom" id="exportBtn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-file-spreadsheet">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M14 3v4a1 1 0 0 0 1 1h4" />
                            <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
                            <path d="M8 11h8v7h-8z" />
                            <path d="M8 15h8" />
                            <path d="M8 18h8" />
                        </svg>
                        Export
                    </button>
                </div>
            </div>
            
            <!-- Search & Filter - Right Aligned Row -->
            <div class="filter-row">
                <!-- Action Buttons (First - Right side) -->
                <div class="filter-actions">
                    <button class="btn btn-clear" id="clearFiltersBtn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-x">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M18 6l-12 12" />
                            <path d="M6 6l12 12" />
                        </svg>
                        Clear
                    </button>
                    <button class="btn btn-filter" id="applyFiltersBtn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-filter">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.414 -4.414a2 2 0 0 1 -.586 -1.414z" />
                        </svg>
                        Filter
                    </button>
                </div>
                
                <!-- Date Filter -->
                <div class="filter-group">
                    <input type="date" class="form-control" id="dateFilter" value="{{ request('date') }}">
                </div>
                
                <!-- Status Filter -->
                <div class="filter-group">
                    <select class="form-select" id="statusFilter">
                        <option value="">All Status</option>
                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
                
                <!-- Search -->
                <div class="filter-group">
                    <div class="input-group">
                        <span class="input-group-text">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-search">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
                                <path d="M21 21l-6 -6" />
                            </svg>
                        </span>
                        <input type="text" class="form-control" id="searchInput" placeholder="Search suppliers..." 
                               value="{{ request('search') }}">
                    </div>
                </div>
            </div>
            
            <!-- Table -->
            <div class="table-responsive" style="padding-top: 5px;">
                <table class="supplier-table table">
                    <thead>
                        <tr>
                            <th width="45">
                                <input type="checkbox" id="selectAll" class="form-check-input-custom">
                            </th>
                            <th>Code</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>City</th>
                            <th>Rating</th>
                            <th>Status</th>
                            <th width="180">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($data as $supplier)
                        <tr>
                            <td>
                                <input type="checkbox" class="rowCheckbox form-check-input-custom" value="{{ $supplier->id }}">
                            </td>
                            <td><strong>{{ $supplier->supplier_code }}</strong></td>
                            <td>{{ $supplier->name }}</td>
                            <td>{{ $supplier->email ?? 'N/A' }}</td>
                            <td>{{ $supplier->phone ?? 'N/A' }}</td>
                            <td>{{ $supplier->city ?? 'N/A' }}</td>
                            <td>
                                <div class="rating-stars">
                                    {!! $supplier->rating_stars !!}
                                    <small>({{ $supplier->rating }})</small>
                                </div>
                            </td>
                            <td>
                                <span class="badge-custom {{ $supplier->is_active ? 'badge-active' : 'badge-inactive' }}">
                                    {{ $supplier->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td>
                                <div class="d-flex flex-wrap gap-1">
                                    <a href="{{ route('manufacturing.procurement.suppliers.show', $supplier->id) }}" 
                                       class="btn-action btn-view" title="View Supplier">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-eye">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                                            <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
                                        </svg>
                                    </a>
                                    <a href="{{ route('manufacturing.procurement.suppliers.edit', $supplier->id) }}" 
                                       class="btn-action btn-edit" title="Edit Supplier">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-pencil">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" />
                                            <path d="M13.5 6.5l4 4" />
                                        </svg>
                                    </a>
                                    <button class="btn-action btn-delete deleteBtn" 
                                            data-id="{{ $supplier->id }}" 
                                            data-name="{{ $supplier->name }}" 
                                            title="Delete Supplier">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-trash">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path d="M4 7l16 0" />
                                            <path d="M10 11l0 6" />
                                            <path d="M14 11l0 6" />
                                            <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
                                            <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
                                        </svg>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="9" class="empty-state">
                                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-inbox" style="color: #ccc;">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                    <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
                                    <path d="M4 13h3l2 3h6l2 -3h3" />
                                </svg>
                                <p>No suppliers found</p>
                                <a href="{{ route('manufacturing.procurement.suppliers.create') }}" class="btn btn-primary-custom btn-sm">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-plus">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path d="M12 5l0 14" />
                                        <path d="M5 12l14 0" />
                                    </svg>
                                    Add First Supplier
                                </a>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination -->
            <div class="d-flex flex-wrap justify-content-between align-items-center mt-3 pt-2" style="border-top: 1px solid #e9ecef;">
                <div style="font-size: 13px; color: #6c757d;">
                    Showing {{ $data->firstItem() ?? 0 }} to {{ $data->lastItem() ?? 0 }} of {{ $data->total() }} entries
                </div>
                <div class="pagination-custom">
                    {{ $data->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content modal-content-custom">
            <div class="modal-header-custom">
                <h5 class="modal-title" style="font-weight: 600; display: flex; align-items: center;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-alert-triangle">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M12 9v4" />
                        <path d="M12 17h.01" />
                        <path d="M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0 -18z" />
                    </svg>
                    Confirm Delete
                </h5>
                <button type="button" class="btn-close-white" data-bs-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body-custom">
                <p style="font-size: 15px; margin-bottom: 5px;">
                    Are you sure you want to delete <strong id="deleteName" style="color: #dc3545;"></strong>?
                </p>
                <p class="text-danger" style="font-size: 13px; margin-bottom: 0;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-info-circle" style="display: inline-block; vertical-align: middle;">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
                        <path d="M12 8l.01 0" />
                        <path d="M11 12l1 0l0 4l1 0" />
                    </svg>
                    This action cannot be undone.
                </p>
            </div>
            <div class="modal-footer-custom">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="border-radius: 8px; padding: 8px 25px;">
                    Cancel
                </button>
                <form id="deleteForm" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger" style="border-radius: 8px; padding: 8px 25px; display: inline-flex; align-items: center; gap: 6px;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-trash">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M4 7l16 0" />
                            <path d="M10 11l0 6" />
                            <path d="M14 11l0 6" />
                            <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
                            <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
                        </svg>
                        Delete
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    // =============================================
    // Select All Checkbox
    // =============================================
    document.getElementById('selectAll')?.addEventListener('change', function() {
        document.querySelectorAll('.rowCheckbox').forEach(cb => cb.checked = this.checked);
    });

    // =============================================
    // Delete Button - Show Modal
    // =============================================
    document.querySelectorAll('.deleteBtn').forEach(btn => {
        btn.addEventListener('click', function() {
            const id = this.dataset.id;
            const name = this.dataset.name;
            document.getElementById('deleteName').textContent = name;
            document.getElementById('deleteForm').action = '{{ route("manufacturing.procurement.suppliers.index") }}/' + id;
            new bootstrap.Modal(document.getElementById('deleteModal')).show();
        });
    });

    // =============================================
    // Export Button
    // =============================================
    document.getElementById('exportBtn')?.addEventListener('click', function() {
        window.location.href = '{{ route("manufacturing.procurement.suppliers.index") }}?export=csv';
    });

    // =============================================
    // Apply Filters
    // =============================================
    document.getElementById('applyFiltersBtn')?.addEventListener('click', function() {
        const search = document.getElementById('searchInput').value;
        const status = document.getElementById('statusFilter').value;
        const date = document.getElementById('dateFilter').value;
        
        let url = window.location.pathname + '?';
        if (search) url += 'search=' + encodeURIComponent(search) + '&';
        if (status) url += 'status=' + encodeURIComponent(status) + '&';
        if (date) url += 'date=' + encodeURIComponent(date) + '&';
        
        window.location.href = url;
    });

    // =============================================
    // Clear Filters
    // =============================================
    document.getElementById('clearFiltersBtn')?.addEventListener('click', function() {
        window.location.href = window.location.pathname;
    });

    // =============================================
    // Enter Key for Search
    // =============================================
    document.getElementById('searchInput')?.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            document.getElementById('applyFiltersBtn').click();
        }
    });

    // =============================================
    // Bulk Delete
    // =============================================
    document.getElementById('bulkDeleteBtn')?.addEventListener('click', function() {
        const selected = document.querySelectorAll('.rowCheckbox:checked');
        if (selected.length === 0) {
            alert('Please select at least one record');
            return;
        }
        if (confirm('Delete ' + selected.length + ' records?')) {
            const ids = Array.from(selected).map(cb => cb.value);
            fetch('{{ route("manufacturing.procurement.suppliers.bulk-destroy") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ ids: ids })
            }).then(response => {
                if (response.ok) {
                    window.location.reload();
                }
            });
        }
    });
</script>

@endsection