@extends('layouts.index', ['subHeader' => 'Nuevo 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"> / Cargas Críticas</a>
    <span> / Nuevo 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="row g-4">
            <!-- Bloque de consecutivos -->
            <div class="col-12 col-lg-8">
                <div class="row g-3">
                    <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 ?? 0 }}</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>

            <!-- Botones -->
            <div class="col-md-12 col-lg-4 d-flex gap-2 align-items-start">
                <a href="{{ route('registros.uploadView') }}" class="btn btn-enviar btn-lg w-100">
                    <i class="bi bi-file-earmark-spreadsheet"></i> Subir Excel
                </a>
                <a href="{{ route('registros.index') }}" class="btn btn-enviar btn-lg w-100">
                    <i class="bi bi-arrow-left-circle-fill"></i> Atrás
                </a>
            </div>
        </div>



    </div>

    <br>
    <div class="container-fluid shadow-s p-4">
        <form id="form_registros" class="row g-3" action="{{ route('registros.store') }}" method="POST"
            enctype="multipart/form-data">
            @csrf
            <h1 class="fs-3x fw-bolder">Nuevo registro</h1>

            <!-- Aprobación de registro -->
            @hasanyrole('admin|Super Admin')
                <div class="col-12">
                    <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"
                                    {{ old('aprobacion', '1') == '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"
                                    {{ old('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">{{ $message }}</div>
                    @enderror
                    <hr>
                </div>
            @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', $siguienteConsecutivo) }}" placeholder="0" required>
                @error('consecutivo')
                    <div class="text-danger">{{ $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-control fromcss form-control-lg" data-control="select2"
                    data-placeholder="Seleccione Compañía solicitante..." required>
                    <option value="">Seleccione Compañía solicitante...</option>
                    @foreach ($entidades as $entidad)
                        <option value="{{ $entidad->id }}"
                            {{ old('compania_solicitante_id') == $entidad->id ? 'selected' : '' }}>
                            {{ $entidad->nombre }}
                        </option>
                    @endforeach
                </select>
                @error('compania_solicitante_id')
                    <div class="text-danger">{{ $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="{{ old('ceco') }}" placeholder="CECO" required>
                @error('ceco')
                    <div class="text-danger">{{ $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-control fromcss form-control-lg"
                    data-control="select2" data-placeholder="Seleccione Proveedor..." required>
                    <option value="">Seleccione Proveedor...</option>
                    @foreach ($proveedores as $proveedor)
                        <option value="{{ $proveedor->id }}"
                            {{ old('proveedor_id') == $proveedor->id ? 'selected' : '' }}>
                            {{ $proveedor->nombre }}
                        </option>
                    @endforeach
                </select>
                @error('proveedor_id')
                    <div class="text-danger">{{ $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-control fromcss form-control-lg"
                    data-control="select2" data-placeholder="Seleccione Área solicitante..." required>
                    <option value="">Seleccione Área solicitante...</option>
                    @foreach ($areas as $area)
                        <option value="{{ $area->id }}"
                            {{ old('area_solicitante_id') == $area->id ? 'selected' : '' }}>
                            {{ $area->nombre }}
                        </option>
                    @endforeach
                </select>
                @error('area_solicitante_id')
                    <div class="text-danger">{{ $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="{{ old('ciudad_origen_id') }}"
                    placeholder="Ingrese la Ciudad de origen..." required>
                @error('ciudad_origen_id')
                    <div class="text-danger">{{ $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-control fromcss form-control-lg"
                    data-control="select2" data-placeholder="Seleccione Clase de servicio..." required>
                    <option value="">Seleccione Clase de servicio...</option>
                    @foreach ($clase_servicios as $clase_servicio)
                        <option value="{{ $clase_servicio->id }}"
                            {{ old('clase_servicio_id') == $clase_servicio->id ? 'selected' : '' }}>
                            {{ $clase_servicio->nombre }}
                        </option>
                    @endforeach
                </select>
                @error('clase_servicio_id')
                    <div class="text-danger">{{ $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="{{ old('funcionario_solicitante') }}"
                    placeholder="Ingrese el Funcionario solicitante..." required>
                @error('funcionario_solicitante')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>

            <!-- Analista 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="{{ old('analista_gestor_id') }}"
                    placeholder="Ingrese el Analista gestor..." required>
                @error('analista_gestor_id')
                    <div class="text-danger">{{ $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') }}" required>
            </div>

            <!-- Lugar de Inicio -->
            <div class="col-md-4">
                <label for="lugar_inicio" class="form-label fw-bolder">Lugar de inicio</label>
                <input type="text" class="form-control fromcss form-control-lg" name="lugar_inicio" id="lugar_inicio"
                    value="{{ old('lugar_inicio') }}" placeholder="Ingrese el Lugar de inicio..." required>
                @error('lugar_inicio')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>

            <!-- 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') }}" required>
            </div>

            <!-- Checkbox para fecha indefinida -->
            <div class="col-md-4" style="display: flex; align-items: center;">
                <div class="form-check mt-4">
                    <input class="form-check-input" type="checkbox" id="fecha_indefinida" name="fecha_indefinida">
                    <label class="form-check-label" for="fecha_indefinida">Hasta finalizar operación</label>
                </div>
            </div>

            <!-- Lugar de Destino -->
            <div class="col-md-4">
                <label for="lugar_destino" class="form-label fw-bolder">Lugar de destino</label>
                <input type="text" class="form-control fromcss form-control-lg" name="lugar_destino"
                    id="lugar_destino" value="{{ old('lugar_destino') }}" placeholder="Ingrese el Lugar de destino..."
                    required>
                @error('lugar_destino')
                    <div class="text-danger">{{ $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-control fromcss form-control-lg"
                    data-control="select2" data-placeholder="Seleccione Estado del servicio..." required>
                    <option value="">Seleccione Estado del servicio...</option>
                    @foreach (App\Models\Registro::NOMBRE_ESTADOS as $key => $estado)
                        <option value="{{ $key }}" {{ old('estado_servicio', 1) == $key ? 'selected' : '' }}>
                            {{ $estado }}
                        </option>
                    @endforeach
                </select>
                @error('estado_servicio')
                    <div class="text-danger">{{ $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="{{ old('persona_proteger') }}" placeholder="Ingrese el valor en $"
                    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-control fromcss form-control-lg"
                    data-control="select2" data-placeholder="Seleccione Tipo de recurso..." required>
                    <option value="">Seleccione Tipo de recurso...</option>
                    @foreach ($tipo_recursos as $tipo_recurso)
                        <option value="{{ $tipo_recurso->id }}"
                            {{ old('tipo_recurso_id') == $tipo_recurso->id ? 'selected' : '' }}>
                            {{ $tipo_recurso->nombre }}
                        </option>
                    @endforeach
                </select>
                @error('tipo_recurso_id')
                    <div class="text-danger">{{ $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="{{ old('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" class="form-control fromcss form-control-lg" name="especificacion_recurso"
                    id="especificacion_recurso" placeholder="Escribe aquí las especificaciones del servicio..." required>{{ old('especificacion_recurso') }}</textarea>
            </div>

            <!-- Imágenes de seguimiento -->
            <div class="mb-4">
                <h4 class="fw-bold">Imágenes de seguimiento</h4>
                <div class="row" id="imagenes_container"></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 para mostrar el detalle de las imagenes --}}
    <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 = 0;

        $('#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/*" required>
                            </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() {
            $(this).closest('.imagen-item').remove();
            updateImagenesIndexes();
        });

        $(document).on('click', '.btn-edit', function() {
            const index = $(this).data('index');
            const titulo = $(`#titulo_${index}`).val();
            const descripcion = $(`#descripcion_${index}`).val();
            $('#edit_index').val(index);
            $('#edit_titulo').val(titulo);
            $('#edit_descripcion').val(descripcion);
            const toast = new bootstrap.Toast(document.getElementById('toast-editar'));
            toast.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) {
                $(this).find('.btn-edit').attr('data-index', i);
                $(this).find('input[type=hidden]').each(function() {
                    let name = $(this).attr('name');
                    $(this).attr('name', name.replace(/\[\d+\]/, `[${i}]`));
                    $(this).attr('id', $(this).attr('id').replace(/_\d+$/, `_${i}`));
                });
                $(this).find('.input-preview').each(function() {
                    $(this).attr('name', `imagenes[${i}][archivo]`);
                    $(this).data('preview-target', `#preview_${i}`);
                });
                $(this).find('img').attr('id', `preview_${i}`);
            });
            imagenIndex = $('#imagenes_container .imagen-item').length;
        }
    </script>
@endsection