@extends('layouts.app')

@section('title', 'Calendario de Mantenimientos')
@section('page-title', 'Calendario')

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

@push('styles')
<link href="{{ asset('assets/css/calendario.css') }}" rel="stylesheet">
@endpush

@section('content')
<div class="calendario-container">
    {{-- Header con navegación de semana --}}
    <div class="calendario-header">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
            <div class="d-flex align-items-center gap-3">
                <div class="semana-navegacion">
                    <a href="{{ route('web.calendario.index', ['fecha' => $inicioSemana->copy()->subWeek()->format('Y-m-d')]) }}"
                       class="btn-nav" title="Semana anterior">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                    <div class="semana-actual">
                        <span class="semana-rango">
                            {{ $inicioSemana->format('d M') }} - {{ $finSemana->format('d M, Y') }}
                        </span>
                    </div>
                    <a href="{{ route('web.calendario.index', ['fecha' => $inicioSemana->copy()->addWeek()->format('Y-m-d')]) }}"
                       class="btn-nav" title="Semana siguiente">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                </div>

                @if(!$inicioSemana->isCurrentWeek())
                <a href="{{ route('web.calendario.index') }}" class="btn btn-sm btn-outline-primary">
                    <i class="fas fa-calendar-day me-1"></i> Hoy
                </a>
                @endif
            </div>

            <div class="d-flex align-items-center gap-2">
                @if(auth()->user()->tienePermiso('CALENDARIO_CREAR'))
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalProgramar">
                    <i class="fas fa-plus me-1"></i> Programar
                </button>
                @endif
            </div>
        </div>
    </div>

    {{-- Estadísticas rápidas --}}
    <div class="stats-bar">
        <div class="stat-item">
            <span class="stat-number">{{ $estadisticas['total'] }}</span>
            <span class="stat-label">Total</span>
        </div>
        <div class="stat-divider"></div>
        <div class="stat-item stat-success">
            <span class="stat-number">{{ $estadisticas['completados'] }}</span>
            <span class="stat-label">Completados</span>
        </div>
        <div class="stat-item stat-warning">
            <span class="stat-number">{{ $estadisticas['en_proceso'] }}</span>
            <span class="stat-label">En proceso</span>
        </div>
        <div class="stat-item stat-info">
            <span class="stat-number">{{ $estadisticas['pendientes'] }}</span>
            <span class="stat-label">Pendientes</span>
        </div>
        @if($estadisticas['pendientes_aprobacion'] > 0)
        <div class="stat-item stat-danger">
            <span class="stat-number">{{ $estadisticas['pendientes_aprobacion'] }}</span>
            <span class="stat-label">Por aprobar</span>
        </div>
        @endif
    </div>

    {{-- Filtros --}}
    <div class="filtros-bar">
        <form action="{{ route('web.calendario.index') }}" method="GET" class="filtros-form">
            <input type="hidden" name="fecha" value="{{ $inicioSemana->format('Y-m-d') }}">

            <div class="filtro-grupo">
                <label class="filtro-label">Centro</label>
                <select name="centro_id" class="form-select form-select-sm" onchange="this.form.submit()">
                    <option value="">Todos los centros</option>
                    @foreach($centros as $centro)
                    <option value="{{ $centro->id_centro }}" {{ $filtros['centro_id'] == $centro->id_centro ? 'selected' : '' }}>
                        {{ $centro->nombre_centro }}
                    </option>
                    @endforeach
                </select>
            </div>

            <div class="filtro-grupo">
                <label class="filtro-label">Técnico</label>
                <select name="tecnico_id" class="form-select form-select-sm" onchange="this.form.submit()">
                    <option value="">Todos los técnicos</option>
                    @foreach($tecnicos as $tecnico)
                    <option value="{{ $tecnico->usu_id }}" {{ $filtros['tecnico_id'] == $tecnico->usu_id ? 'selected' : '' }}>
                        {{ $tecnico->usu_nombre }} {{ $tecnico->usu_apellido }}
                    </option>
                    @endforeach
                </select>
            </div>

            <div class="filtro-grupo">
                <label class="filtro-label">Estado</label>
                <select name="estado_id" class="form-select form-select-sm" onchange="this.form.submit()">
                    <option value="">Todos los estados</option>
                    @foreach($estados as $estado)
                    <option value="{{ $estado->estado_id }}" {{ $filtros['estado_id'] == $estado->estado_id ? 'selected' : '' }}>
                        {{ $estado->estado_nombre }}
                    </option>
                    @endforeach
                </select>
            </div>

            @if($filtros['centro_id'] || $filtros['tecnico_id'] || $filtros['estado_id'])
            <a href="{{ route('web.calendario.index', ['fecha' => $inicioSemana->format('Y-m-d')]) }}"
               class="btn btn-sm btn-light">
                <i class="fas fa-times me-1"></i> Limpiar
            </a>
            @endif
        </form>
    </div>

    {{-- Vista semanal --}}
    <div class="semana-grid">
        @foreach($semana as $dia)
        <div class="dia-columna {{ $dia['esHoy'] ? 'dia-hoy' : '' }} {{ $dia['esPasado'] ? 'dia-pasado' : '' }}"
             data-fecha="{{ $dia['fechaStr'] }}">

            {{-- Header del día --}}
            <div class="dia-header">
                <span class="dia-nombre">{{ $dia['diaNombre'] }}</span>
                <span class="dia-numero {{ $dia['esHoy'] ? 'hoy-badge' : '' }}">{{ $dia['diaNumero'] }}</span>
                @if($dia['programaciones']->count() > 0)
                <span class="dia-contador">{{ $dia['programaciones']->count() }}</span>
                @endif
            </div>

            {{-- Lista de programaciones --}}
            <div class="dia-contenido">
                @forelse($dia['programaciones'] as $prog)
                <div class="mant-card"
                     data-id="{{ $prog->prog_id }}"
                     style="--estado-color: {{ $prog->estadoMantenimiento->color_hex ?? '#9E9E9E' }}">

                    <div class="mant-card-header">
                        <span class="mant-centro">{{ $prog->centro->nombre_centro ?? 'N/A' }}</span>
                        <span class="mant-estado-dot" title="{{ $prog->estadoMantenimiento->estado_nombre ?? 'Programado' }}"></span>
                    </div>

                    <div class="mant-card-body">
                        @php
                            $fechaInicio = $prog->fecha_programada->format('Y-m-d');
                            $fechaFin = $prog->fecha_fin ? $prog->fecha_fin->format('Y-m-d') : $fechaInicio;
                            $esMultiDia = $fechaInicio !== $fechaFin;
                        @endphp
                        @if($esMultiDia)
                        <div class="mant-fechas">
                            <i class="fas fa-calendar-week"></i>
                            {{ $prog->fecha_programada->format('d/m') }} - {{ $prog->fecha_fin->format('d/m') }}
                        </div>
                        @endif
                        @if($prog->tecnico)
                        <div class="mant-tecnico">
                            <span class="tecnico-avatar">
                                {{ strtoupper(substr($prog->tecnico->usu_nombre, 0, 1)) }}
                            </span>
                            <span class="tecnico-nombre">{{ $prog->tecnico->usu_nombre }}</span>
                        </div>
                        @else
                        <div class="mant-tecnico sin-asignar">
                            <i class="fas fa-user-slash"></i>
                            Sin asignar
                        </div>
                        @endif
                    </div>

                    <div class="mant-card-footer">
                        <a href="{{ route('web.mantenimientos.show', $prog->prog_id) }}"
                           class="btn-ver" title="Ver detalle">
                            <i class="fas fa-eye"></i>
                        </a>
                        @if(auth()->user()->tienePermiso('CALENDARIO_EDITAR') && $prog->estadoMantenimiento->estado_codigo == 'PROGRAMADO')
                        <button type="button" class="btn-accion" title="Reprogramar"
                                onclick="abrirReprogramar({{ $prog->prog_id }}, '{{ $prog->fecha_programada->format('Y-m-d') }}')">
                            <i class="fas fa-calendar-alt"></i>
                        </button>
                        @endif
                    </div>
                </div>
                @empty
                <div class="dia-vacio">
                    @if(!$dia['esPasado'])
                    <i class="fas fa-calendar-plus"></i>
                    <span>Sin programaciones</span>
                    @else
                    <i class="fas fa-calendar-check"></i>
                    <span>Sin registros</span>
                    @endif
                </div>
                @endforelse
            </div>

            {{-- Botón agregar (solo días futuros o hoy) --}}
            @if(!$dia['esPasado'] && auth()->user()->tienePermiso('CALENDARIO_CREAR'))
            <button type="button" class="dia-agregar"
                    onclick="abrirProgramar('{{ $dia['fechaStr'] }}')"
                    title="Programar mantenimiento">
                <i class="fas fa-plus"></i>
            </button>
            @endif
        </div>
        @endforeach
    </div>
</div>

{{-- Modal Programar Mantenimiento --}}
<div class="modal fade" id="modalProgramar" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-calendar-plus me-2 text-primary"></i>
                    Programar Mantenimiento
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('web.calendario.store') }}" method="POST" id="formProgramar">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Centro / Peaje <span class="text-danger">*</span></label>
                        <select name="id_centro" id="selectCentro" class="form-select" required>
                            <option value="">Seleccione un peaje</option>
                            @foreach($centros as $centro)
                            <option value="{{ $centro->id_centro }}">{{ $centro->nombre_centro }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Año <span class="text-danger">*</span></label>
                                <select name="anio" id="selectAnio" class="form-select" required>
                                    <option value="{{ now()->year }}" selected>{{ now()->year }}</option>
                                    <option value="{{ now()->year + 1 }}">{{ now()->year + 1 }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Período (Mes) <span class="text-danger">*</span></label>
                                <select name="mes" id="selectMes" class="form-select" required>
                                    <option value="">Seleccione mes</option>
                                    <option value="1" {{ now()->month == 1 ? 'selected' : '' }}>Enero</option>
                                    <option value="2" {{ now()->month == 2 ? 'selected' : '' }}>Febrero</option>
                                    <option value="3" {{ now()->month == 3 ? 'selected' : '' }}>Marzo</option>
                                    <option value="4" {{ now()->month == 4 ? 'selected' : '' }}>Abril</option>
                                    <option value="5" {{ now()->month == 5 ? 'selected' : '' }}>Mayo</option>
                                    <option value="6" {{ now()->month == 6 ? 'selected' : '' }}>Junio</option>
                                    <option value="7" {{ now()->month == 7 ? 'selected' : '' }}>Julio</option>
                                    <option value="8" {{ now()->month == 8 ? 'selected' : '' }}>Agosto</option>
                                    <option value="9" {{ now()->month == 9 ? 'selected' : '' }}>Septiembre</option>
                                    <option value="10" {{ now()->month == 10 ? 'selected' : '' }}>Octubre</option>
                                    <option value="11" {{ now()->month == 11 ? 'selected' : '' }}>Noviembre</option>
                                    <option value="12" {{ now()->month == 12 ? 'selected' : '' }}>Diciembre</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Fecha Inicio <span class="text-danger">*</span></label>
                                <input type="date" name="fecha_programada" id="fechaProgramada"
                                       class="form-control" required min="{{ now()->format('Y-m-d') }}">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Fecha Fin</label>
                                <input type="date" name="fecha_fin" id="fechaFin"
                                       class="form-control" min="{{ now()->format('Y-m-d') }}">
                                <small class="text-muted">Dejar vacío si es un solo día</small>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Técnico Asignado <span class="text-danger">*</span></label>
                        <select name="tecnico_asignado" class="form-select" required>
                            <option value="">Seleccione un técnico</option>
                            @foreach($tecnicos as $tecnico)
                            <option value="{{ $tecnico->usu_id }}">
                                {{ $tecnico->usu_nombre }} {{ $tecnico->usu_apellido }}
                            </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Observaciones</label>
                        <textarea name="observaciones" class="form-control" rows="2"
                                  placeholder="Notas adicionales (opcional)"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i> Programar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal Reprogramar --}}
<div class="modal fade" id="modalReprogramar" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-calendar-alt me-2 text-warning"></i>
                    Reprogramar
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="formReprogramar" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Nueva Fecha <span class="text-danger">*</span></label>
                        <input type="date" name="nueva_fecha" id="nuevaFecha"
                               class="form-control" required min="{{ now()->format('Y-m-d') }}">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Motivo <span class="text-danger">*</span></label>
                        <textarea name="motivo" class="form-control" rows="2" required
                                  placeholder="Indique el motivo de la reprogramación"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-warning btn-sm">
                        <i class="fas fa-sync me-1"></i> Reprogramar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const fechaInicio = document.getElementById('fechaProgramada');
    const fechaFin = document.getElementById('fechaFin');

    // Actualizar fecha mínima de fin cuando cambia la fecha de inicio
    if (fechaInicio && fechaFin) {
        fechaInicio.addEventListener('change', function() {
            fechaFin.min = this.value;
            // Si la fecha fin es menor que la de inicio, limpiarla
            if (fechaFin.value && fechaFin.value < this.value) {
                fechaFin.value = '';
            }
        });
    }

    // Reset del formulario al cerrar el modal
    const modalProgramar = document.getElementById('modalProgramar');
    if (modalProgramar) {
        modalProgramar.addEventListener('hidden.bs.modal', function() {
            document.getElementById('formProgramar').reset();
        });
    }
});

// Abrir modal de programar con fecha preseleccionada
function abrirProgramar(fecha) {
    document.getElementById('fechaProgramada').value = fecha;
    document.getElementById('fechaFin').min = fecha;
    const modal = new bootstrap.Modal(document.getElementById('modalProgramar'));
    modal.show();
}

// Abrir modal de reprogramar
function abrirReprogramar(progId, fechaActual) {
    const form = document.getElementById('formReprogramar');
    form.action = `/calendario/${progId}/reprogramar`;

    // Establecer fecha mínima como el día siguiente a la actual
    const minDate = new Date();
    minDate.setDate(minDate.getDate() + 1);
    document.getElementById('nuevaFecha').min = minDate.toISOString().split('T')[0];

    const modal = new bootstrap.Modal(document.getElementById('modalReprogramar'));
    modal.show();
}
</script>
@endpush