@extends('site.master')

@section('page-title', $branch->title)
@section('page-description', $branch->srtsmry)
@section('page-image', asset($branch->image ?? $branch->image))
@section('main-content')
    <section class="af-hdr">
        <div class="header-decoration position-absolute">
            <img src="{{ asset('site/img/shape_nate.svg') }}" alt="">
        </div>
        <div class="container position-relative" style="z-index: 9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="text-uppercase text-white fnt-fam-ser fs-2 fwc-700">
                        {{ $branch->title }}
                    </h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="list-inline-item">
                                <a class="text-white" href="{{ URL::to('/') }}">@lang('language.home')</a>
                            </li>
                            <li class="list-inline-item">
                                <a class="text-white" href="{{ route('branch.detail') }}">@lang('language.ourbranch')</a>
                            </li>
                            <li class="list-inline-item current text-danger">
                                {{ $branch->title }}
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <div class="decoration-pattern pattern-one position-absolute">
            <img src="{{ asset('site/img/breadcrumb_shape_pattern_1.svg') }}" alt="">
        </div>
        <div class="decoration-pattern pattern-two position-absolute">
            <img src="{{ asset('site/img/breadcrumb_shape_pattern_2.svg') }}" alt="">
        </div>
    </section>

    <!-- Map Section -->
    @if($branch->latitude && $branch->longitude)
    <section class="bg-light pt-4">
        <div class="container">
            <div class="map-section bg-success bg-opacity-10">
                <div id="map" style="width:100%; height: 400px;"></div>
            </div>
        </div>
    </section>
    @endif

    <!-- Branch Details Section -->
    <section class="bg-light py-5">
        <div class="container">
            <div class="row">
                <!-- Left Column - Branch Info -->
                <div class="col-lg-8">
                    <div class="bg-white shadow rounded-2 p-4 mb-4">
                        <h2 class="text-custom-blue-dark2 fw-bold fs-3 mb-3">{{ $branch->title }}</h2>
                        
                        @if($branch->image)
                        <div class="mb-4">
                            <img src="{{ asset('uploads/branches/' . $branch->image) }}" 
                                 alt="{{ $branch->title }}" 
                                 class="img-fluid rounded-2 w-100">
                        </div>
                        @endif

                        @if($branch->description)
                        <div class="mb-4">
                            <h3 class="text-custom-blue-dark2 fw-bold fs-5 mb-3">
                                @lang('language.about_branch')
                            </h3>
                            <div class="text-muted">
                                {!! $branch->description !!}
                            </div>
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Right Column - Contact Info -->
                <div class="col-lg-4">
                    <div class="bg-white shadow rounded-2 p-4 ">
                        <h3 class="text-custom-blue-dark2 fw-bold fs-5 mb-4">
                            @lang('language.contact_information')
                        </h3>

                        <ul class="list-unstyled">
                            @if ($branch->branchmanager || $branch->branchincharge)
                                <li class="mb-3">
                                    <div class="d-flex">
                                        <span class="me-3 text-custom-blue-dark2">
                                            <i class="bi-person fs-5"></i>
                                        </span>
                                        <div class="flex-grow-1">
                                            <span class="d-block fw-bold fs-7 text-custom-blue-dark2">
                                                {{ $branch->branchmanager ? 'Branch Manager' : 'Branch Incharge' }}
                                            </span>
                                            <span class="text-muted">
                                                {{ $branch->branchmanager ? $branch->branchmanager : $branch->branchincharge }}
                                            </span>
                                        </div>
                                    </div>
                                </li>
                            @endif

                            <li class="mb-3">
                                <div class="d-flex">
                                    <span class="me-3 text-custom-blue-dark2">
                                        <i class="bi-map fs-5"></i>
                                    </span>
                                    <div class="flex-grow-1">
                                        <span class="d-block fw-bold fs-7 text-custom-blue-dark2">Address</span>
                                        <span class="text-muted">
                                            {{ $branch->tole }},
                                            {{ session('localeSession') == 'en' ? $branch->getmunicipality->title : $branch->getmunicipality->title_np }},
                                            {{ session('localeSession') == 'en' ? $branch->getdistrict->title_en : $branch->getdistrict->title_np }},
                                            {{ session('localeSession') == 'en' ? $branch->getprovince->title_en : $branch->getprovince->title_np }}
                                        </span>
                                    </div>
                                </div>
                            </li>

                            @if ($branch->phonenumberbranch)
                                <li class="mb-3">
                                    <div class="d-flex">
                                        <span class="me-3 text-custom-blue-dark2">
                                            <i class="bi-phone fs-5"></i>
                                        </span>
                                        <div class="flex-grow-1">
                                            <span class="d-block fw-bold fs-7 text-custom-blue-dark2">Phone</span>
                                            @php
                                                $phoneNumbers = explode(',', $branch->phonenumberbranch);
                                            @endphp
                                            @foreach ($phoneNumbers as $phoneNumber)
                                                <a class="text-muted text-decoration-none d-block"
                                                   href="tel:{{ trim($phoneNumber) }}">
                                                    {{ numEnToNp(trim($phoneNumber)) }}
                                                </a>
                                            @endforeach
                                        </div>
                                    </div>
                                </li>
                            @endif

                            @if ($branch->branchemail)
                                <li class="mb-3">
                                    <div class="d-flex">
                                        <span class="me-3 text-custom-blue-dark2">
                                            <i class="bi-envelope fs-5"></i>
                                        </span>
                                        <div class="flex-grow-1">
                                            <span class="d-block fw-bold fs-7 text-custom-blue-dark2">Email</span>
                                            <a href="mailto:{{ $branch->branchemail }}"
                                               class="text-muted text-decoration-none d-block text-break">
                                                {{ $branch->branchemail }}
                                            </a>
                                        </div>
                                    </div>
                                </li>
                            @endif

                            @if ($branch->fax_no)
                                <li class="mb-3">
                                    <div class="d-flex">
                                        <span class="me-3 text-custom-blue-dark2">
                                            <i class="bi-printer fs-5"></i>
                                        </span>
                                        <div class="flex-grow-1">
                                            <span class="d-block fw-bold fs-7 text-custom-blue-dark2">Fax</span>
                                            <span class="text-muted">{{ numEnToNp($branch->fax_no) }}</span>
                                        </div>
                                    </div>
                                </li>
                            @endif
                        </ul>

                        @if($branch->latitude && $branch->longitude)
                        <div class="mt-4">
                            <a href="https://www.google.com/maps?q={{ $branch->latitude }},{{ $branch->longitude }}" 
                               target="_blank"
                               class="btn btn-danger w-100">
                                <i class="bi-geo-alt me-2"></i> Get Directions
                            </a>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('script')
    @if($branch->latitude && $branch->longitude)
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBteR3fNtDSDFvG5bMb70mQf0WtKSYsHuo&callback=initMap">
    </script>
    <script>
        function initMap() {
            const branchLocation = {
                lat: {{ $branch->latitude }},
                lng: {{ $branch->longitude }}
            };

            const map = new google.maps.Map(document.getElementById('map'), {
                center: branchLocation,
                zoom: 15,
            });

            const marker = new google.maps.Marker({
                position: branchLocation,
                map: map,
                title: '{{ $branch->title }}',
                icon: '{{ asset('site/img/micro-icon.png') }}',
            });

            const infowindow = new google.maps.InfoWindow({
                content: `
                    <div>
                        <h3 class="text-primary fs-6 fw-bold">{{ $branch->title }}</h3>
                        <p class="mb-0"><strong>Address:</strong> {{ strip_tags($branch->description) }}</p>
                        @if($branch->branchemail)
                        <p class="mb-0"><strong>Email:</strong> {{ $branch->branchemail }}</p>
                        @endif
                        @if($branch->phonenumberbranch)
                        <p class="mb-0"><strong>Phone:</strong> {{ $branch->phonenumberbranch }}</p>
                        @endif
                    </div>
                `
            });

            marker.addListener('click', () => {
                infowindow.open(map, marker);
            });
        }
    </script>
    @endif
@endpush