@extends('layouts.admin')

@section('title', 'Mis Sucursales')

@push('styles')
<style>
    /* Replica del diseño de la aplicación móvil */
    .mobile-header {
        background: #ffffff;
        border-radius: 0 0 32px 32px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        padding: 24px;
        position: relative;
        z-index: 10;
        margin-bottom: -16px;
    }

    .mobile-search-input {
        width: 100%;
        padding: 14px 14px 14px 44px;
        border-radius: 12px;
        border: none;
        background-color: transparent;
        font-size: 15px;
        color: #64748b;
    }
    .mobile-search-input:focus {
        outline: none;
    }
    
    .mobile-search-container {
        position: relative;
        border-bottom: 1px solid transparent;
        transition: all 0.3s ease;
    }
    .mobile-search-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #ef4444; /* Rojo característico */
    }

    /* Tabs */
    .tab-btn {
        padding: 10px 20px;
        border-radius: 14px;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #64748b;
        transition: all 0.3s ease;
        text-align: center;
        flex: 1;
    }
    .tab-btn.active {
        background-color: #ff0000;
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
    }
    
    /* Cards de sucursal */
    .branch-card {
        background: #ffffff;
        border-radius: 20px;
        padding: 16px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.04);
        margin-bottom: 20px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .branch-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.08);
    }
    
    .branch-img {
        width: 70px;
        height: 70px;
        object-fit: cover;
        border-radius: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .status-badge {
        padding: 4px 10px;
        border-radius: 8px;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .status-badge.activo {
        background-color: #ecfdf5;
        color: #10b981;
    }
    .status-badge.inactivo {
        background-color: #f1f5f9;
        color: #94a3b8;
    }

    .action-btn {
        padding: 10px;
        border-radius: 12px;
        border: 1px solid #f1f5f9;
        background: transparent;
        font-size: 13px;
        font-weight: 600;
        color: #64748b;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex: 1;
        transition: all 0.2s;
    }
    .action-btn:hover {
        background: #f8fafc;
        color: #334155;
    }
    .action-btn i {
        width: 16px;
        height: 16px;
    }
</style>
@endpush

@section('content')
<div class="min-h-screen bg-slate-50 pt-[120px] pb-10" style="padding-top: 140px;">
    
    <div class="max-w-xl mx-auto px-4 relative z-20">
        
        <!-- HEADER MÓVIL (Replica) -->
        <div class="mobile-header mb-8 mt-[-40px]">
            <div class="flex items-center gap-4 mb-2">
                <button class="w-10 h-10 rounded-full flex items-center justify-center bg-slate-50 hover:bg-slate-100 transition-colors" onclick="history.back()">
                    <i data-lucide="chevron-left" class="w-6 h-6 text-slate-800"></i>
                </button>
                <div class="flex items-center gap-3">
                    <i data-lucide="store" class="w-7 h-7 text-red-600"></i>
                    <div>
                        <h1 class="text-xl font-[900] text-slate-800 tracking-tight leading-none uppercase">Mis Sucursales</h1>
                        <p class="text-[11px] font-bold text-red-600 tracking-widest mt-1 uppercase">Gestión Operativa</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- SEARCH -->
        <div class="mobile-search-container mb-6 bg-white rounded-2xl shadow-sm px-2">
            <i data-lucide="search" class="w-5 h-5 mobile-search-icon"></i>
            <input type="text" id="searchInput" placeholder="Buscar sucursal..." class="mobile-search-input">
        </div>

        <!-- TABS -->
        <div class="flex items-center justify-between gap-2 mb-8" id="statusTabs">
            <button class="tab-btn active" data-filter="all">Todas</button>
            <button class="tab-btn" data-filter="active">Activas</button>
            <button class="tab-btn" data-filter="inactive">Inactivas</button>
        </div>

        <!-- BRANCHES LIST -->
        <div id="branchesContainer">
            @forelse($sucursales as $sucursal)
                <div class="branch-card" data-name="{{ strtolower($sucursal->nombre) }}" data-status="{{ $sucursal->activo ? 'active' : 'inactive' }}">
                    
                    <div class="flex gap-4 mb-4 relative">
                        <!-- Img -->
                        @php
                            $imgUrl = asset('images/default-branch.png');
                            if($sucursal->imagen_url && $sucursal->imagen_url !== 'null' && $sucursal->imagen_url !== '') {
                                $cleanPath = trim(str_replace('\\', '/', $sucursal->imagen_url));
                                if(str_starts_with($cleanPath, 'http')) {
                                    $imgUrl = $cleanPath;
                                } else {
                                    $imgUrl = url('/api/Security/uploads/' . ltrim($cleanPath, '/'));
                                }
                            }
                        @endphp
                        <img src="{{ $imgUrl }}" alt="{{ $sucursal->nombre }}" class="branch-img">
                        
                        <!-- Info -->
                        <div class="flex-1 pt-1">
                            <h3 class="font-[800] text-slate-800 text-lg leading-tight mb-1">{{ $sucursal->nombre }}</h3>
                            
                            <div class="flex items-center gap-1.5 text-slate-500 mb-2">
                                <i data-lucide="map-pin" class="w-3.5 h-3.5"></i>
                                <span class="text-xs font-medium">Ubicación ({{ $sucursal->latitud ?? 'Sin GPS' }})</span>
                            </div>
                            
                            <p class="text-sm font-[800] text-red-600">Ventas: S/ {{ number_format($sucursal->ventas_mes, 2, '.', '') }}</p>
                        </div>
                        
                        <!-- Badge -->
                        <div class="absolute right-0 top-1">
                            <span class="status-badge {{ $sucursal->activo ? 'activo' : 'inactivo' }}">
                                {{ $sucursal->activo ? 'Activo' : 'Inactivo' }}
                            </span>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="flex gap-3 pt-2 border-t border-slate-50">
                        <button class="action-btn" onclick="alert('Funcionalidad de Edición en progreso')">
                            <i data-lucide="pencil" class="text-slate-400"></i>
                            Editar
                        </button>
                        <button class="action-btn text-emerald-600" onclick="alert('Toggle Estado en progreso')">
                            @if($sucursal->activo)
                                <i data-lucide="toggle-right" class="text-emerald-500"></i>
                                Desactivar
                            @else
                                <i data-lucide="toggle-left" class="text-slate-400"></i>
                                Activar
                            @endif
                        </button>
                    </div>

                </div>
            @empty
                <div class="text-center py-10 bg-white rounded-2xl shadow-sm">
                    <div class="w-16 h-16 rounded-full bg-slate-50 flex items-center justify-center mx-auto mb-4">
                        <i data-lucide="store" class="w-8 h-8 text-slate-300"></i>
                    </div>
                    <h3 class="text-slate-500 font-bold">No se encontraron sucursales</h3>
                </div>
            @endforelse
        </div>
        
    </div>
</div>
@endsection

@push('scripts')
@vite('src/assets/js/admin/sucursales.js')
@endpush