@extends(theme_view('layouts.app'))

@section('content')
<section class="section-5 pt-3 pb-3 mb-3 bg-white">
    <div class="container">
        <div class="light-font">
            <ol class="breadcrumb primary-color mb-0">
                <li class="breadcrumb-item"><a class="white-text" href="{{ route('front.home') }}">Inicio</a></li>
                <li class="breadcrumb-item">Sucursales</li>
            </ol>
        </div>
    </div>
</section>

<section class="section-10">
    <div class="container">
        <div class="section-title mt-5">
            <h2>Nuestras Sucursales</h2>
            <p class="lead">Encuentra la sucursal más cercana a ti</p>
        </div>   
    </div>
</section>

<section class="pb-5">
    <div class="container">
        @if($branches->isEmpty())
            <div class="alert alert-info text-center">
                <i class="fas fa-info-circle fa-2x mb-3"></i>
                <h4>No hay sucursales disponibles en este momento</h4>
                <p>Por favor, contáctanos para más información.</p>
                <a href="{{ route('front.contact') }}" class="btn btn-primary mt-3">
                    <i class="fas fa-envelope"></i> Contactar
                </a>
            </div>
        @else
            {{-- Filtros por tipo --}}
            @if($branchesByType->count() > 1)
            <div class="mb-4">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-primary active" onclick="filterBranches('all')">
                        Todas ({{ $branches->count() }})
                    </button>
                    @foreach($branchesByType as $type => $typeBranches)
                        <button type="button" class="btn btn-outline-primary" onclick="filterBranches('{{ $type }}')">
                            @switch($type)
                                @case('store')
                                    <i class="fas fa-store"></i> Tiendas
                                    @break
                                @case('warehouse')
                                    <i class="fas fa-warehouse"></i> Depósitos
                                    @break
                                @case('office')
                                    <i class="fas fa-building"></i> Oficinas
                                    @break
                                @case('pickup_point')
                                    <i class="fas fa-map-pin"></i> Puntos de Retiro
                                    @break
                                @default
                                    {{ ucfirst($type) }}
                            @endswitch
                            ({{ $typeBranches->count() }})
                        </button>
                    @endforeach
                </div>
            </div>
            @endif
            
            {{-- Lista de sucursales --}}
            <div class="row" id="branches-list">
                @foreach($branches as $branch)
                <div class="col-md-6 col-lg-4 mb-4 branch-card" data-type="{{ $branch->type }}">
                    <div class="card h-100 shadow-sm">
                        @if($branch->is_main)
                            <div class="ribbon-wrapper">
                                <div class="ribbon bg-warning text-white">
                                    <i class="fas fa-star"></i> Principal
                                </div>
                            </div>
                        @endif
                        
                        @if($branch->image)
                            <img src="{{ asset('uploads/branches/' . $branch->image) }}" 
                                 class="card-img-top" 
                                 alt="{{ $branch->name }}"
                                 style="height: 200px; object-fit: cover;">
                        @else
                            <div class="card-img-top bg-light d-flex align-items-center justify-content-center" 
                                 style="height: 200px;">
                                <i class="fas fa-map-marker-alt fa-4x text-muted"></i>
                            </div>
                        @endif
                        
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h5 class="card-title mb-0">{{ $branch->name }}</h5>
                                @php
                                    $typeIcons = [
                                        'store' => 'fas fa-store text-primary',
                                        'warehouse' => 'fas fa-warehouse text-warning',
                                        'office' => 'fas fa-building text-info',
                                        'pickup_point' => 'fas fa-map-pin text-success'
                                    ];
                                @endphp
                                <i class="{{ $typeIcons[$branch->type] ?? 'fas fa-location-dot' }}" 
                                   title="{{ ucfirst(str_replace('_', ' ', $branch->type)) }}"></i>
                            </div>
                            
                            {{-- Estado Abierto/Cerrado --}}
                            <div class="mb-3">
                                @if($branch->isOpenNow())
                                    <span class="badge bg-success">
                                        <i class="fas fa-clock"></i> Abierto ahora
                                    </span>
                                @else
                                    <span class="badge bg-danger">
                                        <i class="fas fa-clock"></i> Cerrado
                                    </span>
                                @endif
                            </div>
                            
                            {{-- Dirección --}}
                            <p class="card-text">
                                <i class="fas fa-map-marker-alt text-muted me-2"></i>
                                <small>
                                    {{ $branch->address }}<br>
                                    {{ $branch->city }}{{ $branch->state ? ', ' . $branch->state : '' }}
                                </small>
                            </p>
                            
                            {{-- Teléfono --}}
                            @if($branch->phone)
                            <p class="card-text">
                                <i class="fas fa-phone text-muted me-2"></i>
                                <a href="tel:{{ $branch->phone }}" class="text-decoration-none">
                                    {{ $branch->phone }}
                                </a>
                            </p>
                            @endif
                            
                            {{-- WhatsApp --}}
                            @if($branch->whatsapp)
                            <p class="card-text">
                                <i class="fab fa-whatsapp text-success me-2"></i>
                                <a href="{{ $branch->whatsapp_link }}" 
                                   target="_blank" 
                                   class="text-decoration-none">
                                    WhatsApp
                                </a>
                            </p>
                            @endif
                            
                            {{-- Horarios resumidos --}}
                            @if($branch->business_hours)
                                <div class="small text-muted mb-3">
                                    <i class="fas fa-clock me-2"></i>
                                    @php
                                        $today = strtolower(date('l'));
                                        $todayHours = $branch->business_hours[$today] ?? null;
                                    @endphp
                                    @if($todayHours && !empty($todayHours['open']) && !empty($todayHours['close']))
                                        Hoy: {{ $todayHours['open'] }} - {{ $todayHours['close'] }}
                                    @else
                                        Hoy: Cerrado
                                    @endif
                                </div>
                            @endif
                            
                            {{-- Servicios (iconos) --}}
                            @if($branch->services && count($branch->services) > 0)
                                <div class="mb-3">
                                    @foreach(array_slice($branch->services, 0, 3) as $service)
                                        <span class="badge bg-light text-dark me-1 mb-1">
                                            <i class="fas fa-check-circle text-success"></i> {{ $service }}
                                        </span>
                                    @endforeach
                                    @if(count($branch->services) > 3)
                                        <span class="badge bg-light text-dark">
                                            +{{ count($branch->services) - 3 }} más
                                        </span>
                                    @endif
                                </div>
                            @endif
                        </div>
                        
                        <div class="card-footer bg-transparent">
                            <div class="d-grid gap-2">
                                <a href="{{ $branch->maps_link }}" 
                                   target="_blank" 
                                   class="btn btn-outline-primary btn-sm">
                                    <i class="fas fa-map"></i> Ver en Mapa
                                </a>
                                <a href="{{ route('front.branch.show', $branch->id) }}" 
                                   class="btn btn-primary btn-sm">
                                    <i class="fas fa-info-circle"></i> Más Información
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        @endif
    </div>
</section>

<style>
.ribbon-wrapper {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
}

.ribbon {
    font-size: 12px;
    position: absolute;
    text-align: center;
    top: 19px;
    right: -21px;
    transform: rotate(45deg);
    width: 90px;
}

.branch-card {
    transition: all 0.3s ease;
}

.branch-card.hidden {
    display: none;
}

.card {
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-5px);
}
</style>
@endsection

@section('customJs')
<script>
function filterBranches(type) {
    // Actualizar botones activos
    $('.btn-group .btn').removeClass('active');
    event.target.classList.add('active');
    
    // Mostrar/ocultar tarjetas
    if (type === 'all') {
        $('.branch-card').removeClass('hidden').fadeIn();
    } else {
        $('.branch-card').each(function() {
            if ($(this).data('type') === type) {
                $(this).removeClass('hidden').fadeIn();
            } else {
                $(this).addClass('hidden').fadeOut();
            }
        });
    }
}
</script>
@endsection