@extends('admin.layout.app')
@section('content')

    <div class="content-inner container-fluid pb-0" id="page_layout">
        <div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between">
                            <div class="header-title">
                                <h4 class="card-title">User List</h4>
                            </div>
                        </div>
                        <div class="card-body px-0">
                            <div class="table-responsive ">
                                <table id="user-list-table" class="table table-striped" role="grid"
                                       data-toggle="data-table">
                                    <thead>
                                    <tr class="ligth">
                                        <th>Profile</th>
                                        <th>Artist Name</th>
                                        <th>Title</th>
                                        <th>Amount</th>
                                        <th style="min-width: 100px">Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($medias as $media)

                                        <tr>
                                            <td class="text-center"><img
                                                    class="bg-soft-primary rounded img-fluid avatar-40 me-3"
                                                    src="{{$media->artist->getFirstMediaUrl('profile_images') ?? ''}}"
                                                    alt="profile" loading="lazy">
                                            </td>
                                            <td>{{$media->artist->name ?? ''}}</td>
                                            <td>{{$media->title ?? ''}}</td>
                                            <td>{{ $media->amount ?? '' }}
                                            </td>
                                            <td>
                                                <div class="flex align-items-center list-user-action">
                                                    @php
                                                        $gallery = $media->getMedia('gallery_images')
                                                            ->merge($media->getMedia('gallery_videos'))
                                                            ->map(function($item){
                                                                return [
                                                                    'url' => $item->getUrl(),
                                                                    'type' => str_contains($item->mime_type, 'video') ? 'video' : 'image'
                                                                ];
                                                            });
                                                    @endphp

                                                    <a class="btn btn-sm btn-icon btn-warning rounded view-user"
                                                       href="javascript:void(0)"
                                                       data-title="{{$media->title}}"
                                                       data-main="{{$media->getFirstMediaUrl('main_media')}}"
                                                       data-description="{{$media->description}}"
                                                       data-amount="{{$media->amount}}"
                                                       data-rating="{{$media->reviews->rating ?? ''}}"
                                                       data-review="{{$media->reviews->review ?? ''}}"
                                                       data-gallery='@json($gallery)'
                                                       data-bs-toggle="modal"
                                                       data-bs-target="#artistMediaModal">
                                    <span class="btn-inner">
                                      <svg class="icon-32" width="32" viewBox="0 0 24 24" fill="none"
                                           xmlns="http://www.w3.org/2000/svg">
                                <path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd"
                                      d="M17.7366 6.04606C19.4439 7.36388 20.8976 9.29455 21.9415 11.7091C22.0195 11.8924 22.0195 12.1067 21.9415 12.2812C19.8537 17.1103 16.1366 20 12 20H11.9902C7.86341 20 4.14634 17.1103 2.05854 12.2812C1.98049 12.1067 1.98049 11.8924 2.05854 11.7091C4.14634 6.87903 7.86341 4 11.9902 4H12C14.0683 4 16.0293 4.71758 17.7366 6.04606ZM8.09756 12C8.09756 14.1333 9.8439 15.8691 12 15.8691C14.1463 15.8691 15.8927 14.1333 15.8927 12C15.8927 9.85697 14.1463 8.12121 12 8.12121C9.8439 8.12121 8.09756 9.85697 8.09756 12Z"
                                      fill="currentColor"></path>
                                <path
                                    d="M14.4308 11.997C14.4308 13.3255 13.3381 14.4115 12.0015 14.4115C10.6552 14.4115 9.5625 13.3255 9.5625 11.997C9.5625 11.8321 9.58201 11.678 9.61128 11.5228H9.66006C10.743 11.5228 11.621 10.6695 11.6601 9.60184C11.7674 9.58342 11.8845 9.57275 12.0015 9.57275C13.3381 9.57275 14.4308 10.6588 14.4308 11.997Z"
                                    fill="currentColor"></path>
                                </svg>
                                    </span>
                                                    </a>
                                                    <a class="btn btn-sm btn-icon btn-danger rounded"
                                                       data-bs-toggle="tooltip" data-placement="top" title=""
                                                       data-bs-original-title="Delete"
                                                       onclick="confirmStatusChange(event, '{{route('delete.media.post',$media->id)}}', 'Are you sure to delete this post completely')"
                                                   >
                             <span class="btn-inner">
                                      <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                           viewBox="0 0 24 24">
    <path fill-rule="evenodd" clip-rule="evenodd"
          d="M7.67 1.99927H16.34C19.73 1.99927 22 4.37927 22 7.91927V16.0903C22 19.6203 19.73 21.9993 16.34 21.9993H7.67C4.28 21.9993 2 19.6203 2 16.0903V7.91927C2 4.37927 4.28 1.99927 7.67 1.99927ZM15.01 14.9993C15.35 14.6603 15.35 14.1103 15.01 13.7703L13.23 11.9903L15.01 10.2093C15.35 9.87027 15.35 9.31027 15.01 8.97027C14.67 8.62927 14.12 8.62927 13.77 8.97027L12 10.7493L10.22 8.97027C9.87 8.62927 9.32 8.62927 8.98 8.97027C8.64 9.31027 8.64 9.87027 8.98 10.2093L10.76 11.9903L8.98 13.7603C8.64 14.1103 8.64 14.6603 8.98 14.9993C9.15 15.1693 9.38 15.2603 9.6 15.2603C9.83 15.2603 10.05 15.1693 10.22 14.9993L12 13.2303L13.78 14.9993C13.95 15.1803 14.17 15.2603 14.39 15.2603C14.62 15.2603 14.84 15.1693 15.01 14.9993Z"
          fill="currentColor"/>
  </svg>
                                    </span>
                                                    </a>

                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>

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

    <div class="modal fade" id="artistMediaModal" tabindex="-1">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content text-white">

                <div class="modal-header border-0">
                    <h4 class="modal-title fw-bold" id="modal_title"></h4>
                    <button type="button" class="btn-close btn-close"
                            data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <div class="row">
                        <!-- LEFT SIDE MAIN MEDIA -->
                        <div class="col-md-6">
                            <h5>Main Media:</h5>
                            <div id="main_media_container"></div>
                        </div>
                        <!-- RIGHT SIDE DETAILS -->
                        <div class="col-md-6">

                            <div class="mb-3">
                                <label class="fw-bold text-dark">Amount</label>
                                <div id="modal_amount" class="form-control"></div>
                            </div>

                            <div class="mb-3">
                                <label class="fw-bold text-dark">Description</label>
                                <div id="modal_description" class="form-control text-dark"></div>
                            </div>

                            <div class="mb-3">
                                <label class="fw-bold text-dark">Rating</label>
                                <div id="modal_rating" class="form-control"></div>
                            </div>

                            <div class="mb-3">
                                <label class="fw-bold text-dark">Review</label>
                                <div id="modal_review" class="form-control text-dark"></div>
                            </div>

                            <hr>

                            <label class="fw-bold mb-2 text-dark">Gallery</label>
                            <div class="d-flex flex-wrap gap-2" id="gallery_container"></div>

                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <!-- MEDIA PREVIEW MODAL -->
    <div class="modal fade" id="mediaPreviewModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content bg-dark">

                <div class="modal-header border-0">
                    <button type="button" class="btn-close btn-close-white"
                            data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body text-center">
                    <div id="preview_media_container"></div>
                </div>

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

@endsection
@push('script')
    <script>
        document.querySelectorAll('.view-user').forEach(button => {

            button.addEventListener('click', function () {

                // ==============================
                // BASIC INFO
                // ==============================

                modal_title.innerText = this.dataset.title || 'Untitled';

                modal_amount.innerText = this.dataset.amount || 'N/A';

                modal_description.innerText =
                    this.dataset.description || 'No Description Available';

                modal_rating.innerText =
                    this.dataset.rating || 'No Rating';

                modal_review.innerText =
                    this.dataset.review || 'No Review Available';


                // ==============================
                // MAIN MEDIA
                // ==============================

                let mainUrl = this.dataset.main;
                let mainContainer = document.getElementById('main_media_container');
                mainContainer.innerHTML = '';

                if (!mainUrl) {

                    mainContainer.innerHTML =
                        `<div class="text-center p-5 text-muted">
                    <h6>No Media Available</h6>
                </div>`;

                } else if (mainUrl.match(/\.(mp4|mov|avi|webm)$/i)) {

                    mainContainer.innerHTML =
                        `<video controls class="img-fluid rounded shadow"
                        style="max-height:500px; cursor:pointer"
                        onclick="openFullVideo('${mainUrl}')">
                    <source src="${mainUrl}">
                 </video>`;

                } else {

                    mainContainer.innerHTML =
                        `<img src="${mainUrl}"
                      class="img-fluid rounded shadow"
                      style="max-height:500px; cursor:pointer"
                      onclick="openFullImage('${mainUrl}')">`;
                }


                // ==============================
                // GALLERY
                // ==============================

                let galleryContainer = document.getElementById('gallery_container');
                galleryContainer.innerHTML = '';

                let gallery = [];

                try {
                    gallery = this.dataset.gallery ? JSON.parse(this.dataset.gallery) : [];
                } catch (e) {
                    gallery = [];
                }

                if (!gallery.length) {

                    galleryContainer.innerHTML =
                        `<div class="text-muted w-100">
                    No Gallery Found
                </div>`;

                } else {

                    gallery.forEach(item => {

                        if (item.type === 'video') {

                            galleryContainer.innerHTML +=
                                `<video width="100" height="80"
                                class="rounded shadow"
                                style="cursor:pointer"
                                onclick="openFullVideo('${item.url}')">
                            <source src="${item.url}">
                         </video>`;

                        } else {

                            galleryContainer.innerHTML +=
                                `<img src="${item.url}"
                              width="100"
                              class="rounded shadow"
                              style="cursor:pointer"
                              onclick="openFullImage('${item.url}')">`;
                        }

                    });

                }

            });

        });


        // ==============================
        // FULL PREVIEW IMAGE
        // ==============================

        function openFullImage(url) {

            document.getElementById('preview_media_container').innerHTML =
                `<img src="${url}" class="img-fluid rounded shadow">`;

            new bootstrap.Modal(
                document.getElementById('mediaPreviewModal')
            ).show();
        }


        // ==============================
        // FULL PREVIEW VIDEO
        // ==============================

        function openFullVideo(url) {

            document.getElementById('preview_media_container').innerHTML =
                `<video controls autoplay class="img-fluid rounded shadow">
            <source src="${url}">
        </video>`;

            new bootstrap.Modal(
                document.getElementById('mediaPreviewModal')
            ).show();
        }


        // ==============================
        // STOP VIDEO ON MODAL CLOSE
        // ==============================

        document.getElementById('mediaPreviewModal')
            .addEventListener('hidden.bs.modal', function () {
                document.getElementById('preview_media_container').innerHTML = '';
            });

    </script>
@endpush