@extends('layouts.app')
@section('title', 'Quality Inspections')

@section('content')
<style>
    .inspection-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;
    }
    .inspection-card .card-body {
        padding: 20px;
    }
    
    .inspection-table {
        background: #ffffff !important;
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        margin-bottom: 0;
    }
    .inspection-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;
    }
    .inspection-table tbody td {
        padding: 10px 15px;
        font-size: 13px;
        vertical-align: middle;
        border-bottom: 1px solid #e9ecef;
    }
    .inspection-table tbody tr:hover {
        background-color: #f5f7fa !important;
    }
    .inspection-table tbody tr:last-child td {
        border-bottom: none;
    }
    
    .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-approve { background: #28a745; color: #fff; }
    .btn-approve:hover { background: #218838; color: #fff; }
    .btn-reject { background: #dc3545; color: #fff; }
    .btn-reject:hover { background: #c82333; color: #fff; }
    .btn-use-as-is { background: #fd7e14; color: #fff; }
    .btn-use-as-is:hover { background: #e06b0a; 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-info-custom {
        background: #17a2b8;
        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-info-custom:hover {
        background: #138496;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);
    }
    .btn-info-custom svg {
        width: 18px;
        height: 18px;
    }
    
    .badge-custom {
        padding: 5px 14px;
        font-size: 11px;
        font-weight: 600;
        border-radius: 20px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .badge-pending { background: #e9ecef; color: #495057; }
    .badge-in-progress { background: #cce5ff; color: #004085; }
    .badge-approved { background: #d4edda; color: #155724; }
    .badge-rejected { background: #f8d7da; color: #721c24; }
    .badge-use-as-is { background: #fff3e0; color: #856404; }
    
    .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: 200px;
        display: flex;
        align-items: center;
    }
    .filter-row .filter-group select,
    .filter-row .filter-group input[type="date"] {
        min-width: 140px;
        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;
    }
    
    .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;
    }
    
    .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-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;
    }
    
    .form-check-input-custom {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: #007bff;
    }
    
    .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;
    }
    
    .modal-content-custom {
        border-radius: 12px;
        border: none;
        box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    }
    .btn-close-white {
        background: none;
        border: none;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        opacity: 0.8;
    }
    .btn-close-white:hover {
        opacity: 1;
    }
    
    .stats-card {
        background: #ffffff;
        border-radius: 10px;
        padding: 15px 20px;
        border: 1px solid #e9ecef;
        transition: all 0.2s ease;
        text-align: center;
    }
    .stats-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .stats-card .stats-number {
        font-size: 22px;
        font-weight: 700;
        margin: 0;
    }
    .stats-card .stats-label {
        font-size: 12px;
        color: #6c757d;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .stats-card .stats-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 8px auto;
    }
    .stats-icon-primary { background: #e7f1ff; color: #0d6efd; }
    .stats-icon-success { background: #d4edda; color: #28a745; }
    .stats-icon-warning { background: #fff3e0; color: #fd7e14; }
    .stats-icon-danger { background: #f8d7da; color: #dc3545; }
    .stats-icon-info { background: #d1ecf1; color: #17a2b8; }
    .stats-icon-secondary { background: #e9ecef; color: #6c757d; }
    
    @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) {
        .inspection-table thead th {
            font-size: 11px;
            padding: 8px 10px;
        }
        .inspection-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-info-custom {
            font-size: 11px;
            padding: 6px 12px;
        }
        .btn-primary-custom svg,
        .btn-info-custom svg {
            width: 14px;
            height: 14px;
        }
        .stats-card .stats-number {
            font-size: 18px;
        }
    }
</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-clipboard-check" style="display: inline-block; vertical-align: middle; margin-right: 8px;">
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" />
            <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
            <path d="M9 12l2 2l4 -4" />
        </svg>
        Quality Inspections
    </h1>
</section>

<section class="content">
    @include('manufacturing.partials.navigation')
    
    <!-- Stats Cards -->
    <div class="row mb-4">
        <div class="col-md-3 col-6">
            <div class="stats-card">
                <div class="stats-icon stats-icon-primary">
                    <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-clipboard">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" />
                        <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
                    </svg>
                </div>
                <h4 class="stats-number">{{ $stats['total_inspections'] ?? 0 }}</h4>
                <p class="stats-label">Total Inspections</p>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="stats-card">
                <div class="stats-icon stats-icon-warning">
                    <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-clock">
                        <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 7l0 5l3 3" />
                    </svg>
                </div>
                <h4 class="stats-number">{{ $stats['pending'] ?? 0 }}</h4>
                <p class="stats-label">Pending</p>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="stats-card">
                <div class="stats-icon stats-icon-success">
                    <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">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M5 12l5 5l10 -10" />
                    </svg>
                </div>
                <h4 class="stats-number">{{ $stats['approved'] ?? 0 }}</h4>
                <p class="stats-label">Approved</p>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="stats-card">
                <div class="stats-icon stats-icon-danger">
                    <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-x">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M18 6l-12 12" />
                        <path d="M6 6l12 12" />
                    </svg>
                </div>
                <h4 class="stats-number">{{ $stats['rejected'] ?? 0 }}</h4>
                <p class="stats-label">Rejected</p>
            </div>
        </div>
    </div>
    
    <div class="inspection-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">
            <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-clipboard-check" style="display: inline-block; vertical-align: middle; margin-right: 6px; color: #007bff;">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" />
                            <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
                            <path d="M9 12l2 2l4 -4" />
                        </svg>
                        Inspection Management
                    </h5>
                    <small class="text-muted" style="font-size: 13px;">Track quality control inspections</small>
                </div>
                <div class="d-flex flex-wrap gap-2 mt-2 mt-sm-0">
                    <a href="{{ route('manufacturing.quality.inspections.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>
                        New Inspection
                    </a>
                    <button class="btn btn-info-custom" onclick="location.reload()">
                        <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-refresh">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
                            <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
                        </svg>
                        Refresh
                    </button>
                </div>
            </div>
            
            <!-- Search & Filter -->
            <div class="filter-row">
                <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>
                
                <div class="filter-group">
                    <input type="date" class="form-control" id="dateFilter" value="{{ request('date') }}">
                </div>
                
                <div class="filter-group">
                    <select class="form-select" id="statusFilter">
                        <option value="">All Status</option>
                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="in_progress" {{ request('status') == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                        <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Approved</option>
                        <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                        <option value="use_as_is" {{ request('status') == 'use_as_is' ? 'selected' : '' }}>Use As Is</option>
                    </select>
                </div>
                
                <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 inspections..." 
                               value="{{ request('search') }}">
                    </div>
                </div>
            </div>
            
            <!-- Table -->
            <div class="table-responsive" style="padding-top: 5px;">
                <table class="inspection-table table">
                    <thead>
                        <tr>
                            <th width="45">
                                <input type="checkbox" id="selectAll" class="form-check-input-custom">
                            </th>
                            <th>Inspection #</th>
                            <th>Source</th>
                            <th>Product</th>
                            <th>Parameters</th>
                            <th>Pass Rate</th>
                            <th>Status</th>
                            <th>Inspector</th>
                            <th>Date</th>
                            <th width="200">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($data as $inspection)
                        <tr>
                            <td>
                                <input type="checkbox" class="rowCheckbox form-check-input-custom" value="{{ $inspection->id }}">
                            </td>
                            <td><strong>{{ $inspection->inspection_number }}</strong></td>
                            <td>
                                <span class="badge bg-primary" style="padding: 4px 12px; font-size: 11px; border-radius: 20px;">
                                    {{ ucfirst(str_replace('_', ' ', $inspection->source_type)) }}
                                </span>
                            </td>
                            <td>
                                @php
                                    $product = $inspection->reference;
                                @endphp
                                {{ $product->name ?? 'N/A' }}
                            </td>
                            <td>{{ $inspection->parameters->count() }}</td>
                            <td>
                                <div class="d-flex align-items-center" style="gap: 8px;">
                                    <div class="progress flex-grow-1" style="height: 8px; background: #e9ecef; border-radius: 4px;">
                                        <div class="progress-bar" role="progressbar" 
                                             style="width: {{ $inspection->getPassRate() }}%; background-color: {{ $inspection->getPassRate() >= 80 ? '#28a745' : ($inspection->getPassRate() >= 50 ? '#ffc107' : '#dc3545') }};">
                                        </div>
                                    </div>
                                    <span style="font-weight: 600; font-size: 13px;">{{ round($inspection->getPassRate()) }}%</span>
                                </div>
                            </td>
                            <td>
                                @php
                                    $statusClasses = [
                                        'pending' => 'badge-pending',
                                        'in_progress' => 'badge-in-progress',
                                        'approved' => 'badge-approved',
                                        'rejected' => 'badge-rejected',
                                        'use_as_is' => 'badge-use-as-is'
                                    ];
                                    $class = $statusClasses[$inspection->status] ?? 'badge-pending';
                                @endphp
                                <span class="badge-custom {{ $class }}">{{ ucfirst(str_replace('_', ' ', $inspection->status)) }}</span>
                            </td>
                            <td>{{ $inspection->inspector->name ?? 'N/A' }}</td>
                            <td>{{ $inspection->inspection_date->format('Y-m-d H:i') }}</td>
                            <td>
                                <div class="d-flex flex-wrap gap-1">
                                    <a href="{{ route('manufacturing.quality.inspections.show', $inspection->id) }}" 
                                       class="btn-action btn-view" title="View Inspection">
                                        <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.quality.inspections.edit', $inspection->id) }}" 
                                       class="btn-action btn-edit" title="Edit Inspection">
                                        <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>
                                    @if($inspection->status == 'pending' || $inspection->status == 'in_progress')
                                    <button class="btn-action btn-approve approveBtn" data-id="{{ $inspection->id }}" title="Approve">
                                        <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-check">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path d="M5 12l5 5l10 -10" />
                                        </svg>
                                    </button>
                                    <button class="btn-action btn-reject rejectBtn" data-id="{{ $inspection->id }}" title="Reject">
                                        <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>
                                    </button>
                                    <button class="btn-action btn-use-as-is useAsIsBtn" data-id="{{ $inspection->id }}" title="Use As Is">
                                        <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-alert-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="M12 8l0 4" />
                                            <path d="M12 16l.01 0" />
                                        </svg>
                                    </button>
                                    @endif
                                    <button class="btn-action btn-delete deleteBtn" 
                                            data-id="{{ $inspection->id }}" 
                                            data-name="{{ $inspection->inspection_number }}"
                                            title="Delete">
                                        <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="10" 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-clipboard" style="color: #ccc;">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                    <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" />
                                    <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
                                </svg>
                                <p>No inspections found</p>
                                <a href="{{ route('manufacturing.quality.inspections.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>
                                    Create First Inspection
                                </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" style="background: #dc3545; color: #fff; border-radius: 12px 12px 0 0; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between;">
                <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" style="padding: 25px 20px;">
                <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" style="border-top: 1px solid #e9ecef; padding: 15px 20px; border-radius: 0 0 12px 12px; display: flex; justify-content: flex-end; gap: 10px;">
                <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>

<!-- Reject Modal -->
<div class="modal fade" id="rejectModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content modal-content-custom">
            <div class="modal-header" style="background: #dc3545; color: #fff; border-radius: 12px 12px 0 0; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between;">
                <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-x">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M18 6l-12 12" />
                        <path d="M6 6l12 12" />
                    </svg>
                    Reject Inspection
                </h5>
                <button type="button" class="btn-close-white" data-bs-dismiss="modal">&times;</button>
            </div>
            <form id="rejectForm" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body" style="padding: 25px 20px;">
                    <p style="font-size: 14px; margin-bottom: 15px;">
                        Rejecting inspection: <strong id="rejectName" style="color: #dc3545;"></strong>
                    </p>
                    <div class="form-group" style="margin-bottom: 0;">
                        <label style="font-weight: 500; font-size: 13px; display: block; margin-bottom: 5px;">Rejection Reason</label>
                        <textarea name="remarks" class="form-control" rows="3" placeholder="Please provide rejection reason..." style="border-radius: 8px; padding: 10px 14px; border: 1px solid #ced4da; width: 100%; resize: vertical;"></textarea>
                    </div>
                </div>
                <div class="modal-footer" style="border-top: 1px solid #e9ecef; padding: 15px 20px; border-radius: 0 0 12px 12px; display: flex; justify-content: flex-end; gap: 10px;">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="border-radius: 8px; padding: 8px 25px;">
                        Cancel
                    </button>
                    <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-x">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M18 6l-12 12" />
                            <path d="M6 6l12 12" />
                        </svg>
                        Reject
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Use As Is Modal -->
<div class="modal fade" id="useAsIsModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content modal-content-custom">
            <div class="modal-header" style="background: #fd7e14; color: #fff; border-radius: 12px 12px 0 0; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between;">
                <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-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="M12 8l0 4" />
                        <path d="M12 16l.01 0" />
                    </svg>
                    Use As Is
                </h5>
                <button type="button" class="btn-close-white" data-bs-dismiss="modal">&times;</button>
            </div>
            <form id="useAsIsForm" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body" style="padding: 25px 20px;">
                    <p style="font-size: 14px; margin-bottom: 15px;">
                        Approve as-is for: <strong id="useAsIsName" style="color: #fd7e14;"></strong>
                    </p>
                    <div class="form-group" style="margin-bottom: 0;">
                        <label style="font-weight: 500; font-size: 13px; display: block; margin-bottom: 5px;">Remarks <span class="text-danger">*</span></label>
                        <textarea name="remarks" class="form-control" rows="3" placeholder="Please provide justification..." style="border-radius: 8px; padding: 10px 14px; border: 1px solid #ced4da; width: 100%; resize: vertical;" required></textarea>
                    </div>
                </div>
                <div class="modal-footer" style="border-top: 1px solid #e9ecef; padding: 15px 20px; border-radius: 0 0 12px 12px; display: flex; justify-content: flex-end; gap: 10px;">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="border-radius: 8px; padding: 8px 25px;">
                        Cancel
                    </button>
                    <button type="submit" class="btn" style="border-radius: 8px; padding: 8px 25px; background: #fd7e14; color: #fff; 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-check">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M5 12l5 5l10 -10" />
                        </svg>
                        Approve As Is
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

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

    // =============================================
    // Delete Button
    // =============================================
    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.quality.inspections.index") }}/' + id;
            new bootstrap.Modal(document.getElementById('deleteModal')).show();
        });
    });

    // =============================================
    // Approve Button
    // =============================================
    document.querySelectorAll('.approveBtn').forEach(btn => {
        btn.addEventListener('click', function() {
            if (confirm('Approve this inspection?')) {
                const id = this.dataset.id;
                fetch('{{ route("manufacturing.quality.inspections.approve", "") }}/' + id, {
                    method: 'PUT',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Content-Type': 'application/json'
                    }
                }).then(response => response.json())
                  .then(data => {
                      if (data.message) {
                          alert(data.message);
                          window.location.reload();
                      }
                  })
                  .catch(error => {
                      alert('Error approving inspection. Please try again.');
                  });
            }
        });
    });

    // =============================================
    // Reject Button - Show Modal
    // =============================================
    document.querySelectorAll('.rejectBtn').forEach(btn => {
        btn.addEventListener('click', function() {
            const id = this.dataset.id;
            const name = this.dataset.closest('tr').querySelector('td:nth-child(2)').textContent.trim();
            document.getElementById('rejectName').textContent = name;
            document.getElementById('rejectForm').action = '{{ route("manufacturing.quality.inspections.reject", "") }}/' + id;
            new bootstrap.Modal(document.getElementById('rejectModal')).show();
        });
    });

    // =============================================
    // Use As Is Button - Show Modal
    // =============================================
    document.querySelectorAll('.useAsIsBtn').forEach(btn => {
        btn.addEventListener('click', function() {
            const id = this.dataset.id;
            const name = this.dataset.closest('tr').querySelector('td:nth-child(2)').textContent.trim();
            document.getElementById('useAsIsName').textContent = name;
            document.getElementById('useAsIsForm').action = '{{ route("manufacturing.quality.inspections.use-as-is", "") }}/' + id;
            new bootstrap.Modal(document.getElementById('useAsIsModal')).show();
        });
    });

    // =============================================
    // 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();
        }
    });
</script>

@endsection