@extends('layouts.app')

@section('title', 'Editar Sede — TI Manager')

@section('content')
<div class="animate-fadeIn">
    {{-- Encabezado --}}
    <div class="page-header">
        <div class="page-header-top">
            <div class="d-flex align-center gap-md">
                <a href="{{ route('companies.branches.index', $company) }}" class="btn btn-ghost btn-icon" title="Volver">
                    <i class="ph ph-arrow-left"></i>
                </a>
                <h1 class="page-title">Editar Sede</h1>
            </div>
        </div>
    </div>

    <form method="POST" action="{{ route('companies.branches.update', [$company, $branch]) }}">
        @csrf
        @method('PUT')

        {{-- Información de la Sede --}}
        <div class="card mb-lg">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph ph-info" style="color: var(--secondary);"></i>
                    Información de la Sede
                </h3>
            </div>

            <div class="form-group">
                <label class="form-label" for="name">Nombre de la Sede <span class="required">*</span></label>
                <input type="text" id="name" name="name" class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}"
                       value="{{ old('name', $branch->name) }}" placeholder="Ej: Sede Principal, Bodega Norte" required>
                @error('name') <span class="form-error">{{ $message }}</span> @enderror
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-toggle">
                        <input type="hidden" name="is_main" value="0">
                        <input type="checkbox" name="is_main" value="1" {{ old('is_main', $branch->is_main) ? 'checked' : '' }}>
                        <span class="toggle-slider"></span>
                        <span style="color: var(--text-secondary); font-size: 0.9rem;">Es sede principal</span>
                    </label>
                </div>
                <div class="form-group">
                    <label class="form-toggle">
                        <input type="hidden" name="is_active" value="0">
                        <input type="checkbox" name="is_active" value="1" {{ old('is_active', $branch->is_active) ? 'checked' : '' }}>
                        <span class="toggle-slider"></span>
                        <span style="color: var(--text-secondary); font-size: 0.9rem;">Sede activa</span>
                    </label>
                </div>
            </div>
        </div>

        {{-- Ubicación --}}
        <div class="card mb-lg">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph ph-map-pin" style="color: var(--primary);"></i>
                    Ubicación
                </h3>
            </div>

            <div class="form-group">
                <label class="form-label" for="address">Dirección</label>
                <textarea id="address" name="address" class="form-control" rows="2"
                          placeholder="Ej: Calle 100 # 15-20, Bodega 5">{{ old('address', $branch->address) }}</textarea>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="city">Ciudad</label>
                    <input type="text" id="city" name="city" class="form-control"
                           value="{{ old('city', $branch->city) }}" placeholder="Ej: Bogotá">
                </div>
                <div class="form-group">
                    <label class="form-label" for="department">Departamento</label>
                    <select id="department" name="department" class="form-control">
                        <option value="">Seleccionar...</option>
                        @foreach(['Amazonas','Antioquia','Arauca','Atlántico','Bolívar','Boyacá','Caldas','Caquetá','Casanare','Cauca','Cesar','Chocó','Córdoba','Cundinamarca','Guainía','Guaviare','Huila','La Guajira','Magdalena','Meta','Nariño','Norte de Santander','Putumayo','Quindío','Risaralda','San Andrés','Santander','Sucre','Tolima','Valle del Cauca','Vaupés','Vichada'] as $dept)
                            <option value="{{ $dept }}" {{ old('department', $branch->department) == $dept ? 'selected' : '' }}>{{ $dept }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="form-group">
                <button type="button" class="btn btn-outline btn-sm" id="btn-gps" onclick="obtenerUbicacionGPS()">
                    <i class="ph ph-crosshair"></i> Obtener mi ubicación GPS
                </button>
                <span id="gps-status" class="text-sm text-muted" style="margin-left: var(--space-sm);"></span>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="latitude">Latitud</label>
                    <input type="number" id="latitude" name="latitude" class="form-control"
                           value="{{ old('latitude', $branch->latitude) }}" step="0.0000001" placeholder="Ej: 4.6097100">
                </div>
                <div class="form-group">
                    <label class="form-label" for="longitude">Longitud</label>
                    <input type="number" id="longitude" name="longitude" class="form-control"
                           value="{{ old('longitude', $branch->longitude) }}" step="0.0000001" placeholder="Ej: -74.0817500">
                </div>
            </div>
        </div>

        {{-- Contacto --}}
        <div class="card mb-lg">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph ph-phone" style="color: var(--secondary);"></i>
                    Contacto
                </h3>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="phone">Teléfono</label>
                    <input type="tel" id="phone" name="phone" class="form-control"
                           value="{{ old('phone', $branch->phone) }}" placeholder="Ej: 3001234567">
                </div>
                <div class="form-group">
                    <label class="form-label" for="contact_person">Persona de contacto</label>
                    <input type="text" id="contact_person" name="contact_person" class="form-control"
                           value="{{ old('contact_person', $branch->contact_person) }}" placeholder="Ej: Juan Pérez">
                </div>
            </div>
        </div>

        {{-- Notas --}}
        <div class="card mb-lg">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph ph-note" style="color: var(--primary);"></i>
                    Notas
                </h3>
            </div>

            <div class="form-group">
                <label class="form-label" for="notes">Notas adicionales</label>
                <textarea id="notes" name="notes" class="form-control" rows="3"
                          placeholder="Observaciones, horarios de acceso, etc.">{{ old('notes', $branch->notes) }}</textarea>
            </div>
        </div>

        {{-- Botones --}}
        <div class="d-flex gap-md" style="justify-content: flex-end;">
            <a href="{{ route('companies.branches.index', $company) }}" class="btn btn-outline">
                <i class="ph ph-x"></i> Cancelar
            </a>
            <button type="submit" class="btn btn-primary">
                <i class="ph ph-check"></i> Actualizar Sede
            </button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    function obtenerUbicacionGPS() {
        const statusEl = document.getElementById('gps-status');
        const btnGps = document.getElementById('btn-gps');

        if (!navigator.geolocation) {
            statusEl.textContent = 'Tu navegador no soporta geolocalización.';
            statusEl.style.color = 'var(--danger)';
            return;
        }

        btnGps.disabled = true;
        statusEl.textContent = 'Obteniendo ubicación...';
        statusEl.style.color = 'var(--warning)';

        navigator.geolocation.getCurrentPosition(
            function(position) {
                document.getElementById('latitude').value = position.coords.latitude.toFixed(7);
                document.getElementById('longitude').value = position.coords.longitude.toFixed(7);
                statusEl.textContent = '✓ Ubicación obtenida correctamente';
                statusEl.style.color = 'var(--success)';
                btnGps.disabled = false;
            },
            function(error) {
                let msg = 'Error al obtener ubicación.';
                switch (error.code) {
                    case error.PERMISSION_DENIED:
                        msg = 'Permiso de ubicación denegado.';
                        break;
                    case error.POSITION_UNAVAILABLE:
                        msg = 'Ubicación no disponible.';
                        break;
                    case error.TIMEOUT:
                        msg = 'Tiempo de espera agotado.';
                        break;
                }
                statusEl.textContent = msg;
                statusEl.style.color = 'var(--danger)';
                btnGps.disabled = false;
            },
            { enableHighAccuracy: true, timeout: 10000 }
        );
    }
</script>
@endpush