@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Editar Negocio'])
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-8 mx-auto">

                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <span class="alert-text">{{ session('success') }}</span>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <span class="alert-text">{{ session('error') }}</span>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                {{-- Business Info Card --}}
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <div class="d-flex align-items-center">
                            <a href="{{ route('super-admin.businesses') }}" class="btn btn-sm btn-outline-secondary me-3">
                                <i class="fas fa-arrow-left"></i>
                            </a>
                            <div>
                                <h5 class="mb-0">Editar Negocio</h5>
                                <p class="text-sm text-muted mb-0">{{ $business->name }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('super-admin.businesses.update', $business) }}" method="POST">
                            @csrf
                            @method('PUT')

                            <div class="mb-3">
                                <label for="name" class="form-label">Nombre del Negocio <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror"
                                       id="name" name="name" value="{{ old('name', $business->name) }}" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="subdomain" class="form-label">Subdominio <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="text" class="form-control @error('subdomain') is-invalid @enderror"
                                           id="subdomain" name="subdomain" value="{{ old('subdomain', $business->subdomain) }}" required>
                                    <span class="input-group-text">.conversa.app</span>
                                </div>
                                @error('subdomain')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-4">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1"
                                           {{ $business->is_active ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_active">Negocio activo</label>
                                </div>
                            </div>

                            <hr class="my-4">

                            <h6 class="text-uppercase text-muted mb-3">Estadísticas</h6>
                            <div class="row text-center mb-4">
                                <div class="col-md-3">
                                    <h4 class="mb-0">{{ $business->members()->count() }}</h4>
                                    <small class="text-muted">Usuarios</small>
                                </div>
                                <div class="col-md-3">
                                    <h4 class="mb-0">{{ $business->contacts()->count() }}</h4>
                                    <small class="text-muted">Contactos</small>
                                </div>
                                <div class="col-md-3">
                                    <h4 class="mb-0">{{ $business->appointments()->count() }}</h4>
                                    <small class="text-muted">Citas</small>
                                </div>
                                <div class="col-md-3">
                                    <h4 class="mb-0">{{ $business->conversations()->count() }}</h4>
                                    <small class="text-muted">Conversaciones</small>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end gap-2">
                                <a href="{{ route('super-admin.businesses') }}" class="btn btn-outline-secondary">Cancelar</a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i> Guardar Cambios
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                {{-- Telephony Configuration Card --}}
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <h6 class="mb-0"><i class="fas fa-phone me-2"></i>Configuración de Telefonía</h6>
                        <p class="text-sm text-muted mb-0">Credenciales de telefonía para {{ $business->name }}</p>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('super-admin.businesses.updateTelephony', $business) }}" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="tel_api_key" class="form-label">API Key del Proveedor</label>
                                    <input type="password" class="form-control @error('api_key') is-invalid @enderror"
                                           id="tel_api_key" name="api_key"
                                           value=""
                                           placeholder="{{ ($telephonyConfig['api_key_set'] ?? false) ? 'Clave configurada (dejar vacío para mantener)' : 'Ingrese su API Key' }}">
                                    @error('api_key')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="tel_phone_number" class="form-label">Número de Teléfono</label>
                                    <input type="text" class="form-control @error('phone_number') is-invalid @enderror"
                                           id="tel_phone_number" name="phone_number"
                                           value="{{ old('phone_number', $telephonyConfig['phone_number'] ?? '') }}"
                                           placeholder="+521234567890">
                                    @error('phone_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="tel_assistant_id" class="form-label">ID del Asistente IA</label>
                                    <input type="text" class="form-control @error('assistant_id') is-invalid @enderror"
                                           id="tel_assistant_id" name="assistant_id"
                                           value="{{ old('assistant_id', $telephonyConfig['assistant_id'] ?? '') }}"
                                           placeholder="ID de configuración del asistente">
                                    @error('assistant_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="tel_webhook_url" class="form-label">Webhook URL (Opcional)</label>
                                    <input type="url" class="form-control @error('webhook_url') is-invalid @enderror"
                                           id="tel_webhook_url" name="webhook_url"
                                           value="{{ old('webhook_url', $telephonyConfig['webhook_url'] ?? '') }}"
                                           placeholder="https://tu-dominio.com/webhook">
                                    @error('webhook_url')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>Guardar Telefonía
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                {{-- WhatsApp Configuration Card --}}
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <h6 class="mb-0"><i class="fab fa-whatsapp me-2"></i>Configuración de WhatsApp</h6>
                        <p class="text-sm text-muted mb-0">Credenciales de WhatsApp para {{ $business->name }}</p>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('super-admin.businesses.updateWhatsApp', $business) }}" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="wa_waba_id" class="form-label">WABA ID</label>
                                    <input type="text" class="form-control @error('waba_id') is-invalid @enderror"
                                           id="wa_waba_id" name="waba_id"
                                           value="{{ old('waba_id', $whatsappConfig['waba_id'] ?? '') }}"
                                           placeholder="WhatsApp Business Account ID (WABA)">
                                    @error('waba_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="wa_business_account_id" class="form-label">Business Account ID</label>
                                    <input type="text" class="form-control @error('business_account_id') is-invalid @enderror"
                                           id="wa_business_account_id" name="business_account_id"
                                           value="{{ old('business_account_id', $whatsappConfig['business_account_id'] ?? '') }}"
                                           placeholder="ID de cuenta de WhatsApp Business">
                                    @error('business_account_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="wa_phone_number_id" class="form-label">Phone Number ID</label>
                                    <input type="text" class="form-control @error('phone_number_id') is-invalid @enderror"
                                           id="wa_phone_number_id" name="phone_number_id"
                                           value="{{ old('phone_number_id', $whatsappConfig['phone_number_id'] ?? '') }}"
                                           placeholder="ID del número de teléfono">
                                    @error('phone_number_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="wa_access_token" class="form-label">Access Token</label>
                                    <input type="password" class="form-control @error('access_token') is-invalid @enderror"
                                           id="wa_access_token" name="access_token"
                                           value=""
                                           placeholder="{{ ($whatsappConfig['access_token_set'] ?? false) ? 'Token configurado (dejar vacío para mantener)' : 'Ingrese su Access Token' }}">
                                    @error('access_token')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="wa_webhook_verify_token" class="form-label">Webhook Verify Token</label>
                                    <input type="text" class="form-control @error('webhook_verify_token') is-invalid @enderror"
                                           id="wa_webhook_verify_token" name="webhook_verify_token"
                                           value="{{ old('webhook_verify_token', $whatsappConfig['webhook_verify_token'] ?? '') }}"
                                           placeholder="Token de verificación del webhook">
                                    @error('webhook_verify_token')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

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

                {{-- Business Hours Card --}}
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <h6 class="mb-0"><i class="fas fa-clock me-2"></i>Horarios de Operación</h6>
                        <p class="text-sm text-muted mb-0">Horarios de atención para {{ $business->name }}</p>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('super-admin.businesses.updateHours', $business) }}" method="POST">
                            @csrf
                            @php
                                $dayLabels = [
                                    'monday' => 'Lunes',
                                    'tuesday' => 'Martes',
                                    'wednesday' => 'Miércoles',
                                    'thursday' => 'Jueves',
                                    'friday' => 'Viernes',
                                    'saturday' => 'Sábado',
                                    'sunday' => 'Domingo',
                                ];
                            @endphp

                            @foreach($dayLabels as $day => $label)
                                <div class="row align-items-center mb-2">
                                    <div class="col-md-3">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input day-switch" type="checkbox"
                                                   id="{{ $day }}_enabled" name="{{ $day }}_enabled" value="1"
                                                   data-day="{{ $day }}"
                                                   {{ ($businessHours[$day]['enabled'] ?? false) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="{{ $day }}_enabled">{{ $label }}</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <input type="time" class="form-control form-control-sm"
                                               id="{{ $day }}_open" name="{{ $day }}_open"
                                               value="{{ $businessHours[$day]['open'] ?? '09:00' }}"
                                               {{ ($businessHours[$day]['enabled'] ?? false) ? '' : 'disabled' }}>
                                    </div>
                                    <div class="col-md-1 text-center">
                                        <span class="text-muted">a</span>
                                    </div>
                                    <div class="col-md-4">
                                        <input type="time" class="form-control form-control-sm"
                                               id="{{ $day }}_close" name="{{ $day }}_close"
                                               value="{{ $businessHours[$day]['close'] ?? '18:00' }}"
                                               {{ ($businessHours[$day]['enabled'] ?? false) ? '' : 'disabled' }}>
                                    </div>
                                </div>
                            @endforeach

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

                {{-- Appointment Types Card --}}
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <h6 class="mb-0"><i class="fas fa-calendar-check me-2"></i>Tipos de Cita</h6>
                        <p class="text-sm text-muted mb-0">Tipos de cita personalizados para {{ $business->name }}</p>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('super-admin.businesses.updateAppointmentTypes', $business) }}" method="POST">
                            @csrf
                            <div class="row mb-2 text-muted">
                                <div class="col-md-3"><small>Clave</small></div>
                                <div class="col-md-3"><small>Etiqueta</small></div>
                                <div class="col-md-3"><small>Duración</small></div>
                                <div class="col-md-3"><small>Acciones</small></div>
                            </div>
                            <div id="appointmentTypesContainer">
                                @foreach($appointmentTypes as $key => $typeData)
                                    @php
                                        $typeLabel = is_array($typeData) ? ($typeData['label'] ?? '') : $typeData;
                                        $typeDuration = is_array($typeData) ? ($typeData['duration'] ?? 60) : 60;
                                    @endphp
                                    <div class="row align-items-center mb-2 appointment-type-row">
                                        <div class="col-md-3">
                                            <input type="text" class="form-control form-control-sm" name="type_keys[]"
                                                   value="{{ $key }}" placeholder="clave (ej: consultation)"
                                                   pattern="[a-z0-9_]+" title="Solo letras minúsculas, números y guión bajo">
                                        </div>
                                        <div class="col-md-3">
                                            <input type="text" class="form-control form-control-sm" name="type_labels[]"
                                                   value="{{ $typeLabel }}" placeholder="Etiqueta (ej: Consulta)">
                                        </div>
                                        <div class="col-md-3">
                                            <select class="form-select form-select-sm" name="type_durations[]">
                                                <option value="15" {{ $typeDuration == 15 ? 'selected' : '' }}>15 min</option>
                                                <option value="30" {{ $typeDuration == 30 ? 'selected' : '' }}>30 min</option>
                                                <option value="45" {{ $typeDuration == 45 ? 'selected' : '' }}>45 min</option>
                                                <option value="60" {{ $typeDuration == 60 ? 'selected' : '' }}>60 min</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <button type="button" class="btn btn-sm btn-outline-danger btn-remove-type" title="Eliminar">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <button type="button" class="btn btn-sm btn-outline-primary mb-3" id="btnAddType">
                                <i class="fas fa-plus me-1"></i> Agregar Tipo
                            </button>

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

                {{-- Conversation Categories Card --}}
                <div class="card mb-4" id="business-categories">
                    <div class="card-header pb-0 d-flex align-items-center justify-content-between">
                        <div>
                            <h6 class="mb-0"><i class="fas fa-tags me-2"></i>Categorías de Conversación</h6>
                            <p class="text-sm text-muted mb-0">Administra las categorías disponibles para {{ $business->name }}</p>
                        </div>
                        <span class="badge bg-gradient-dark">{{ $categories->count() }} {{ $categories->count() === 1 ? 'categoría' : 'categorías' }}</span>
                    </div>
                    <div class="card-body">
                        @if($errors->categoryUpdate->has('category_name'))
                            <div class="alert alert-warning py-2 mb-3" role="alert">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                {{ $errors->categoryUpdate->first('category_name') }}
                            </div>
                        @endif

                        @if($categories->isEmpty())
                            <div class="text-center py-4">
                                <i class="fas fa-folder-open text-muted mb-2" style="font-size: 2rem;"></i>
                                <p class="text-sm text-muted mb-0">Este negocio aún no tiene categorías.</p>
                                <p class="text-xs text-muted">Agrega la primera categoría usando el campo de abajo.</p>
                            </div>
                        @else
                            <div class="list-group list-group-flush mb-3">
                                @foreach($categories as $category)
                                    <div class="list-group-item px-0 py-2 category-item" data-category-id="{{ $category->id }}">
                                        {{-- Display mode --}}
                                        <div class="d-flex align-items-center justify-content-between category-display">
                                            <div class="d-flex align-items-center gap-2">
                                                <i class="fas fa-tag text-muted text-xs"></i>
                                                <span class="font-weight-bold text-sm">{{ $category->name }}</span>
                                                <span class="badge bg-gradient-info ms-1" title="Conversaciones asociadas">
                                                    <i class="fas fa-comments me-1" style="font-size: 0.6rem;"></i>{{ $category->conversations_count }}
                                                </span>
                                            </div>
                                            <div class="d-flex gap-1">
                                                <button type="button"
                                                        class="btn btn-sm btn-link text-dark mb-0 px-2 btn-edit-category"
                                                        title="Editar categoría">
                                                    <i class="fas fa-pencil-alt text-xs"></i>
                                                </button>
                                                @if($category->conversations_count === 0)
                                                    <form action="{{ route('super-admin.businesses.categories.destroy', [$business, $category->id]) }}" method="POST" class="d-inline">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit"
                                                                class="btn btn-sm btn-link text-danger mb-0 px-2"
                                                                onclick="return confirm('¿Eliminar la categoría «{{ $category->name }}»?')"
                                                                title="Eliminar categoría">
                                                            <i class="fas fa-trash-alt text-xs"></i>
                                                        </button>
                                                    </form>
                                                @else
                                                    <button type="button"
                                                            class="btn btn-sm btn-link text-muted mb-0 px-2"
                                                            disabled
                                                            title="No se puede eliminar: tiene {{ $category->conversations_count }} conversación(es)">
                                                        <i class="fas fa-trash-alt text-xs"></i>
                                                    </button>
                                                @endif
                                            </div>
                                        </div>

                                        {{-- Edit mode (hidden by default) --}}
                                        <form action="{{ route('super-admin.businesses.categories.update', [$business, $category->id]) }}"
                                              method="POST"
                                              class="category-edit-form d-none">
                                            @csrf
                                            @method('PUT')
                                            <div class="d-flex align-items-center gap-2">
                                                <input type="text"
                                                       name="category_name"
                                                       class="form-control form-control-sm"
                                                       value="{{ $category->name }}"
                                                       maxlength="50"
                                                       required>
                                                <button type="submit" class="btn btn-sm btn-primary mb-0 px-3">
                                                    <i class="fas fa-check"></i>
                                                </button>
                                                <button type="button" class="btn btn-sm btn-outline-secondary mb-0 px-3 btn-cancel-edit">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        <form action="{{ route('super-admin.businesses.categories.store', $business) }}" method="POST">
                            @csrf
                            <label for="new_category_name" class="form-label text-xs text-uppercase text-muted font-weight-bolder">Agregar nueva categoría</label>
                            <div class="input-group">
                                <input
                                    type="text"
                                    id="new_category_name"
                                    name="category_name"
                                    class="form-control form-control-sm @if($errors->categoryCreate->has('category_name')) is-invalid @endif"
                                    value="{{ old('category_name') }}"
                                    maxlength="50"
                                    placeholder="Ej: Tandeo, Fuga, Facturación..."
                                    required
                                >
                                <button type="submit" class="btn btn-sm btn-primary mb-0">
                                    <i class="fas fa-plus me-1"></i> Agregar
                                </button>
                            </div>
                            @if($errors->categoryCreate->has('category_name'))
                                <div class="invalid-feedback d-block">{{ $errors->categoryCreate->first('category_name') }}</div>
                            @endif
                        </form>
                    </div>
                </div>

            </div>
        </div>

        @include('layouts.footers.auth.footer')
    </div>
@endsection

@push('js')
<script>
    // Business hours: toggle time inputs when switch is toggled
    document.querySelectorAll('.day-switch').forEach(function(switchEl) {
        switchEl.addEventListener('change', function() {
            const day = this.dataset.day;
            const openInput = document.getElementById(day + '_open');
            const closeInput = document.getElementById(day + '_close');
            openInput.disabled = !this.checked;
            closeInput.disabled = !this.checked;
        });
    });

    // Appointment types: add new row
    document.getElementById('btnAddType').addEventListener('click', function() {
        const container = document.getElementById('appointmentTypesContainer');
        const row = document.createElement('div');
        row.className = 'row align-items-center mb-2 appointment-type-row';
        row.innerHTML = `
            <div class="col-md-3">
                <input type="text" class="form-control form-control-sm" name="type_keys[]"
                       placeholder="clave (ej: consultation)" pattern="[a-z0-9_]+"
                       title="Solo letras minúsculas, números y guión bajo">
            </div>
            <div class="col-md-3">
                <input type="text" class="form-control form-control-sm" name="type_labels[]"
                       placeholder="Etiqueta (ej: Consulta)">
            </div>
            <div class="col-md-3">
                <select class="form-select form-select-sm" name="type_durations[]">
                    <option value="15">15 min</option>
                    <option value="30">30 min</option>
                    <option value="45">45 min</option>
                    <option value="60" selected>60 min</option>
                </select>
            </div>
            <div class="col-md-3">
                <button type="button" class="btn btn-sm btn-outline-danger btn-remove-type" title="Eliminar">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        `;
        container.appendChild(row);
    });

    // Appointment types: remove row (min 1)
    document.addEventListener('click', function(e) {
        const btn = e.target.closest('.btn-remove-type');
        if (!btn) return;

        const rows = document.querySelectorAll('.appointment-type-row');
        if (rows.length <= 1) {
            alert('Debe haber al menos un tipo de cita.');
            return;
        }
        btn.closest('.appointment-type-row').remove();
    });

    // Categories: inline edit toggle
    document.querySelectorAll('.btn-edit-category').forEach(function(btn) {
        btn.addEventListener('click', function() {
            const item = this.closest('.category-item');
            item.querySelector('.category-display').classList.add('d-none');
            const form = item.querySelector('.category-edit-form');
            form.classList.remove('d-none');
            form.querySelector('input[name="category_name"]').focus();
        });
    });

    document.querySelectorAll('.btn-cancel-edit').forEach(function(btn) {
        btn.addEventListener('click', function() {
            const item = this.closest('.category-item');
            item.querySelector('.category-display').classList.remove('d-none');
            const form = item.querySelector('.category-edit-form');
            form.classList.add('d-none');
            // Reset input value
            const input = form.querySelector('input[name="category_name"]');
            input.value = item.querySelector('.category-display .font-weight-bold').textContent;
        });
    });

    // Cancel edit on Escape key
    document.querySelectorAll('.category-edit-form input[name="category_name"]').forEach(function(input) {
        input.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                this.closest('.category-item').querySelector('.btn-cancel-edit').click();
            }
        });
    });
</script>
@endpush