@extends('layouts.admin')

@section('title', 'Configuración de Empresa')
@section('page-title', 'Configuración de Empresa')

@push('styles')
<style>
    /* Estilos personalizados para los tabs */
    .nav-tabs .nav-link {
        color: #495057 !important;
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        border-bottom: none;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .nav-tabs .nav-link:hover {
        color: #212529 !important;
        background-color: #e9ecef;
        border-color: #dee2e6 #dee2e6 #fff;
    }
    
    .nav-tabs .nav-link.active {
        color: #212529 !important;
        background-color: #fff;
        border-color: #dee2e6 #dee2e6 #fff;
        font-weight: 600;
    }
    
    .nav-tabs .nav-link i {
        color: #6c757d;
    }
    
    .nav-tabs .nav-link.active i {
        color: #495057;
    }
    
    .nav-tabs .nav-link:hover i {
        color: #495057;
    }
    
    /* Mejorar el contraste del contenido de los tabs */
    .tab-content {
        background-color: #fff;
        border: 1px solid #dee2e6;
        border-top: none;
        padding: 1.5rem;
    }
    
    .form-label {
        color: #212529;
        font-weight: 500;
    }
    
    .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
    }
</style>
@endpush

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card mb-4">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" id="empresaTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab" aria-controls="general" aria-selected="true">
                            <i class="fas fa-building me-2"></i>General
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="moneda-tab" data-bs-toggle="tab" data-bs-target="#moneda" type="button" role="tab" aria-controls="moneda" aria-selected="false">
                            <i class="fas fa-dollar-sign me-2"></i>Moneda
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="notificaciones-tab" data-bs-toggle="tab" data-bs-target="#notificaciones" type="button" role="tab" aria-controls="notificaciones" aria-selected="false">
                            <i class="fas fa-bell me-2"></i>Notificaciones
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="maps-tab" data-bs-toggle="tab" data-bs-target="#maps" type="button" role="tab" aria-controls="maps" aria-selected="false">
                            <i class="fas fa-map-marker-alt me-2"></i>Google Maps
                        </button>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <div class="tab-content" id="empresaTabsContent">
                    <!-- Configuración General -->
                    <div class="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
                        <form action="{{ route('admin.empresa.update-general') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="nombre_empresa" class="form-label">Nombre de la Empresa</label>
                                        <input type="text" class="form-control @error('nombre_empresa') is-invalid @enderror" 
                                               id="nombre_empresa" name="nombre_empresa" 
                                               value="{{ old('nombre_empresa', $empresa->nombre_empresa ?? '') }}" required>
                                        @error('nombre_empresa')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="email_empresa" class="form-label">Email de Contacto</label>
                                        <input type="email" class="form-control @error('email_empresa') is-invalid @enderror" 
                                               id="email_empresa" name="email_empresa" 
                                               value="{{ old('email_empresa', $empresa->email_empresa ?? '') }}">
                                        @error('email_empresa')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="telefono_empresa" class="form-label">Teléfono</label>
                                        <input type="text" class="form-control @error('telefono_empresa') is-invalid @enderror" 
                                               id="telefono_empresa" name="telefono_empresa" 
                                               value="{{ old('telefono_empresa', $empresa->telefono_empresa ?? '') }}">
                                        @error('telefono_empresa')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="direccion_empresa" class="form-label">Dirección</label>
                                        <input type="text" class="form-control @error('direccion_empresa') is-invalid @enderror" 
                                               id="direccion_empresa" name="direccion_empresa" 
                                               value="{{ old('direccion_empresa', $empresa->direccion_empresa ?? '') }}">
                                        @error('direccion_empresa')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="descripcion_empresa" class="form-label">Descripción</label>
                                <textarea class="form-control @error('descripcion_empresa') is-invalid @enderror" 
                                          id="descripcion_empresa" name="descripcion_empresa" rows="3">{{ old('descripcion_empresa', $empresa->descripcion_empresa ?? '') }}</textarea>
                                @error('descripcion_empresa')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="logo_empresa" class="form-label">Logo de la Empresa</label>
                                <input type="file" class="form-control @error('logo_empresa') is-invalid @enderror" 
                                       id="logo_empresa" name="logo_empresa" accept="image/*">
                                @if(isset($empresa->logo_empresa) && $empresa->logo_empresa)
                                    <div class="mt-2">
                                        <img src="{{ asset('storage/' . $empresa->logo_empresa) }}" alt="Logo actual" class="img-thumbnail" style="max-height: 100px;">
                                        <small class="text-muted d-block">Logo actual</small>
                                    </div>
                                @endif
                                @error('logo_empresa')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">Formatos permitidos: JPG, PNG, GIF. Tamaño máximo: 2MB</small>
                            </div>

                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>Guardar Configuración General
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- Configuración de Moneda -->
                    <div class="tab-pane fade" id="moneda" role="tabpanel" aria-labelledby="moneda-tab">
                        <form action="{{ route('admin.empresa.update-moneda') }}" method="POST">
                            @csrf
                            @method('PUT')
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="simbolo_moneda" class="form-label">Símbolo de Moneda</label>
                                        <input type="text" class="form-control @error('simbolo_moneda') is-invalid @enderror" 
                                               id="simbolo_moneda" name="simbolo_moneda" 
                                               value="{{ old('simbolo_moneda', $empresa->simbolo_moneda ?? '$') }}" 
                                               maxlength="5" required>
                                        @error('simbolo_moneda')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="form-text text-muted">Este símbolo se mostrará en todo el sistema para los precios</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Vista Previa</label>
                                        <div class="border rounded p-3 bg-light">
                                            <h5 class="mb-2">Ejemplo de precios:</h5>
                                            <p class="mb-1"><span id="preview-symbol">{{ $empresa->simbolo_moneda ?? '$' }}</span>50.00 - Cancha de Fútbol</p>
                                            <p class="mb-1"><span id="preview-symbol-2">{{ $empresa->simbolo_moneda ?? '$' }}</span>30.00 - Cancha de Básquet</p>
                                            <p class="mb-0"><span id="preview-symbol-3">{{ $empresa->simbolo_moneda ?? '$' }}</span>25.00 - Cancha de Tenis</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>Guardar Configuración de Moneda
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- Configuración de Notificaciones -->
                    <div class="tab-pane fade" id="notificaciones" role="tabpanel" aria-labelledby="notificaciones-tab">
                        <form action="{{ route('admin.empresa.update-notificaciones') }}" method="POST">
                            @csrf
                            @method('PUT')
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="card-title mb-0">
                                                <i class="fas fa-envelope me-2"></i>Notificaciones por Email
                                            </h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="notificaciones_email" 
                                                       name="notificaciones_email" value="1"
                                                       {{ old('notificaciones_email', $empresa->notificaciones_email ?? false) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="notificaciones_email">
                                                    Habilitar notificaciones por email
                                                </label>
                                            </div>
                                            <small class="form-text text-muted">
                                                Envía notificaciones automáticas por correo electrónico para reservas, cancelaciones y recordatorios.
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="card-title mb-0">
                                                <i class="fab fa-google me-2"></i>Notificaciones Firebase
                                            </h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="notificaciones_firebase" 
                                                       name="notificaciones_firebase" value="1"
                                                       {{ old('notificaciones_firebase', $empresa->notificaciones_firebase ?? false) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="notificaciones_firebase">
                                                    Habilitar notificaciones push (Firebase)
                                                </label>
                                            </div>
                                            <small class="form-text text-muted">
                                                Envía notificaciones push en tiempo real a dispositivos móviles y navegadores web.
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="alert alert-info mt-3">
                                <i class="fas fa-info-circle me-2"></i>
                                <strong>Información:</strong> Las notificaciones ayudan a mantener informados a los usuarios sobre el estado de sus reservas y eventos importantes.
                            </div>

                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>Guardar Configuración de Notificaciones
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- Configuración de Google Maps -->
                    <div class="tab-pane fade" id="maps" role="tabpanel" aria-labelledby="maps-tab">
                        <form action="{{ route('admin.empresa.update-google-maps') }}" method="POST">
                            @csrf
                            @method('PUT')
                            
                            <div class="mb-3">
                                <label for="google_maps_api_key" class="form-label">API Key de Google Maps</label>
                                <input type="text" class="form-control @error('google_maps_api_key') is-invalid @enderror" 
                                       id="google_maps_api_key" name="google_maps_api_key" 
                                       value="{{ old('google_maps_api_key', $empresa->google_maps_api_key ?? '') }}"
                                       placeholder="AIzaSyC...">
                                @error('google_maps_api_key')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">
                                    Obtén tu API Key desde la <a href="https://console.cloud.google.com/apis/credentials" target="_blank">Google Cloud Console</a>
                                </small>
                            </div>

                            <div class="alert alert-warning">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                <strong>Importante:</strong> 
                                <ul class="mb-0 mt-2">
                                    <li>Asegúrate de habilitar la API de Maps JavaScript en tu proyecto de Google Cloud</li>
                                    <li>Configura las restricciones de dominio para mayor seguridad</li>
                                    <li>Revisa los límites de uso y facturación en tu cuenta de Google Cloud</li>
                                </ul>
                            </div>

                            @if(isset($empresa->google_maps_api_key) && $empresa->google_maps_api_key)
                                <div class="alert alert-success">
                                    <i class="fas fa-check-circle me-2"></i>
                                    <strong>Estado:</strong> API Key configurada correctamente. Los mapas están habilitados en el sistema.
                                </div>
                            @else
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle me-2"></i>
                                    <strong>Estado:</strong> No hay API Key configurada. Los mapas no estarán disponibles hasta que configures una clave válida.
                                </div>
                            @endif

                            <div class="card mt-3">
                                <div class="card-header">
                                    <h6 class="card-title mb-0">¿Cómo obtener una API Key de Google Maps?</h6>
                                </div>
                                <div class="card-body">
                                    <ol class="mb-0">
                                        <li>Ve a la <a href="https://console.cloud.google.com/" target="_blank">Google Cloud Console</a></li>
                                        <li>Crea un nuevo proyecto o selecciona uno existente</li>
                                        <li>Habilita la API de Maps JavaScript</li>
                                        <li>Ve a "Credenciales" y crea una nueva API Key</li>
                                        <li>Configura las restricciones de dominio para mayor seguridad</li>
                                        <li>Copia la API Key y pégala en el campo de arriba</li>
                                    </ol>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end mt-3">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>Guardar Configuración de Google Maps
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Preview del símbolo de moneda en tiempo real
    const simboloInput = document.getElementById('simbolo_moneda');
    const previewElements = [
        document.getElementById('preview-symbol'),
        document.getElementById('preview-symbol-2'),
        document.getElementById('preview-symbol-3')
    ];

    if (simboloInput && previewElements[0]) {
        simboloInput.addEventListener('input', function() {
            const newSymbol = this.value || '$';
            previewElements.forEach(element => {
                if (element) element.textContent = newSymbol;
            });
        });
    }

    // Mostrar/ocultar tabs activos
    const tabTriggerList = [].slice.call(document.querySelectorAll('#empresaTabs button'));
    tabTriggerList.forEach(function (tabTriggerEl) {
        const tabTrigger = new bootstrap.Tab(tabTriggerEl);
        
        tabTriggerEl.addEventListener('click', function (event) {
            event.preventDefault();
            tabTrigger.show();
        });
    });
});
</script>
@endpush
@endsection