@extends('frontend.master')

@section('content')
    <!-- =========================== BANNER PART START =========================== -->
    @php
    $banners = json_decode($header->banner,true);
    @endphp
    @if(!empty($header->banner) && is_array($banners))

    
<div class="bannerImage">
    <div class="container">
            <div id="homeSlider" class="carousel slide mt-sm-5 mt-md-0" data-bs-ride="carousel">
                <div class="carousel-indicators">
                    @foreach($banners as $key=>$banner)
                        @if($key==0)
                        <button type="button" data-bs-target="#homeSlider" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                        @else
                        <button type="button" data-bs-target="#homeSlider" data-bs-slide-to="{{$key}}" aria-label="Slide {{$key+1}}"></button>
                        @endif
                    @endforeach
                </div>
                
                <div class="carousel-inner">
                    @foreach($banners as $key=>$banner)
                        <div class="carousel-item @if($key==0)active @endif">
                            <img src="{{asset('storage/uploads/pages/home/banner/'.$banner)}}" class="d-block w-100" alt="...">
                        </div>
                    @endforeach
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#homeSlider" 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="#homeSlider" data-bs-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Next</span>
                </button>
            </div>

    </div>
</div>



    @endif



        

        





    </section>
    {{-- @if(empty($header->popImage)) --}}
    @if(!empty($header->popImage))
    
    <style>
        .splash-image {
          max-width: 100%;
          max-height: 100%;
          border-radius: 10px;
          position: relative;
        }
        .modal-backdrop {
          background-color: rgba(0, 0, 0, 0.7) !important; /* Transparent black background */
        }
        .modal-content {
          background: transparent;
          border: none;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
        }
        .btn-close {
          position: absolute;
          top: 10px;
          right: 10px;
          z-index: 1055; /* Ensure it is above the image */
          color: white;
          background-color: #fff; /* Add a semi-transparent background for better visibility */
          border-radius: 50%;
          padding: 5px;
          opacity: 0.8;
        }
        .btn-close:hover {
          background-color: rgba(0, 0, 0, 0.8);
        }
      </style>
      <div class="modal fade" id="splashModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" style="max-width: {{ $header->popup_width ?? 1000 }}px">
          <div class="modal-content position-relative">
            <!-- Splash Image -->
            @if($header->popup_link && $header->popup_link!==null)
                <a href="{{$header->popup_link}}" target="_blank">
                    <img src="{{asset('storage/uploads/pages/home/popup/'.$header->popImage)}}" alt="Splash Screen Image" class="splash-image">
                </a>
            @else
            <img src="{{asset('storage/uploads/pages/home/popup/'.$header->popImage)}}" alt="Splash Screen Image" class="splash-image">
            @endif
            
            <!-- Close Icon -->
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
        </div>
      </div>

    @endif
    {{-- <div class="modal fade" id="splashModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="true">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            
            <img src="{{asset('storage/uploads/pages/home/popup/'.$header->popImage)}}" alt="Splash Screen Image" class="splash-image">
          </div>
        </div>
      </div> --}}
  
 {{-- <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <img src="{{asset($header->popImage)}}" class="img-fluid" alt="Full Body Image">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div> --}}
    
    <div class="container">
        <div class="pageWithBanner p-3">
        @if(!empty($service) && !empty($homeService))
            <div class="row mt-5">
                <div class="col">
                    {!! $service->title !!}
                    <p>{!! $service->description !!}</p>
                </div>
            </div>
            <div class="row d-flex mb-5">
                @foreach($homeService as $services)
                    <div class="col-md-4 mb-4">
                        <div class="px-4 py-5 border bg-light w-100 h-100 text-center homeServiceBox">
                            <div class="">
                                <img src="{{asset('storage/uploads/pages/home/'.$services->image)}}"
                                        alt="images" style="width:100px;height:100px">
                            </div>
                            <div class="">
                            <a class="serviceTitle" href="{{$services->url? url($services->url) :'#'}}" ><h5>{!! $services->title !!}</h5></a>
                            </div>
                            <p class="">
                                {!! $services->shortDescription !!}
                            </p>
                        </div>

                    </div>
                @endforeach
            </div>

        <!-- end of if(!empty($service) && !empty($homeService)) -->
        @endif



            @if(!empty($overview) && !empty($homeOverview))
            <div class="row">
                <div class="col-md-12 mt-5">
                        <h2>{!! $overview->title !!}</h2>
                </div>
                <div class="col-md-12">
                        <p>{!! $overview->description !!}</p>
                </div>
                <div class="col-md-12 text-center">
                    <a href="bicm-overview" class="link_span">
                        <svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M10.6453 4.7496L6.73847 0.842661C6.62695 0.731137 6.47831 0.669922 6.31982 0.669922C6.16115 0.669922 6.0126 0.731225 5.90108 0.842661L5.54636 1.19746C5.43493 1.30881 5.37354 1.45754 5.37354 1.61611C5.37354 1.7746 5.43493 1.92835 5.54636 2.03969L7.82556 4.32391H0.584444C0.257965 4.32391 0 4.5795 0 4.90606V5.40766C0 5.73422 0.257965 6.01558 0.584444 6.01558H7.85142L5.54645 8.31255C5.43502 8.42408 5.37363 8.56876 5.37363 8.72734C5.37363 8.88574 5.43502 9.03253 5.54645 9.14397L5.90116 9.49762C6.01269 9.60915 6.16124 9.66992 6.31991 9.66992C6.4784 9.66992 6.62703 9.60836 6.73856 9.49683L10.6454 5.58998C10.7572 5.47811 10.8187 5.32876 10.8182 5.17001C10.8186 5.01073 10.7572 4.8613 10.6453 4.7496Z"
                                fill="#4F81BD"/>
                        </svg>
                        More OVerview
                    </a>
                </div>
            </div>

            <!-- end of if(!empty($overview) && !empty($homeOverview)) -->
            @endif

        </div>
    </div>


    <div class="container my-5">
        <h4 class="mb-3">Our Courses</h4>
    
        <div id="courseCarousel" class="carousel slide" data-bs-ride="false">
            <div class="carousel-inner">

                @foreach($courses->chunk(4) as $chunkIndex => $courseChunk)
                    <div class="carousel-item {{ $chunkIndex === 0 ? 'active' : '' }}">
                        <div class="row g-3">
    
                            @foreach($courseChunk as $course)
                                <div class="col-12 col-md-6 col-lg-3">
                                    <div class="card h-100 border-0 shadow-sm">
    
                                        
                                        @php
                                            $courseImage = $course->image
                                                ? asset('storage/uploads/courses/'.$course->id.'/'.$course->image)
                                                : asset('assets/frontend/images/default-course.jpg');
                                        @endphp
                                        <!-- Image -->
                                        <a href="{{route('courseDetails',['course_id'=>$course->id])}}">
                                            <div
                                                class="course-image"
                                                style="
                                                    height: 180px;
                                                    background-image: url('{{ $courseImage }}');
                                                    background-size: cover;
                                                    background-position: center;
                                                ">
                                            </div>

                                            <div style="
                                                position: absolute;
                                                bottom: 0;
                                                width: 100%;
                                                background: rgba(0, 0, 0, 0.8); /* semi-transparent black */
                                                color: #fff; /* white text */
                                                text-align: center;
                                                padding: 8px 5px;
                                                font-weight: 600;
                                                font-size: 0.95rem;
                                            ">
                                                {{ $course->title }}
                                            </div>
                                        </a>
    
                                    </div>
                                </div>
                            @endforeach
    
                        </div>
                    </div>
                @endforeach
    
            </div>
    
            <!-- Controls -->
            <!-- Controls -->
            <button class="carousel-control-prev" type="button" data-bs-target="#courseCarousel" data-bs-slide="prev">
                <span class="fa fa-arrow-left"></span>
            </button>
            
            <button class="carousel-control-next" type="button" data-bs-target="#courseCarousel" data-bs-slide="next">
                <span class="fa fa-arrow-right"></span>
            </button>
            


        </div>
    </div>

    <div class="container mb-5">
        
    </div>
    <div class="bg-light py-5 my-5">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-7">
                    <h2 class="display-4 mb-4">Designed for the next-generation finance professionals</h2>
                    <p>Drop us a line <a href="">here</a>, we'll get in touch. Or mail us at
                        hello@bicm.ac.bd. We'll see if we're a match and how we can help each other.</p>
                </div>
                <div class="col-md-5 text-right">
                    <a href="/contact-us" style="width: 280px;" class="btn btn-primary p-4 rounded-pill p-10 float-end"><span style="display-block;float:left;line-height: 50px;font-size: 1.3rem;">Get Connected</span> <i style="/*! font-size:2rem; */color:#645e5e;background:#fff;width: 50px;height: 50px;line-height: 50px;float: right;" class="fa fa-arrow-right rounded-circle d-block"></i></a>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('customScript')
@if(!empty($header->popImage))
<script>
    document.addEventListener("DOMContentLoaded", function () {
      const splashModal = new bootstrap.Modal(document.getElementById('splashModal'));
      splashModal.show();
    });
  </script>
@endif
@endsection