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

@php
    // Usar SEO de IA si está habilitado y existe contenido, sino usar manual
    $metaTitle = ($branch->ai_seo_enabled && $branch->ai_meta_title)
        ? $branch->ai_meta_title
        : ($branch->meta_title ?? $branch->name . ' | ' . getSiteName());

    $metaDescription = ($branch->ai_seo_enabled && $branch->ai_meta_description)
        ? $branch->ai_meta_description
        : ($branch->meta_description ?? 'Visita nuestra sucursal ' . $branch->name . ' en ' . $branch->address . ', ' . $branch->city);

    $metaKeywords = ($branch->ai_seo_enabled && $branch->ai_keywords)
        ? $branch->ai_keywords
        : ($branch->meta_keywords ?? 'sucursal ' . $branch->city . ', ' . $branch->name . ', tienda ' . $branch->city);

    // Obtener colores del theme
    $settings = \App\Models\SiteSetting::first();
    $primaryColor = $settings->color_primary ?? '#80b435';
    $secondaryColor = $settings->color_secondary ?? '#6fa02e';
@endphp

@section('title', $metaTitle)
@section('meta_description', $metaDescription)
@section('meta_keywords', $metaKeywords)

@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"><a class="white-text" href="{{ route('front.sucursales') }}">Sucursales</a></li>
                <li class="breadcrumb-item">{{ $branch->name }}</li>
            </ol>
        </div>
    </div>
</section>

<section class="section-10 pb-5">
    <div class="container">
        <div class="row">
            {{-- Información Principal --}}
            <div class="col-lg-8">
                <div class="card shadow-sm mb-4 border-0">
                    @if($branch->image)
                        <img src="{{ asset('uploads/branches/' . $branch->image) }}"
                             class="card-img-top"
                             alt="{{ $branch->name }}"
                             style="max-height: 400px; object-fit: cover;">
                    @endif

                    <div class="card-body">
                        <h2 class="card-title">{{ $branch->name }}</h2>
                        <p class="text-muted mb-3">
                            <i class="fa fa-map-marker"></i> {{ $branch->address }}, {{ $branch->city }}
                        </p>

                        {{-- Estado actual --}}
                        @php
                            $isOpen = $branch->isOpenNow();
                            $today = strtolower(date('l'));
                            $todayHours = $branch->business_hours[$today] ?? null;
                        @endphp
                        <div class="alert {{ $isOpen ? 'alert-success' : 'alert-danger' }} d-flex align-items-center" role="alert">
                            <i class="fa fa-clock-o fa-2x me-3"></i>
                            <div>
                                @if($isOpen)
                                    <strong>¡Estamos abiertos!</strong>
                                    @if($todayHours)
                                        @php
                                            $currentTime = date('H:i');
                                            // Determine which shift we're in to show correct close time
                                            $closeTime = $todayHours['close'] ?? null;
                                            if (($branch->schedule_type ?? '') == 'split' && !empty($todayHours['open2']) && !empty($todayHours['close2']) && $currentTime >= $todayHours['open2']) {
                                                $closeTime = $todayHours['close2'];
                                            }
                                        @endphp
                                        @if($closeTime)
                                            <br>Cerramos a las {{ $closeTime }}
                                        @endif
                                    @endif
                                @else
                                    <strong>Actualmente cerrado</strong>
                                    <br>Consulta nuestros horarios de atención
                                @endif
                            </div>
                        </div>

                        {{-- Descripción --}}
                        @if($branch->description)
                            <div class="mb-4">
                                <h4><i class="fa fa-info-circle text-primary"></i> Información</h4>
                                <p>{{ $branch->description }}</p>
                            </div>
                        @endif

                        {{-- Horarios de Atención --}}
                        @if($branch->business_hours)
                            <div class="mb-4">
                                <h4><i class="fa fa-clock-o text-primary"></i> Horarios de Atención</h4>
                                <table class="table table-sm">
                                    <tbody>
                                        @php
                                            $days = [
                                                'monday' => 'Lunes',
                                                'tuesday' => 'Martes',
                                                'wednesday' => 'Miércoles',
                                                'thursday' => 'Jueves',
                                                'friday' => 'Viernes',
                                                'saturday' => 'Sábado',
                                                'sunday' => 'Domingo'
                                            ];
                                            $today = strtolower(date('l'));
                                        @endphp
                                        @foreach($days as $key => $day)
                                            @php
                                                $hours = $branch->business_hours[$key] ?? null;
                                                $isToday = $key === $today;
                                            @endphp
                                            <tr class="{{ $isToday ? 'table-active fw-bold' : '' }}">
                                                <td width="40%">
                                                    {{ $day }}
                                                    @if($isToday)
                                                        <span class="badge bg-primary ms-2">HOY</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($hours && !empty($hours['open']) && !empty($hours['close']))
                                                        <i class="fa fa-check-circle text-success"></i>
                                                        {{ $hours['open'] }} - {{ $hours['close'] }}
                                                        @if(($branch->schedule_type ?? '') == 'split' && !empty($hours['open2']) && !empty($hours['close2']))
                                                            y {{ $hours['open2'] }} - {{ $hours['close2'] }}
                                                        @endif
                                                    @else
                                                        <i class="fa fa-times-circle text-danger"></i>
                                                        Cerrado
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @endif

                        {{-- Galería adicional --}}
                        @if($branch->gallery && count($branch->gallery) > 0)
                            <div class="mb-4">
                                <h4><i class="fa fa-picture-o text-primary"></i> Galería</h4>
                                <div class="row g-2">
                                    @foreach($branch->gallery as $image)
                                        <div class="col-md-4">
                                            <img src="{{ asset('uploads/branches/gallery/' . $image) }}"
                                                 class="img-fluid rounded"
                                                 alt="Galería {{ $branch->name }}"
                                                 style="height: 250px; width: 100%; object-fit: cover;">
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Sidebar con información de contacto --}}
            <div class="col-lg-4">
                {{-- Tarjeta de Contacto --}}
                <div class="card shadow-sm mb-4">
                    <div class="card-header" style="background-color: #ff0000;">
                        <h5 class="mb-0" style="color: #ffffff !important;">
                            <i class="fa fa-address-card" style="color: #ffffff !important;"></i>
                            Información de Contacto
                        </h5>
                    </div>
                    <div class="card-body">
                        {{-- Dirección --}}
                        <div class="contact-item mb-3">
                            <div class="contact-icon-circle bg-primary">
                                <i class="fa fa-map-marker text-white"></i>
                            </div>
                            <div class="contact-info">
                                {{ $branch->address }}, {{ $branch->city }}{{ $branch->state ? ', ' . $branch->state : '' }}
                                <br>
                                <small class="text-muted">
                                    @if($branch->postal_code)CP: {{ $branch->postal_code }}@endif
                                    @if($branch->postal_code && $branch->country) - @endif
                                    @if($branch->country){{ $branch->country }}@endif
                                </small>
                            </div>
                        </div>

                        {{-- Teléfono - OCULTO POR PEDIDO DEL CLIENTE
                        @if($branch->phone)
                            <div class="contact-item mb-3">
                                <div class="contact-icon-circle bg-info">
                                    <i class="fa fa-phone text-white"></i>
                                </div>
                                <div class="contact-info">
                                    <a href="tel:{{ $branch->phone }}" class="text-decoration-none text-dark">
                                        {{ $branch->phone }}
                                    </a>
                                </div>
                            </div>
                        @endif

                        @if($branch->phone_secondary)
                            <div class="contact-item mb-3">
                                <div class="contact-icon-circle bg-secondary">
                                    <i class="fa fa-phone text-white"></i>
                                </div>
                                <div class="contact-info">
                                    <a href="tel:{{ $branch->phone_secondary }}" class="text-decoration-none text-dark">
                                        {{ $branch->phone_secondary }}
                                    </a>
                                </div>
                            </div>
                        @endif
                        --}}

                        {{-- WhatsApp --}}
                        @if($branch->whatsapp)
                            <div class="contact-item mb-3">
                                <div class="contact-icon-circle bg-success">
                                    <i class="fa fa-whatsapp text-white"></i>
                                </div>
                                <div class="contact-info">
                                    <a href="{{ $branch->whatsapp_link }}"
                                       target="_blank"
                                       class="text-decoration-none text-success fw-bold">
                                        {{ $branch->whatsapp }}
                                    </a>
                                    <small class="text-muted ms-2">Solo texto</small>
                                </div>
                            </div>
                        @endif

                        {{-- Email --}}
                        @if($branch->email)
                            <div class="contact-item">
                                <div class="contact-icon-circle bg-danger">
                                    <i class="fa fa-envelope text-white"></i>
                                </div>
                                <div class="contact-info">
                                    <a href="mailto:{{ $branch->email }}" class="text-decoration-none text-dark">
                                        {{ $branch->email }}
                                    </a>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                {{-- Mapa --}}
                <div class="card shadow-sm mb-4">
                    <div class="card-header" style="background-color: #ff0000;">
                        <h5 class="mb-0" style="color: #ffffff !important;">
                            <i class="fa fa-map-o" style="color: #ffffff !important;"></i>
                            Ubicación
                        </h5>
                    </div>
                    <div class="card-body p-0">
                        @if($branch->full_address)
                            <iframe
                                src="https://maps.google.com/maps?q={{ urlencode($branch->full_address) }}&z=15&output=embed"
                                width="100%"
                                height="300"
                                style="border:0;"
                                allowfullscreen=""
                                loading="lazy">
                            </iframe>
                        @endif
                        <div class="p-3">
                            <a href="{{ $branch->maps_link }}"
                               target="_blank"
                               class="btn btn-sm w-100"
                               style="background-color: #ff0000 !important; color: #ffffff !important; border-color: #ff0000 !important; text-decoration: none !important;">
                                <i class="fa fa-location-arrow" style="color: #ffffff !important;"></i>
                                <span style="color: #ffffff !important;">Ver en Google Maps</span>
                            </a>
                        </div>
                    </div>
                </div>

                {{-- Manager Info --}}
                @if($branch->manager_name)
                    <div class="card shadow-sm mb-4">
                        <div class="card-body">
                            <h6><i class="fa fa-user text-primary"></i> Gerente</h6>
                            <p class="mb-0">{{ $branch->manager_name }}</p>
                            @if($branch->manager_phone)
                                <small class="text-muted">Tel: {{ $branch->manager_phone }}</small>
                            @endif
                        </div>
                    </div>
                @endif
            </div>
        </div>
        
        {{-- Otras Sucursales --}}
        @if($otherBranches->isNotEmpty())
            <div class="row mt-5">
                <div class="col-12">
                    <h3 class="mb-4">Otras Sucursales</h3>
                    <div class="row">
                        @foreach($otherBranches as $other)
                            <div class="col-md-4 mb-4">
                                <a href="{{ route('front.branch.show', $other->id) }}" class="text-decoration-none">
                                    <div class="card h-100 branch-card">
                                        @if($other->image)
                                            <img src="{{ asset('uploads/branches/' . $other->image) }}"
                                                 class="card-img-top"
                                                 alt="{{ $other->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="fa fa-building fa-3x text-muted"></i>
                                            </div>
                                        @endif
                                        <div class="card-body">
                                            <h5 class="card-title text-dark mb-2">{{ $other->name }}</h5>
                                            <p class="card-text mb-0">
                                                <small class="text-muted">
                                                    <i class="fa fa-map-marker"></i> {{ $other->address }}
                                                </small>
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
    </div>
</section>


<style>
.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.contact-icon-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.contact-info {
    flex: 1;
    line-height: 1.6;
}

.branch-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.branch-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.btn-maps-custom {
    background-color: #ff0000 !important;
    border-color: #ff0000 !important;
    color: #ffffff !important;
}

.btn-maps-custom:hover,
.btn-maps-custom:focus,
.btn-maps-custom:active {
    background-color: #cc0000 !important;
    border-color: #cc0000 !important;
    color: #ffffff !important;
}
</style>
@endsection