@extends('admin.layouts.app')

@section('content')

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Configuración de URLs de Imágenes</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Tablero</a></li>
                    <li class="breadcrumb-item">Importar</li>
                    <li class="breadcrumb-item active">Configuración de Imágenes</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0">URLs Base para Descarga de Imágenes</h4>
            </div>
                        <div class="card-body">
                            <div class="alert alert-info">
                                <i class="ri-information-line"></i> Configure las URLs base para descargar imágenes. 
                                Estas URLs se utilizan para diferentes clientes sin necesidad de modificar el código.
                            </div>

                            <form id="imageConfigForm">
                                @csrf
                                <div class="mb-3">
                                    <label for="images_base_url">URL Base de Imágenes de Productos</label>
                                    <input type="url" class="form-control" id="images_base_url" 
                                           placeholder="https://ejemplo.com/resources/img/products/medium/"
                                           value="{{ $config->images_base_url ?? '' }}">
                                    <small class="text-muted">URL donde se encuentran las imágenes de productos</small>
                                </div>

                                <div class="mb-3">
                                    <label for="categories_image_url">URL Base de Imágenes de Categorías</label>
                                    <input type="url" class="form-control" id="categories_image_url" 
                                           placeholder="https://ejemplo.com/resources/img/categories/thumbnail/"
                                           value="{{ $config->categories_image_url ?? '' }}">
                                    <small class="text-muted">URL donde se encuentran las imágenes de categorías</small>
                                </div>

                                <div class="mb-3">
                                    <label for="subcategories_image_url">URL Base de Imágenes de Subcategorías</label>
                                    <input type="url" class="form-control" id="subcategories_image_url" 
                                           placeholder="https://ejemplo.com/resources/img/categories/thumbnail/"
                                           value="{{ $config->subcategories_image_url ?? '' }}">
                                    <small class="text-muted">URL donde se encuentran las imágenes de subcategorías</small>
                                </div>

                                <div class="mb-3">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="ri-save-line"></i> Guardar Configuración
                                    </button>
                                    <button type="button" class="btn btn-info" onclick="testUrls()">
                                        <i class="ri-check-line"></i> Probar URLs
                                    </button>
                                </div>
                            </form>

                            <div id="testResults" class="mt-3" style="display:none;">
                                <h5>Resultados de Prueba:</h5>
                                <div id="testContent"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$('#imageConfigForm').on('submit', function(e) {
    e.preventDefault();
    
    const data = {
        images_base_url: $('#images_base_url').val(),
        categories_image_url: $('#categories_image_url').val(),
        subcategories_image_url: $('#subcategories_image_url').val(),
        _token: $('meta[name="csrf-token"]').attr('content')
    };
    
    $.post('{{ route("admin.import.images.config.save") }}', data)
        .done(function(response) {
            if (response.success) {
                Swal.fire('Éxito', 'Configuración guardada correctamente', 'success');
            } else {
                Swal.fire('Error', response.message || 'Error al guardar', 'error');
            }
        })
        .fail(function() {
            Swal.fire('Error', 'Error al guardar la configuración', 'error');
        });
});

function testUrls() {
    const urls = {
        products: $('#images_base_url').val(),
        categories: $('#categories_image_url').val(),
        subcategories: $('#subcategories_image_url').val()
    };
    
    $('#testResults').show();
    $('#testContent').html('<div class="spinner-border text-primary" role="status"></div> Probando URLs...');
    
    $.post('{{ route("admin.import.images.config.test") }}', {
        ...urls,
        _token: $('meta[name="csrf-token"]').attr('content')
    })
    .done(function(response) {
        let html = '<ul class="list-group">';
        for (let [key, result] of Object.entries(response.results)) {
            const icon = result.success ? '✅' : '❌';
            const status = result.success ? 'success' : 'danger';
            html += `<li class="list-group-item list-group-item-${status}">
                        ${icon} ${key}: ${result.message}
                     </li>`;
        }
        html += '</ul>';
        $('#testContent').html(html);
    })
    .fail(function() {
        $('#testContent').html('<div class="alert alert-danger">Error al probar las URLs</div>');
    });
}
</script>
@endpush