@extends('layouts.app')

@section('site_title', 'Master Classes at IFFI Goa - Learn from Cinema Experts')
@section('site_description',
    'Join exclusive master classes at IFFI Goa, where renowned filmmakers and industry experts
    share insights, techniques, and the art of cinematic storytelling.')

@section('content')
    @include('layouts.header')
    @include('layouts.menu')

    {{-- Inner Page Banner Section --}}
    <div class="container-fluid page-header bannerBg-festival-venue py-5">
        <div class="container text-center ">
            <h1 class="page-title-header">MASTERCLASS AND <br> IN- CONVERSATION SESSION</h1>
        </div>
    </div>

    <div class="container mt-5 static-content">
        <div class="row">
            <div class="col-sm-12">

                <div class="master-nav-bar">
                    <ul class="nav nav-tabs custom-tab-list nav-justified" role="tablist">

                        {{-- ALL TAB --}}
                        @if (!empty($masterDates))
                            <li class="nav-item">
                                <a class="nav-link active" data-bs-toggle="tab" href="#all">All</a>
                            </li>
                        @endif

                        {{-- DATE TABS --}}
                        @forelse ($masterDates as $masterDate)
                            @php
                                $dateObj = \Carbon\Carbon::parse($masterDate->date);
                                // dd($dateObj);
                                $label = $dateObj->format('F d');
                                $tabId = 'date-' . $dateObj->format('Ymd');
                            @endphp

                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#{{ $tabId }}">
                                    {{ $label }}
                                </a>
                            </li>
                        @empty
                            <p>No records found of {{ $year }}</p>
                        @endforelse
                    </ul>
                </div>

                <div class="tab-content mt-4">
                    {{-- ALL TAB --}}
                    <div class="tab-pane fade show active" id="all">
                        @foreach ($masterTopics as $masterTopic)
                            @include('website.master-class.session-card', [
                                'masterTopic' => $masterTopic,
                            ])
                        @endforeach
                    </div>

                    {{-- DATE TABS --}}
                    @foreach ($topicsByDate as $date => $topics)
                        @php
                            $tabId = 'date-' . \Carbon\Carbon::parse($date)->format('Ymd');
                        @endphp

                        <div class="tab-pane fade" id="{{ $tabId }}">
                            @foreach ($topics as $masterTopic)
                                @include('website.master-class.session-card', [
                                    'masterTopic' => $masterTopic,
                                ])
                            @endforeach
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
    </div>

    {{-- Topic Modal --}}
    @foreach ($masterTopics as $masterTopic)
        <div class="modal fade" id="topicModal{{ $masterTopic->id }}" tabindex="-1">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content topic-modal">

                    <div class="modal-header">
                        <h5 class="modal-title">
                            {{ $locale === 'en' ? $masterTopic->title ?? '' : ($locale === 'hi' ? $masterTopic->title_hi ?? '' : '') }}
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body master-class-speaker">

                        <p>
                            <strong><i class="fa-solid fa-clock"></i></strong>
                            {{ \Carbon\Carbon::parse($masterTopic->masterDate->date ?? '')->format('F d Y') }},
                            {{ \Carbon\Carbon::parse($masterTopic->masterDetail->start_time ?? '')->format('h:i A') }}
                            -
                            {{ \Carbon\Carbon::parse($masterTopic->masterDetail->end_time ?? '')->format('h:i A') }}
                        </p>

                        <p>
                            <strong><i class="fa fa-briefcase"></i></strong>
                            {{ $locale === 'en'
                                ? $masterTopic->masterDetail->format ?? ''
                                : ($locale === 'hi'
                                    ? $masterTopic->masterDetail->format_hi ?? ''
                                    : '') }}
                        </p>

                        {{-- <p>
                            <strong><i class="fa fa-user"></i></strong>
                            @foreach ($masterTopic->moderators as $moderator)
                                {{ $locale === 'en'
                                    ? $moderator->moderator_name ?? ''
                                    : ($locale === 'hi'
                                        ? $moderator->moderator_name_hi ?? ''
                                        : '') }}
                            @endforeach
                        </p> --}}

                        <hr>

                        <p>
                            {{ $locale === 'en'
                                ? $masterTopic->description ?? ''
                                : ($locale === 'hi'
                                    ? $masterTopic->description_hi ?? ''
                                    : '') }}
                        </p>

                        {{-- Speakers --}}
                        @if ($masterTopic->speakers->count())
                            <hr>
                            <h3><strong>Speakers</strong></h3>

                            <ul class="list-unstyled row" style="padding: 0 15px">
                                @foreach ($masterTopic->speakers as $speaker)
                                    <li class="mb-0 col-sm-4">
                                        <div class="card p-2">
                                            <a href="#" data-bs-toggle="modal"
                                                data-bs-target="#speakerModal{{ $speaker->id }}">

                                                @if (!empty($speaker->image_name))
                                                    <img src="{{ asset(getFolderName('MASTER_CLASS_DESTINATION') . '/' . $speaker->image_name) }}"
                                                        alt="{{ $speaker->image_name }}" width="50"
                                                        class="rounded me-2">
                                                @elseif(!empty($speaker->image_url))
                                                    <img src="{{ $speaker->image_url }}"
                                                        alt="{{ $speaker->speaker_name ?? 'Speaker' }}" width="50"
                                                        class="rounded me-2">
                                                @else
                                                    <img src="{{ asset('images/multi-use/default-poster-2026.jpeg') }}"
                                                        alt="Default User" width="50" class="rounded me-2">
                                                @endif

                                                {{ $speaker->speaker_name ?? '' }}
                                            </a>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        @endif

                        {{-- Moderators --}}
                        @if ($masterTopic->moderators->count())
                            <hr>
                            <h3><strong>Moderator</strong></h3>

                            <ul class="list-unstyled row" style="padding: 0 15px">
                                @foreach ($masterTopic->moderators as $moderator)
                                    <li class="mb-0 col-sm-4">
                                        <div class="card p-2">
                                            <a href="#" data-bs-toggle="modal"
                                                data-bs-target="#moderatorModal{{ $moderator->id }}">
                                                {{-- <img src="{{ $moderator->file_url }}" width="50" class="rounded me-2"> --}}
                                                @if (!empty($moderator->image_name))
                                                    <img src="{{ asset(getFolderName('MASTER_CLASS_DESTINATION') . '/' . $moderator->image_name) }}"
                                                        alt="{{ $moderator->image_name }}" width="50"
                                                        class="rounded me-2">
                                                @elseif(!empty($moderator->image_url))
                                                    <img src="{{ $moderator->image_url }}"
                                                        alt="{{ $moderator->moderator_name ?? 'Speaker' }}" width="50"
                                                        class="rounded me-2">
                                                @else
                                                    <img src="{{ asset('images/multi-use/default-poster-2026.jpeg') }}"
                                                        alt="Default User" width="50" class="rounded me-2">
                                                @endif
                                                {{ $locale === 'en'
                                                    ? $moderator->moderator_name ?? ''
                                                    : ($locale === 'hi'
                                                        ? $moderator->moderator_name_hi ?? ''
                                                        : '') }}
                                            </a>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    @endforeach

    {{-- Speaker Modal --}}
    @foreach ($masterTopics as $masterTopic)
        @foreach ($masterTopic->speakers as $speaker)
            <div class="modal fade" id="speakerModal{{ $speaker->id }}" tabindex="-1">
                <div class="modal-dialog modal-md modal-dialog-centered">
                    <div class="modal-content speaker-modal">

                        <div class="modal-header">
                            <h5 class="modal-title name-img">

                                @if (!empty($speaker->image_name))
                                    <img src="{{ asset(getFolderName('MASTER_CLASS_DESTINATION') . '/' . $speaker->image_name) }}"
                                        alt="{{ $speaker->image_name }}" width="50" class="rounded me-2">
                                @elseif(!empty($speaker->image_url))
                                    <img src="{{ $speaker->image_url }}" alt="{{ $speaker->speaker_name ?? 'Speaker' }}"
                                        width="50" class="rounded me-2">
                                @else
                                    <img src="{{ asset('images/multi-use/default-poster-2026.jpeg') }}" alt="Default User"
                                        width="50" class="rounded me-2">
                                @endif

                                {{ $locale === 'en' ? $speaker->speaker_name ?? '' : ($locale === 'hi' ? $speaker->speaker_name_hi ?? '' : '') }}
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body">
                            {{-- <img src="{{ $speaker->file_url }}" width="120" class="rounded mb-3"> --}}
                            <p>
                                {{-- {!! $speaker->speaker_detail !!} --}}
                                {!! $locale === 'en'
                                    ? $speaker->speaker_detail ?? ''
                                    : ($locale === 'hi'
                                        ? $speaker->speaker_detail_hi ?? ''
                                        : '') !!}
                            </p>
                        </div>

                    </div>
                </div>
            </div>
        @endforeach
    @endforeach

    {{-- Moderator Modal --}}
    @foreach ($masterTopics as $masterTopic)
        @foreach ($masterTopic->moderators as $moderator)
            <div class="modal fade" id="moderatorModal{{ $moderator->id }}" tabindex="-1">
                <div class="modal-dialog modal-md modal-dialog-centered">
                    <div class="modal-content moderator-modal">

                        <div class="modal-header ">
                            <h5 class="modal-title name-img">
                                @if (!empty($moderator->image_name))
                                    <img src="{{ asset(getFolderName('MASTER_CLASS_DESTINATION') . '/' . $moderator->image_name) }}"
                                        alt="{{ $moderator->image_name }}" width="50" class="rounded me-2">
                                @elseif(!empty($moderator->image_url))
                                    <img src="{{ $moderator->image_url }}"
                                        alt="{{ $moderator->moderator_name ?? 'Speaker' }}" width="50"
                                        class="rounded me-2">
                                @else
                                    <img src="{{ asset('images/multi-use/default-poster-2026.jpeg') }}"
                                        alt="Default User" width="50" class="rounded me-2">
                                @endif
                                {!! $moderator->moderator_name !!}
                                {!! $locale === 'en'
                                    ? $moderator->moderator_name ?? ''
                                    : ($locale === 'hi'
                                        ? $moderator->moderator_name_hi ?? ''
                                        : '') !!}
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body">
                            {{-- <img src="{{ $moderator->file_url }}" width="120" class="rounded mb-3"> --}}

                            <p>
                                {{ $moderator->moderator_detail }}
                                {{ $locale === 'en'
                                    ? $moderator->moderator_detail ?? ''
                                    : ($locale === 'hi'
                                        ? $moderator->moderator_detail_hi ?? ''
                                        : '') }}
                            </p>
                        </div>

                    </div>
                </div>
            </div>
        @endforeach
    @endforeach

@endsection

<style>
    .master-class-speaker {}

    .master-class-speaker h3 {
        margin-bottom: 15px
    }

    .master-class-speaker .list-unstyled li {
        padding: 0px 5px
    }

    .master-class-speaker .list-unstyled li a {
        color: #000;
        text-decoration: none;
        display: flex;
        align-items: center
    }

    .master-class-speaker img {
        width: 50px;
        height: 50px;
        border-radius: 100px !important
    }

    .topic-modal .btn-close {
        right: 15px;
        top: 15px;
        color: #000 !important;
        position: absolute;
    }

    .topic-modal .modal-title {
        width: 95%
    }

    .user-profile-icon img {
        width: 50px;
        height: 50px;
        border-radius: 100px !important
    }

    .callout a {
        color: #000;
        text-decoration: none
    }
</style>