@extends('layouts.app')
@section('title', 'New Submission')
@section('styles')
<style>
   .profile-pic {
      border-radius: 50%;
      height: 80px;
      width: 80px;
      background-size: cover;
      background-position: center;
      background-blend-mode: multiply;
      vertical-align: middle;
      text-align: center;
      color: transparent;
      transition: all .3s ease;
      text-decoration: none;
      cursor: pointer;
      position: relative;
   }

   .profile-pic:hover {
      background-color: rgba(0, 0, 0, .5);
      z-index: 10000;
      color: #fff;
      transition: all .3s ease;
      text-decoration: none;
   }

   .profile-pic span i {
      color: #fff;
      position: absolute;
      right: 0;
      bottom: 0;
      background: gray;
      border-radius: 50%;
      padding: 5px;
      font-size: 12px;
   }

   .profile-pic span {
      display: inline-block;
   }

   form input[type="file"] {
      display: none;
      cursor: pointer;
   }

   .edit-icon {
      cursor: pointer;
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 20;
   }

   .text-end {
      text-align: end;
   }

   /* Style for preview image overlay */
   .image_item {
      position: relative;
   }

   .preview-image {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
      z-index: 10;
      display: none;
   }
</style>
@endsection

@section('content')
<div class="col-md-8 m-auto text-center mb-3 mobile-space">
    <p class="text-22 pt-2"><b>{{ ucfirst($type) }}</b></p>
</div>
@include('includes.alerts')
<form action="{{ route('update-profile-images', [$user->id, $type]) }}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="d-flex flex-wrap">
        @if($type == 'images')
        @foreach ($user->talent->images as $talentImage)
            <div class="col-lg-4 col-md-6 mb-5 col-sm-12">
                <div class="image_item position-relative">
                    <img id="original-image-{{ $loop->index }}" src="{{ asset('storage/talent_images/' . $user->talent->id . '/' . $talentImage->url) }}" class="w-100" alt="">

                    <input type="file" id="file-input-{{ $loop->index }}" name="images[{{ $talentImage->id }}]" class="file-input" data-index="{{ $loop->index }}" accept="image/*" style="display: none;">

                    <img id="preview-image-{{ $loop->index }}" src="#" class="preview-image" alt="Preview Image">

                    <a href="javascript:void(0)" class="image-edit-icon" data-index="{{ $loop->index }}"><i class="bx bx-pencil i1"></i></a>
                    <a href="javascript:void(0)" class="delete-icon" data-url="{{ route('delete-profile-image', ['user' => $user->id, 'type' => $type, 'media' => $talentImage->id]) }}" onclick="confirmDelete(this)" data-toggle="modal" data-target="#modal-11">
                        <i class="bx bxs-trash i2"></i>
                    </a>
                </div>
            </div>
        @endforeach
        @elseif($type == 'audio')
        @foreach ($user->talent->talentaudio as $audioFile)
            <div class="col-md-12 col-sm-12 mb-3 vv1">
                <audio controls id="original-audio-{{ $loop->index }}" class="col-md-12">
                    <source src="{{ asset('storage/talent_audio_files/' . $user->talent->id . '/' . $audioFile->audio_file) }}" type="audio/mpeg">
                    Your browser does not support the audio element.
                </audio>
                <input type="file" id="audio-input-{{ $loop->index }}" name="audios[{{ $audioFile->id }}]" class="audio-input" accept="audio/*" style="display: none;">

                <!-- Hidden audio preview that will be shown when a new file is selected -->
                <audio controls id="preview-audio-{{ $loop->index }}" class="col-md-12 preview-audio" style="display: none;">
                    <source id="preview-audio-source-{{ $loop->index }}" src="#" type="audio/mpeg">
                </audio>

                <div class="pro-icon">
                    <a href="javascript:void(0)" class="p-2 back-white full-border-radius edit-audio" data-index="{{ $loop->index }}">
                        <i class='bx bx-pencil i1 text-black text-18'></i>
                    </a>
                    <a href="javascript:void(0)" class="delete-icon p-2 back-white full-border-radius" data-url="{{ route('delete-profile-image', ['user' => $user->id, 'type' => $type, 'media' => $audioFile->id]) }}" onclick="confirmDelete(this)" data-toggle="modal" data-target="#modal-11">
                        <i class='bx bxs-trash i2 text-black text-18'></i>
                    </a>
                </div>
            </div>
            @endforeach

            @elseif($type == 'video')
            @foreach ($user->talent->talentvideo as $video)
            <div class="col-lg-4 col-md-6 mb-5">
                <div class="video-item">
                    <div class="video-container">
                        <div class="video-preview" id="video-preview-{{ $loop->index }}">
                            {!! $video->video_url !!}
                        </div>
                    </div>
                    <div class="pro-icon">
                        <a href="javascript:void(0)" class="p-2 back-white full-border-radius edit-video" data-index="{{ $loop->index }}" data-url="{{ $video->video_url }}"><i class='bx bx-pencil i1 text-black text-18'></i></a>
                        <a href="javascript:void(0)" class="delete-icon p-2 back-white full-border-radius" data-url="{{ route('delete-profile-image', ['user' => $user->id, 'type' => $type, 'media' => $video->id]) }}" onclick="confirmDelete(this)" data-toggle="modal" data-target="#modal-11"><i class='bx bxs-trash i2 text-black text-18'></i></a>
                    </div>
                </div>

                <!-- Edit Modal for Video URL -->
                <div class="edit-video-modal" id="edit-video-modal-{{ $loop->index }}" style="display: none;">
                    <textarea id="edit-video-textarea-{{ $loop->index }}" name="videos[{{ $video->id }}]" class="form-control" rows="4">{{ $video->video_url }}</textarea>
                    <button type="button" class="btn btn-primary mt-2 preview-video" data-index="{{ $loop->index }}" style="display: none;">Preview</button>
                </div>
            </div>
            @endforeach
        @endif
    </div>
    <div class="col-md-3 col-sm-12 m-auto">
        <button type="submit" class="pt-2 pb-2 back-transparent border-radius-7 text-white w-100" style="display: block; cursor: pointer !important;">Update</button>
    </div>
</form>

<!-- Modal for delete confirmation -->
<div class="modal fade" id="modal-11" tabindex="-1" role="dialog" aria-labelledby="modal-11Label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-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">
                <h3 class="text-white text-16 pb-3 text-center">Are You Sure You Want To Delete This {{ ucfirst($type) }}?</h3>
                <div class="d-flex col-md-12">
                    <div class="col-md-6">
                        <form action="#" method="POST" id="delete-form">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn-block shadow border-0 text-uppercase col-md-12 m-auto pt-2 pb-2 back-red-button border-radius-7">
                                <strong class="text-18 text-white">Yes</strong>
                            </button>
                        </form>
                    </div>
                    <div class="col-md-6">
                        <button class="btn-block shadow border-0 text-uppercase col-md-12 m-auto pt-2 pb-2 back-red-button border-radius-7" data-dismiss="modal">
                            <strong class="text-18 text-white">No</strong>
                        </button>
                    </div>
                </div>
            </div>
        </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>
    // Function to confirm delete and set the form action URL
    function confirmDelete(button) {
        var deleteUrl = $(button).data('url');
        $('#delete-form').attr('action', deleteUrl);
    }

    $(document).ready(function () {
        // Handle edit audio icon click - Show file input for editing
        $('.edit-audio').on('click', function () {
            var index = $(this).data('index');
            $('#audio-input-' + index).click(); // Trigger the file input
        });

        // Handle audio file input change - Show audio preview
        $('.audio-input').on('change', function () {
            const index = $(this).attr('id').split('-')[2]; // Extract index from ID
            const file = this.files[0];

            if (file && file.type.startsWith('audio/')) {
                // Clear any previous source
                const audioElement = $('#preview-audio-' + index).get(0);
                const sourceElement = $('#preview-audio-source-' + index);

                // Check if there's a previous object URL and revoke it
                if (audioElement.srcObject) {
                    URL.revokeObjectURL(audioElement.srcObject);
                }

                // Use Object URL for reliable file preview
                const objectURL = URL.createObjectURL(file);

                // Set the new source for the audio element
                sourceElement.attr('src', objectURL);

                // Reload the audio element to ensure it plays the new file
                audioElement.load();

                // Ensure the preview audio element is visible
                $('#preview-audio-' + index).show();

                // Hide the original audio element
                $('#original-audio-' + index).hide();
            } else {
                alert('Please select a valid audio file.');
            }
        });

        // Edit Icon Click - Show Textarea and Preview Button
        $('.edit-video').on('click', function () {
            var index = $(this).data('index');
            var videoUrl = $(this).data('url');

            // Show the edit modal
            $('#edit-video-modal-' + index).show();
            $('#video-preview-' + index).hide(); // Hide the current video preview
            $('#edit-video-textarea-' + index).val(videoUrl); // Populate textarea with the current video URL
            $('#edit-video-modal-' + index + ' .preview-video').show(); // Show preview button
        });

        // Preview Button Click - Show the Preview and Hide Textarea and Preview Button
        $('.preview-video').on('click', function () {
            var index = $(this).data('index');
            var newVideoUrl = $('#edit-video-textarea-' + index).val().trim();

            // Show the preview of the new video URL
            if (newVideoUrl) {
                var embedCode = newVideoUrl; // Assuming the URL is already in the correct embed format
                $('#video-preview-' + index).html(embedCode).show();
                $('#edit-video-modal-' + index).hide(); // Hide the modal after preview
                $('#edit-video-modal-' + index + ' .preview-video').hide(); // Hide preview button after showing preview
            }
        });

        // Trigger file input when edit icon is clicked
        $('.image-edit-icon').on('click', function (e) {
            e.preventDefault();  // Prevent the default action of the anchor tag
            e.stopPropagation(); // Prevent the event from propagating to parent elements
            var index = $(this).data('index');
            $('#file-input-' + index).click(); // Trigger the file input
        });

        // Show preview of the selected file
        $('.file-input').on('change', function (e) {
            var index = $(this).data('index');
            var file = e.target.files[0];

            if (file) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#preview-image-' + index)
                        .attr('src', e.target.result)
                        .show(); // Display the preview over the original image
                };
                reader.readAsDataURL(file);
            } else {
                // Handle case where no file is selected
                console.error("No file selected.");
            }
        });

        // Prevent modal from opening when clicking edit icon and only open for delete icon
        $('.delete-icon').on('click', function (e) {
            e.preventDefault(); // Prevent the default behavior of the anchor tag
            var deleteUrl = $(this).data('url');
            $('#delete-form').attr('action', deleteUrl);
        });
    });

</script>
@endsection