@extends('admin.layouts.app')

@push('css')
<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;
}

.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;
}

.hours-table {
    background: #f8f9fa;
    border-radius: 0.25rem;
    padding: 1rem;
}

.hours-table table {
    width: 100%;
    margin-bottom: 0;
}

.hours-table th {
    background: #e9ecef;
    padding: 0.5rem;
    font-weight: 600;
}

.hours-table td {
    padding: 0.5rem;
    background: #fff;
}

.time-input {
    width: 100px;
}
.split-columns {
    transition: all 0.3s ease;
}
.split-columns.hidden-columns {
    display: none;
}

.ai-generated-content {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 0.75rem;
    min-height: 40px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.ai-generated-content.long-content {
    max-height: 200px;
    overflow-y: auto;
}

.ai-seo-section {
    position: relative;
}
</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">Editar Sucursal: {{ $branch->name }}</h4>
            <div class="page-title-right">
                <a href="{{ route('admin.branches.index') }}" class="btn btn-primary">
                <i class="ri-arrow-left-line"></i> Volver
                </a>
            </div>
        </div>
    </div>
</div>
        @include('admin.message')
        
        <form action="{{ route('admin.branches.update', $branch->id) }}" method="POST" id="branchForm">
            @csrf
            @method('PUT')
            
            <div class="card">
                <div class="card-body">
                    
                    <!-- Tabs Navigation -->
                    <ul class="nav nav-tabs" id="branchTabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link {{ (!isset($activeTab) || $activeTab != 'seo') ? 'active' : '' }}" id="general-tab" data-bs-toggle="tab" href="#general" role="tab">
                                <i class="ri-information-line tab-icon"></i>Información General
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab">
                                <i class="ri-phone-line tab-icon"></i>Contacto
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="location-tab" data-bs-toggle="tab" href="#location" role="tab">
                                <i class="ri-map-pin-line-alt tab-icon"></i>Ubicación
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="hours-tab" data-bs-toggle="tab" href="#hours" role="tab">
                                <i class="ri-time-line tab-icon"></i>Horarios
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="services-tab" data-bs-toggle="tab" href="#services" role="tab">
                                <i class="ri-settings-3-line tab-icon"></i>Servicios
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="media-tab" data-bs-toggle="tab" href="#media" role="tab">
                                <i class="ri-image-line tab-icon"></i>Multimedia
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link {{ (isset($activeTab) && $activeTab == 'seo') ? 'active' : '' }}" id="seo-tab" data-bs-toggle="tab" href="#seo" role="tab">
                                <i class="ri-search-line tab-icon"></i>SEO
                                @if($branch->ai_generated_at && ($branch->ai_meta_title || $branch->ai_meta_description))
                                <span class="badge bg-success ms-1">AI</span>
                                @endif
                            </a>
                        </li>
                    </ul>

                    <!-- Tabs Content -->
                    <div class="tab-content" id="branchTabsContent">

                        <!-- Tab 1: Información General -->
                        <div class="tab-pane fade {{ (!isset($activeTab) || $activeTab != 'seo') ? 'show active' : '' }}" id="general" role="tabpanel">
                            <h5 class="form-section-title">Datos Básicos</h5>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="name" class="form-label">Nombre de la Sucursal *</label>
                                        <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror" 
                                               value="{{ old('name', $branch->name) }}" required>
                                        @error('name')
                                            <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label for="code" class="form-label">Código Interno</label>
                                        <input type="text" name="code" id="code" class="form-control @error('code') is-invalid @enderror" 
                                               value="{{ old('code', $branch->code) }}" placeholder="SUC001">
                                        <small class="help-text">Código único para identificación interna</small>
                                        @error('code')
                                            <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label for="type" class="form-label">Tipo *</label>
                                        <select name="type" id="type" class="form-select @error('type') is-invalid @enderror" required>
                                            <option value="store" {{ old('type', $branch->type) == 'store' ? 'selected' : '' }}>Tienda</option>
                                            <option value="warehouse" {{ old('type', $branch->type) == 'warehouse' ? 'selected' : '' }}>Depósito</option>
                                            <option value="office" {{ old('type', $branch->type) == 'office' ? 'selected' : '' }}>Oficina</option>
                                            <option value="pickup_point" {{ old('type', $branch->type) == 'pickup_point' ? 'selected' : '' }}>Punto de Retiro</option>
                                        </select>
                                        @error('type')
                                            <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="description" class="form-label">Descripción</label>
                                        <textarea name="description" id="description" class="form-control" rows="4">{{ old('description', $branch->description) }}</textarea>
                                        <small class="help-text">Descripción detallada de la sucursal</small>
                                    </div>
                                </div>
                            </div>
                            
                            <h5 class="form-section-title mt-4">Configuración</h5>
                            
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="custom-control custom-switch mb-3">
                                        <input type="checkbox" class="custom-control-input" id="is_active" name="is_active" 
                                               value="1" {{ old('is_active', $branch->is_active) ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="is_active">Sucursal Activa</label>
                                    </div>
                                </div>
                                
                                <div class="col-md-3">
                                    <div class="custom-control custom-switch mb-3">
                                        <input type="checkbox" class="custom-control-input" id="is_main" name="is_main" 
                                               value="1" {{ old('is_main', $branch->is_main) ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="is_main">Sucursal Principal</label>
                                    </div>
                                </div>
                                
                                <div class="col-md-3">
                                    <div class="custom-control custom-switch mb-3">
                                        <input type="checkbox" class="custom-control-input" id="has_pickup" name="has_pickup" 
                                               value="1" {{ old('has_pickup', $branch->has_pickup) ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="has_pickup">Retiro en Tienda</label>
                                    </div>
                                </div>
                                
                                <div class="col-md-3">
                                    <div class="custom-control custom-switch mb-3">
                                        <input type="checkbox" class="custom-control-input" id="has_delivery" name="has_delivery" 
                                               value="1" {{ old('has_delivery', $branch->has_delivery) ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="has_delivery">Realiza Entregas</label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label for="order" class="form-label">Orden de Visualización</label>
                                        <input type="number" name="order" id="order" class="form-control" 
                                               value="{{ old('order', $branch->order) }}" min="0">
                                        <small class="help-text">Orden en que aparece en el listado</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Tab 2: Contacto -->
                        <div class="tab-pane fade" id="contact" role="tabpanel">
                            <h5 class="form-section-title">Información de Contacto</h5>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="email" class="form-label">
                                            <i class="ri-mail-line"></i> Email
                                        </label>
                                        <input type="email" name="email" id="email" class="form-control @error('email') is-invalid @enderror" 
                                               value="{{ old('email', $branch->email) }}" placeholder="sucursal@empresa.com">
                                        @error('email')
                                            <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="phone" class="form-label">
                                            <i class="ri-phone-line"></i> Teléfono Principal
                                        </label>
                                        <input type="text" name="phone" id="phone" class="form-control @error('phone') is-invalid @enderror" 
                                               value="{{ old('phone', $branch->phone) }}" placeholder="011 4555-5555">
                                        @error('phone')
                                            <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="whatsapp" class="form-label">
                                            <i class="ri-whatsapp-fill"></i> WhatsApp
                                        </label>
                                        <input type="text" name="whatsapp" id="whatsapp" class="form-control @error('whatsapp') is-invalid @enderror" 
                                               value="{{ old('whatsapp', $branch->whatsapp) }}" placeholder="11 5555-5555">
                                        <small class="help-text">Número de WhatsApp para consultas</small>
                                        @error('whatsapp')
                                            <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="phone_secondary" class="form-label">
                                            <i class="ri-phone-line"></i> Teléfono Secundario
                                        </label>
                                        <input type="text" name="phone_secondary" id="phone_secondary" class="form-control" 
                                               value="{{ old('phone_secondary', $branch->phone_secondary) }}" placeholder="011 4555-5556">
                                    </div>
                                </div>
                            </div>
                            
                            <h5 class="form-section-title mt-4">Redes Sociales</h5>
                            
                            @php
                                $socialMedia = $branch->social_media ?? [];
                            @endphp
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="facebook" class="form-label">
                                            <i class="ri-facebook-fill"></i> Facebook
                                        </label>
                                        <input type="url" name="facebook" id="facebook" class="form-control" 
                                               value="{{ old('facebook', $socialMedia['facebook'] ?? '') }}" 
                                               placeholder="https://facebook.com/misucursal">
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="instagram" class="form-label">
                                            <i class="ri-instagram-fill"></i> Instagram
                                        </label>
                                        <input type="url" name="instagram" id="instagram" class="form-control" 
                                               value="{{ old('instagram', $socialMedia['instagram'] ?? '') }}" 
                                               placeholder="https://instagram.com/misucursal">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="twitter" class="form-label">
                                            <i class="ri-twitter-x-fill"></i> Twitter
                                        </label>
                                        <input type="url" name="twitter" id="twitter" class="form-control" 
                                               value="{{ old('twitter', $socialMedia['twitter'] ?? '') }}" 
                                               placeholder="https://twitter.com/misucursal">
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="youtube" class="form-label">
                                            <i class="ri-youtube-fill"></i> YouTube
                                        </label>
                                        <input type="url" name="youtube" id="youtube" class="form-control" 
                                               value="{{ old('youtube', $socialMedia['youtube'] ?? '') }}" 
                                               placeholder="https://youtube.com/c/misucursal">
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Tab 3: Ubicación -->
                        <div class="tab-pane fade" id="location" role="tabpanel">
                            <h5 class="form-section-title">Dirección</h5>
                            
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="mb-3">
                                        <label for="address" class="form-label">Dirección Principal *</label>
                                        <input type="text" name="address" id="address" class="form-control @error('address') is-invalid @enderror" 
                                               value="{{ old('address', $branch->address) }}" required placeholder="Av. Corrientes 1234">
                                        @error('address')
                                            <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="address_line2" class="form-label">Dirección Línea 2</label>
                                        <input type="text" name="address_line2" id="address_line2" class="form-control" 
                                               value="{{ old('address_line2', $branch->address_line2) }}" placeholder="Piso 3, Oficina B">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="city" class="form-label">Ciudad *</label>
                                        <input type="text" name="city" id="city" class="form-control @error('city') is-invalid @enderror" 
                                               value="{{ old('city', $branch->city) }}" required placeholder="Buenos Aires">
                                        @error('city')
                                            <p class="invalid-feedback">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="state" class="form-label">Provincia/Estado</label>
                                        <input type="text" name="state" id="state" class="form-control" 
                                               value="{{ old('state', $branch->state) }}" placeholder="CABA">
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="postal_code" class="form-label">Código Postal</label>
                                        <input type="text" name="postal_code" id="postal_code" class="form-control" 
                                               value="{{ old('postal_code', $branch->postal_code) }}" placeholder="C1414">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="country" class="form-label">País</label>
                                        <input type="text" name="country" id="country" class="form-control" 
                                               value="{{ old('country', $branch->country) }}">
                                    </div>
                                </div>
                            </div>
                            
                            <h5 class="form-section-title mt-4">Coordenadas GPS</h5>
                            <p class="text-muted">Opcional: Para mostrar ubicación exacta en el mapa</p>
                            
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="latitude" class="form-label">Latitud</label>
                                        <input type="number" step="0.00000001" name="latitude" id="latitude" class="form-control" 
                                               value="{{ old('latitude', $branch->latitude) }}" placeholder="-34.603722">
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="longitude" class="form-label">Longitud</label>
                                        <input type="number" step="0.00000001" name="longitude" id="longitude" class="form-control" 
                                               value="{{ old('longitude', $branch->longitude) }}" placeholder="-58.381592">
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label>&nbsp;</label>
                                        <button type="button" class="btn btn-secondary btn-block" onclick="getCoordinates()">
                                            <i class="ri-map-pin-line"></i> Obtener Coordenadas
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Tab 4: Horarios -->
                        <div class="tab-pane fade" id="hours" role="tabpanel">
                            <h5 class="form-section-title">Horarios de Atención</h5>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="schedule_type" class="form-label">Tipo de Horario</label>
                                    <select name="schedule_type" id="schedule_type" class="form-select">
                                        <option value="continuous" {{ old('schedule_type', $branch->schedule_type ?? 'continuous') == 'continuous' ? 'selected' : '' }}>Horario Corrido</option>
                                        <option value="split" {{ old('schedule_type', $branch->schedule_type ?? 'continuous') == 'split' ? 'selected' : '' }}>Horario Fraccionado</option>
                                    </select>
                                    <small class="help-text">Fraccionado: permite definir dos turnos (mañana y tarde)</small>
                                </div>
                            </div>

                            <div class="hours-table">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Día</th>
                                            <th>Cerrado</th>
                                            <th>Apertura</th>
                                            <th>Cierre</th>
                                            <th class="split-columns {{ ($branch->schedule_type ?? 'continuous') != 'split' ? 'hidden-columns' : '' }}">Apertura 2</th>
                                            <th class="split-columns {{ ($branch->schedule_type ?? 'continuous') != 'split' ? 'hidden-columns' : '' }}">Cierre 2</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                        $days = [
                                            'monday' => 'Lunes',
                                            'tuesday' => 'Martes',
                                            'wednesday' => 'Miércoles',
                                            'thursday' => 'Jueves',
                                            'friday' => 'Viernes',
                                            'saturday' => 'Sábado',
                                            'sunday' => 'Domingo'
                                        ];
                                        @endphp
                                        
                                        @foreach($days as $key => $day)
                                        @php
                                            $dayHours = $defaultHours[$key] ?? ['open' => '09:00', 'close' => '18:00', 'closed' => false];
                                        @endphp
                                        <tr>
                                            <td><strong>{{ $day }}</strong></td>
                                            <td>
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input day-closed" 
                                                           id="hours_{{ $key }}_closed" name="hours_{{ $key }}_closed"
                                                           {{ $dayHours['closed'] ?? false ? 'checked' : '' }}>
                                                    <label class="custom-control-label" for="hours_{{ $key }}_closed">
                                                        Cerrado
                                                    </label>
                                                </div>
                                            </td>
                                            <td>
                                                <input type="time" class="form-control time-input" 
                                                       name="hours_{{ $key }}_open" 
                                                       value="{{ $dayHours['open'] ?? '09:00' }}"
                                                       {{ $dayHours['closed'] ?? false ? 'disabled' : '' }}>
                                            </td>
                                            <td>
                                                <input type="time" class="form-control time-input"
                                                       name="hours_{{ $key }}_close"
                                                       value="{{ $dayHours['close'] ?? '18:00' }}"
                                                       {{ $dayHours['closed'] ?? false ? 'disabled' : '' }}>
                                            </td>
                                            <td class="split-columns {{ ($branch->schedule_type ?? 'continuous') != 'split' ? 'hidden-columns' : '' }}">
                                                <input type="time" class="form-control time-input"
                                                       name="hours_{{ $key }}_open2"
                                                       value="{{ $dayHours['open2'] ?? '' }}"
                                                       {{ $dayHours['closed'] ?? false ? 'disabled' : '' }}>
                                            </td>
                                            <td class="split-columns {{ ($branch->schedule_type ?? 'continuous') != 'split' ? 'hidden-columns' : '' }}">
                                                <input type="time" class="form-control time-input"
                                                       name="hours_{{ $key }}_close2"
                                                       value="{{ $dayHours['close2'] ?? '' }}"
                                                       {{ $dayHours['closed'] ?? false ? 'disabled' : '' }}>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            
                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="hours_note" class="form-label">Nota sobre Horarios</label>
                                        <textarea name="hours_note" id="hours_note" class="form-control" rows="2" 
                                                  placeholder="Ej: Horario especial en feriados">{{ old('hours_note', $branch->hours_note) }}</textarea>
                                        <small class="help-text">Información adicional sobre horarios especiales o excepciones</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Tab 5: Servicios -->
                        <div class="tab-pane fade" id="services" role="tabpanel">
                            <h5 class="form-section-title">Servicios Disponibles</h5>
                            
                            @php
                                $branchServices = $branch->services ?? [];
                                $branchPayments = $branch->payment_methods ?? [];
                            @endphp
                            
                            <div class="row">
                                @php
                                $availableServices = [
                                    'parking' => 'Estacionamiento',
                                    'wifi' => 'WiFi Gratis',
                                    'wheelchair' => 'Acceso para Sillas de Ruedas',
                                    'delivery' => 'Servicio de Delivery',
                                    'pickup' => 'Retiro en Tienda',
                                    'online_payment' => 'Pago Online',
                                    'cash' => 'Pago en Efectivo',
                                    'credit_card' => 'Tarjetas de Crédito',
                                    'debit_card' => 'Tarjetas de Débito',
                                    'mercadopago' => 'MercadoPago',
                                    'bank_transfer' => 'Transferencia Bancaria'
                                ];
                                @endphp
                                
                                @foreach($availableServices as $key => $service)
                                <div class="col-md-4">
                                    <div class="custom-control custom-checkbox mb-3">
                                        <input type="checkbox" class="custom-control-input" 
                                               id="service_{{ $key }}" name="services[]" value="{{ $key }}"
                                               {{ in_array($key, $branchServices) ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="service_{{ $key }}">
                                            {{ $service }}
                                        </label>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            
                            <h5 class="form-section-title mt-4">Métodos de Pago Aceptados</h5>
                            
                            <div class="row">
                                @php
                                $paymentMethods = [
                                    'cash' => 'Efectivo',
                                    'credit_visa' => 'Visa Crédito',
                                    'credit_mastercard' => 'Mastercard Crédito',
                                    'credit_amex' => 'American Express',
                                    'debit_visa' => 'Visa Débito',
                                    'debit_mastercard' => 'Mastercard Débito',
                                    'mercadopago' => 'MercadoPago',
                                    'transfer' => 'Transferencia',
                                    'check' => 'Cheque'
                                ];
                                @endphp
                                
                                @foreach($paymentMethods as $key => $method)
                                <div class="col-md-3">
                                    <div class="custom-control custom-checkbox mb-3">
                                        <input type="checkbox" class="custom-control-input" 
                                               id="payment_{{ $key }}" name="payment_methods[]" value="{{ $key }}"
                                               {{ in_array($key, $branchPayments) ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="payment_{{ $key }}">
                                            {{ $method }}
                                        </label>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        
                        <!-- Tab 6: Multimedia -->
                        <div class="tab-pane fade" id="media" role="tabpanel">
                            <h5 class="form-section-title">Imagen Principal</h5>
                            
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <input type="hidden" name="image_id" id="image_id" value="">
                                        <label for="image" class="form-label">Imagen de la Sucursal</label>
                                        
                                        @if($branch->image)
                                        <div class="mb-3">
                                            <img src="{{ asset('uploads/branches/' . $branch->image) }}" 
                                                 alt="{{ $branch->name }}" class="img-thumbnail" style="max-height: 200px;">
                                            <div class="mt-2">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input" 
                                                           id="remove_image" name="remove_image" value="1">
                                                    <label class="custom-control-label" for="remove_image">
                                                        Eliminar imagen actual
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                        
                                        <div id="image" class="dropzone dz-clickable">
                                            <div class="dz-message needsclick">
                                                <br>Suelta los archivos aquí o haz clic para subirlos.<br><br>
                                            </div>
                                        </div>
                                        <small class="help-text">
                                            Imagen recomendada: 800x600px, formato JPG o PNG
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Tab 7: SEO -->
                        <div class="tab-pane fade {{ (isset($activeTab) && $activeTab == 'seo') ? 'show active' : '' }}" id="seo" role="tabpanel">

                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h5 class="form-section-title mb-0">
                                    <i class="ri-search-line text-success"></i>
                                    Optimización para Motores de Búsqueda
                                </h5>
                                @if(aiIntegrationEnabled())
                                <button type="button" id="generateAiSeo" class="btn btn-success btn-sm">
                                    <i class="ri-brain-line me-1"></i>
                                    Generar SEO con IA
                                </button>
                                @endif
                            </div>

                            <!-- SEO Manual Fields Card -->
                            <div class="card mb-4">
                                <div class="card-header bg-light">
                                    <h6 class="mb-0">
                                        <i class="ri-pencil-line text-primary me-2"></i>
                                        Campos SEO Manuales
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label for="meta_title" class="form-label">Meta Título</label>
                                                <input type="text" name="meta_title" id="meta_title" class="form-control"
                                                       value="{{ old('meta_title', $branch->meta_title) }}" maxlength="60">
                                                <div class="d-flex justify-content-between">
                                                    <small class="help-text">Título que aparece en los resultados de búsqueda</small>
                                                    <small class="character-counter" id="title-counter">0/60</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label for="meta_description" class="form-label">Meta Descripción</label>
                                                <textarea name="meta_description" id="meta_description" class="form-control"
                                                          rows="3" maxlength="160">{{ old('meta_description', $branch->meta_description) }}</textarea>
                                                <div class="d-flex justify-content-between">
                                                    <small class="help-text">Descripción que aparece en los resultados de búsqueda</small>
                                                    <small class="character-counter" id="description-counter">0/160</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label for="meta_keywords" class="form-label">Palabras Clave</label>
                                                <input type="text" name="meta_keywords" id="meta_keywords" class="form-control"
                                                       value="{{ old('meta_keywords', $branch->meta_keywords) }}">
                                                <small class="help-text">Separadas por comas. Ej: sucursal villa urquiza, tienda buenos aires</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- SEO con IA Section -->
                            <div class="card">
                                <div class="card-header bg-light">
                                    <h6 class="mb-0">
                                        <i class="ri-brain-line text-success me-2"></i>
                                        Generación de SEO con Inteligencia Artificial
                                        @if($branch->ai_generated_at && ($branch->ai_meta_title || $branch->ai_meta_description))
                                        <span class="badge bg-success ms-2">Generado</span>
                                        @endif
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="ai-seo-section">

                                        @if($branch->ai_generated_at && ($branch->ai_meta_title || $branch->ai_meta_description))
                                        <!-- Contenido generado por IA -->
                                        <div class="alert alert-success">
                                            <i class="ri-checkbox-circle-line me-2"></i>
                                            <strong>SEO generado con IA</strong> -
                                            Última generación: {{ $branch->ai_generated_at->format('d/m/Y H:i') }}
                                            @if($branch->ai_model_used)
                                            <br><small>Modelo usado: {{ $branch->ai_model_used }}</small>
                                            @endif
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label>Meta Título generado por IA</label>
                                                    <div class="ai-generated-content">{{ $branch->ai_meta_title }}</div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label>Alt Text para imagen</label>
                                                    <div class="ai-generated-content">{{ $branch->ai_alt_text }}</div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="mb-3">
                                                    <label>Meta Descripción generada por IA</label>
                                                    <div class="ai-generated-content">{{ $branch->ai_meta_description }}</div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="mb-3">
                                                    <label>Descripción de sucursal para SEO</label>
                                                    <div class="ai-generated-content long-content">{{ $branch->ai_description }}</div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="mb-3">
                                                    <label>Palabras clave sugeridas</label>
                                                    <div class="ai-generated-content">{{ $branch->ai_keywords }}</div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="d-flex justify-content-between align-items-center flex-wrap">
                                                    <div class="mb-2">
                                                        <button type="button" class="btn btn-primary" id="applyAiSeo">
                                                            <i class="ri-file-copy-line me-1"></i>
                                                            Copiar a campos SEO manuales
                                                        </button>
                                                    </div>
                                                    <div class="form-check">
                                                        <input type="checkbox" name="ai_seo_enabled" id="ai_seo_enabled" class="form-check-input"
                                                               {{ $branch->ai_seo_enabled ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="ai_seo_enabled">
                                                            <strong>Usar SEO generado por IA en el frontend</strong>
                                                            <br><small class="text-muted">Cuando esté activado, se mostrará el contenido IA en lugar del manual</small>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        @else
                                        <!-- Sin contenido IA aún -->
                                        <div class="text-center py-4">
                                            <i class="ri-brain-line ri-3x text-muted mb-3"></i>
                                            <h5>No hay contenido SEO generado por IA</h5>
                                            <p class="text-muted">Haz clic en "Generar SEO con IA" para crear contenido optimizado automáticamente.</p>
                                            @if(aiIntegrationEnabled())
                                            <button type="button" id="generateAiSeoHere" class="btn btn-success">
                                                <i class="ri-brain-line me-2"></i>
                                                Generar SEO con IA
                                            </button>
                                            @endif
                                        </div>
                                        @endif

                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    
                    <!-- Actions -->
                    <div class="form-actions">
                        <div class="row">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="ri-save-line"></i> Actualizar Sucursal
                                </button>
                                <a href="{{ route('admin.branches.index') }}" class="btn btn-outline-secondary btn-lg ms-3">
                                    <i class="ri-close-line"></i> Cancelar
                                </a>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            
        </form>

@endsection

@section('customJs')
<script>
// Toggle split schedule columns
$('#schedule_type').change(function() {
    if ($(this).val() === 'split') {
        $('.split-columns').removeClass('hidden-columns');
    } else {
        $('.split-columns').addClass('hidden-columns');
        $('input[name$="_open2"]').val('');
        $('input[name$="_close2"]').val('');
    }
});

// Manejar checkboxes de días cerrados
$('.day-closed').change(function() {
    var day = $(this).attr('id').replace('hours_', '').replace('_closed', '');
    var openInput = $('input[name="hours_' + day + '_open"]');
    var closeInput = $('input[name="hours_' + day + '_close"]');
    var open2Input = $('input[name="hours_' + day + '_open2"]');
    var close2Input = $('input[name="hours_' + day + '_close2"]');

    if ($(this).is(':checked')) {
        openInput.prop('disabled', true).val('');
        closeInput.prop('disabled', true).val('');
        open2Input.prop('disabled', true).val('');
        close2Input.prop('disabled', true).val('');
    } else {
        openInput.prop('disabled', false).val('09:00');
        closeInput.prop('disabled', false).val('18:00');
        open2Input.prop('disabled', false);
        close2Input.prop('disabled', false);
    }
});

// Dropzone para imagen
Dropzone.autoDiscover = false;
const dropzone = $("#image").dropzone({
    init: function() {
        this.on('addedfile', function(file) {
            if (this.files.length > 1) {
                this.removeFile(this.files[0]);
            }
        });
    },
    url: "{{ route('temp-images.create') }}",
    maxFiles: 1,
    paramName: 'image',
    addRemoveLinks: true,
    acceptedFiles: "image/jpeg,image/png,image/gif,image/webp",
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    success: function(file, response) {
        $("#image_id").val(response.image_id);
        // Desmarcar eliminar imagen si se sube una nueva
        $("#remove_image").prop('checked', false);
    }
});

// Contadores de caracteres
function updateCharacterCounters() {
    $('#title-counter').text($('#meta_title').val().length + '/60');
    $('#description-counter').text($('#meta_description').val().length + '/160');
}

$('#meta_title, #meta_description').on('input', updateCharacterCounters);
updateCharacterCounters();

// Apply AI SEO to manual fields
function applyAiSeoToManual() {
    const aiMetaTitle = @json($branch->ai_meta_title ?? '');
    const aiMetaDescription = @json($branch->ai_meta_description ?? '');
    const aiKeywords = @json($branch->ai_keywords ?? '');

    if (aiMetaTitle) {
        $('#meta_title').val(aiMetaTitle);
    }
    if (aiMetaDescription) {
        $('#meta_description').val(aiMetaDescription);
    }
    if (aiKeywords) {
        $('#meta_keywords').val(aiKeywords);
    }

    updateCharacterCounters();

    if (aiMetaTitle || aiMetaDescription || aiKeywords) {
        Swal.fire({
            icon: 'success',
            title: '¡Copiado!',
            text: 'El contenido IA se ha copiado a los campos manuales',
            timer: 2000,
            showConfirmButton: false
        });
    }
}

$(document).on('click', '#applyAiSeo', applyAiSeoToManual);

// Keep SEO tab active if hash is present
$(document).ready(function() {
    if (window.location.hash === '#seo') {
        $('#seo-tab').tab('show');
    }
});

// Obtener coordenadas desde la dirección
function getCoordinates() {
    var address = $('#address').val() + ', ' + $('#city').val() + ', ' + $('#country').val();

    if (!address) {
        Swal.fire('Error', 'Por favor ingrese una dirección primero', 'error');
        return;
    }

    // Aquí podrías integrar con Google Maps Geocoding API
    Swal.fire('Info', 'Funcionalidad de geocodificación pendiente de implementar', 'info');
}

// Generar SEO con IA
function generateAiSeo() {
    const generateBtn = $(this);

    // Show loading state
    generateBtn.prop('disabled', true).html('<i class="ri-loader-line fa-spin me-1"></i>Generando...');

    // Show extended loading message if it takes too long
    let retryMessageTimeout = setTimeout(() => {
        generateBtn.html('<i class="ri-loader-line fa-spin me-1"></i>Generando... (reintentando con modelos alternativos)');
    }, 5000);

    $.ajax({
        url: '{{ route("admin.branches.generate-ai-seo", $branch->id) }}',
        type: 'POST',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            if (response.status) {
                // Check if fallback was used
                let title = '¡Éxito!';
                let text = response.message || 'Contenido SEO generado exitosamente';
                let icon = 'success';

                if (response.model_used && response.model_used === 'fallback/local') {
                    title = 'Contenido Generado';
                    icon = 'warning';
                }

                Swal.fire({
                    icon: icon,
                    title: title,
                    text: text,
                    timer: 3000,
                    showConfirmButton: false
                });

                // Update fields with generated content
                if (response.data) {
                    $('#meta_title').val(response.data.ai_meta_title || '');
                    $('#meta_description').val(response.data.ai_meta_description || '');
                    $('#meta_keywords').val(response.data.ai_keywords || '');
                    updateCharacterCounters();
                }

                // Reload page to show generated content - stay on SEO tab
                setTimeout(() => {
                    window.location.href = window.location.href.split('#')[0] + '#seo';
                    window.location.reload();
                }, 3000);
            } else {
                throw new Error(response.message || 'Error desconocido');
            }
        },
        error: function(xhr, status, error) {
            console.error('Error generating AI SEO:', xhr.responseText);
            let errorMessage = 'Error al generar contenido SEO';
            let footerMessage = '';

            if (xhr.status === 419) {
                errorMessage = 'Sesión expirada. Por favor, refresque la página e intente nuevamente.';
                footerMessage = 'Recargando página...';
                setTimeout(() => {
                    window.location.reload();
                }, 3000);
            } else if (xhr.responseJSON && xhr.responseJSON.message) {
                // Mostrar el mensaje real de la API
                errorMessage = xhr.responseJSON.message;

                // Determinar footer según el tipo de error
                if (errorMessage.includes('quota') || errorMessage.includes('billing')) {
                    footerMessage = 'Verifique su plan y límites de uso en el proveedor de IA';
                } else if (errorMessage.includes('model') && errorMessage.includes('not found')) {
                    footerMessage = 'El modelo especificado no está disponible en su plan';
                } else if (errorMessage.includes('API key')) {
                    footerMessage = 'Verifique su API key en Integraciones > IA';
                } else {
                    footerMessage = 'Error del proveedor de IA: ' + (xhr.responseJSON.type || 'Desconocido');
                }
            } else if (xhr.status === 400) {
                errorMessage = 'Servicio de IA no disponible. Verifique la configuración en Integraciones > IA.';
                footerMessage = 'Error de configuración';
            } else if (xhr.status === 500) {
                errorMessage = 'Error interno del servidor. Verifique la API key de IA.';
                footerMessage = 'Error del servidor';
            }

            Swal.fire({
                icon: 'error',
                title: 'Error de IA',
                html: '<p>' + errorMessage + '</p>',
                footer: footerMessage,
                width: 600,
                confirmButtonText: 'Entendido'
            });
        },
        complete: function() {
            clearTimeout(retryMessageTimeout);
            generateBtn.prop('disabled', false).html('<i class="ri-brain-line me-1"></i>Generar SEO con IA');
        }
    });
}

// Delegar eventos a ambos botones
$(document).on('click', '#generateAiSeo, #generateAiSeoHere', generateAiSeo);
</script>
@endsection