@extends('layouts.app')

@section('title', 'Talent Detail')

@section('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
    .datepicker-dropdown {
        z-index: 9999 !important;
    }
    .spinner-border {
        width: 1rem;
        height: 1rem;
        border: 2px solid #fff;
        border-top-color: transparent;
        border-radius: 50%;
        display: inline-block;
        animation: spin 0.6s linear infinite;
        margin-right: 5px;
        vertical-align: middle;
    }
    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }
</style>
@endsection

@section('content')
<div class="col-md-12 m-auto">
    @include('includes.alerts')
    <div class="justify-content-center align-items-center">
        <div class="p-0 d-flex col-md-12 align-items-center mobile-space">
            <div class="col-md-1 col-sm-1">
                <a href="javascript:history.back()"><i class='bx bx-chevron-left text-60 text-white'></i></a>
            </div>
            <div class="col-md-11 text-center col-sm-11">
                <p class="text-white text-30 talent-name" style="margin-right: 136px;">
                    @if ($type == 'real-family')
                        {{ Str::upper($talent->family_name) }}
                    @else
                        {{ Str::ucfirst($talent->first_name) . ' ' . Str::upper(Str::substr($talent->last_name, 0, 1)) . '.' ?? 'Unknown Talent' }}
                    @endif
                </p>
            </div>
        </div>

        <ul class="nav nav-tabs talent-tabs col-md-11 m-auto m-0 p-0 d-flex flex-wrap talent-header" role="tablist">
            <li class="nav-item">
                <a href="#overview" role="tab" data-toggle="tab" class="nav-link active text-white text-16">
                    Overview
                </a>
            </li>
            @if ($type != 'real-family')
                <li class="nav-item">
                    <a href="#head-shot" role="tab" data-toggle="tab" class="nav-link text-white text-16">
                        Head Shot & Comp Card
                    </a>
                </li>
                @if (!empty($talent->talentvideo) && count($talent->talentvideo) > 0)
                    <li class="nav-item">
                        <a href="#videos" role="tab" data-toggle="tab" class="nav-link text-white text-16">
                            Videos
                        </a>
                    </li>
                @endif
                @if (!empty($talent->talentaudio) && count($talent->talentaudio) > 0)
                    <li class="nav-item">
                        <a href="#audios" role="tab" data-toggle="tab" class="nav-link text-white text-16">
                            Audios
                        </a>
                    </li>
                @endif
            @endif
        </ul>

        <div class="tab-content col-md-12 mt-5">
            <div class="tab-pane active" role="tabpanel" id="overview">
                <div class="col-md-12 m-auto d-flex flex-wrap">
                    @if ($type == 'real-family')
                        <!-- Display family photos -->
                        @if ($talent->photos->isNotEmpty())
                            @foreach ($talent->photos as $photo)
                                <div class="col-lg-4 col-md-6 mb-5 col-sm-12">
                                    <img src="{{ asset('storage/' . $photo->file_path) }}"
                                         class="w-100" style="height: 300px; object-fit: cover;" alt="Family Photo">
                                </div>
                            @endforeach

                                <div class="col-sm-12">
                                    <div class="text-center mt-4">
                                        <button class="btn btn-outline-dark ml-5" onclick="downloadAllImages()">
                                            <i class="fa fa-download"></i> Download
                                        </button>
                                    </div>
                                </div>
                        @else
                            <p class="text-center text-white">No photos available for this family.</p>
                        @endif
                    @elseif ($type == 'hand-talent')
                        <!-- Display hand talent images -->
                        @if ($talent->handImages->isNotEmpty())
                            @foreach ($talent->handImages as $handImage)
                                <div class="col-lg-4 col-md-6 mb-5 col-sm-12">
                                    <img src="{{ asset('storage/talent_hand_images/' . $talent->id . '/' . $handImage->url) }}"
                                         class="w-100" style="height: 600px; object-fit: cover;" alt="Hand Image">
                                </div>
                            @endforeach
                        @else
                            <p class="text-center text-white">No photos available for this talent.</p>
                        @endif
                    @else
                        <!-- Display regular talent images -->
                        @if ($talent->images->isNotEmpty())
                            @foreach ($talent->images as $talentImage)
                                <div class="col-lg-4 col-md-6 mb-5 col-sm-12">
                                    <img src="{{ asset('storage/talent_images/' . $talent->id . '/' . $talentImage->url) }}"
                                         class="w-100" style="height: 600px; object-fit: fill;" alt="Talent Image">
                                </div>
                            @endforeach
                        @else
                            <p class="text-center text-white">No photos available for this talent.</p>
                        @endif
                    @endif

                    <!-- Talent-specific details (excluding real-family) -->
                    @if ($type != 'real-family')
                        <section class="view-more col-md-12 m-auto">
                            <div class="all-features mt-4 p-3 border">
                                <div class="container">
                                    <div class="d-flex flex-wrap">
                                        <div class="col-md-4 col-sm-12">
                                            <p class="text-white text-16"><strong>Age :</strong> {{ $talent->age }}</p>
                                            <p class="text-white text-16"><strong>Gender :</strong>
                                                {{ Str::ucfirst($talent->gender) }}</p>
                                            @php
                                                $height = $talent->height;
                                                $feet = floor($height);
                                                $inches = round(($height - $feet) * 12);
                                            @endphp
                                            <p class="text-white text-16"><strong>Height:</strong> {{ $feet }}'{{ $inches }} inches</p>
                                        </div>
                                        <div class="col-md-4 col-sm-12">
                                            <p class="text-white text-16"><strong>Hair Color :</strong>
                                                {{ Str::ucfirst($talent->hairColor ? $talent->hairColor->name : '-') }}</p>
                                            <p class="text-white text-16"><strong>Eye Color :</strong>
                                                {{ Str::ucfirst($talent->eyeColor ? $talent->eyeColor->name : '-') }}</p>
                                            <p class="text-white text-16"><strong>Race :</strong>
                                                {{ Str::ucfirst($talent->race ? $talent->race : '-') }}</p>
                                        </div>
                                        <div class="col-md-4 col-sm-12">
                                            <p class="text-white text-16"><strong>Location :</strong>
                                                {{ Str::ucfirst($talent->state ? $talent->state : '-') }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            @if (!empty($talent->resume))
                                <div class="all-features mt-4 pt-2 pb-2 border">
                                    <div class="container">
                                        <div class="d-flex flex-wrap justify-content-between">
                                            <div class="col-md-6 col-sm-12 text-left">
                                                <p class="text-white text-16 mt-3">
                                                    <strong>Click To Download Resume :</strong>
                                                </p>
                                            </div>
                                            <div class="col-md-6 col-sm-12 m-auto mt-2">
                                                <div class="col-md-12 d-flex justify-content-end">
                                                    <a href="{{ Storage::url('talent_resumes/' . $talent->resume) }}"
                                                       target="_blank"
                                                       class="background-black p-1 d-block border-radius-7">
                                                        <i class='bx bxs-file-pdf text-color text-60'></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </section>
                    @endif

                    <!-- Request to Book Modal (shared for both talent and family) -->
                    @if($type != 'real-family')
                    <div class="col-md-12 text-center mt-3">
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#bookingModal">
                            REQUEST TO BOOK
                        </button>
                    </div>
                    @endif

                    <!-- Modal -->
                    <div class="modal fade" id="bookingModal" tabindex="-1" aria-labelledby="book-talentLabel"
                         aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="book-talentLabel">REQUEST TO BOOK</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close">×</button>
                                </div>
                                <div class="modal-body">
                                    <form id="bookTalentForm" action="{{ route('talent-book-request') }}"
                                          method="POST">
                                        @csrf
                                        <input type="hidden" name="talent_id" value="{{ $talent->id }}">

                                        <div class="form-group">
                                            <label for="name">Name <span class="text-danger">*</span></label>
                                            <input type="text"
                                                   class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none"
                                                   id="name" name="name">
                                        </div>

                                        <div class="form-group">
                                            <label for="company">Company</label>
                                            <input type="text"
                                                   class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none"
                                                   id="company" name="company">
                                        </div>

                                        <div class="form-group">
                                            <label for="email">Email <span class="text-danger">*</span></label>
                                            <input type="email"
                                                   class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none"
                                                   id="email" name="email" required>
                                        </div>

                                        <div class="form-group">
                                            <label for="phone">Contact Number <span class="text-danger">*</span></label>
                                            <input type="tel"
                                                   class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none"
                                                   id="phone" name="phone" required>
                                        </div>

                                        <div class="form-group">
                                            <label for="shoot_date">Shoot Date</label>
                                            <input type="text"
                                                   class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none"
                                                   id="shoot_date" name="shoot_date">
                                        </div>

                                        <div class="form-group">
                                            <label for="shoot_location">Shoot Location</label>
                                            <input type="text"
                                                   class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none"
                                                   id="shoot_location" name="shoot_location">
                                        </div>

                                        <div class="form-group">
                                            <label for="project_info">Project Info</label>
                                            <textarea id="project_info" name="project_info"
                                                      class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none" rows="3"></textarea>
                                        </div>

                                        <div class="form-group">
                                            <label for="usage_info">Usage Info</label>
                                            <textarea id="usage_info" name="usage_info"
                                                      class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none" rows="3"></textarea>
                                        </div>

                                        <div class="form-group">
                                            <label for="budget">Budget</label>
                                            <input type="text"
                                                   class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none"
                                                   id="budget" name="budget">
                                        </div>

                                        <div class="form-group">
                                            <label for="additional_comments">Additional Comments</label>
                                            <textarea id="additional_comments" name="additional_comments"
                                                      class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none" rows="3"></textarea>
                                        </div>

                                        <div class="text-center mt-3">
                                            <button type="submit" class="btn btn-primary" id="submitBookingBtn">
                                                <span class="spinner-border spinner-border-sm d-none" id="submitSpinner" role="status" aria-hidden="true"></span>
                                                <span id="submitText">Submit Booking</span>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @if ($type != 'real-family')
                <!-- Head Shot Tab -->
                <div class="tab-pane col-md-12" role="tabpanel" id="head-shot">
                    <div class="col-lg-4 col-md-6 mb-5 col-sm-12">
                        @if (
                            !empty($talent->upload_head_shot_comp_card) &&
                                file_exists(storage_path(
                                        'app/public/talent_head_shot_comp_card/' . $talent->id . '/' . $talent->upload_head_shot_comp_card)))
                            <img src="{{ asset('storage/talent_head_shot_comp_card/' . $talent->id . '/' . $talent->upload_head_shot_comp_card) }}"
                                 class="w-100" alt="Talent Headshot">
                            <div class="mt-3">
                                <a href="{{ asset('storage/talent_head_shot_comp_card/' . $talent->id . '/' . $talent->upload_head_shot_comp_card) }}"
                                   download="{{ $talent->upload_head_shot_comp_card }}"
                                   class="btn btn-outline-dark ml-5">Download
                                    <i class="fa fa-file"></i>
                                </a>
                            </div>
                        @else
                            <p class="text-center text-white">Image not available</p>
                        @endif
                    </div>
                </div>

                <!-- Videos Tab -->
                <div class="tab-pane col-md-12 m-auto" role="tabpanel" id="videos">
                    @if ($talent->talentvideo->isNotEmpty())
                        <div class="d-flex flex-wrap col-md-12 m-auto">
                            @foreach ($talent->talentvideo as $talentVideo)
                                <div class="col-lg-6 col-sm-12 iframe-block">
                                    @if (Str::contains($talentVideo->video_url, '<iframe'))
                                        {!! $talentVideo->video_url !!}
                                    @else
                                        @php
                                            $videoId = null;
                                            if (
                                                preg_match(
                                                    '/youtu\.be\/([a-zA-Z0-9_-]+)/',
                                                    $talentVideo->video_url,
                                                    $matches,
                                                )
                                            ) {
                                                $videoId = $matches[1];
                                            } elseif (
                                                preg_match(
                                                    '/youtube\.com\/.*v=([a-zA-Z0-9_-]+)/',
                                                    $talentVideo->video_url,
                                                    $matches,
                                                )
                                            ) {
                                                $videoId = $matches[1];
                                            }
                                        @endphp

                                        @if ($videoId)
                                            <iframe width="100%" height="350"
                                                    src="https://www.youtube.com/embed/{{ $videoId }}" frameborder="0"
                                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                                    allowfullscreen>
                                            </iframe>
                                        @else
                                            <p class="text-center text-white">Video not available</p>
                                        @endif
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="text-white">No videos available.</p>
                    @endif
                </div>

                <!-- Audios Tab -->
                <div class="tab-pane col-md-12 m-auto" role="tabpanel" id="audios">
                    @if ($talent->talentaudio->isNotEmpty())
                        @foreach ($talent->talentaudio as $talentAudio)
                            <div class="col-md-12 col-sm-12 mb-3">
                                <audio controls class="col-md-12">
                                    <source
                                        src="{{ asset('storage/talent_audio_files/' . $talent->id . '/' . $talentAudio->audio_file) }}"
                                        type="audio/mpeg">
                                    Your browser does not support the audio element.
                                </audio>
                            </div>
                        @endforeach
                    @else
                        <p class="text-white ml-5">Audios not available.</p>
                    @endif
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="{{ asset('assets/frontend/js/upload-pic.js') }}"></script>
<script src="{{ asset('assets/js/talent-request.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        flatpickr("#shoot_date", {
            dateFormat: "m-d-Y",
            minDate: "today",
            allowInput: true,
            clickOpens: true,
            disableMobile: false
        });
    });

    function downloadAllImages() {
        const imageUrls = @json($talent->photos?->map(fn($p) => asset('storage/' . $p->file_path)) ?? []);

        if (imageUrls.length === 0) {
            alert("No images found.");
            return;
        }

        imageUrls.forEach((url) => {
            const link = document.createElement('a');
            link.href = url;

            const originalName = url.substring(url.lastIndexOf('/') + 1);

            link.download = originalName;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
    }

</script>
@endsection