@extends('layouts.index', ['subHeader' => 'Editar Registro'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard</a>
    <a href="{{ route('registros.index') }}" class="text-decoration-none text-dark"> / Registro</a>
    <span> / Editar registro</span>
@endsection

@section('content')
    <style>
        .imagen-card {
            position: relative;
            border: 1px solid #ddd;
            border-radius: 12px;
            overflow: hidden;
            transition: box-shadow 0.2s ease;
        }

        .imagen-card img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            border-radius: 12px 12px 0 0;
            background-color: #f0f0f0;
        }

        .imagen-actions {
            position: absolute;
            top: 8px;
            right: 8px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            z-index: 2;
        }

        .imagen-actions button,
        .imagen-actions label {
            background-color: rgba(255, 255, 255, 0.95);
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
        }

        .imagen-actions label {
            padding: 0;
            margin: 0;
        }

        .imagen-actions i {
            font-size: 18px;
            color: #333;
        }
    </style>
    <div class="row">
        <div class="d-flex flex-wrap justify-content-between w-100 voltearv">
            <div class="row" style="width:60%">
                <div class="col-md-6">
                    <div class="shadow-s">
                        <div class="d-flex flex-column p-3">
                            <span class="fs-4 fw-bolder purple">Último consecutivo</span>
                            <span class="fs-5 fw-bolder gray">{{ $ultimoConsecutivo }}</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="shadow-s">
                        <div class="d-flex flex-column p-3">
                            <span class="fs-4 fw-bolder purple">Consecutivo disponible</span>
                            <span class="fs-5 fw-bolder gray">{{ $ultimoConsecutivo + 1 }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-s">
                <div class="btn-group mb-2" role="group" aria-label="">
                    <a href="{{ route('registros.index') }}" type="button" class="btn btn-enviar btn-lg btn-block">
                        <i class="bi bi-arrow-left-circle-fill"></i> Atrás
                    </a>
                </div>
            </div>
        </div>
    </div>

    <br>
    <div class="container-fluid shadow-s p-4">
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            <br>
        @endif

        <form class="row g-3" action="{{ route('registros.update', ['id' => $registro->id]) }}" method="POST"
            enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <h1 class="fs-3x fw-bolder">Editar registro</h1>

            <!-- Aprobación de registro -->
            @hasanyrole('admin|Super Admin')
                <span class="fs-5">Aprobación de registro</span>

                <div class="mt-2 d-flex flex-wrap">
                    <div class="d-flex flex-wrap">
                        <div class="form-check m-2">
                            <input class="form-check-input" type="radio" name="aprobacion" id="aprobacion1" value="1"
                                {{ $registro->aprobacion == 1 ? 'checked' : '' }}>
                            <div>
                                <img src="{{ asset('img/exitoso.png') }}" width="15px" alt="true">
                                <label class="fs-6" for="aprobacion1">
                                    Aprobado
                                </label>
                            </div>
                        </div>
                        <div class="form-check m-2">
                            <input class="form-check-input" type="radio" name="aprobacion" id="aprobacion2" value="0"
                                {{ $registro->aprobacion == 0 ? 'checked' : '' }}>
                            <div>
                                <img src="{{ asset('img/error.png') }}" width="15px" alt="false">
                                <label class="fs-6" for="aprobacion2">
                                    Rechazado
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                @error('aprobacion')
                    <div class="text-danger">@lang($message)</div>
                @enderror
                <hr>
            @endhasanyrole

            <!-- Consecutivo -->
            <div class="col-md-4">
                <label for="consecutivo" class="form-label fw-bolder">Consecutivo</label>
                <input type="number" class="form-control fromcss  form-control-lg" name="consecutivo" id="consecutivo"
                    value="{{ old('consecutivo', $registro->consecutivo) }}" required>
                @error('consecutivo')
                    <div class="text-danger" style="color: red;">@lang($message)</div>
                @enderror
            </div>

            <!-- Compañía solicitante -->
            <div class="col-md-4">
                <label for="compania_solicitante_id" class="form-label fw-bolder">Compañía solicitante</label>
                <select name="compania_solicitante_id" id="compania_solicitante_id"
                    class="form-select fromcss  form-select-lg" data-control="select2"
                    data-placeholder="Seleccione Compañía solicitante..." required>
                    <option></option>
                    @foreach ($entidades as $entidad)
                        <option value={{ $entidad->id }}
                            {{ $registro->compania_solicitante_id == $entidad->id ? 'selected' : '' }}>
                            {{ $entidad->nombre }}</option>
                    @endforeach
                </select>
                @error('compania_solicitante_id')
                    <div class="text-danger" style="color: red;">@lang($message)</div>
                @enderror
            </div>

            <!-- Ceco -->
            <div class="col-md-4">
                <label for="ceco" class="form-label fw-bolder">Ceco</label>
                <input type="text" class="form-control fromcss  form-control-lg" name="ceco" id="ceco"
                    value="{{ $registro->ceco }}" required>
                @error('ceco')
                    <div class="text-danger" style="color: red;">@lang($message)</div>
                @enderror
            </div>

            <!-- Proveedor -->
            <div class="col-md-4">
                <label for="proveedor_id" class="form-label fw-bolder">Proveedor</label>
                <select name="proveedor_id" id="proveedor_id" class="form-select fromcss  form-select-lg"
                    data-control="select2" data-placeholder="Seleccione Proveedor..." required>
                    <option></option>
                    @foreach ($proveedores as $proveedor)
                        <option value={{ $proveedor->id }}
                            {{ $registro->proveedor_id == $proveedor->id ? 'selected' : '' }}>{{ $proveedor->nombre }}
                        </option>
                    @endforeach
                </select>
                @error('proveedor_id')
                    <div class="text-danger" style="color: red;">@lang($message)</div>
                @enderror
            </div>

            <!-- Área solicitante -->
            <div class="col-md-4">
                <label for="area_solicitante_id" class="form-label fw-bolder">Área solicitante</label>
                <select name="area_solicitante_id" id="area_solicitante_id" class="form-select fromcss  form-select-lg"
                    data-control="select2" data-placeholder="Seleccione Área solicitante..." required>
                    <option></option>
                    @foreach ($areas as $area)
                        <option value={{ $area->id }}
                            {{ $registro->area_solicitante_id == $area->id ? 'selected' : '' }}>{{ $area->nombre }}
                        </option>
                    @endforeach
                </select>
                @error('area_solicitante_id')
                    <div class="text-danger" style="color: red;">@lang($message)</div>
                @enderror
            </div>

            <!-- En Blanco -->
            <div class="col-md-4"></div>

            <!-- Ciudad de origen -->
            <div class="col-md-4">
                <label for="ciudad_origen_id" class="form-label fw-bolder">Ciudad de origen</label>
                <input type="text" class="form-control fromcss  form-control-lg" name="ciudad_origen_id"
                    id="ciudad_origen_id" value="{{ $registro->ciudad_origen_id }}" required>
                @error('ciudad_origen_id')
                    <div class="text-danger" style="color: red;">@lang($message)</div>
                @enderror
            </div>

            <!-- Clase de servicio -->
            <div class="col-md-4">
                <label for="clase_servicio_id" class="form-label fw-bolder">Clase de servicio</label>
                <select name="clase_servicio_id" id="clase_servicio_id" class="form-select fromcss  form-select-lg"
                    data-control="select2" data-placeholder="Seleccione Clase de servicio..." required>
                    <option></option>
                    @foreach ($clase_servicios as $clase_servicio)
                        <option value={{ $clase_servicio->id }}
                            {{ $registro->clase_servicio_id == $clase_servicio->id ? 'selected' : '' }}>
                            {{ $clase_servicio->nombre }}</option>
                    @endforeach
                </select>
                @error('clase_servicio_id')
                    <div class="text-danger" style="color: red;">@lang($message)</div>
                @enderror
            </div>

            <!-- Funcionario solicitante -->
            <div class="col-md-4">
                <label for="funcionario_solicitante" class="form-label fw-bolder">Funcionario solicitante</label>
                <input type="text" class="form-control fromcss  form-control-lg" name="funcionario_solicitante"
                    id="funcionario_solicitante" value="{{ $registro->funcionario_solicitante }}" required>
                @error('funcionario_solicitante')
                    <div class="text-danger" style="color: red;">@lang($message)</div>
                @enderror
            </div>

            <!-- Aalista Gestor -->
            <div class="col-md-4">
                <label for="analista_gestor_id" class="form-label fw-bolder">Analista gestor</label>
                <input type="text" class="form-control fromcss  form-control-lg" name="analista_gestor_id"
                    id="analista_gestor_id" value="{{ $registro->analista_gestor_id }}" required>
                @error('analista_gestor_id')
                    <div class="text-danger" style="color: red;">@lang($message)</div>
                @enderror
            </div>

            <!-- Fecha y hora inicio -->
            <div class="col-md-4">
                <label for="fecha_inicio" class="form-label fw-bolder">Fecha y hora inicio</label>
                <input type="datetime-local" class="form-control fromcss  form-control-lg" name="fecha_inicio"
                    id="fecha_inicio"
                    value="{{ old('fecha_inicio', date('Y-m-d\TH:i', strtotime($registro->fecha_inicio))) }}" required>
            </div>

            <!-- Lugar Inicio -->
            <div class="col-md-4">
                <label for="lugar_inicio" class="form-label fw-bolder">Lugar inicio</label>
                <input type="text" class="form-control fromcss  form-control-lg" name="lugar_inicio"
                    id="lugar_inicio" value="{{ $registro->lugar_inicio }}" required>
                @error('lugar_inicio')
                    <div class="text-danger" style="color: red;">@lang($message)</div>
                @enderror
            </div>

            <!-- Fecha final invisible -->
            <input type="hidden" id="_fecha_final" name="_fecha_final" value="{{ $registro->fecha_final }}">
            <!-- Fecha y hora final -->
            <div class="col-md-4">
                <label for="fecha_final" class="form-label fw-bolder">Fecha y hora final</label>
                <input type="datetime-local" class="form-control fromcss  form-control-lg" name="fecha_final"
                    id="fecha_final"
                    value="{{ old('fecha_final', date('Y-m-d\TH:i', strtotime($registro->fecha_final))) }}" required>
            </div>

            <!-- Checkbox para fecha indefinida -->
            <div class="col-md-4" style="display: flex; align-items: center;">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" name="fecha_indefinida" id="fecha_indefinida"
                        value="1" {{ old('fecha_indefinida', $registro->fecha_indefinida) ? 'checked' : '' }}>
                    <label for="fecha_indefinida" class="form-check-label">Hasta finalizar operación</label>
                </div>
                @error('fecha_indefinida')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>

            <!-- Lugar Destino -->
            <div class="col-md-4">
                <label for="lugar_destino" class="form-label fw-bolder">Lugar destino</label>
                <input type="text" class="form-control fromcss  form-control-lg" name="lugar_destino"
                    id="lugar_destino" value="{{ $registro->lugar_destino }}" required>
                @error('lugar_destino')
                    <div class="text-danger" style="color: red;">@lang($message)</div>
                @enderror
            </div>

            <!-- Estado del servicio -->
            <div class="col-md-4">
                <label for="estado_servicio" class="form-label fw-bolder">Estado del servicio</label>
                <select name="estado_servicio" id="estado_servicio" class="form-select fromcss  form-select-lg"
                    data-control="select2" data-placeholder="Seleccione Estado del servicio..." required>
                    <option></option>
                    @foreach (App\Models\Registro::NOMBRE_ESTADOS as $key => $estado)
                        <option value="{{ $key }}" {{ $registro->estado_servicio == $key ? 'selected' : '' }}>
                            {{ $estado }}</option>
                    @endforeach
                </select>
                @error('estado_servicio')
                    <div class="text-danger" style="color: red;">@lang($message)</div>
                @enderror
            </div>

            <!-- Persona a proteger -->
            <div class="col-md-4">
                <label for="persona_proteger" class="form-label fw-bolder">Persona a proteger</label>
                <input type="text" class="form-control fromcss  form-control-lg" name="persona_proteger"
                    id="persona_proteger" value="{{ $registro->persona_proteger }}" required>
            </div>

            <!-- Tipo de recurso -->
            <div class="col-md-4">
                <label for="tipo_recurso_id" class="form-label fw-bolder">Tipo de recurso</label>
                <select name="tipo_recurso_id" id="tipo_recurso_id" class="form-select fromcss  form-select-lg"
                    data-control="select2" data-placeholder="Seleccione Tipo de recurso..." required>
                    <option></option>
                    @foreach ($tipo_recursos as $tipo_recurso)
                        <option value={{ $tipo_recurso->id }}
                            {{ $registro->tipo_recurso_id == $tipo_recurso->id ? 'selected' : '' }}>
                            {{ $tipo_recurso->nombre }}</option>
                    @endforeach
                </select>
                @error('tipo_recurso_id')
                    <div class="text-danger" style="color: red;">@lang($message)</div>
                @enderror
            </div>

            <!-- Cantidad de recursos -->
            <div class="col-md-4">
                <label for="cantidad_recursos" class="form-label fw-bolder">Cantidad de recursos</label>
                <input type="number" class="form-control fromcss  form-control-lg" name="cantidad_recursos"
                    id="cantidad_recursos" value="{{ $registro->cantidad_recursos }}" placeholder="0" required>
            </div>

            <!-- Especificaciones del servicio -->
            <div class="col-md-8">
                <label for="especificacion_recurso" class="form-label fw-bolder">Especificaciones del servicio</label>
                <textarea rows="1" style="height: auto;" class="form-control fromcss  form-control-lg"
                    name="especificacion_recurso" id="especificacion_recurso"
                    placeholder="Escribe aquí las especificaciones del servicio..." required>{{ $registro->especificacion_recurso }}</textarea>
            </div>

            <!-- Sección de imágenes -->
            <div class="mb-4">
                <h4 class="fw-bold">Imágenes de seguimiento</h4>
                <div class="row" id="imagenes_container">
                    @foreach ($registro->imagenes as $i => $imagen)
                        <div class="col-md-4 imagen-item mb-4" id="imagen_{{ $i }}">
                            <div class="imagen-card shadow-sm">
                                <img id="preview_{{ $i }}" src="{{ asset('storage/' . $imagen->archivo) }}"
                                    alt="Vista previa">
                                <div class="imagen-actions">
                                    <button type="button" class="btn-edit" data-index="{{ $i }}"><i
                                            class="bi bi-pencil"></i></button>
                                    <label>
                                        <i class="bi bi-upload"></i>
                                        <input type="file" class="d-none input-preview"
                                            data-preview-target="#preview_{{ $i }}"
                                            name="imagenes[{{ $i }}][archivo]" accept="image/*">
                                    </label>
                                    <button type="button" class="btn-delete"><i
                                            class="bi bi-trash text-danger"></i></button>
                                </div>
                                <input type="hidden" name="imagenes[{{ $i }}][titulo]"
                                    id="titulo_{{ $i }}" value="{{ $imagen->titulo }}">
                                <input type="hidden" name="imagenes[{{ $i }}][descripcion]"
                                    id="descripcion_{{ $i }}" value="{{ $imagen->descripcion }}">
                                <input type="hidden" name="imagenes[{{ $i }}][id]"
                                    value="{{ $imagen->id }}">
                            </div>
                        </div>
                    @endforeach
                </div>
                <button type="button" class="btn btn-outline-primary mt-3" id="btn-add-imagen">
                    <i class="bi bi-plus-circle"></i> Agregar imagen
                </button>
            </div>

            <br><br>
            <div class="col-12 d-flex justify-content-end">
                <div class="flex-row g-4 w-100 justify-content-end">
                    <a href="{{ route('registros.index') }}" class="btn btn-lg mb-3 btn-cancelar">Cancelar</a>
                    <button class="btn btn-lg mb-3 btn-enviar" type="submit">Guardar</button>
                </div>
            </div>
        </form>
    </div>

    <!-- Toast de edición de imágenes -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 1056;">
        <div id="toast-editar" class="toast hide" role="alert" data-bs-autohide="false">
            <div class="toast-header">
                <strong class="me-auto">Editar detalles</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                <input type="hidden" id="edit_index">
                <div class="mb-2">
                    <label class="form-label">Título</label>
                    <input type="text" id="edit_titulo" class="form-control">
                </div>
                <div class="mb-2">
                    <label class="form-label">Descripción</label>
                    <input type="text" id="edit_descripcion" class="form-control">
                </div>
                <div class="mt-3 d-flex justify-content-end">
                    <button class="btn btn-primary btn-sm" id="btn-save-edit">Guardar</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        let imagenIndex = {{ count($registro->imagenes) }};

        $('#btn-add-imagen').on('click', function() {
            const index = imagenIndex++;
            const html = `
                <div class="col-md-4 imagen-item mb-4" id="imagen_${index}">
                    <div class="imagen-card shadow-sm">
                        <img id="preview_${index}" src="{{ asset('img/imagen.png') }}" alt="Vista previa">
                        <div class="imagen-actions">
                            <button type="button" class="btn-edit" data-index="${index}" title="Editar detalles"><i class="bi bi-pencil"></i></button>
                            <label class="btn-change" title="Cambiar imagen">
                                <i class="bi bi-upload"></i>
                                <input type="file" class="d-none input-preview" data-preview-target="#preview_${index}" name="imagenes[${index}][archivo]" accept="image/*">
                            </label>
                            <button type="button" class="btn-delete" title="Eliminar"><i class="bi bi-trash text-danger"></i></button>
                        </div>
                        <input type="hidden" name="imagenes[${index}][titulo]" id="titulo_${index}">
                        <input type="hidden" name="imagenes[${index}][descripcion]" id="descripcion_${index}">
                    </div>
                </div>
            `;
            $('#imagenes_container').append(html);
        });

        $(document).on('change', '.input-preview', function(e) {
            const input = e.target;
            const previewTarget = $(input).data('preview-target');
            const file = input.files[0];
            if (file && file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    $(previewTarget).attr('src', e.target.result);
                };
                reader.readAsDataURL(file);
            }
        });

        $(document).on('click', '.btn-delete', function() {
            const $item = $(this).closest('.imagen-item');

            // Mostrar confirmación
            if (confirm('¿Está seguro que desea eliminar esta imagen?')) {
                const $idInput = $item.find('input[name$="[id]"]');

                // Si es una imagen existente (tiene ID), marcarla para eliminación en el backend
                if ($idInput.length && $idInput.val()) {
                    $('#imagenes_container').append(
                        `<input type="hidden" name="imagenes_eliminar[]" value="${$idInput.val()}">`
                    );
                }

                // Eliminar el elemento visualmente
                $item.remove();

                // Actualizar índices de los elementos restantes
                updateImagenesIndexes();
            }
        });

        $(document).on('click', '.btn-edit', function() {
            const index = $(this).data('index');
            $('#edit_index').val(index);
            $('#edit_titulo').val($(`#titulo_${index}`).val());
            $('#edit_descripcion').val($(`#descripcion_${index}`).val());
            new bootstrap.Toast(document.getElementById('toast-editar')).show();
        });

        $('#btn-save-edit').on('click', function() {
            const index = $('#edit_index').val();
            $(`#titulo_${index}`).val($('#edit_titulo').val());
            $(`#descripcion_${index}`).val($('#edit_descripcion').val());
            bootstrap.Toast.getInstance(document.getElementById('toast-editar')).hide();
        });

        function updateImagenesIndexes() {
            $('#imagenes_container .imagen-item').each(function(i) {
                const $item = $(this);

                // Actualizar el atributo data-index del botón de edición
                $item.find('.btn-edit').attr('data-index', i);

                // Actualizar IDs y nombres de los campos
                $item.find('input[type="hidden"], input[type="file"]').each(function() {
                    const $input = $(this);
                    const name = $input.attr('name');

                    if (name) {
                        // Actualizar el índice en el nombre del campo
                        const newName = name.replace(/\[\d+\]/, `[${i}]`);
                        $input.attr('name', newName);

                        // Actualizar ID si existe
                        const id = $input.attr('id');
                        if (id && id.match(/_\d+$/)) {
                            const newId = id.replace(/_\d+$/, `_${i}`);
                            $input.attr('id', newId);
                        }
                    }
                });

                // Actualizar preview target
                $item.find('.input-preview').each(function() {
                    $(this).attr('data-preview-target', `#preview_${i}`);
                });

                // Actualizar ID de la imagen de vista previa
                $item.find('img').attr('id', `preview_${i}`);

                // Actualizar ID del contenedor
                $item.attr('id', `imagen_${i}`);
            });

            // Actualizar contador global
            imagenIndex = $('#imagenes_container .imagen-item').length;
        }
    </script>

@endsection