@extends('layouts.app')

@section('title', 'Configuración de Checklist')
@section('page-title', 'Configuración de Checklist')

@section('breadcrumb')
<li class="breadcrumb-item active">Config. Checklist</li>
@endsection

@push('styles')
<link href="{{ asset('assets/css/mantenimientos.css') }}" rel="stylesheet">
<style>
    .checklist-page-header {
        background: #1a3a5c;
        border-radius: 12px;
        padding: 24px 28px;
        margin-bottom: 24px;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
    }

    .checklist-page-header h1 {
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0;
    }

    .checklist-page-header p {
        margin: 4px 0 0;
        opacity: 0.8;
        font-size: 0.9rem;
    }

    .checklist-header-actions {
        display: flex;
        gap: 12px;
    }

    .checklist-btn {
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 500;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.9rem;
        transition: all 0.2s;
        border: none;
        cursor: pointer;
    }

    .checklist-btn-secondary {
        background: rgba(255,255,255,0.15);
        color: white;
        border: 1px solid rgba(255,255,255,0.3);
    }

    .checklist-btn-secondary:hover {
        background: rgba(255,255,255,0.25);
        color: white;
    }

    .checklist-btn-primary {
        background: white;
        color: #1a3a5c;
    }

    .checklist-btn-primary:hover {
        background: #f1f5f9;
        color: #1a3a5c;
    }

    .checklist-stats-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-bottom: 24px;
    }

    .checklist-stat-card {
        background: white;
        border-radius: 12px;
        padding: 20px 24px;
        border: 1px solid #e2e8f0;
    }

    .checklist-stat-card .stat-value {
        font-size: 2.5rem;
        font-weight: 700;
        color: #1a3a5c;
        line-height: 1;
    }

    .checklist-stat-card .stat-label {
        font-size: 0.9rem;
        color: #64748b;
        margin-top: 8px;
    }

    .checklist-stat-card.activos .stat-value { color: #22c55e; }
    .checklist-stat-card.obligatorios .stat-value { color: #f59e0b; }

    .checklist-filters-card {
        background: white;
        border-radius: 12px;
        padding: 20px 24px;
        border: 1px solid #e2e8f0;
        margin-bottom: 24px;
    }

    .checklist-filters-row {
        display: flex;
        gap: 16px;
        align-items: flex-end;
        flex-wrap: wrap;
    }

    .checklist-filter-group {
        flex: 1;
        min-width: 180px;
    }

    .checklist-filter-group.search {
        flex: 2;
    }

    .checklist-filter-group.btn-group {
        flex: 0;
    }

    .checklist-filter-group label {
        display: block;
        font-size: 0.85rem;
        font-weight: 500;
        color: #475569;
        margin-bottom: 6px;
    }

    .checklist-filter-group .form-control,
    .checklist-filter-group .form-select {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-size: 0.9rem;
    }

    .checklist-btn-filter {
        background: #1a3a5c;
        color: white;
        border: none;
        padding: 10px 24px;
        border-radius: 8px;
        font-weight: 500;
        cursor: pointer;
        height: 42px;
    }

    .checklist-btn-filter:hover {
        background: #0f2942;
    }

    .checklist-table-card {
        background: white;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        overflow: hidden;
    }

    .checklist-table-card .card-header {
        background: #f8fafc;
        padding: 16px 24px;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .checklist-table-card .card-header h5 {
        margin: 0;
        font-weight: 600;
        color: #1e293b;
        font-size: 1rem;
    }

    .checklist-data-table {
        width: 100%;
        border-collapse: collapse;
    }

    .checklist-data-table thead th {
        background: #f8fafc;
        padding: 14px 20px;
        text-align: left;
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #64748b;
        border-bottom: 1px solid #e2e8f0;
    }

    .checklist-data-table tbody td {
        padding: 16px 20px;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    .checklist-data-table tbody tr:hover {
        background: #f8fafc;
    }

    .checklist-data-table tbody tr:last-child td {
        border-bottom: none;
    }

    .checklist-id-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        background: #1a3a5c;
        border-radius: 10px;
        font-weight: 600;
        color: white;
        font-size: 0.95rem;
        padding: 0 12px;
    }

    .checklist-item-detalle {
        font-weight: 500;
        color: #1e293b;
        line-height: 1.5;
        font-size: 0.95rem;
    }

    .checklist-badge-obligatorio {
        display: inline-block;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
    }

    .checklist-badge-obligatorio.si {
        background: #fef3c7;
        color: #b45309;
    }

    .checklist-badge-obligatorio.no {
        background: #f1f5f9;
        color: #64748b;
    }

    .checklist-estado-switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 28px;
    }

    .checklist-estado-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .checklist-estado-switch .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #cbd5e1;
        transition: 0.3s;
        border-radius: 28px;
    }

    .checklist-estado-switch .slider:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.3s;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    }

    .checklist-estado-switch input:checked + .slider {
        background-color: #22c55e;
    }

    .checklist-estado-switch input:checked + .slider:before {
        transform: translateX(22px);
    }

    .checklist-actions-cell {
        white-space: nowrap;
        display: flex;
        gap: 8px;
    }

    .checklist-btn-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 0.9rem;
        text-decoration: none;
    }

    .checklist-btn-action.edit {
        background: #eff6ff;
        color: #3b82f6;
    }

    .checklist-btn-action.edit:hover {
        background: #dbeafe;
    }

    .checklist-btn-action.delete {
        background: #fef2f2;
        color: #ef4444;
    }

    .checklist-btn-action.delete:hover {
        background: #fee2e2;
    }

    .checklist-empty-state {
        text-align: center;
        padding: 60px 20px;
    }

    .checklist-empty-state .icon {
        font-size: 4rem;
        margin-bottom: 16px;
        color: #cbd5e1;
    }

    .checklist-empty-state h4 {
        color: #1e293b;
        margin-bottom: 8px;
        font-size: 1.25rem;
    }

    .checklist-empty-state p {
        color: #64748b;
        margin-bottom: 20px;
    }

    .checklist-alert {
        padding: 14px 20px;
        border-radius: 10px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 0.9rem;
    }

    .checklist-alert-success {
        background: #dcfce7;
        color: #166534;
        border: 1px solid #bbf7d0;
    }

    .checklist-alert-error {
        background: #fef2f2;
        color: #991b1b;
        border: 1px solid #fecaca;
    }

    .checklist-pagination-wrapper {
        padding: 16px 24px;
        border-top: 1px solid #e2e8f0;
    }

    @media (max-width: 768px) {
        .checklist-stats-row {
            grid-template-columns: 1fr;
        }

        .checklist-page-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .checklist-header-actions {
            width: 100%;
        }

        .checklist-header-actions .checklist-btn {
            flex: 1;
            justify-content: center;
        }

        .checklist-filters-row {
            flex-direction: column;
        }

        .checklist-filter-group {
            width: 100%;
        }
    }
</style>
@endpush

@section('content')
<div class="checklist-page-header">
    <div>
        <h1>Configuración de Checklist</h1>
        <p>Administre los ítems que aparecen en el checklist de mantenimiento</p>
    </div>
    <div class="checklist-header-actions">
        <a href="{{ route('checklist-config.preview') }}" class="checklist-btn checklist-btn-secondary">
            <i class="fas fa-eye"></i> Vista Previa
        </a>
        <a href="{{ route('checklist-config.create') }}" class="checklist-btn checklist-btn-primary">
            <i class="fas fa-plus"></i> Nuevo Ítem
        </a>
    </div>
</div>

@if(session('success'))
    <div class="checklist-alert checklist-alert-success">
        <i class="fas fa-check-circle"></i>
        <span>{{ session('success') }}</span>
    </div>
@endif

@if(session('error'))
    <div class="checklist-alert checklist-alert-error">
        <i class="fas fa-exclamation-circle"></i>
        <span>{{ session('error') }}</span>
    </div>
@endif

<div class="checklist-stats-row">
    <div class="checklist-stat-card">
        <div class="stat-value">{{ $stats['total'] }}</div>
        <div class="stat-label">Total de ítems</div>
    </div>
    <div class="checklist-stat-card activos">
        <div class="stat-value">{{ $stats['activos'] }}</div>
        <div class="stat-label">Ítems activos</div>
    </div>
    <div class="checklist-stat-card obligatorios">
        <div class="stat-value">{{ $stats['obligatorios'] }}</div>
        <div class="stat-label">Obligatorios</div>
    </div>
</div>

<div class="checklist-filters-card">
    <form method="GET" action="{{ route('checklist-config.index') }}">
        <div class="checklist-filters-row">
            <div class="checklist-filter-group search">
                <label>Buscar</label>
                <input type="text" name="buscar" class="form-control" placeholder="Buscar por descripción..." value="{{ request('buscar') }}">
            </div>
            <div class="checklist-filter-group">
                <label>Estado</label>
                <select name="estado" class="form-select">
                    <option value="">Todos</option>
                    <option value="1" {{ request('estado') === '1' ? 'selected' : '' }}>Activos</option>
                    <option value="0" {{ request('estado') === '0' ? 'selected' : '' }}>Inactivos</option>
                </select>
            </div>
            <div class="checklist-filter-group">
                <label>Obligatorio</label>
                <select name="obligatorio" class="form-select">
                    <option value="">Todos</option>
                    <option value="1" {{ request('obligatorio') === '1' ? 'selected' : '' }}>Sí</option>
                    <option value="0" {{ request('obligatorio') === '0' ? 'selected' : '' }}>No</option>
                </select>
            </div>
            <div class="checklist-filter-group btn-group">
                <label>&nbsp;</label>
                <button type="submit" class="checklist-btn-filter">Filtrar</button>
            </div>
        </div>
    </form>
</div>

<div class="checklist-table-card">
    <div class="card-header">
        <h5>Ítems del Checklist ({{ $items->total() }})</h5>
        <small style="color: #64748b;">Los ítems activos aparecen en la app móvil</small>
    </div>

    @if($items->count() > 0)
        <table class="checklist-data-table">
            <thead>
                <tr>
                    <th style="width: 80px;">ID</th>
                    <th>Descripción del Ítem</th>
                    <th style="width: 130px;">Obligatorio</th>
                    <th style="width: 110px;">Estado</th>
                    <th style="width: 120px;">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach($items as $item)
                    <tr>
                        <td>
                            <span class="checklist-id-badge">{{ $item->id_item }}</span>
                        </td>
                        <td>
                            <div class="checklist-item-detalle">{{ $item->detalle ?? 'Sin descripción' }}</div>
                        </td>
                        <td>
                            <span class="checklist-badge-obligatorio {{ $item->obligatorio == 1 ? 'si' : 'no' }}">
                                {{ $item->obligatorio == 1 ? 'Sí' : 'No' }}
                            </span>
                        </td>
                        <td>
                            <form action="{{ route('checklist-config.toggle', $item->id_item) }}" method="POST" style="display: inline;">
                                @csrf
                                @method('PATCH')
                                <label class="checklist-estado-switch">
                                    <input type="checkbox" {{ $item->estado == 1 ? 'checked' : '' }} onchange="this.form.submit()">
                                    <span class="slider"></span>
                                </label>
                            </form>
                        </td>
                        <td>
                            <div class="checklist-actions-cell">
                                <a href="{{ route('checklist-config.edit', $item->id_item) }}" class="checklist-btn-action edit" title="Editar">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form action="{{ route('checklist-config.destroy', $item->id_item) }}" method="POST" style="display: inline;" onsubmit="return confirm('¿Está seguro de eliminar este ítem?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="checklist-btn-action delete" title="Eliminar">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        @if($items->hasPages())
            <div class="checklist-pagination-wrapper">
                {{ $items->withQueryString()->links() }}
            </div>
        @endif
    @else
        <div class="checklist-empty-state">
            <div class="icon"><i class="fas fa-clipboard-list"></i></div>
            <h4>No hay ítems configurados</h4>
            <p>Agregue ítems al checklist para que los técnicos puedan completar sus revisiones.</p>
            <a href="{{ route('checklist-config.create') }}" class="checklist-btn" style="background: #1a3a5c; color: white;">
                <i class="fas fa-plus"></i> Agregar primer ítem
            </a>
        </div>
    @endif
</div>
@endsection