<!-- resources/views/livewire/stage-controller.blade.php -->
<div>
    <style>
        :root {
            --primary-color: #4361ee;
            --primary-light: #edf2ff;
            --text-primary: #2d3748;
            --text-secondary: #718096;
            --border-color: #e2e8f0;
            --hover-bg: #f7fafc;
            --body-bg: #f8fafc;
            --card-bg: #ffffff;
        }
        
        [data-theme="dark"] {
            --primary-color: #6366f1;
            --primary-light: #312e81;
            --text-primary: #f9fafb;
            --text-secondary: #9ca3af;
            --border-color: #374151;
            --hover-bg: #374151;
            --body-bg: #111827;
            --card-bg: #1f2937;
        }
        
        body {
            background-color: var(--body-bg);
            font-family: 'Segoe UI', system-ui, sans-serif;
            color: var(--text-primary);
            padding: 2rem 1.5rem;
        }
        
        .dashboard-card {
            border: none;
            border-radius: 16px;
            background: var(--card-bg);
            box-shadow: 0 4px 20px rgba(0,0,0,0.02);
            border: 1px solid var(--border-color);
        }
        
        .card-header {
            background: transparent;
            border-bottom: 1px solid var(--border-color);
            padding: 1.25rem 1.5rem;
            font-weight: 600;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .btn-primary:hover {
            background-color: #3651c4;
            border-color: #3651c4;
        }
        
        .btn-outline-primary {
            color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .btn-outline-primary:hover {
            background-color: var(--primary-color);
            color: #fff;
        }
        
        .btn-outline-secondary:hover {
            background-color: #e2e8f0;
        }
        
        .btn-outline-info {
            color: #0891b2;
            border-color: #0891b2;
        }
        
        .btn-outline-info:hover {
            background-color: #0891b2;
            color: #fff;
        }
        
        .btn-outline-warning {
            color: #b45309;
            border-color: #b45309;
        }
        
        .btn-outline-warning:hover {
            background-color: #b45309;
            color: #fff;
        }
        
        .table td {
            vertical-align: middle;
        }
        
        .badge-success {
            background: #d1fae5;
            color: #065f46;
            font-weight: 500;
            padding: 0.35rem 0.65rem;
            border-radius: 30px;
        }
        
        .badge-danger {
            background: #fee2e2;
            color: #b91c1c;
            font-weight: 500;
            padding: 0.35rem 0.65rem;
            border-radius: 30px;
        }
        
        .badge-info {
            background: #dbeafe;
            color: #1e40af;
            font-weight: 500;
            padding: 0.35rem 0.65rem;
            border-radius: 30px;
        }
        
        .badge-secondary {
            background: #e2e8f0;
            color: #4a5568;
            font-weight: 500;
            padding: 0.35rem 0.65rem;
            border-radius: 30px;
        }
        
        .badge-purple {
            background: #f3e8ff;
            color: #6b21a8;
            font-weight: 500;
            padding: 0.35rem 0.65rem;
            border-radius: 30px;
        }
        
        .action-btn {
            padding: 0.25rem 0.8rem;
            font-size: 0.8rem;
            border-radius: 30px;
            margin: 0 2px;
        }
        
        /* Stage color indicators */
        .stage-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }
        
        .stage-indicator.active {
            background-color: #10b981;
            box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
        }
        
        .stage-indicator.inactive {
            background-color: #ef4444;
            box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
        }
        
        /* DataTable Styling */
        .dataTables_wrapper .dataTables_length,
        .dataTables_wrapper .dataTables_filter {
            margin-bottom: 1rem;
        }
        
        .dataTables_wrapper .dataTables_filter input {
            border: 1px solid var(--border-color);
            border-radius: 30px;
            padding: 0.375rem 1rem 0.375rem 2.5rem;
            background-color: var(--card-bg);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: left 0.8rem center;
            background-size: 16px;
        }
        
        .dataTables_wrapper .dataTables_filter input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
            outline: none;
        }
        
        .dataTables_wrapper .dataTables_length select {
            border: 1px solid var(--border-color);
            border-radius: 30px;
            padding: 0.375rem 2rem 0.375rem 1rem;
            background-color: var(--card-bg);
            color: var(--text-primary);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.8rem center;
            background-size: 14px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }
        
        .page-item.active .page-link {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .page-link {
            color: var(--primary-color);
            background-color: var(--card-bg);
            border-color: var(--border-color);
            margin: 0 2px;
            border-radius: 30px;
        }
        
        /* Modal Styling */
        .modal-content {
            border: none;
            border-radius: 20px;
            background: var(--card-bg);
        }
        
        .modal-header {
            border-bottom: 1px solid var(--border-color);
            background: var(--card-bg);
            padding: 1.5rem;
            border-radius: 20px 20px 0 0;
        }
        
        .modal-body {
            padding: 1.5rem;
        }
        
        .modal-footer {
            border-top: 1px solid var(--border-color);
            padding: 1.5rem;
        }
        
        .modal-body .form-control,
        .modal-body .form-select {
            border-radius: 12px;
            border: 1px solid var(--border-color);
            padding: 0.625rem 1rem;
        }
        
        .modal-body .form-control:focus,
        .modal-body .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
        }
        
        .form-check-input:checked {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        /* View Modal Specific Styling */
        .detail-row {
            display: flex;
            margin-bottom: 1rem;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 0.75rem;
        }
        
        .detail-label {
            font-weight: 600;
            width: 140px;
            color: var(--text-secondary);
        }
        
        .detail-value {
            flex: 1;
            color: var(--text-primary);
        }
        
        .description-box {
            background: var(--hover-bg);
            padding: 1rem;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            min-height: 100px;
            white-space: pre-wrap;
        }
        
        .files-list {
            max-height: 250px;
            overflow-y: auto;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 0.5rem;
        }
        
        .file-item {
            display: flex;
            align-items: center;
            padding: 0.5rem;
            border-bottom: 1px solid var(--border-color);
        }
        
        .file-item:last-child {
            border-bottom: none;
        }
        
        .file-item.current {
            background-color: var(--primary-light);
            border-radius: 8px;
        }
        
        .current-badge {
            background-color: var(--primary-color);
            color: white;
            font-size: 0.7rem;
            padding: 0.15rem 0.5rem;
            border-radius: 30px;
            margin-left: 0.5rem;
        }
        
        /* Livewire loading indicator */
        .livewire-loading {
            display: inline-block;
            width: 1rem;
            height: 1rem;
            border: 2px solid rgba(67, 97, 238, 0.2);
            border-radius: 50%;
            border-top-color: var(--primary-color);
            animation: spin 0.6s linear infinite;
        }
        
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
        
        /* SweetAlert2 Customization */
        .swal2-popup {
            border-radius: 16px !important;
            padding: 1.5rem !important;
        }
        
        .swal2-title {
            color: var(--text-primary) !important;
            font-size: 1.25rem !important;
            font-weight: 600 !important;
        }
        
        .swal2-html-container {
            color: var(--text-secondary) !important;
        }
        
        .swal2-timer-progress-bar {
            background: var(--primary-color) !important;
        }
        
        .swal2-toast {
            background: var(--card-bg) !important;
            border: 1px solid var(--border-color) !important;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
        }
        
        .swal2-toast .swal2-title {
            font-size: 0.95rem !important;
            font-weight: 500 !important;
        }
        
        .swal2-confirm {
            border-radius: 30px !important;
            padding: 0.5rem 1.5rem !important;
        }
        
        .swal2-cancel {
            border-radius: 30px !important;
            padding: 0.5rem 1.5rem !important;
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            body {
                padding: 1rem;
            }
            
            .main-content {
                padding: 0.5rem;
            }
            
            .modal-dialog {
                margin: 0.5rem;
            }
            
            .detail-row {
                flex-direction: column;
            }
            
            .detail-label {
                width: 100%;
                margin-bottom: 0.25rem;
            }
            
            .action-btn {
                padding: 0.2rem 0.5rem;
                font-size: 0.75rem;
            }
        }
    </style>

    <div class="main-content" id="mainContent">
        <div class="container-fluid px-0">
            <!-- Header with Title and Add Button -->
            <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between mb-4">
                <div>
                    <h2 class="fw-semibold mb-1">📊 File Stages</h2>
                   
                </div>
                <button class="btn btn-primary mt-3 mt-md-0" data-bs-toggle="modal" data-bs-target="#stageModal" wire:click="resetForm">
                    <i class="bi bi-plus-circle me-2"></i>Add New Stage
                </button>
            </div>

         

            <!-- Main Card with DataTable -->
            <div class="card dashboard-card">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <div>
                        <i class="bi bi-diagram-3 me-2" style="color: var(--primary-color);"></i>
                        Registered Stages
                        <span class="ms-2 small text-muted" id="recordCount"><?php echo e(count($stages)); ?></span>
                    </div>
                    <span wire:loading class="ms-3">
                        <span class="livewire-loading"></span>
                    </span>
                </div>
                <div class="card-body p-3 p-md-4">
                    <div class="table-responsive">
                        <table id="stagesTable" class="table table-hover" style="width:100%">
                            <thead class="bg-light">
                                <tr>
                                    <th>ID</th>
                                    <th>Stage Name</th>
                                    <th>Description</th>
                                    <th>Current Files</th>
                                    <th>Total Uses</th>
                                    <th>Status</th>
                                    <th>Created</th>
                                    <th class="text-center">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $stages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $stage): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoop($loop->index); ?><?php endif; ?>
                                    <tr>
                                        <td>#<?php echo e($stage->id); ?></td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <span class="stage-indicator <?php echo e($stage->active ? 'active' : 'inactive'); ?>"></span>
                                                <span class="fw-medium"><?php echo e($stage->name); ?></span>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="text-truncate" style="max-width: 200px;">
                                                <?php echo e($stage->description ?: 'No description'); ?>

                                            </div>
                                        </td>
                                        <td>
                                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($stage->current_files_count > 0): ?>
                                                <span class="badge-info">
                                                    <i class="bi bi-file-earmark me-1"></i>
                                                    <?php echo e($stage->current_files_count); ?> current
                                                </span>
                                            <?php else: ?>
                                                <span class="badge-secondary">
                                                    <i class="bi bi-dash me-1"></i>
                                                    0
                                                </span>
                                            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                        </td>
                                        <td>
                                            <span class="badge-purple">
                                                <i class="bi bi-clock-history me-1"></i>
                                                <?php echo e($stage->total_files_count); ?> total
                                            </span>
                                        </td>
                                        <td>
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" 
                                                       type="checkbox" 
                                                       wire:change="toggleActive(<?php echo e($stage->id); ?>)"
                                                       wire:loading.attr="disabled"
                                                       id="active-<?php echo e($stage->id); ?>"
                                                       <?php echo e($stage->active ? 'checked' : ''); ?>>
                                                <label class="form-check-label small" for="active-<?php echo e($stage->id); ?>">
                                                    <?php echo e($stage->active ? 'Active' : 'Inactive'); ?>

                                                </label>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="small">
                                                <div><?php echo e($stage->created_at->format('Y-m-d')); ?></div>
                                                <div class="text-muted"><?php echo e($stage->createdBy->name ?? 'System'); ?></div>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <div class="btn-group btn-group-sm" role="group">
                                                <button class="btn btn-outline-info action-btn"
                                                        wire:click="view(<?php echo e($stage->id); ?>)"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#viewModal"
                                                        title="View details">
                                                    <i class="bi bi-eye"></i>
                                                </button>
                                                <button class="btn btn-outline-primary action-btn"
                                                        wire:click="edit(<?php echo e($stage->id); ?>)"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#stageModal"
                                                        title="Edit stage">
                                                    <i class="bi bi-pencil"></i>
                                                </button>
                                                <button class="btn btn-outline-warning action-btn"
                                                        title="View file assignments"
                                                        onclick="window.location.href='<?php echo e(route('file-stage-assignments', ['stage_id' => $stage->id])); ?>'">
                                                    <i class="bi bi-link"></i>
                                                </button>
                                                <button class="btn btn-outline-danger action-btn"
                                                        onclick="confirmDelete(<?php echo e($stage->id); ?>, '<?php echo e($stage->name); ?>', <?php echo e($stage->total_files_count); ?>)"
                                                        title="Delete stage">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
                                    <tr class="text-center">
                                        <td colspan="8" class="py-5 text-muted">
                                            <i class="bi bi-diagram-3 fs-1 d-block mb-3"></i>
                                            <p class="mb-0">No stages found. Click "Add New Stage" to create one.</p>
                                        </td>
                                    </tr>
                                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- View Stage Modal -->
        <div class="modal fade" id="viewModal" tabindex="-1" aria-labelledby="viewModalLabel" aria-hidden="true" wire:ignore.self>
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="viewModalLabel">
                            <i class="bi bi-eye me-2 text-info"></i>
                            Stage Details
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($selectedStage): ?>
                            <div class="detail-row">
                                <span class="detail-label">ID:</span>
                                <span class="detail-value">#<?php echo e($selectedStage->id); ?></span>
                            </div>
                            <div class="detail-row">
                                <span class="detail-label">Name:</span>
                                <span class="detail-value fw-medium"><?php echo e($selectedStage->name); ?></span>
                            </div>
                            <div class="detail-row">
                                <span class="detail-label">Description:</span>
                                <span class="detail-value">
                                    <div class="description-box">
                                        <?php echo e($selectedStage->description ?: 'No description provided.'); ?>

                                    </div>
                                </span>
                            </div>
                            <div class="detail-row">
                                <span class="detail-label">Usage Statistics:</span>
                                <span class="detail-value">
                                    <div class="d-flex gap-3">
                                        <span class="badge-info"><i class="bi bi-file-earmark me-1"></i>Current: <?php echo e($selectedStage->current_files_count); ?></span>
                                        <span class="badge-purple"><i class="bi bi-clock-history me-1"></i>Total: <?php echo e($selectedStage->total_files_count); ?></span>
                                    </div>
                                </span>
                            </div>
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($selectedStage->total_files_count > 0): ?>
                            <div class="detail-row">
                                <span class="detail-label">Files in Stage:</span>
                                <span class="detail-value">
                                    <div class="files-list">
                                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__currentLoopData = $selectedStage->files; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $file): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoop($loop->index); ?><?php endif; ?>
                                            <div class="file-item <?php echo e($file->pivot->is_current ? 'current' : ''); ?>">
                                                <i class="bi bi-file-earmark me-2 text-primary"></i>
                                                <div>
                                                    <span><?php echo e($file->name); ?></span>
                                                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($file->pivot->is_current): ?>
                                                        <span class="current-badge">Current</span>
                                                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                                    <div class="small text-muted">
                                                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($file->pivot->started_at): ?>
                                                            Started: <?php echo e(\Carbon\Carbon::parse($file->pivot->started_at)->format('Y-m-d')); ?>

                                                        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($file->pivot->completed_at): ?>
                                                            | Completed: <?php echo e(\Carbon\Carbon::parse($file->pivot->completed_at)->format('Y-m-d')); ?>

                                                        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                                    </div>
                                                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($file->pivot->notes): ?>
                                                        <div class="small text-muted"><i class="bi bi-chat me-1"></i><?php echo e($file->pivot->notes); ?></div>
                                                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                                </div>
                                                <span class="text-muted ms-auto small">ID: <?php echo e($file->id); ?></span>
                                            </div>
                                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
                                    </div>
                                </span>
                            </div>
                            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            <div class="detail-row">
                                <span class="detail-label">Status:</span>
                                <span class="detail-value">
                                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($selectedStage->active): ?>
                                        <span class="badge-success"><i class="bi bi-check-circle me-1"></i>Active</span>
                                    <?php else: ?>
                                        <span class="badge-danger"><i class="bi bi-x-circle me-1"></i>Inactive</span>
                                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                </span>
                            </div>
                            <div class="detail-row">
                                <span class="detail-label">Created By:</span>
                                <span class="detail-value"><?php echo e($selectedStage->createdBy->name ?? 'N/A'); ?></span>
                            </div>
                            <div class="detail-row">
                                <span class="detail-label">Created At:</span>
                                <span class="detail-value"><?php echo e($selectedStage->created_at ? $selectedStage->created_at->format('F j, Y g:i A') : 'N/A'); ?></span>
                            </div>
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($selectedStage->updated_by && $selectedStage->updated_by != $selectedStage->created_by): ?>
                            <div class="detail-row">
                                <span class="detail-label">Updated By:</span>
                                <span class="detail-value"><?php echo e($selectedStage->updatedBy->name ?? 'N/A'); ?></span>
                            </div>
                            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($selectedStage->updated_at && $selectedStage->updated_at != $selectedStage->created_at): ?>
                            <div class="detail-row">
                                <span class="detail-label">Updated At:</span>
                                <span class="detail-value"><?php echo e($selectedStage->updated_at->format('F j, Y g:i A')); ?></span>
                            </div>
                            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                        <?php else: ?>
                            <div class="text-center py-5">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </div>
                        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                            <i class="bi bi-x-circle me-2"></i>Close
                        </button>
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($selectedStage): ?>
                        <button type="button" class="btn btn-primary" 
                                wire:click="edit(<?php echo e($selectedStage->id); ?>)"
                                data-bs-toggle="modal"
                                data-bs-target="#stageModal"
                                data-bs-dismiss="modal">
                            <i class="bi bi-pencil me-2"></i>Edit Stage
                        </button>
                        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                    </div>
                </div>
            </div>
        </div>

        <!-- Add/Edit Stage Modal -->
        <div class="modal fade" id="stageModal" tabindex="-1" aria-labelledby="stageModalLabel" aria-hidden="true" wire:ignore.self>
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="stageModalLabel">
                            <i class="bi <?php echo e($editMode ? 'bi-pencil-square' : 'bi-plus-circle'); ?> me-2 text-primary"></i>
                            <?php echo e($editMode ? 'Edit Stage' : 'Add New Stage'); ?>

                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form wire:submit="<?php echo e($editMode ? 'update' : 'store'); ?>">
                        <div class="modal-body">
                            <div class="row g-3">
                                <!-- Stage Name -->
                                <div class="col-12">
                                    <label class="form-label fw-medium">
                                        Stage Name <span class="text-danger">*</span>
                                    </label>
                                    <input type="text"
                                        class="form-control <?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                        wire:model="name"
                                        placeholder="e.g., Draft, Review, Approved, Published">
                                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                        <div class="invalid-feedback"><?php echo e($message); ?></div>
                                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                </div>

                                <!-- Description -->
                                <div class="col-12">
                                    <label class="form-label fw-medium">Description</label>
                                    <textarea
                                        class="form-control <?php $__errorArgs = ['description'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                        wire:model="description"
                                        rows="3"
                                        placeholder="Enter stage description..."></textarea>
                                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['description'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                        <div class="invalid-feedback"><?php echo e($message); ?></div>
                                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                </div>

                                <!-- Status Toggle -->
                                <div class="col-12">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input"
                                               type="checkbox"
                                               wire:model="active"
                                               id="activeStatus"
                                               <?php echo e($active ? 'checked' : ''); ?>>
                                        <label class="form-check-label fw-medium" for="activeStatus">
                                            <?php echo e($active ? 'Active' : 'Inactive'); ?>

                                        </label>
                                    </div>
                                </div>
                                
                                <!-- Note about independent stages -->
                                <div class="col-12">
                                    <small class="text-muted">
                                        <i class="bi bi-info-circle me-1"></i>
                                        Stages are independent. Use the File Stage Assignment to assign files to stages.
                                    </small>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                                <i class="bi bi-x-circle me-2"></i>Cancel
                            </button>
                            <button type="submit" class="btn btn-primary" wire:loading.attr="disabled" wire:target="store,update">
                                <span wire:loading.remove wire:target="store,update">
                                    <i class="bi <?php echo e($editMode ? 'bi-check-circle' : 'bi-save'); ?> me-2"></i>
                                    <?php echo e($editMode ? 'Update Stage' : 'Save Stage'); ?>

                                </span>
                                <span wire:loading wire:target="store,update">
                                    <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                                    <?php echo e($editMode ? 'Updating...' : 'Saving...'); ?>

                                </span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        // SweetAlert2 Toast Configuration
        const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true,
            background: 'var(--card-bg)',
            color: 'var(--text-primary)',
            showClass: {
                popup: 'animate__animated animate__fadeInRight'
            },
            hideClass: {
                popup: 'animate__animated animate__fadeOutRight'
            }
        });

        // DataTable instance
        let dataTable;

        // Initialize DataTable
        function initDataTable() {
            const table = $('#stagesTable');
            
            if (table.length === 0) return;
            
            try {
                if ($.fn.DataTable.isDataTable('#stagesTable')) {
                    $('#stagesTable').DataTable().destroy();
                    table.next('.dataTables_wrapper').remove();
                }
                
                if (table.find('tbody tr').length > 0 && !table.find('tbody td:first').text().includes('No stages found')) {
                    dataTable = table.DataTable({
                        language: {
                            search: "🔍 Search:",
                            lengthMenu: "Show _MENU_ entries",
                            info: "Showing _START_ to _END_ of _TOTAL_ stages",
                            infoEmpty: "Showing 0 to 0 of 0 stages",
                            infoFiltered: "(filtered from _MAX_ total stages)",
                            paginate: {
                                first: "First",
                                last: "Last",
                                next: "Next",
                                previous: "Prev"
                            }
                        },
                        dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                             "<'row'<'col-sm-12'tr>>" +
                             "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                        columnDefs: [
                            { targets: [0, 1, 2, 3, 4, 5, 6], orderable: true },
                            { targets: 7, orderable: false, className: "text-center" }
                        ],
                        order: [[1, 'asc']], // Order by stage name
                        paging: true,
                        pageLength: 10,
                        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]]
                    });
                    
                    $('#recordCount').text(dataTable.data().length);
                }
            } catch (e) {
                console.warn('DataTable initialization error:', e);
            }
        }

        $(document).ready(function() {
            setTimeout(() => {
                initDataTable();
            }, 100);

            // Modal Events
            $('#stageModal').on('hidden.bs.modal', function() {
                $('.modal-backdrop').remove();
                $('body').removeClass('modal-open');
                $('body').css('overflow', 'auto');
                $('body').css('padding-right', '');
            });

            $('#viewModal').on('hidden.bs.modal', function() {
                $('.modal-backdrop').remove();
                $('body').removeClass('modal-open');
                $('body').css('overflow', 'auto');
                $('body').css('padding-right', '');
            });

            $(window).on('resize', function() {
                if (dataTable) {
                    dataTable.columns.adjust();
                }
            });
        });

        // Livewire Event Listeners
        document.addEventListener('livewire:init', function() {
            Livewire.on('closeModal', () => {
                $('#stageModal').modal('hide');
                $('#viewModal').modal('hide');
            });

            Livewire.on('showSuccess', (message) => {
                Toast.fire({
                    icon: 'success',
                    title: message,
                    iconColor: '#10b981'
                });
                
                setTimeout(() => {
                    try {
                        if ($.fn.DataTable.isDataTable('#stagesTable')) {
                            $('#stagesTable').DataTable().destroy();
                        }
                        $('#stagesTable').next('.dataTables_wrapper').remove();
                        initDataTable();
                    } catch (e) {
                        console.warn('Error refreshing table:', e);
                    }
                }, 200);
            });

            Livewire.on('showError', (message) => {
                Toast.fire({
                    icon: 'error',
                    title: message,
                    iconColor: '#ef4444'
                });
            });

            Livewire.on('refreshTable', () => {
                setTimeout(() => {
                    try {
                        if ($.fn.DataTable.isDataTable('#stagesTable')) {
                            $('#stagesTable').DataTable().destroy();
                        }
                        $('#stagesTable').next('.dataTables_wrapper').remove();
                        initDataTable();
                    } catch (e) {
                        console.warn('Error refreshing table:', e);
                    }
                }, 100);
            });
        });

        // Confirm Delete with SweetAlert2
        window.confirmDelete = function(stageId, stageName, totalFilesCount) {
            if (totalFilesCount > 0) {
                Swal.fire({
                    title: 'Cannot Delete',
                    html: `Stage <strong>"${stageName}"</strong> has been used by ${totalFilesCount} file(s).<br><br>
                           You cannot delete a stage that has history. You can deactivate it instead.`,
                    icon: 'error',
                    confirmButtonColor: '#4361ee',
                    confirmButtonText: 'OK',
                    background: 'var(--card-bg)',
                    color: 'var(--text-primary)'
                });
                return;
            }
            
            Swal.fire({
                title: 'Delete Stage?',
                html: `Are you sure you want to delete stage <strong>"${stageName}"</strong>?<br><br>This action cannot be undone.`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel',
                background: 'var(--card-bg)',
                color: 'var(--text-primary)',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    window.Livewire.find('<?php echo e($_instance->getId()); ?>').delete(stageId);
                }
            });
        };
    </script>
</div><?php /**PATH /Users/malando/Downloads/laravelApps/mswaada/resources/views/livewire/stage-controller.blade.php ENDPATH**/ ?>