@extends('admin.crud.film.base')

@php
    $collectionObjs = [
        [
            'title' => 'Images pour le site',
            'name' => 'website',
        ],
        [
            'title' => 'Médias',
            'name' => 'document',
        ],
    ];
    
    $loadedAssets = json_decode($alreadyLoadedAssets ?? '[]', true);
    
    foreach ($loadedAssets as $asset) {
        Assets::markAsLoaded($asset);
    }
@endphp

@section('subcontent')
    <div class="row">
        <div class="col-12 mb-5 mb-xl-8" id="medialibrary_wrapper" data-ml-loaded-assets={{ json_encode(Assets::loaded()) }}>
            @foreach ($collectionObjs as $collectionObj)
                @php
                    $collectionName = $collectionObj['name'];
                    $componentName = 'media.card-' . $collectionName;
                @endphp
                <div id="medialibrary_{{ $collectionName }}" class="medialibrary">
                    <div class="d-flex flex-wrap flex-stack mb-6 medialibrary_header">
                        <h3 class="fw-bold my-2">{{ $collectionObj['title'] }}
                            <span class="fs-6 text-gray-400 fw-semibold ms-1"><span
                                    class="medialibrary_counter">{{ count($film->getMedia($collectionName)) }}</span>
                                documents</span>
                        </h3>
                        <div class="d-flex my-2">
                            <div class="d-flex align-items-center position-relative me-4">
                                <span class="svg-icon svg-icon-3 position-absolute ms-3">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2"
                                            rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor">
                                        </rect>
                                        <path
                                            d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
                                            fill="currentColor"></path>
                                    </svg>
                                </span>
                                <input type="text" data-ml-element="search_input" autocomplete="off"
                                    data-ml-target="medialibrary_{{ $collectionName }}"
                                    class="form-control form-control-sm border-body bg-body w-150px ps-10"
                                    placeholder="Rechercher">
                            </div>
                            <x-media.button-upload :film="$film" :collection="$collectionName" :route="route('film.media.add', ['film_id' => $film->id])" />
                        </div>
                    </div>
                    <div class="row g-6 g-xl-9 mb-6 mb-xl-9 medialibrary_content">
                        @foreach ($film->getMedia($collectionName) as $media)
                            @php
                                $componentName = 'media.card-' . $collectionName;
                            @endphp
                            <div class="col-md-6 col-lg-4 col-xl-3 col_media">
                                <x-dynamic-component :component="$componentName" :media="$media" />
                            </div>
                        @endforeach
                        <div class="col-md-6 col-lg-4 col-xl-3 col_dropzone">
                            <x-media.card-dropzone :film="$film" :collection="$collectionName" :route="route('film.media.add', ['film_id' => $film->id])" />
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection
@push('after_styles')
    @stack('crud_list_styles')
@endpush
@push('before_after_scripts')
    @stack('crud_list_scripts')
@endpush