@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;
}
</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">Crear Sucursal</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>
        <form action="{{ route('admin.branches.store') }}" method="POST" id="branchForm">
            @csrf
            
            <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 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" id="seo-tab" data-bs-toggle="tab" href="#seo" role="tab">
                                <i class="ri-search-line tab-icon"></i>SEO
                            </a>
                        </li>
                    </ul>

                    <!-- Tabs Content -->
                    <div class="tab-content" id="branchTabsContent">
                        
                        <!-- Tab 1: Información General -->
                        <div class="tab-pane fade 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') }}" 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') }}" 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') == 'store' ? 'selected' : '' }}>Tienda</option>
                                            <option value="warehouse" {{ old('type') == 'warehouse' ? 'selected' : '' }}>Depósito</option>
                                            <option value="office" {{ old('type') == 'office' ? 'selected' : '' }}>Oficina</option>
                                            <option value="pickup_point" {{ old('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') }}</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', true) ? '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') ? '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', true) ? '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') ? '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', 0) }}" 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') }}" 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') }}" 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') }}" 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') }}" placeholder="011 4555-5556">
                                    </div>
                                </div>
                            </div>
                            
                            <h5 class="form-section-title mt-4">Redes Sociales</h5>
                            
                            <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') }}" 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') }}" 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') }}" 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') }}" 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') }}" 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') }}" 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') }}" 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') }}" 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') }}" 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', 'Argentina') }}">
                                    </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') }}" 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') }}" 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', 'continuous') == 'continuous' ? 'selected' : '' }}>Horario Corrido</option>
                                        <option value="split" {{ old('schedule_type') == '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 hidden-columns">Apertura 2</th>
                                            <th class="split-columns 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)
                                        <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"
                                                           {{ $key == 'sunday' ? '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="{{ $defaultHours[$key]['open'] ?? '09:00' }}"
                                                       {{ $key == 'sunday' ? 'disabled' : '' }}>
                                            </td>
                                            <td>
                                                <input type="time" class="form-control time-input"
                                                       name="hours_{{ $key }}_close"
                                                       value="{{ $defaultHours[$key]['close'] ?? '18:00' }}"
                                                       {{ $key == 'sunday' ? 'disabled' : '' }}>
                                            </td>
                                            <td class="split-columns hidden-columns">
                                                <input type="time" class="form-control time-input"
                                                       name="hours_{{ $key }}_open2"
                                                       value="{{ $defaultHours[$key]['open2'] ?? '' }}"
                                                       {{ $key == 'sunday' ? 'disabled' : '' }}>
                                            </td>
                                            <td class="split-columns hidden-columns">
                                                <input type="time" class="form-control time-input"
                                                       name="hours_{{ $key }}_close2"
                                                       value="{{ $defaultHours[$key]['close2'] ?? '' }}"
                                                       {{ $key == 'sunday' ? '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') }}</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>
                            
                            <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 }}">
                                        <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 }}">
                                        <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>
                                        <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" id="seo" role="tabpanel">
                            <h5 class="form-section-title">Optimización para Motores de Búsqueda</h5>
                            
                            <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') }}" 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') }}</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') }}">
                                        <small class="help-text">Separadas por comas. Ej: sucursal palermo, tienda buenos aires</small>
                                    </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> Crear 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');
        // Clear open2/close2 values when switching to continuous
        $('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);
    }
});

// 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();

// Obtener coordenadas desde la dirección
function getCoordinates() {
    var address = $('#address').val() + ', ' + $('#city').val() + ', ' + $('#country').val();
    
    if (!address) {
        alert('Por favor ingrese una dirección primero');
        return;
    }
    
    // Aquí podrías integrar con Google Maps Geocoding API
    alert('Funcionalidad de geocodificación pendiente de implementar');
}

// Validación del formulario
$("#branchForm").submit(function(event) {
    event.preventDefault();
    
    var element = $(this);
    $("button[type=submit]").prop('disabled', true);
    
    // Aquí puedes agregar validaciones adicionales si es necesario
    
    element.unbind('submit').submit();
});
</script>
@endsection