@extends('index')

@section('titulo', 'Equilibria | Consultas')

@section('style')
    <link href="{{ asset('css/custom.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <style>
        .badge-estatus {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            color: #fff;
        }
    </style>
@endsection

@section('menu')
    @include('MenuLayout.menu_clinica')
@endsection

@section('contenido')
<div id="kt_app_content_container" class="app-container container-fluid">

    {{-- Cabecera --}}
    <div class="d-flex align-items-center justify-content-between mb-6">
        <div>
            <h1 class="fs-2 fw-bold text-gray-900 mb-1">Gestión de Consultas</h1>
            <span class="text-gray-500 fs-6">Visualiza y administra el estado de todas las consultas médicas</span>
        </div>
    </div>

    {{-- Tarjeta principal --}}
    <div class="card card-flush">
        <div class="card-header pt-5 pb-4 border-bottom">
            <div class="card-title w-100 d-flex flex-column flex-md-row gap-3 align-items-md-center flex-wrap">

                {{-- Filtros estado + mes --}}
                <form method="GET" action="{{ route('consultas.index') }}" class="d-flex align-items-center gap-2 flex-wrap" id="form-filtro">
                    <label class="fw-semibold text-gray-700 fs-7 me-1 mb-0">Mes:</label>
                    <input type="month"
                           name="mes"
                           value="{{ $filtroMes ?? \Carbon\Carbon::now(config('app.timezone'))->format('Y-m') }}"
                           max="{{ \Carbon\Carbon::now(config('app.timezone'))->format('Y-m') }}"
                           class="form-control form-control-sm form-control-solid w-auto"
                           style="min-width:160px"
                           onchange="this.form.submit()"
                           title="Seleccionar mes">
                    <label class="fw-semibold text-gray-700 fs-7 me-1 mb-0">Estado:</label>
                    <select name="estatus" class="form-select form-select-sm form-select-solid w-auto" onchange="this.form.submit()">
                        <option value="todos" {{ (!$filtroSlug || $filtroSlug === 'todos') ? 'selected' : '' }}>
                            Todos
                        </option>
                        @foreach($estatusCatalogo->whereNotIn('slug', ['inactivo']) as $est)
                            <option value="{{ $est->slug }}"
                                {{ $filtroSlug === $est->slug ? 'selected' : '' }}>
                                {{ $est->descripcion }}
                            </option>
                        @endforeach
                    </select>
                </form>

                {{-- Buscador en tiempo real --}}
                <div class="d-flex align-items-center gap-2 flex-grow-1" style="max-width:320px">
                    <i class="ki-duotone ki-magnifier fs-4 text-gray-400"><span class="path1"></span><span class="path2"></span></i>
                    <input type="text"
                           id="buscador-consultas"
                           class="form-control form-control-sm form-control-solid"
                           placeholder="Buscar por paciente o folio..."
                           autocomplete="off">
                </div>

                {{-- Contador visible --}}
                <span id="contador-consultas" class="ms-auto fw-semibold text-gray-500 fs-7 align-self-center">
                    {{ $consultas->count() }} consulta(s)
                </span>
            </div>
        </div>

        <div class="card-body p-0">
            @if($consultas->isEmpty())
                <div class="text-center py-12">
                    <i class="ki-duotone ki-calendar-search fs-2tx text-gray-300 mb-4 d-block">
                        <span class="path1"></span><span class="path2"></span>
                        <span class="path3"></span><span class="path4"></span>
                    </i>
                    <p class="text-gray-500 fs-6">No se encontraron consultas con el filtro seleccionado.</p>
                </div>
            @else
            <div class="table-responsive">
                <table class="table table-row-dashed table-row-gray-200 align-middle gs-4 gy-3 mb-0" id="tabla-consultas">
                    <thead>
                        <tr class="fw-bold text-gray-500 fs-7 text-uppercase bg-light">
                            <th class="ps-5">Paciente</th>
                            <th>Folio</th>
                            <th>Médico</th>
                            <th>Fecha</th>
                            <th>Hora</th>
                            <th>Tipo</th>
                            <th>Estatus</th>
                            <th class="text-center">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($consultas as $consulta)
                            @php
                                $slug       = $consulta->estatus?->slug ?? '';
                                $color      = $colores[$consulta->fk_estatus] ?? '#6b7280';
                                $horaStr    = substr((string) $consulta->hora, 0, 5);
                                $fechaFmt   = \Carbon\Carbon::parse($consulta->fecha)->format('d/m/Y');
                                $doctor     = $consulta->doctor?->nombre ?? 'Ambos médicos';
                                $nombrePac  = $consulta->paciente?->nombre ?? 'Desconocido';
                                $folio      = $consulta->paciente?->folio?->codigo_folio ?? '—';
                                $tipo       = $consulta->tipoConsulta?->nombre ?? '—';
                                $esFuncional = $consulta->fk_tipo_consulta == \App\Models\TipoConsulta::FUNCIONAL;
                                $duracion   = \App\Models\TipoConsulta::duracionEnHoras((int) $consulta->fk_tipo_consulta);
                                $pacienteId = $consulta->paciente?->id;
                                $tzApp = config('app.timezone');
                                $dentroVentanaAusencia = false;
                                if ($slug === 'no_presentado') {
                                    $fechaDiaNp = \Carbon\Carbon::parse($consulta->fecha, $tzApp)->format('Y-m-d');
                                    $horaFinAus = \Carbon\Carbon::parse($fechaDiaNp.' '.$horaStr.':00', $tzApp)->addHours($duracion);
                                    $dentroVentanaAusencia = \Carbon\Carbon::now($tzApp)->lessThanOrEqualTo($horaFinAus->copy()->addMinutes(15));
                                }
                            @endphp
                            <tr class="fila-consulta"
                                data-id="{{ $consulta->id }}"
                                data-slug="{{ $slug }}"
                                data-fecha="{{ $consulta->fecha->format('Y-m-d') }}"
                                data-hora="{{ $horaStr }}"
                                data-tipo-id="{{ $consulta->fk_tipo_consulta }}"
                                data-doctor-id="{{ $consulta->fk_doctor ?? '' }}"
                                data-duracion="{{ $duracion }}"
                                data-paciente="{{ e($nombrePac) }}"
                                data-busqueda="{{ strtolower($nombrePac . ' ' . $folio) }}">

                                {{-- Paciente (enlace al expediente) --}}
                                <td class="ps-5">
                                    @if($pacienteId)
                                        <a href="{{ route('pacientes.expediente', $pacienteId) }}"
                                           class="text-gray-800 fw-semibold fs-7 text-hover-primary">
                                            {{ $nombrePac }}
                                        </a>
                                    @else
                                        <span class="text-gray-800 fw-semibold fs-7">{{ $nombrePac }}</span>
                                    @endif
                                </td>

                                {{-- Folio --}}
                                <td>
                                    <span class="text-gray-500 fs-8 fw-semibold">{{ $folio }}</span>
                                </td>

                                {{-- Médico --}}
                                <td>
                                    <span class="text-gray-600 fs-7">{{ $doctor }}</span>
                                </td>

                                {{-- Fecha --}}
                                <td>
                                    <span class="text-gray-700 fw-semibold fs-7">{{ $fechaFmt }}</span>
                                </td>

                                {{-- Hora --}}
                                <td>
                                    <span class="text-gray-700 fs-7">{{ $horaStr }}</span>
                                </td>

                                {{-- Tipo — verde=Funcional, azul=General --}}
                                <td>
                                    <span class="badge fs-8"
                                          style="background:{{ $esFuncional ? '#dcfce7' : '#dbeafe' }};
                                                 color:{{ $esFuncional ? '#166534' : '#1e40af' }}">
                                        {{ $tipo }}
                                    </span>
                                </td>

                                {{-- Estatus --}}
                                <td>
                                    <span class="badge-estatus" style="background-color: {{ $color }}">
                                        {{ $consulta->estatus?->descripcion ?? '—' }}
                                    </span>
                                </td>

                                {{-- Acciones --}}
                                <td class="text-center">
                                    <div class="d-flex justify-content-center gap-2 flex-wrap">

                                        {{-- activo: Iniciar + Baja + Reprogramable --}}
                                        @if($slug === 'activo')
                                            <button class="btn btn-sm btn-warning btn-accion fw-semibold"
                                                    data-nuevo-slug="en_proceso"
                                                    data-label="Iniciar Consulta"
                                                    style="font-size:0.75rem">
                                                Iniciar
                                            </button>
                                            <button class="btn btn-sm btn-danger btn-accion fw-semibold"
                                                    data-nuevo-slug="baja"
                                                    data-label="Dar de Baja"
                                                    style="font-size:0.75rem">
                                                Baja
                                            </button>
                                            <button class="btn btn-sm fw-semibold btn-accion"
                                                    data-nuevo-slug="reprogramable"
                                                    data-label="Marcar Reprogramable"
                                                    style="font-size:0.75rem;background:#8b5cf6;color:#fff;border:none">
                                                Reprogramable
                                            </button>

                                        {{-- en_proceso: Completar + Baja --}}
                                        @elseif($slug === 'en_proceso')
                                            <button class="btn btn-sm btn-success btn-accion fw-semibold"
                                                    data-nuevo-slug="completado"
                                                    data-label="Completar Consulta"
                                                    style="font-size:0.75rem">
                                                Completar
                                            </button>
                                            <button class="btn btn-sm btn-danger btn-accion fw-semibold"
                                                    data-nuevo-slug="baja"
                                                    data-label="Dar de Baja"
                                                    style="font-size:0.75rem">
                                                Baja
                                            </button>

                                        {{-- reprogramable: solo Reprogramar (con cambio de fecha/hora) --}}
                                        @elseif($slug === 'reprogramable')
                                            <button class="btn btn-sm fw-semibold btn-reprogramar"
                                                    style="font-size:0.75rem;background:#14b8a6;color:#fff;border:none">
                                                Reprogramar
                                            </button>

                                        {{-- reprogramado: Iniciar + Baja + Reprogramable --}}
                                        @elseif($slug === 'reprogramado')
                                            <button class="btn btn-sm btn-warning btn-accion fw-semibold"
                                                    data-nuevo-slug="en_proceso"
                                                    data-label="Iniciar Consulta"
                                                    style="font-size:0.75rem">
                                                Iniciar
                                            </button>
                                            <button class="btn btn-sm btn-danger btn-accion fw-semibold"
                                                    data-nuevo-slug="baja"
                                                    data-label="Dar de Baja"
                                                    style="font-size:0.75rem">
                                                Baja
                                            </button>
                                            <button class="btn btn-sm fw-semibold btn-accion"
                                                    data-nuevo-slug="reprogramable"
                                                    data-label="Marcar Reprogramable"
                                                    style="font-size:0.75rem;background:#8b5cf6;color:#fff;border:none">
                                                Reprogramable
                                            </button>

                                        {{-- no_presentado: Iniciar (15 min después de hora fin) + Baja + Reprogramable --}}
                                        @elseif($slug === 'no_presentado')
                                            @if($dentroVentanaAusencia)
                                            <button class="btn btn-sm btn-warning btn-accion fw-semibold"
                                                    data-nuevo-slug="en_proceso"
                                                    data-label="Iniciar Consulta"
                                                    style="font-size:0.75rem">
                                                Iniciar
                                            </button>
                                            @endif
                                            <button class="btn btn-sm btn-danger btn-accion fw-semibold"
                                                    data-nuevo-slug="baja"
                                                    data-label="Dar de Baja"
                                                    style="font-size:0.75rem">
                                                Baja
                                            </button>
                                            <button class="btn btn-sm fw-semibold btn-accion"
                                                    data-nuevo-slug="reprogramable"
                                                    data-label="Marcar Reprogramable"
                                                    style="font-size:0.75rem;background:#8b5cf6;color:#fff;border:none">
                                                Reprogramable
                                            </button>

                                        {{-- completado / baja: sin acciones --}}
                                        @else
                                            <span class="text-gray-400 fs-8">—</span>
                                        @endif

                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @endif
        </div>
    </div>

</div>
@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    var CSRF      = '{{ csrf_token() }}';
    var URL_BASE  = '{{ url("/consultas") }}';
    var URL_HORAS = '{{ route("cita.horarios") }}';

    /* =============================================
       BUSCADOR EN TIEMPO REAL
    ============================================= */
    var buscador   = document.getElementById('buscador-consultas');
    var contador   = document.getElementById('contador-consultas');
    var filas      = document.querySelectorAll('.fila-consulta');

    if (buscador) {
        buscador.addEventListener('input', function () {
            var termino = buscador.value.toLowerCase().trim();
            var visibles = 0;

            filas.forEach(function (fila) {
                var texto = fila.getAttribute('data-busqueda') || '';
                var coincide = termino === '' || texto.includes(termino);
                fila.style.display = coincide ? '' : 'none';
                if (coincide) visibles++;
            });

            if (contador) {
                contador.textContent = visibles + ' consulta(s)';
            }
        });
    }

    /* =============================================
       ACCIONES DE CAMBIO DE ESTATUS (Iniciar, Baja, Reprogramable)
    ============================================= */
    document.querySelectorAll('.btn-accion').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var fila      = btn.closest('tr');
            var id        = fila.dataset.id;
            var nuevoSlug = btn.dataset.nuevoSlug;
            var label     = btn.dataset.label;
            var paciente  = (fila.dataset.paciente || '').trim();

            Swal.fire({
                title: '¿Confirmar acción?',
                html: '<p>Paciente: <strong>' + paciente + '</strong><br>' +
                      'Acción: <strong>' + label + '</strong></p>',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Confirmar',
                cancelButtonText: 'Cancelar',
                confirmButtonColor: '#3b82f6',
                cancelButtonColor: '#6b7280',
            }).then(function (result) {
                if (!result.isConfirmed) return;

                fetch(URL_BASE + '/' + id + '/estatus', {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': CSRF,
                    },
                    body: JSON.stringify({ slug: nuevoSlug }),
                })
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    if (data.error) {
                        Swal.fire('Error', data.error, 'error');
                        return;
                    }
                    Swal.fire({
                        title: 'Actualizado',
                        text: data.mensaje,
                        icon: 'success',
                        timer: 1600,
                        showConfirmButton: false,
                    }).then(function () {
                        window.location.reload();
                    });
                })
                .catch(function () {
                    Swal.fire('Error', 'No se pudo conectar con el servidor.', 'error');
                });
            });
        });
    });

    /* =============================================
       REPROGRAMAR — Cambiar fecha y hora
    ============================================= */
    document.querySelectorAll('.btn-reprogramar').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var fila     = btn.closest('tr');
            var id       = fila.dataset.id;
            var tipoId   = fila.dataset.tipoId;
            var doctorId = fila.dataset.doctorId;
            var paciente = (fila.dataset.paciente || '').trim();
            var hoy      = new Date().toISOString().split('T')[0];

            Swal.fire({
                title: 'Reprogramar Consulta',
                html:
                    '<p class="mb-3 text-start">Paciente: <strong>' + paciente + '</strong></p>' +
                    '<div class="mb-4">' +
                        '<label class="form-label fw-semibold text-start d-block mb-1">Nueva fecha</label>' +
                        '<input type="date" id="swal-nueva-fecha" class="form-control form-control-sm" min="' + hoy + '">' +
                    '</div>' +
                    '<div id="swal-hora-wrapper" class="mb-2" style="display:none">' +
                        '<label class="form-label fw-semibold text-start d-block mb-1">Nueva hora</label>' +
                        '<select id="swal-nueva-hora" class="form-select form-select-sm">' +
                            '<option value="">-- Selecciona hora --</option>' +
                        '</select>' +
                        '<div id="swal-cargando-horas" class="text-gray-500 fs-8 mt-1" style="display:none">Cargando horarios...</div>' +
                        '<div id="swal-sin-horas" class="text-danger fs-8 mt-1" style="display:none">Sin horarios disponibles para esa fecha.</div>' +
                    '</div>',
                showCancelButton: true,
                confirmButtonText: 'Guardar',
                cancelButtonText: 'Cancelar',
                confirmButtonColor: '#14b8a6',
                cancelButtonColor: '#6b7280',
                didOpen: function () {
                    var inputFecha = document.getElementById('swal-nueva-fecha');
                    var selectHora = document.getElementById('swal-nueva-hora');
                    var wrapperHora = document.getElementById('swal-hora-wrapper');
                    var cargandoEl = document.getElementById('swal-cargando-horas');
                    var sinHorasEl = document.getElementById('swal-sin-horas');

                    inputFecha.addEventListener('change', function () {
                        var fecha = inputFecha.value;
                        if (!fecha) return;

                        wrapperHora.style.display = 'block';
                        cargandoEl.style.display  = 'block';
                        sinHorasEl.style.display  = 'none';
                        selectHora.innerHTML = '<option value="">-- Selecciona hora --</option>';

                        var params = new URLSearchParams({
                            fecha: fecha,
                            tipo_consulta_id: tipoId,
                        });
                        if (doctorId) params.append('doctor_id', doctorId);

                        fetch(URL_HORAS + '?' + params.toString())
                            .then(function (r) { return r.json(); })
                            .then(function (data) {
                                cargandoEl.style.display = 'none';
                                var slots = data.horarios || [];
                                if (slots.length === 0) {
                                    sinHorasEl.style.display = 'block';
                                    return;
                                }
                                slots.forEach(function (slot) {
                                    var opt = document.createElement('option');
                                    opt.value       = slot.valor;
                                    opt.textContent = slot.etiqueta;
                                    selectHora.appendChild(opt);
                                });
                            })
                            .catch(function () {
                                cargandoEl.style.display = 'none';
                                sinHorasEl.style.display = 'block';
                            });
                    });
                },
                preConfirm: function () {
                    var fecha = document.getElementById('swal-nueva-fecha').value;
                    var hora  = document.getElementById('swal-nueva-hora').value;

                    if (!fecha) {
                        Swal.showValidationMessage('Debes seleccionar una fecha.');
                        return false;
                    }
                    if (!hora) {
                        Swal.showValidationMessage('Debes seleccionar una hora.');
                        return false;
                    }
                    return { fecha: fecha, hora: hora };
                },
            }).then(function (result) {
                if (!result.isConfirmed) return;

                var datos = result.value;

                fetch(URL_BASE + '/' + id + '/reprogramar', {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': CSRF,
                    },
                    body: JSON.stringify({
                        nueva_fecha: datos.fecha,
                        nueva_hora:  datos.hora,
                    }),
                })
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    if (data.error) {
                        Swal.fire('Error', data.error, 'error');
                        return;
                    }
                    Swal.fire({
                        title: 'Reprogramada',
                        text: data.mensaje,
                        icon: 'success',
                        timer: 1800,
                        showConfirmButton: false,
                    }).then(function () {
                        window.location.reload();
                    });
                })
                .catch(function () {
                    Swal.fire('Error', 'No se pudo conectar con el servidor.', 'error');
                });
            });
        });
    });

});
</script>
@endsection