@extends('layouts.app')

@section('title', 'Galeria')

@section('content')
@php
    $user = auth()->user();
@endphp
<div class="container py-6">
    <div class="title-screen" style="text-align:center; margin-bottom: 30px; margin-top: -20px;"><h2>Galeria</h2></div>
    <div class="mb-2 d-flex justify-content-between align-items-start flex-nowrap ms-7 me-7 pdx-10">
        <div id="filtersMedia">
            <button id="filterBtn" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#filterModal">
                <i class="fas fa-filter color-bg"></i><span id="text_filter" class="color-bg"> Filtros</span>
                <span id="filterBadge" class="filter-badge">0</span>
            </button>
            <button id="cleanFilterBtn" class="btn btn-secondary ms-2">
                <i class="fas fa-trash color-bg"></i>
            </button>
        </div>
        <div class="text-end">

            @if ($user->hasUploadFeature())
                <label for="uploadInput" class="btn btn-primary" style="cursor: pointer;" id="uploadMediaBtn">
                    <i class="fas fa-plus color-bg"></i> Adicionar Mídia
                </label>
                <input type="file" id="uploadInput" name="file" style="display:none;" accept="video/mp4,video/quicktime,image/jpeg,image/png">
                <p style="font-size:0.8rem; font-style: italic; color:#9e9e9e">*Tamanho máximo por arquivo: 100 MB</p>
            @else
                <a href="{{ route('plans.index') }}" class="btn btn-primary">
                    <i class="fas fa-star color-bg"></i> Seja um assinante para adicionar
                </a>
                <p style="font-size:0.8rem; font-style: italic; color:#9e9e9e">*Assine um plano para liberar o upload.</p>
            @endif
        </div>
    </div>

    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show position-fixed top-0 end-0 m-3" role="alert" id="successAlert">
            <strong>Sucesso!</strong> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div id="screensContainer" class="container-fluid"
        data-initial-files='@json($files)'
        data-available-screens='@json($screens)'
        data-load-more-url="{{ route('media.loadMore') }}"
        data-upload-url="{{ route('media.upload') }}"
        data-update-url="{{ url('media') }}"
        data-download-url="{{ url('media/download') }}"
        data-thumbnail-base-url="{{ rtrim(Storage::disk('upload_thumbnail')->url(''), '/') }}"
        data-csrf-token="{{ csrf_token() }}"
    >
    </div>

    <div id="loading"></div>

    <div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-muted" id="filterModalLabel">Filtros</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="screenFilter" class="form-label text-muted">Filtrar por Tela:</label>
                        <select id="screenFilter" class="form-select">
                            <option value="">Todas as Telas</option>
                            @foreach ($screens as $screen)
                                <option value="{{ $screen->id }}">{{ $screen->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="sortFilter" class="form-label text-muted">Ordenar por:</label>
                        <select id="sortFilter" class="form-select">
                            <option value="added-desc">Adicionados (Decrescente)</option>
                            <option value="added-asc">Adicionados (Crescente)</option>
                            <option value="duration-asc">Duração (Crescente)</option>
                            <option value="duration-desc">Duração (Decrescente)</option> 
                        </select>
                    </div>
                    <div class="mb-3">
                    <label for="methodFilter" class="form-label text-muted">Filtrar por Origem:</label>
                    <select id="methodFilter" class="form-select">
                        <option value="">Todos</option>
                        <option value="upload_media">Upload Padrão</option>
                        @if ($user->instagramAccounts->isNotEmpty() && $user->hasInstagramFeature())
                            <option value="instagram_story">Instagram Story</option> 
                            <option value="instagram_reel">Instagram Reels</option> 
                        @endif
                    </select>
                </div>
                </div>
                <div class="modal-footer">
                    <button id="clearFilters" type="button" class="btn btn-secondary">Limpar Filtros</button>
                    <button id="saveFilters" class="btn btn-primary ">Salvar</button>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@push('scripts')
    @vite('resources/js/media-gallery.js')
@endpush