@extends('admin.layouts.app')

@push('css')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.nav-tabs .nav-link {
    border-radius: 0.25rem 0.25rem 0 0;
    border: 1px solid transparent;
    background: none;
    color: #6c757d;
}

.nav-tabs .nav-link.active {
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    color: #495057;
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
    isolation: isolate;
}

.tab-content {
    border: 1px solid #dee2e6;
    border-top: 0;
    border-radius: 0 0 0.25rem 0.25rem;
    padding: 1.5rem;
    background: #fff;
}

.tab-icon {
    margin-right: 0.5rem;
}

.form-section-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

.help-text {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.form-actions {
    border-top: 1px solid #dee2e6;
    padding-top: 1.5rem;
    margin-top: 2rem;
    background: #f8f9fa;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
}

.copyright-card {
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 1.5rem;
    background: #f8f9fa;
    margin-bottom: 1.5rem;
}

.copyright-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    margin-right: 1rem;
    background: linear-gradient(135deg, #6f42c1 0%, #563d7c 100%);
}

.legal-badge {
    background: #e3f2fd;
    color: #1565c0;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.copyright-preview {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-top: 1rem;
    text-align: center;
    color: #6c757d;
    font-size: 0.875rem;
}
</style>
@endpush

@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 Copyright</h4>
            <div class="page-title-right">
                <a href="{{ route('admin.dashboard') }}" class="btn btn-primary">Volver</a>
            </div>
        </div>
    </div>
</div>
        <form action="{{ route('settings.copyright.update') }}" method="POST">                
            @csrf
            @method('PUT')

            <div class="card">
                <div class="card-body p-0">
                    
                    <!-- Navigation Tabs -->
                    <ul class="nav nav-tabs" id="copyrightTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="general-copyright-tab" data-bs-toggle="tab" data-bs-target="#general-copyright" 
                                    type="button" role="tab" aria-controls="general-copyright" aria-selected="true">
                                <i class="ri-file-copy-lineright tab-icon"></i>
                                Configuración General
                            </button>
                        </li>
                        <!-- Tabs preparados para futuras expansiones -->
                        <!--
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="legal-terms-tab" data-bs-toggle="tab" data-bs-target="#legal-terms" 
                                    type="button" role="tab" aria-controls="legal-terms" aria-selected="false">
                                <i class="ri-scales-3-line tab-icon"></i>
                                Términos Legales
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="privacy-policy-tab" data-bs-toggle="tab" data-bs-target="#privacy-policy" 
                                    type="button" role="tab" aria-controls="privacy-policy" aria-selected="false">
                                <i class="ri-shield-user-line tab-icon"></i>
                                Política de Privacidad
                            </button>
                        </li>
                        -->
                    </ul>

                    <!-- Tab Content -->
                    <div class="tab-content" id="copyrightTabContent">
                        
                        <!-- Configuración General de Copyright -->
                        <div class="tab-pane fade show active" id="general-copyright" role="tabpanel" aria-labelledby="general-copyright-tab">
                            <div class="copyright-card">
                                <div class="d-flex align-items-center mb-4">
                                    <div class="copyright-icon">
                                        <i class="ri-file-copy-lineright"></i>
                                    </div>
                                    <div>
                                        <h5 class="mb-1">Derechos de Autor y Copyright</h5>
                                        <p class="text-muted mb-0">Configura la información legal de tu sitio web</p>
                                        <span class="legal-badge mt-2 d-inline-block">
                                            <i class="ri-scales-3-line"></i> Información Legal
                                        </span>
                                    </div>
                                </div>

                                <h6 class="form-section-title">
                                    <i class="ri-award-line text-primary"></i>
                                    Configuración de Copyright
                                </h6>
                                
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="mb-3">
                                            <label for="copyright" class="form-label">Texto de Copyright <span class="text-danger">*</span></label>
                                            <input type="text" name="copyright" id="copyright" class="form-control @error('copyright') is-invalid @enderror"
                                                   value="{{ old('copyright', $settings->copyright ?? '') }}"
                                                   placeholder="© 2025 Tu Empresa. Todos los derechos reservados.">
                                            <small class="help-text">
                                                <i class="ri-information-line"></i>
                                                Texto que aparecerá en el pie de página de tu sitio web
                                            </small>
                                            @error('copyright')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="copyright_link" class="form-label">
                                                Link del Copyright
                                                <span class="badge bg-secondary" style="font-size: 0.7rem; font-weight: normal;">Opcional</span>
                                            </label>
                                            <input type="url" name="copyright_link" id="copyright_link" class="form-control @error('copyright_link') is-invalid @enderror"
                                                   value="{{ old('copyright_link', $settings->copyright_link ?? '') }}"
                                                   placeholder="https://www.ejemplo.com">
                                            <small class="help-text">
                                                <i class="ri-links-line"></i>
                                                El texto del copyright será clickeable si agregas un link
                                            </small>
                                            @error('copyright_link')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <h6 class="form-section-title mt-4">
                                    <i class="ri-robot-line text-success"></i>
                                    Asistente Virtual (Opcional)
                                </h6>

                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="virtual_assistant_text" class="form-label">
                                                Texto del Asistente Virtual
                                                <span class="badge bg-secondary" style="font-size: 0.7rem; font-weight: normal;">Opcional</span>
                                            </label>
                                            <input type="text" name="virtual_assistant_text" id="virtual_assistant_text" class="form-control @error('virtual_assistant_text') is-invalid @enderror"
                                                   value="{{ old('virtual_assistant_text', $settings->virtual_assistant_text ?? '') }}"
                                                   placeholder="Ej: Nuevo Asistente Virtual La Viruta">
                                            <small class="help-text">
                                                <i class="ri-information-line"></i>
                                                Texto que se mostrará junto al número de teléfono
                                            </small>
                                            @error('virtual_assistant_text')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="virtual_assistant_phone" class="form-label">
                                                Número de Teléfono
                                                <span class="badge bg-secondary" style="font-size: 0.7rem; font-weight: normal;">Opcional</span>
                                            </label>
                                            <input type="text" name="virtual_assistant_phone" id="virtual_assistant_phone" class="form-control @error('virtual_assistant_phone') is-invalid @enderror"
                                                   value="{{ old('virtual_assistant_phone', $settings->virtual_assistant_phone ?? '') }}"
                                                   placeholder="Ej: +54 9 11 6829 3425">
                                            <small class="help-text">
                                                <i class="ri-phone-line"></i>
                                                Número que se mostrará en el footer
                                            </small>
                                            @error('virtual_assistant_phone')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="virtual_assistant_link" class="form-label">
                                                Link del Asistente Virtual
                                                <span class="badge bg-secondary" style="font-size: 0.7rem; font-weight: normal;">Opcional</span>
                                            </label>
                                            <input type="url" name="virtual_assistant_link" id="virtual_assistant_link" class="form-control @error('virtual_assistant_link') is-invalid @enderror"
                                                   value="{{ old('virtual_assistant_link', $settings->virtual_assistant_link ?? '') }}"
                                                   placeholder="https://wa.me/message/...">
                                            <small class="help-text">
                                                <i class="ri-links-line"></i>
                                                Link directo al chat (tiene prioridad sobre número para llamada)
                                            </small>
                                            @error('virtual_assistant_link')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="alert alert-info mt-3">
                                    <i class="ri-lightbulb-line"></i>
                                    <strong>Nota:</strong> El Asistente Virtual se mostrará en el footer si están completados texto y teléfono. Si además agregas el Link del Asistente Virtual, el teléfono será clickeable y llevará directamente al chat.
                                </div>

                                <!-- Vista previa del copyright -->
                                <div class="copyright-preview">
                                    <h6 class="mb-3">
                                        <i class="ri-eye-line text-info"></i>
                                        Vista Previa
                                    </h6>
                                    <div id="copyright-preview-text">
                                        {{ $settings->copyright ?? '© 2025 Tu Empresa. Todos los derechos reservados.' }}
                                    </div>
                                    <div id="assistant-preview-text" class="mt-2" style="display: none;">
                                        <!-- Se llenará con JavaScript -->
                                    </div>
                                </div>
                                
                                <div class="alert alert-info mt-3">
                                    <i class="ri-lightbulb-line"></i>
                                    <strong>Ejemplos de texto de copyright:</strong>
                                    <ul class="mb-0 mt-2">
                                        <li><span style="color: white; font-family: monospace; font-weight: 500;">© {{ date('Y') }} {{ getSiteName() }}. Todos los derechos reservados.</span></li>
                                        <li><span style="color: white; font-family: monospace; font-weight: 500;">Copyright © {{ date('Y') }} Mi Tienda Online - Todos los derechos reservados</span></li>
                                        <li><span style="color: white; font-family: monospace; font-weight: 500;">© {{ date('Y') }} Tu Empresa S.A. - Prohibida la reproducción total o parcial</span></li>
                                        <li><span style="color: white; font-family: monospace; font-weight: 500;">{{ date('Y') }} © Mi Marca - Todos los derechos reservados bajo licencia</span></li>
                                    </ul>
                                </div>
                                
                                <div class="alert alert-warning mt-3">
                                    <i class="ri-error-warning-line"></i>
                                    <strong>Información Legal:</strong>
                                    <ul class="mb-0 mt-2">
                                        <li>El símbolo © indica que el contenido está protegido por derechos de autor</li>
                                        <li>Incluye el año actual para mostrar que el contenido está actualizado</li>
                                        <li>Asegúrate de que el nombre coincida con tu entidad legal registrada</li>
                                        <li>Considera agregar enlaces a términos y condiciones si los tienes</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- Form Actions -->
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="ri-save-line me-2"></i>Actualizar Configuración de Copyright
                        </button>
                        <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary btn-lg ms-3">
                            <i class="ri-close-line me-2"></i>Cancelar
                        </a>
                    </div>

                </div>
            </div>

        </form>


@endsection

@section('customJs')
<script>
$(document).ready(function() {
    // Actualizar vista previa en tiempo real del copyright
    function updateCopyrightPreview() {
        const text = $('#copyright').val() || '© {{ date('Y') }} Tu Empresa. Todos los derechos reservados.';
        const link = $('#copyright_link').val();
        const preview = $('#copyright-preview-text');

        if (link) {
            preview.html(`<a href="${link}" style="color: #6c757d; text-decoration: underline;">${text}</a>`);
        } else {
            preview.text(text);
        }
    }

    // Eventos para actualizar vista previa del copyright
    $('#copyright, #copyright_link').on('input', updateCopyrightPreview);

    // Inicializar vista previa del copyright
    updateCopyrightPreview();

    // Actualizar vista previa del asistente virtual
    function updateAssistantPreview() {
        const text = $('#virtual_assistant_text').val();
        const phone = $('#virtual_assistant_phone').val();
        const link = $('#virtual_assistant_link').val();
        const preview = $('#assistant-preview-text');

        if (text && phone) {
            // Si hay link, usarlo. Si no, usar tel:
            const href = link ? link : `tel:${phone.replace(/\s/g, '')}`;

            preview.html(`<strong>${text} - <a href="${href}" style="color: #007bff;">${phone}</a></strong>`);
            preview.show();
        } else {
            preview.hide();
        }
    }

    // Eventos para actualizar vista previa
    $('#virtual_assistant_text, #virtual_assistant_phone, #virtual_assistant_link').on('input', updateAssistantPreview);

    // Inicializar vista previa
    updateAssistantPreview();
});
</script>
@endsection