@extends('layouts.app')
@section('title', 'Bill of Materials')

@section('content')
<style>
    .bom-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;
    }
    .bom-card .card-body {
        padding: 20px;
    }
    
    .bom-table {
        background: #ffffff !important;
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        margin-bottom: 0;
    }
    .bom-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;
    }
    .bom-table tbody td {
        padding: 10px 15px;
        font-size: 13px;
        vertical-align: middle;
        border-bottom: 1px solid #e9ecef;
    }
    .bom-table tbody tr:hover {
        background-color: #f5f7fa !important;
    }
    .bom-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-duplicate {
        background: #28a745;
        color: #fff;
    }
    .btn-duplicate:hover {
        background: #218838;
        color: #fff;
    }
    
    .btn-structure {
        background: #6f42c1;
        color: #fff;
    }
    .btn-structure:hover {
        background: #5a32a3;
        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;
    }
    
    .badge-custom {
        padding: 5px 14px;
        font-size: 11px;
        font-weight: 600;
        border-radius: 20px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .badge-draft { background: #e9ecef; color: #495057; }
    .badge-active { background: #d4edda; color: #155724; }
    .badge-inactive { background: #f8d7da; color: #721c24; }
    .badge-obsolete { background: #6c757d; color: #fff; }
    
    .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 {
        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 {
        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 .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;
    }
    
    .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;
    }

    /* Custom Modal Styles */
    .custom-modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        justify-content: center;
        align-items: center;
    }
    .custom-modal-overlay.active {
        display: flex;
    }
    .custom-modal {
        background: #ffffff;
        border-radius: 12px;
        max-width: 800px;
        width: 95%;
        max-height: 90vh;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        animation: modalSlideIn 0.3s ease;
    }
    @keyframes modalSlideIn {
        from {
            transform: translateY(-30px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    .custom-modal-header {
        padding: 20px 25px;
        border-bottom: 1px solid #e9ecef;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 12px 12px 0 0;
    }
    .custom-modal-header.danger {
        background: #dc3545;
        color: #fff;
    }
    .custom-modal-header.primary {
        background: #6f42c1;
        color: #fff;
    }
    .custom-modal-header h5 {
        margin: 0;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .custom-modal-close {
        background: none;
        border: none;
        color: inherit;
        font-size: 28px;
        cursor: pointer;
        opacity: 0.8;
        padding: 0;
        line-height: 1;
    }
    .custom-modal-close:hover {
        opacity: 1;
    }
    .custom-modal-body {
        padding: 25px;
        max-height: calc(90vh - 140px);
        overflow-y: auto;
    }
    .custom-modal-footer {
        padding: 15px 25px;
        border-top: 1px solid #e9ecef;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        border-radius: 0 0 12px 12px;
    }
    .custom-modal-footer .btn {
        padding: 8px 25px;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    .custom-modal-footer .btn-secondary {
        background: #6c757d;
        color: #fff;
    }
    .custom-modal-footer .btn-secondary:hover {
        background: #5a6268;
    }
    .custom-modal-footer .btn-danger {
        background: #dc3545;
        color: #fff;
    }
    .custom-modal-footer .btn-danger:hover {
        background: #c82333;
    }
    
    .table-structure {
        width: 100%;
        border-collapse: collapse;
        background: #ffffff;
        font-size: 13px;
    }
    .table-structure thead th {
        background: #f8f9fa;
        color: #495057;
        font-weight: 600;
        padding: 10px 12px;
        border: 1px solid #dee2e6;
        text-align: left;
    }
    .table-structure tbody td {
        padding: 8px 12px;
        border: 1px solid #dee2e6;
        vertical-align: middle;
    }
    .table-structure tbody tr:hover {
        background-color: #f5f7fa;
    }
    .table-structure tfoot td {
        padding: 10px 12px;
        border: 1px solid #dee2e6;
        font-weight: 600;
    }
    .table-structure .table-info {
        background: #d1ecf1;
    }
    .table-structure .table-light {
        background: #f8f9fa;
    }
    .text-muted {
        color: #6c757d !important;
    }
    .text-center {
        text-align: center !important;
    }
    .text-right {
        text-align: right !important;
    }
    
    @media (max-width: 768px) {
        .custom-modal {
            width: 98%;
            max-height: 95vh;
        }
        .custom-modal-body {
            padding: 15px;
            max-height: calc(95vh - 120px);
        }
        .custom-modal-header {
            padding: 15px 20px;
        }
        .custom-modal-footer {
            padding: 12px 20px;
        }
        .table-structure {
            font-size: 11px;
        }
        .table-structure thead th,
        .table-structure tbody td,
        .table-structure tfoot td {
            padding: 5px 8px;
        }
    }
</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" style="display: inline-block; vertical-align: middle; margin-right: 8px;">
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M9 6h11" />
            <path d="M9 12h11" />
            <path d="M9 18h11" />
            <path d="M5 6v.01" />
            <path d="M5 12v.01" />
            <path d="M5 18v.01" />
        </svg>
        Bill of Materials
    </h1>
</section>

<section class="content">
    @include('manufacturing.partials.navigation')
    
    <div class="bom-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">
                    <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" style="display: inline-block; vertical-align: middle; margin-right: 6px; color: #007bff;">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M9 6h11" />
                            <path d="M9 12h11" />
                            <path d="M9 18h11" />
                            <path d="M5 6v.01" />
                            <path d="M5 12v.01" />
                            <path d="M5 18v.01" />
                        </svg>
                        BOM Management
                    </h5>
                    <small class="text-muted" style="font-size: 13px;">Manage recipes and material lists</small>
                </div>
                <div class="d-flex flex-wrap gap-2 mt-2 mt-sm-0">
                    <a href="{{ route('manufacturing.production.bom.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">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M12 5l0 14" />
                            <path d="M5 12l14 0" />
                        </svg>
                        Create BOM
                    </a>
                </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">
                            <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">
                            <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">
                    <select class="form-select" id="statusFilter">
                        <option value="">All Status</option>
                        <option value="draft" {{ request('status') == 'draft' ? 'selected' : '' }}>Draft</option>
                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Final</option>
                        <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                        <option value="obsolete" {{ request('status') == 'obsolete' ? 'selected' : '' }}>Obsolete</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">
                                <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 BOMs..." 
                               value="{{ request('search') }}">
                    </div>
                </div>
            </div>
            
            <!-- Table -->
            <div class="table-responsive" style="padding-top: 5px;">
                <table class="bom-table table">
                    <thead>
                        <tr>
                            <th>BOM Code</th>
                            <th>Product</th>
                            <th>Name</th>
                            <th>Status</th>
                            <th>Components</th>
                            <th width="220">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($data as $bom)
                        <tr>
                            <td><strong>{{ $bom->bom_code }}</strong></td>
                            <td>{{ $bom->product->name ?? 'N/A' }}</td>
                            <td>{{ $bom->name }}</td>
                            <td>
                                @php
                                    $statusClasses = [
                                        'draft' => 'badge-draft',
                                        'active' => 'badge-active',
                                        'inactive' => 'badge-inactive',
                                        'obsolete' => 'badge-obsolete'
                                    ];
                                    $class = $statusClasses[$bom->status] ?? 'badge-draft';
                                    
                                    $statusLabels = [
                                        'draft' => 'Draft',
                                        'active' => 'Final',
                                        'inactive' => 'Inactive',
                                        'obsolete' => 'Obsolete'
                                    ];
                                    $label = $statusLabels[$bom->status] ?? ucfirst($bom->status);
                                @endphp
                                <span class="badge-custom {{ $class }}">{{ $label }}</span>
                            </td>
                            <td>{{ $bom->components->count() }}</td>
                            <td>
                                <div class="d-flex flex-wrap gap-1">
                                    <button class="btn-action btn-structure viewStructureBtn" data-id="{{ $bom->id }}" title="View Structure">
                                        <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">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path d="M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
                                            <path d="M14 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
                                            <path d="M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
                                            <path d="M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
                                            <path d="M9 9l6 0" />
                                            <path d="M9 15l6 0" />
                                        </svg>
                                    </button>
                                    <a href="{{ route('manufacturing.production.bom.edit', $bom->id) }}" class="btn-action btn-edit" title="Edit BOM">
                                        <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">
                                            <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-duplicate duplicateBtn" data-id="{{ $bom->id }}" title="Duplicate BOM">
                                        <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">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" />
                                            <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" />
                                        </svg>
                                    </button>
                                    @if($bom->status !== 'active')
                                    <button class="btn-action btn-delete deleteBtn" data-id="{{ $bom->id }}" data-name="{{ $bom->name }}" title="Delete BOM">
                                        <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">
                                            <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>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" 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" style="color: #ccc;">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                    <path d="M9 6h11" />
                                    <path d="M9 12h11" />
                                    <path d="M9 18h11" />
                                    <path d="M5 6v.01" />
                                    <path d="M5 12v.01" />
                                    <path d="M5 18v.01" />
                                </svg>
                                <p>No BOMs found</p>
                                <a href="{{ route('manufacturing.production.bom.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">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path d="M12 5l0 14" />
                                        <path d="M5 12l14 0" />
                                    </svg>
                                    Create First BOM
                                </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>

<!-- Custom Delete Modal -->
<div class="custom-modal-overlay" id="deleteModalOverlay">
    <div class="custom-modal">
        <div class="custom-modal-header danger">
            <h5>
                <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">
                    <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="custom-modal-close" onclick="closeModal('deleteModalOverlay')">&times;</button>
        </div>
        <div class="custom-modal-body">
            <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" 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="custom-modal-footer">
            <button type="button" class="btn btn-secondary" onclick="closeModal('deleteModalOverlay')">Cancel</button>
            <form id="deleteForm" method="POST" style="display: inline;">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger">
                    <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" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                        <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>

<!-- Custom Structure Modal (No Cost) -->
<div class="custom-modal-overlay" id="structureModalOverlay">
    <div class="custom-modal">
        <div class="custom-modal-header ">
            <h5>
                <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">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
                    <path d="M14 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
                    <path d="M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
                    <path d="M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
                    <path d="M9 9l6 0" />
                    <path d="M9 15l6 0" />
                </svg>
                BOM Structure
            </h5>
            <button type="button" class="custom-modal-close" onclick="closeModal('structureModalOverlay')">&times;</button>
        </div>
        <div class="custom-modal-body" id="structureModalBody">
            <div class="text-center py-4">
                <div class="spinner-border text-primary" role="status" style="width: 40px; height: 40px;">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2">Loading BOM structure...</p>
            </div>
        </div>
        <div class="custom-modal-footer">
            <button type="button" class="btn btn-secondary" onclick="closeModal('structureModalOverlay')">Close</button>
        </div>
    </div>
</div>

<script>
    // =============================================
    // Custom Modal Functions
    // =============================================
    function openModal(modalId) {
        var overlay = document.getElementById(modalId);
        if (overlay) {
            overlay.classList.add('active');
            document.body.style.overflow = 'hidden';
        }
    }
    
    function closeModal(modalId) {
        var overlay = document.getElementById(modalId);
        if (overlay) {
            overlay.classList.remove('active');
            document.body.style.overflow = '';
        }
    }
    
    // Close modal when clicking outside
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('custom-modal-overlay')) {
            closeModal(e.target.id);
        }
    });
    
    // Close modal with Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            document.querySelectorAll('.custom-modal-overlay.active').forEach(function(overlay) {
                closeModal(overlay.id);
            });
        }
    });

    // =============================================
    // Delete Button - Show Modal
    // =============================================
    document.querySelectorAll('.deleteBtn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var id = this.dataset.id;
            var name = this.dataset.name;
            document.getElementById('deleteName').textContent = name;
            document.getElementById('deleteForm').action = '{{ route("manufacturing.production.bom.index") }}/' + id;
            openModal('deleteModalOverlay');
        });
    });

    // =============================================
    // View Structure (No Cost)
    // =============================================
    document.querySelectorAll('.viewStructureBtn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var id = this.dataset.id;
            var body = document.getElementById('structureModalBody');
            
            // Show loading state
            body.innerHTML = `
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status" style="width: 40px; height: 40px;">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2">Loading BOM structure...</p>
                </div>
            `;
            
            // Open modal
            openModal('structureModalOverlay');
            
            // Fetch the data
            fetch('/manufacturing/production/bom/' + id + '/structure')
                .then(function(response) {
                    if (!response.ok) {
                        throw new Error('Network response was not ok: ' + response.status);
                    }
                    return response.json();
                })
                .then(function(data) {
                    var html = `
                        <div class="mb-3">
                            <h5 style="font-weight: 600;">${data.bom.name}</h5>
                            <p style="margin: 0; color: #6c757d; font-size: 14px;">
                                Product: <strong>${data.product ? data.product.name : 'N/A'}</strong> 
                            </p>
                            
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table class="table-structure">
                                <thead>
                                    <tr>
                                        <th style="width: 50px;">#</th>
                                        <th>Material</th>
                                        <th style="width: 100px;">Quantity</th>
                                        <th style="width: 100px;">Unit</th>
                                        <th style="width: 90px;">Wastage</th>
                                    </tr>
                                </thead>
                                <tbody>
                    `;
                    
                    var counter = 1;
                    if (data.components && data.components.length > 0) {
                        data.components.forEach(function(comp) {
                            html += `
                                <tr>
                                    <td>${counter++}</td>
                                    <td><strong>${comp.raw_material ? comp.raw_material.name : 'N/A'}</strong><br><small class="text-muted">${comp.raw_material ? comp.raw_material.sku : ''}</small></td>
                                    <td>${comp.quantity_required}</td>
                                    <td>${comp.unit_of_measure}</td>
                                    <td>${comp.wastage_percentage}%</td>
                                </tr>
                            `;
                        });
                    } else {
                        html += `
                            <tr>
                                <td colspan="5" class="text-center">No components found</td>
                            </tr>
                        `;
                    }
                    
                    html += `
                                </tbody>
                                <tfoot>
                                    <tr class="table-light">
                                        <td colspan="5" style="text-align: right; font-weight: 600;">
                                            Total Components: <strong>${data.summary && data.summary.component_count ? data.summary.component_count : 0}</strong>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    `;
                    
                    body.innerHTML = html;
                })
                .catch(function(error) {
                    console.error('Error:', error);
                    body.innerHTML = `
                        <div class="alert alert-danger" style="border-radius: 8px; padding: 15px;">
                            <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" style="display: inline-block; vertical-align: middle; margin-right: 8px;">
                                <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>
                            Error loading BOM structure. Please try again.
                            <br><small class="text-muted">${error.message}</small>
                        </div>
                    `;
                });
        });
    });

    // =============================================
    // Duplicate BOM
    // =============================================
    document.querySelectorAll('.duplicateBtn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            if (confirm('Duplicate this BOM?')) {
                var id = this.dataset.id;
                fetch('/manufacturing/production/bom/' + id + '/duplicate', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                })
                .then(function(response) {
                    return response.json();
                })
                .then(function(data) {
                    if (data.success) {
                        alert(data.message);
                        window.location.reload();
                    } else {
                        alert(data.message || 'Error duplicating BOM. Please try again.');
                    }
                })
                .catch(function(error) {
                    alert('Error duplicating BOM. Please try again.');
                    console.error('Error:', error);
                });
            }
        });
    });

    // =============================================
    // Apply Filters
    // =============================================
    document.getElementById('applyFiltersBtn')?.addEventListener('click', function() {
        var search = document.getElementById('searchInput').value;
        var status = document.getElementById('statusFilter').value;
        
        var url = window.location.pathname + '?';
        if (search) url += 'search=' + encodeURIComponent(search) + '&';
        if (status) url += 'status=' + encodeURIComponent(status) + '&';
        
        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