{{-- Modern Branch Details View --}}
<div class="branch-detail-container">
    <!-- Modern Header -->
    <div class="branch-detail-header">
        <div class="header-content">
            <!-- Breadcrumb -->
            <nav class="breadcrumb-nav">
                <a href="{{ route('public.branches.index') }}" class="breadcrumb-link">
                    <i class="fas fa-home"></i>
                    {{ trans('plugins/branches::branches.our_branches') }}
                </a>
                <span class="breadcrumb-separator">/</span>
                <a href="{{ route('public.branches.country', $branch->country->code) }}" class="breadcrumb-link">
                    @if($branch->country->flag_image)
                        <img src="{{ $branch->country->flag_image_url }}" 
                             alt="{{ $branch->country->name }}" 
                             class="breadcrumb-flag">
                    @endif
                    {{ $branch->country->name }}
                </a>
                <span class="breadcrumb-separator">/</span>
                <span class="breadcrumb-current">{{ $branch->name }}</span>
            </nav>

            <!-- Main Title -->
            <div class="title-section">
                <h1 class="page-title">{{ $branch->name }}</h1>
                <p class="page-subtitle">{{ $branch->location ?: $branch->country->name }}</p>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="main-content">
        <div class="content-grid">
            <!-- Branch Info Card -->
            <div class="info-card">
                <div class="card-header">
                    <h2 class="card-title">{{ trans('plugins/branches::branches.contact_info') }}</h2>
                </div>
                <div class="card-content">
                    @if($branch->location)
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div class="info-content">
                                <span class="info-label">{{ trans('plugins/branches::branches.location') }}</span>
                                <span class="info-value">{{ $branch->location }}</span>
                            </div>
                        </div>
                    @endif

                    @if($branch->manager_name)
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-user-tie"></i>
                            </div>
                            <div class="info-content">
                                <span class="info-label">{{ trans('plugins/branches::branches.manager') }}</span>
                                <span class="info-value">{{ $branch->manager_name }}</span>
                            </div>
                        </div>
                    @endif

                    @if($branch->email)
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div class="info-content">
                                <span class="info-label">{{ trans('plugins/branches::branches.email') }}</span>
                                <a href="mailto:{{ $branch->email }}" class="info-value info-link">{{ $branch->email }}</a>
                            </div>
                        </div>
                    @endif

                    @if($branch->phone)
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div class="info-content">
                                <span class="info-label">{{ trans('plugins/branches::branches.phone') }}</span>
                                <a href="tel:{{ $branch->phone }}" class="info-value info-link">{{ $branch->phone }}</a>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Actions Card -->
            <div class="actions-card">
                <div class="card-header">
                    <h2 class="card-title">Quick Actions</h2>
                </div>
                <div class="card-content">
                    <div class="action-buttons">
                        @if($branch->lat && $branch->lng)
                            <button class="action-btn primary-btn" 
                                    data-lat="{{ $branch->lat }}" 
                                    data-lng="{{ $branch->lng }}" 
                                    data-name="{{ $branch->name }}">
                                <i class="fas fa-map"></i>
                                {{ trans('plugins/branches::branches.view_on_map') }}
                            </button>
                            
                            <a href="https://www.google.com/maps/dir/?api=1&destination={{ $branch->lat }},{{ $branch->lng }}" 
                               target="_blank" 
                               class="action-btn secondary-btn">
                                <i class="fas fa-route"></i>
                                {{ trans('plugins/branches::branches.get_directions') }}
                            </a>
                        @endif

                        @if($branch->phone)
                            <a href="tel:{{ $branch->phone }}" class="action-btn success-btn">
                                <i class="fas fa-phone"></i>
                                {{ trans('plugins/branches::branches.call_branch') }}
                            </a>
                        @endif

                        @if($branch->email)
                            <a href="mailto:{{ $branch->email }}" class="action-btn info-btn">
                                <i class="fas fa-envelope"></i>
                                {{ trans('plugins/branches::branches.email_branch') }}
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Map Section -->
        @if($branch->lat && $branch->lng)
            <div class="map-section">
                <div class="map-header">
                    <h3 class="map-title">Location</h3>
                    <p class="map-subtitle">Find us on the map</p>
                </div>
                <div class="map-container" 
                     id="branchMap" 
                     data-lat="{{ $branch->lat }}" 
                     data-lng="{{ $branch->lng }}" 
                     data-name="{{ $branch->name }}" 
                     data-location="{{ $branch->location }}">
                    <!-- Map will be loaded here -->
                </div>
            </div>
        @endif

        <!-- Back Navigation -->
        <div class="back-navigation">
            <a href="{{ route('public.branches.country', $branch->country->code) }}" class="back-btn">
                <i class="fas fa-arrow-left"></i>
                Back to {{ $branch->country->name }} branches
            </a>
            <a href="{{ route('public.branches.index') }}" class="back-btn">
                <i class="fas fa-globe"></i>
                {{ trans('plugins/branches::branches.view_all_countries') }}
            </a>
        </div>
    </div>
</div>