@extends('layouts.horizontal', ['title' => 'Editar Cita'])

@section('content')
<div class="container-fluid">

    @include('layouts.partials.page-title', [
        'subtitle' => '<a href="' .
            route('historial.index', $cita->id_paciente) .
            '" class="text-decoration-none text-primary">Historial del paciente</a>',
        'title' => 'Editar cita'
    ])

    @if ($errors->any())
        <div class="alert alert-danger">
            <h6 class="fw-bold mb-2">
                No se pudo actualizar la cita
            </h6>

            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
                <h4 class="card-title mb-1">
                    Editar cita
                </h4>

                <small class="text-muted">
                    Paciente:
                    {{ trim(
                        $cita->paciente->nombre . ' ' .
                        $cita->paciente->apPaterno . ' ' .
                        $cita->paciente->apMaterno
                    ) }}
                </small>
            </div>

            <a
                href="{{ route('historial.index', $cita->id_paciente) }}"
                class="btn btn-light btn-sm"
            >
                <i class="ti ti-arrow-left me-1"></i>
                Regresar
            </a>
        </div>

        <div class="card-body">
            <form
                id="formEditarCita"
                action="{{ route('historial.citas.update', $cita->id) }}"
                method="POST"
            >
                @csrf
                @method('PUT')

                <input
                    type="hidden"
                    name="id_paciente"
                    value="{{ $cita->id_paciente }}"
                >

                <div class="row g-4">

                    {{-- Columna izquierda --}}
                    <div class="col-lg-6">

                        {{-- Tipo de cita --}}
                        <div class="mb-4">
                            <label class="form-label fw-bold">
                                Tipo de cita
                            </label>

                            <div>
                                <div class="form-check form-check-inline">
                                    <input
                                        class="form-check-input"
                                        type="radio"
                                        name="type_for"
                                        id="tipoConsulta"
                                        value="1"
                                        @checked(
                                            (int) old('type_for', $cita->type_for) === 1
                                        )
                                    >

                                    <label
                                        class="form-check-label"
                                        for="tipoConsulta"
                                    >
                                        Consulta
                                    </label>
                                </div>

                                <div class="form-check form-check-inline">
                                    <input
                                        class="form-check-input"
                                        type="radio"
                                        name="type_for"
                                        id="tipoEstudio"
                                        value="2"
                                        @checked(
                                            (int) old('type_for', $cita->type_for) === 2
                                        )
                                    >

                                    <label
                                        class="form-check-label"
                                        for="tipoEstudio"
                                    >
                                        Estudio
                                    </label>
                                </div>
                            </div>
                        </div>

                        {{-- Estudios --}}
                        <div
                            class="mb-4"
                            id="contenedorEstudios"
                        >
                            <label
                                for="id_estudio"
                                class="form-label fw-bold"
                            >
                                Seleccionar estudios
                            </label>

                            <select
                                name="id_estudio[]"
                                id="id_estudio"
                                class="form-select"
                                multiple
                            >
                                @foreach ($estudios as $estudio)
                                    <option
                                        value="{{ $estudio->idAnalisis }}"
                                        @selected(
                                            in_array(
                                                (string) $estudio->idAnalisis,
                                                array_map(
                                                    'strval',
                                                    old(
                                                        'id_estudio',
                                                        $estudiosSeleccionados
                                                    )
                                                ),
                                                true
                                            )
                                        )
                                    >
                                        {{ $estudio->descripcion }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Paciente --}}
                        <div class="mb-4">
                            <label class="form-label fw-bold">
                                Paciente
                            </label>

                            <input
                                type="text"
                                class="form-control"
                                value="{{ trim(
                                    $cita->paciente->nombre . ' ' .
                                    $cita->paciente->apPaterno . ' ' .
                                    $cita->paciente->apMaterno
                                ) }}"
                                readonly
                            >

                            <small class="text-muted">
                                El paciente no se modifica desde esta pantalla.
                            </small>
                        </div>

                        {{-- Doctor --}}
                        <div class="mb-4">
                            <label
                                for="id_doctor"
                                class="form-label fw-bold"
                                id="labelDoctor"
                            >
                                Seleccionar doctor
                            </label>

                            <select
                                name="id_doctor"
                                id="id_doctor"
                                class="form-select"
                                required
                            >
                                <option value="">
                                    Seleccione...
                                </option>

                                @foreach ($doctores as $doctor)
                                    <option
                                        value="{{ $doctor->idDoctor }}"
                                        data-tecnico="{{ $doctor->tecnico }}"
                                        @selected(
                                            (string) old(
                                                'id_doctor',
                                                $cita->id_doctor
                                            ) ===
                                            (string) $doctor->idDoctor
                                        )
                                    >
                                        {{ trim(
                                            $doctor->nombre . ' ' .
                                            $doctor->apPaterno . ' ' .
                                            $doctor->apMaterno
                                        ) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Intercalar / Sucursal --}}
                        <div class="d-flex align-items-center flex-wrap gap-4">

                            {{-- Intercalar --}}
                            <div class="form-check mb-0">
                                <input
                                    class="form-check-input"
                                    type="checkbox"
                                    name="intercalado"
                                    id="intercalado"
                                    value="1"
                                    @checked(
                                        old(
                                            'intercalado',
                                            (bool) $cita->intercalado
                                        )
                                    )
                                >

                                <label
                                    class="form-check-label"
                                    for="intercalado"
                                >
                                    Intercalar
                                </label>
                            </div>


                            {{-- Sucursal --}}
                            <div class="d-flex align-items-center gap-3">

                                <span class="fw-bold">
                                    Sucursal:
                                </span>

                                <div class="form-check form-check-inline mb-0 me-1">

                                    <input
                                        class="form-check-input"
                                        type="radio"
                                        name="sucursal"
                                        id="sucursalCentro"
                                        value="0"
                                        @checked(
                                            (int) old(
                                                'sucursal',
                                                $cita->sucursal
                                            ) === 0
                                        )
                                    >

                                    <label
                                        class="form-check-label"
                                        for="sucursalCentro"
                                    >
                                        Centro
                                    </label>

                                </div>


                                <div class="form-check form-check-inline mb-0">

                                    <input
                                        class="form-check-input"
                                        type="radio"
                                        name="sucursal"
                                        id="sucursalAmericas"
                                        value="1"
                                        @checked(
                                            (int) old(
                                                'sucursal',
                                                $cita->sucursal
                                            ) === 1
                                        )
                                    >

                                    <label
                                        class="form-check-label"
                                        for="sucursalAmericas"
                                    >
                                        Las Américas
                                    </label>

                                </div>

                            </div>

                        </div>
                    </div>

                    {{-- Columna derecha --}}
                    <div class="col-lg-6">

                        {{-- Fecha y horas --}}
                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label
                                    for="fecha"
                                    class="form-label fw-bold"
                                >
                                    Fecha
                                </label>

                                <input
                                    type="date"
                                    class="form-control"
                                    name="fecha"
                                    id="fecha"
                                    value="{{ old(
                                        'fecha',
                                        $cita->start?->format('Y-m-d')
                                    ) }}"
                                    required
                                >
                            </div>

                            <div class="col-md-3">
                                <label
                                    for="hora_inicio"
                                    class="form-label fw-bold"
                                >
                                    Hora inicio
                                </label>

                                <input
                                    type="time"
                                    class="form-control"
                                    name="hora_inicio"
                                    id="hora_inicio"
                                    value="{{ old(
                                        'hora_inicio',
                                        $cita->start?->format('H:i')
                                    ) }}"
                                    required
                                >
                            </div>

                            <div class="col-md-3">
                                <label
                                    for="hora_fin"
                                    class="form-label fw-bold"
                                >
                                    Hora fin
                                </label>

                                <input
                                    type="time"
                                    class="form-control"
                                    name="hora_fin"
                                    id="hora_fin"
                                    value="{{ old(
                                        'hora_fin',
                                        $cita->end?->format('H:i')
                                    ) }}"
                                    required
                                >
                            </div>
                        </div>

                        {{-- Asunto --}}
                        <div class="mb-4">
                            <label
                                for="asunto"
                                class="form-label fw-bold"
                            >
                                Asunto
                            </label>

                            <input
                                type="text"
                                class="form-control"
                                name="asunto"
                                id="asunto"
                                value="{{ old('asunto', $cita->title) }}"
                                placeholder="Primera vez, control, etc."
                                required
                            >
                        </div>

                        {{-- Descripción --}}
                        <div class="mb-4">
                            <label
                                for="descripcion"
                                class="form-label fw-bold"
                            >
                                Descripción
                            </label>

                            <textarea
                                class="form-control"
                                name="descripcion"
                                id="descripcion"
                                rows="5"
                                placeholder="Notas adicionales..."
                            >{{ old('descripcion', $cita->descripcion) }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="border-top pt-4 mt-4 d-flex justify-content-end gap-2">
                    <a
                        href="{{ route('historial.index', $cita->id_paciente) }}"
                        class="btn btn-light"
                    >
                        Cancelar
                    </a>

                    <button
                        type="submit"
                        class="btn btn-primary"
                        id="btnGuardarCita"
                    >
                        <i class="ti ti-device-floppy me-1"></i>
                        Guardar cambios
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/slim-select@2.8.1/dist/slimselect.min.js"></script>
<link
    href="https://cdn.jsdelivr.net/npm/slim-select@2.8.1/dist/slimselect.css"
    rel="stylesheet"
/>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const tipoConsulta = document.getElementById('tipoConsulta');
    const tipoEstudio = document.getElementById('tipoEstudio');
    const contenedorEstudios = document.getElementById('contenedorEstudios');
    const selectEstudios = document.getElementById('id_estudio');
    const form = document.getElementById('formEditarCita');
    const btnGuardar = document.getElementById('btnGuardarCita');

    const slimEstudios = new SlimSelect({
        select: '#id_estudio',
        settings: {
            placeholderText: 'Seleccionar estudios...',
            searchPlaceholder: 'Buscar estudio...',
            searchHighlight: true,
        }
    });

    function actualizarTipoCita() {
        const esEstudio = tipoEstudio.checked;

        contenedorEstudios.classList.toggle('d-none', !esEstudio);

        if (!esEstudio) {
            slimEstudios.setSelected([]);
        }
    }

    tipoConsulta.addEventListener('change', actualizarTipoCita);
    tipoEstudio.addEventListener('change', actualizarTipoCita);

    actualizarTipoCita();

    form.addEventListener('submit', function () {
        btnGuardar.disabled = true;

        btnGuardar.innerHTML = `
            <span
                class="spinner-border spinner-border-sm me-1"
                aria-hidden="true"
            ></span>
            Guardando...
        `;
    });
});
</script>
@endpush