@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 Clientes</h4>
            <div class="page-title-right">
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addClientModal">
                <i class="ri-add-line"></i> Agregar Cliente
                </button>
                <a href="{{ route('admin.multi-client.index') }}" class="btn btn-secondary">
                <i class="ri-arrow-left-line"></i> Volver a Descarga
                </a>
            </div>
        </div>
    </div>
</div>
        
        @if(session('success'))
            <div class="alert alert-success alert-dismissible">
                <button type="button" class="btn-close" data-bs-dismiss="alert">&times;</button>
                {{ session('success') }}
            </div>
        @endif

        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ri-group-line"></i> Clientes Configurados
                </h3>
            </div>
            <div class="card-body">
                @if($clients->isEmpty())
                    <div class="alert alert-info">
                        <i class="ri-information-line"></i> No hay clientes configurados. 
                        <a href="#" data-bs-toggle="modal" data-bs-target="#addClientModal">Agregar el primero</a>
                    </div>
                @else
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>Cliente</th>
                                    <th>Código</th>
                                    <th>Sitio Web</th>
                                    <th>Path Imágenes</th>
                                    <th>Tamaños</th>
                                    <th>Estado</th>
                                    <th width="150">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($clients as $client)
                                <tr>
                                    <td>
                                        <strong>{{ $client->client_name }}</strong>
                                    </td>
                                    <td>
                                        <code>{{ $client->client_code }}</code>
                                    </td>
                                    <td>
                                        <a href="{{ $client->site_url }}" target="_blank">
                                            {{ $client->site_url }}
                                            <i class="ri-external-link-line"></i>
                                        </a>
                                    </td>
                                    <td>
                                        <code>{{ $client->image_base_path }}</code>
                                    </td>
                                    <td>
                                        @foreach($client->image_sizes ?? [] as $size)
                                            <span class="badge bg-info">{{ $size }}</span>
                                        @endforeach
                                    </td>
                                    <td>
                                        @if($client->is_active)
                                            <span class="badge bg-success">Activo</span>
                                        @else
                                            <span class="badge bg-danger">Inactivo</span>
                                        @endif
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-info" 
                                                onclick="editClient({{ $client->id }})"
                                                data-client='@json($client)'>
                                            <i class="ri-pencil-line"></i>
                                        </button>
                                        <button class="btn btn-sm btn-warning"
                                                onclick="testClient('{{ $client->client_code }}')">
                                            <i class="ri-test-tube-line"></i>
                                        </button>
                                        @if($client->client_code !== 'hiermisa')
                                        <form action="{{ route('admin.multi-client.delete', $client->id) }}" 
                                              method="POST" 
                                              style="display: inline;"
                                              onsubmit="return confirm('¿Eliminar esta configuración?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-danger">
                                                <i class="ri-delete-bin-line"></i>
                                            </button>
                                        </form>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>

        <!-- Configuración Avanzada -->
        <div class="card mt-3">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ri-information-line"></i> Información de Configuración
                </h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h5>Patrones de Nombre de Imagen</h5>
                        <ul>
                            <li><code>hash</code> - Nombres con hash MD5 (ej: e42b1fe78c415cd00e5243f5a025606f.jpg)</li>
                            <li><code>code</code> - Código del producto (ej: PROD001.jpg)</li>
                            <li><code>id</code> - ID del producto (ej: 12345.jpg)</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h5>Tamaños Comunes</h5>
                        <ul>
                            <li><code>thumb</code> - Miniatura (típicamente 150x150)</li>
                            <li><code>small</code> - Pequeña (típicamente 300x300)</li>
                            <li><code>medium</code> - Mediana (típicamente 600x600)</li>
                            <li><code>large</code> - Grande (típicamente 1200x1200)</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>


<!-- Modal Agregar/Editar Cliente -->
<div class="modal fade" id="addClientModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <form action="{{ route('admin.multi-client.save') }}" method="POST" id="clientForm">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="ri-user-add-line"></i> <span id="modalTitle">Agregar Cliente</span>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label>Código del Cliente <span class="text-danger">*</span></label>
                                <input type="text" name="client_code" class="form-control" 
                                       placeholder="ej: hiermisa, laviruta" required>
                                <small class="text-muted">Sin espacios, minúsculas</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label>Nombre del Cliente <span class="text-danger">*</span></label>
                                <input type="text" name="client_name" class="form-control" 
                                       placeholder="ej: Hierros Misa" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label>URL del Sitio <span class="text-danger">*</span></label>
                                <input type="url" name="site_url" class="form-control" 
                                       placeholder="https://ejemplo.com" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-8">
                            <div class="mb-3">
                                <label>Path de Imágenes <span class="text-danger">*</span></label>
                                <input type="text" name="image_base_path" class="form-control" 
                                       placeholder="resources/img/products" required>
                                <small class="text-muted">Sin / al inicio ni al final</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label>Extensión <span class="text-danger">*</span></label>
                                <input type="text" name="image_extension" class="form-control" 
                                       value="jpg" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label>Tamaños Disponibles <span class="text-danger">*</span></label>
                                <input type="text" name="image_sizes" class="form-control" 
                                       placeholder="small,medium,large,thumb" 
                                       value="small,medium,large,thumb" required>
                                <small class="text-muted">Separados por comas</small>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label>Tabla de Productos</label>
                                <input type="text" name="db_products_table" class="form-control" 
                                       value="products">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label>Campo de Código</label>
                                <input type="text" name="db_product_code_field" class="form-control" 
                                       value="code">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label>Patrón de Nombres</label>
                                <select name="image_naming_pattern" class="form-select">
                                    <option value="hash">Hash MD5</option>
                                    <option value="code">Código Producto</option>
                                    <option value="id">ID Producto</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label>Estado</label>
                                <select name="is_active" class="form-select">
                                    <option value="1">Activo</option>
                                    <option value="0">Inactivo</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label>Campos de Imagen (JSON)</label>
                                <textarea name="db_image_fields" class="form-control" rows="2">{"main":"img","alt1":"img2","alt2":"img3","alt3":"img4","alt4":"img5"}</textarea>
                                <small class="text-muted">Mapeo de campos en formato JSON</small>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label>Configuración Personalizada (JSON)</label>
                                <textarea name="custom_config" class="form-control" rows="3">{}</textarea>
                                <small class="text-muted">Configuración adicional específica del cliente</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="ri-save-line"></i> Guardar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('customJs')
<script>
function editClient(id) {
    var btn = event.target.closest('button');
    var client = JSON.parse(btn.getAttribute('data-client'));
    
    $('#modalTitle').text('Editar Cliente');
    $('#clientForm input[name="client_code"]').val(client.client_code);
    $('#clientForm input[name="client_name"]').val(client.client_name);
    $('#clientForm input[name="site_url"]').val(client.site_url);
    $('#clientForm input[name="image_base_path"]').val(client.image_base_path);
    $('#clientForm input[name="image_extension"]').val(client.image_extension);
    $('#clientForm input[name="image_sizes"]').val(client.image_sizes ? client.image_sizes.join(',') : '');
    $('#clientForm input[name="db_products_table"]').val(client.db_products_table);
    $('#clientForm input[name="db_product_code_field"]').val(client.db_product_code_field);
    $('#clientForm select[name="image_naming_pattern"]').val(client.image_naming_pattern);
    $('#clientForm select[name="is_active"]').val(client.is_active ? '1' : '0');
    $('#clientForm textarea[name="db_image_fields"]').val(JSON.stringify(client.db_image_fields || {}));
    $('#clientForm textarea[name="custom_config"]').val(JSON.stringify(client.custom_config || {}));
    
    $('#addClientModal').modal('show');
}

function testClient(clientCode) {
    Swal.fire({
        title: 'Probando configuración...',
        text: 'Verificando acceso a imágenes del cliente',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });
    
    // Aquí podrías hacer una llamada AJAX para probar la configuración
    setTimeout(() => {
        Swal.close();
        Swal.fire('Prueba Completada', 'La configuración parece estar correcta', 'success');
    }, 2000);
}

// Limpiar formulario cuando se abre para nuevo cliente
$('#addClientModal').on('hidden.bs.modal', function () {
    $('#modalTitle').text('Agregar Cliente');
    $('#clientForm')[0].reset();
});
</script>
@endsection