{{-- @extends('layouts.masteruser') --}}
@extends('layouts.master')

@section('title', 'Express54')

@section('content')


    <div class="row banner custom_dashboard">
        @if ($selectedCountry)
            <img src="{{ asset("/storage/banner/$selectedCountry->banner_image") }}" class="test"
                alt="{{ $selectedCountry->title }}" style="width: 70%; height:350px;">
            <div class="col-4 coursel">
                @include('ads.adslider')
            </div>
        @else
            <img src="{{ asset('/assets/image/bluebanner.png') }}" class="test" alt="bluebanner.png"
                style="width: 70%; height:350px;">
            <div class="col-4 coursel">
                @include('ads.adslider')
            </div>
        @endif
    </div>

    {{-- <div class="row banner">
        @include('banner.banner')
        <div class="user_section col-8">
            <div class="homesec">
            </div>
        </div>

        <div class="col-4 coursel">
            @include('ads.adslider')
        </div>
    </div> --}}


    <div class="africabackground  custom_dashboard_africabackground p-3">
        <div class="container">
            <div id="alert-container">
                @if (Session('error'))
                    <div class="alert alert-warning" role="alert">
                        {{ Session('error') }}
                    </div>
                @endif

                @if (Session('success'))
                    <div class="alert alert-success" role="alert">
                        {{ Session('success') }}
                    </div>
                @endif
            </div>

            <!-- alert time out  -->
            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    var alertContainer = document.getElementById("alert-container");
                    if (alertContainer) {
                        setTimeout(function() {
                            alertContainer.remove();
                        }, 2000);
                    }
                });
            </script>

            <center class=" custom-heading text-center text-blue">
                <h4>@lang('messages.select_country')</h4>
            </center>
        </div>


        <div id="carouselExampleControls3" class="carousel slide">
            <div class="carousel-inner">
                @php $count = 0 @endphp
                @foreach ($countries as $index => $country)
                    @if ($count == 0)
                        <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                            <div class="container">
                                <div class="row custom-row">
                    @endif

                    <div class="col-md-2 border-light text-center">
                        <div class="card slide mb-5 shadow-lg border-light">
                            <a href="{{ url('user/embassy', ['id' => $country->id]) }}" class="linkdecoration">
                                <img src="{{ asset("/assets/image/country_images/$country->country_file") }}"
                                    alt="{{ $country->title }}">
                                <p class="text-black">{{ $country->title }}</p>
                            </a>
                        </div>
                    </div>

                    <!-- page div divide -->
                    @php $count++ @endphp

                    @if ($count == 18 || $loop->last)
            </div>
        </div>
    </div>
    @php $count = 0 @endphp
    @endif
    @endforeach

    </div>

    <div class="row justify-content-center">
        <div class="col-md-8 offset-md-2">
            <!-- Carousel Controls -->
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls3"
                data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls3"
                data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>
    </div>
    </div>
@endsection