@extends('back.layouts.admin_main')
@section('administrador')
<style>
    #sortable_direcciones tr {
        cursor: move;
    }
    .table tr td p {
        margin-bottom: 0 !important;
    }
</style>

<div class="col-12">
    <div class="col-12 bg-white p-3 rounded">
        <div class="col-12">
            <p class="mb-0" style="display: flex; align-items: center; justify-content:space-between;">
                <span>Direcciones de la empresa</span>
                <button data-bs-toggle="modal" data-bs-target="#modalAgregarDireccion" class="btn btn-dark">+ AGREGAR</button>
            </p>
        </div>
        <div class="col-12 mt-3" id="tablaDirecciones">
            @include('back.direcciones.tablas.tablaDirecciones')
        </div>
    </div>
</div>

<!-- Modal Agregar Dirección -->
<div class="modal fade" id="modalAgregarDireccion" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Agregar Dirección</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="" id="agregarDireccion">
                <div class="modal-body">
                    <div class="col-12">
                        <div class="row g-3">
                            <div class="col-12">
                                <div class="form-floating">
                                    <input type="text" name="titulo" class="form-control" required>
                                    <label for="">Título (ej: MIAMI / USA)</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <textarea name="direccion" class="form-control" style="height: 100px;" required></textarea>
                                    <label for="">Dirección completa</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <input type="text" name="telefono" class="form-control">
                                    <label for="">Teléfono</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <input type="text" name="observacion" class="form-control">
                                    <label for="">Observación (ej: Suite o Ref)</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input" name="activo" id="activo_agregar" type="checkbox" checked>
                                    <label class="form-check-label" for="activo_agregar">Activo</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input" name="mostrar_en_footer" id="mostrar_footer_agregar" type="checkbox" checked>
                                    <label class="form-check-label" for="mostrar_footer_agregar">Mostrar en footer</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">CERRAR</button>
                    <button type="submit" class="btn btn-dark">AGREGAR</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Editar Dirección -->
<div class="modal fade" id="modalEditarDireccion" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Editar Dirección</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="" id="editarDireccion">
                <div class="modal-body">
                    <div class="col-12">
                        <input type="hidden" name="id" id="id_direccion_editar" class="form-control">
                        <div class="row g-3">
                            <div class="col-12">
                                <div class="form-floating">
                                    <input type="text" name="titulo" id="titulo_editar" class="form-control" required>
                                    <label for="">Título (ej: MIAMI / USA)</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <textarea name="direccion" id="direccion_editar" class="form-control" style="height: 100px;" required></textarea>
                                    <label for="">Dirección completa</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <input type="text" name="telefono" id="telefono_editar" class="form-control">
                                    <label for="">Teléfono</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <input type="text" name="observacion" id="observacion_editar" class="form-control">
                                    <label for="">Observación (ej: Suite o Ref)</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input" name="activo" id="activo_editar" type="checkbox">
                                    <label class="form-check-label" for="activo_editar">Activo</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input" name="mostrar_en_footer" id="mostrar_footer_editar" type="checkbox">
                                    <label class="form-check-label" for="mostrar_footer_editar">Mostrar en footer</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">CERRAR</button>
                    <button type="submit" class="btn btn-dark">MODIFICAR</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Eliminar Dirección -->
<div class="modal fade" id="modalEliminarDireccion" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <p class="mb-0">Eliminar Dirección</p>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="" id="eliminarDireccion">
                <div class="modal-body">
                    <div class="col-12">
                        <input type="hidden" id="id_direccion_eliminar" name="id" class="form-control">
                        <p class="mb-0 text-danger">¿Desea eliminar esta dirección?</p>
                        <p class="mb-0">Esta acción no se puede revertir</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-danger"><i class="fa-solid fa-trash-can" style="margin-right: 7px;"></i> Eliminar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="{{ asset('js/jquery.js') }}"></script>
<script>
    // Agregar dirección
    $('#agregarDireccion').submit(function(e){
        e.preventDefault();
        
        var formData = new FormData(this);
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('activo', $('#activo_agregar').is(':checked') ? 1 : 0);
        formData.append('mostrar_en_footer', $('#mostrar_footer_agregar').is(':checked') ? 1 : 0);
        
        $.ajax({
            url: "{{ route('back.agregarDireccion') }}",
            type: "POST",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
                $('#agregarDireccion')[0].reset();
                $('#modalAgregarDireccion').modal('hide');
                buscarTablaDirecciones();
            }
        })
    })
    
    // Editar dirección
    $('#editarDireccion').submit(function(e){
        e.preventDefault();
        
        var formData = new FormData(this);
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('activo', $('#activo_editar').is(':checked') ? 1 : 0);
        formData.append('mostrar_en_footer', $('#mostrar_footer_editar').is(':checked') ? 1 : 0);
        
        $.ajax({
            url: "{{ route('back.editarDireccion') }}",
            type: "POST",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
                $('#editarDireccion')[0].reset();
                $('#modalEditarDireccion').modal('hide');
                buscarTablaDirecciones();
            }
        })
    })
    
    // Eliminar dirección
    $('#eliminarDireccion').submit(function(e){
        e.preventDefault();
        
        var formData = new FormData(this);
        formData.append('_token', '{{ csrf_token() }}');
        
        $.ajax({
            url: "{{ route('back.eliminarDireccion') }}",
            type: "POST",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
                $('#eliminarDireccion')[0].reset();
                $('#modalEliminarDireccion').modal('hide');
                buscarTablaDirecciones();
            }
        })
    })
    
    // Enviar para editar
    function enviarDireccionEditar(id) {
        $.ajax({
            type: "GET",
            data: { id: id },
            url: "{{ route('back.enviarDireccionEditar') }}",
            success: function(data) {
                $('#id_direccion_editar').val(data.direccion.direccion_id);
                $('#titulo_editar').val(data.direccion.titulo);
                $('#direccion_editar').val(data.direccion.direccion);
                $('#telefono_editar').val(data.direccion.telefono);
                $('#observacion_editar').val(data.direccion.observacion);
                $('#activo_editar').prop('checked', Boolean(Number(data.direccion.activo)));
                $('#mostrar_footer_editar').prop('checked', Boolean(Number(data.direccion.mostrar_en_footer)));
            }
        })
    }
    
    // Enviar para eliminar
    function enviarDireccionEliminar(id) {
        $('#id_direccion_eliminar').val(id);
    }
    
    // Buscar tabla direcciones
    function buscarTablaDirecciones() {
        $.ajax({
            type: "GET",
            url: "{{ route('back.buscarTablaDirecciones') }}",
            success: function(data) {
                $('#tablaDirecciones').empty().html(data);
                inicializarSortable();
            }
        })
    }
    
    // Inicializar sortable
    function inicializarSortable() {
        $("#sortable_direcciones").sortable({
            items: "tr",
            cursor: 'move',
            opacity: 0.6,
            update: function() {
                guardarOrdenDirecciones();
            }
        });
    }
    
    // Guardar orden
    function guardarOrdenDirecciones() {
        let orden = [];
        
        $('#sortable_direcciones tr').each(function(index, element) {
            orden.push({
                id: $(this).data('id'),
                position: index + 1
            });
        });
        
        $.ajax({
            url: "{{ route('back.ordenarDirecciones') }}",
            method: 'POST',
            data: {
                order: orden,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                buscarTablaDirecciones();
            }
        });
    }
    
    // Inicializar al cargar la página
    $(document).ready(function() {
        inicializarSortable();
    });
</script>

@endsection