@extends('layouts.app',['ver' => 2])


@section('content')
@push('styles')
<style>
 .fc-event {
    background-color: #f0f0f0; 
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    font-size: 14px;
    color: #333;
  }

  .fc-event-title {
    font-weight: bold;
  }

  .fc-header-toolbar {
    background-color: #f2f2f2;
    padding: 10px;
  }

  .fc-day-header {
    background-color: #f5f5f5;
    border-bottom: 1px solid #ccc;
  }
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
@endpush
 <!-- header-area end -->		
        <!-- hero area start hare  -->
        <section class="cl-hero-area">
            <div class="container">
                <div class="cl-hero-wapper">
                    <section class="program-area">
                        <div class="container">
            
                            <div class="program-toper text-center">
                                <h2>Programme de MastercLass Sufi Heritage</h2>
                                <h3>{{ date('Y') }}</h3>
                            </div>
                            <div class="program-main-wapper">
                                <div class="">
                                                <div id="calendar"></div>
                                </div>
                            </div>
                        </div>
            
            
                            
                    </section>
                    <div class="cl-main-wapper">
                        <div class="row ">
                            @forelse($presentateurs as $presentateur)
                              <div class="col-lg-3 col-md-4 col-6">
                                <div class="signle-box">
                                    <div class="person-img">
                                        <img src="{{$presentateur->photo}}" style="height: 200px;width: 250px;" alt="">
                                    </div>
                                    <div class="person-deatails pt-3">
                                        <h2>{{$presentateur->nom}} {{$presentateur->prenom}}</h2>
                                        <h4>Samâ, La Musique Dans</h4>
                                        <p>Les Voies Spirituelle</p>
                                    </div>
                                </div>
                            </div>
                            @empty

                            @endforelse
                          
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- zoom area start hare  -->
        <section class="zoom-area mb-4">
            <div class="overly-zoom">
                <div class="container">
                    <div class="zoom-wapper">
                        <div class="row">
                            <div class="col-lg-6 order-2 order-lg-1">
                                <div class="zoom-img">
                                    <img src="{{$evenement->presentateur->photo}}" alt="">
                                </div>
                            </div>
                            <div class="col-lg-6 order-1 order-lg-2">
                                  <div class="zoom-content text-center">
                                    <span>Cher(e)s ami(e)s et Membres,</span>
                                    <p>Veuillez installer sur votre smartphone ou ordinateur l’application Zoom avant de cliquer sur le lien
                                        de la Masterclass afin de nous rejoindre en direct.
                                        Merci de votre compréhension.
                                    </p>
                                    <img src="{{ asset('public_assets/images/zoom-effect-img.png')}}" alt="">
                                    {!!$evenement->description !!}
                                    <div class="action-btn btn-two mb-4">
                                            <a href="{{route('redirectEvenement',['evenement_id' => $evenement->id]) }}">
                                                Rejoignez-nous
                                            </a>
                                    </div>
                                    <div class="bttm-cnt pb-5">
                                        <img src="images/dubble-arrow-icon.png" alt="">
                                        <a href="{{route('redirectEvenement',['evenement_id' => $evenement->id]) }}"><img src="{{ asset('public_assets/images/' . strtolower($evenement->plateforme) . '.png')}}" alt=""></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- zoom area end hare  -->
        <!-- program area start hare  -->


       
@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>

   

    <script>

   $(document).ready(function () {
    var calendar = $('#calendar').fullCalendar({
        editable:false,
        locale: 'fr',
        header:{
            left:'prev,next today',
            center:'title',
            right:'month,agendaWeek,agendaDay,listYear'
        },
        events:'/calendierevents',
        selectable:true,
        selectHelper: true,
        select:function(start, end, allDay)
        {
            
        },
        editable:true,
        eventResize: function(event, delta)
        {
            
        },
        eventDrop: function(event, delta)
        {
           
        },
         eventRender: function(event, element, view) {
            // Adjust the event's height or width to accommodate longer titles
            element.css('height', 'auto'); // Adjust height as needed
            element.css('width', 'auto'); // Adjust width as needed
            element.css('height', '40px');
            if(event.description != '' && typeof event.description  !== "undefined")
            {  
                element.find(".fc-title").append("<br/><b class='text-center'>"+event.description+"</b>");
            }
             if (event.imageUrl) {
                $(element).append('<br/><img src="' + event.imageUrl + '" alt="Event Image" style="width: 60px; height: 60px; border: 1px solid #ccc; border-radius: 5px; margin: 0 auto; display: block;">');
            }
            // Add a tooltip to display the full title on hover
            $(element).tooltip({
                title: event.title,
                placement: 'top'
            });
            
             element.find('.fc-event-inner').css("background","url(https://dfstudio-d420.kxcdn.com/wordpress/wp-content/uploads/2019/06/digital_camera_photo-980x653.jpg) no-repeat right");
            element.find('.fc-event-inner').css("background-size","contain");
            element.find('.fc-event-inner').css("opacity","0.75");
        },

      eventClick: function(event) {
        window.location.href = event.url; // Redirect to event URL
      }
    });

  });
  
</script>
@endpush
@endsection