@section('title', __('site.page_pods_eps_h1_title'))

@section('head')
    <link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.min.css">
    <style>
        .podcast-sticky-sidebar { position: sticky; top: 20px; }

        .podcast-cover-wrapper {
            width: 100%;
            max-width: 350px;
            margin: 0 auto;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
            aspect-ratio: 16 / 9;
        }
        .podcast-cover-side {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        .episode-card { transition: background-color 0.2s; border-left: 4px solid transparent; background: #fff; }
        .episode-card.published { border-left-color: #0665d0; }
        .episode-card.draft { border-left-color: #6c757d; }
        .sortable-ghost { opacity: 0.3; background-color: #f0f3f8 !important; border: 2px dashed #0665d0 !important; }
        .drag-handler { cursor: grab; padding: 10px; color: #bdc3c7; display: flex; align-items: center; justify-content: center; }
        .drag-handler:active { cursor: grabbing; }

        .ep-views-count {
            font-size: 0.75rem;
            color: #666;
            display: flex;
            align-items: center;
            font-weight: 600;
        }

        @media (max-width: 991px) {
            .podcast-sticky-sidebar { position: static; margin-bottom: 2rem; }
            .podcast-cover-wrapper { max-width: 180px; }
            .block-header { flex-direction: column; align-items: flex-start !important; gap: 10px; }
            .search-form, .search-form .input-group { width: 100%; }
            .btn-add-mobile { width: 100%; margin-top:10px }
        }
    </style>
@endsection

@include('includes/header')
@include('includes/topSite')

<div class="content">
    <div class="row">
        <div class="col-12">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2 mb-3">
                <div class="flex-grow-1">
                    <h1 class="h3 fw-bold mb-2">{{ __('site.page_pods_eps_manage_h1') }}</h1>
                </div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-alt mb-0">
                        <li class="breadcrumb-item"><a href="{{ route('site.home.r') }}">{{ __('general.top_menu_item_site') }}</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('site.podcasts.r') }}">{{ __('site.menu_item_7') }}</a></li>
                        <li class="breadcrumb-item active">{{ __('site.page_pods_eps_h1_title') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4">
            <div class="block block-rounded podcast-sticky-sidebar">
                <div class="block-content text-center pb-4">
                    <div class="podcast-cover-wrapper mb-3">
                        <img src="{{ ($podcast->img ? 'https://'.$serverData->name.'/contents/'.$siteData->id.'/podcasts/'.$podcast->img : '/assets/img/no-image-square.png') }}" 
                             alt="{{ $podcast->name }}" class="podcast-cover-side">
                    </div>
                    
                    <h2 class="h4 fw-bold mb-1">{{ $podcast->name }}</h2>
                    <div class="mb-3 d-flex justify-content-center gap-2">
                        <span class="badge {{ $podcast->status == 1 ? 'bg-primary' : 'bg-danger' }}">
                            {{ $podcast->status == 1 ? __('general.status_active') : __('site.status_inactive') }}
                        </span>
                        <span class="badge bg-dark">
                            <i class="fa fa-eye me-1"></i> {{ number_format($podcast->views ?? 0, 0, ',', '.') }}
                        </span>
                    </div>
                    
                    <p class="text-muted fs-sm text-start border-top pt-3">
                        <strong>{{ __('site.page_pods_eps_desc_label') }}</strong><br>
                        {{ !empty($podcast->description) ? $podcast->description : __('site.page_pods_eps_no_desc') }}
                    </p>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="block block-rounded">
                <div class="block-header block-header-default">
                    <h3 class="block-title">{{ __('site.page_pods_eps_h1_title') }} <small>({{ $podcastEps->total() }})</small></h3>
                    <div class="block-options">
                        <form onsubmit="searchL(); return false;" class="search-form d-inline-block">
                            <div class="input-group input-group-sm">
                                <input type="text" class="form-control form-control-alt" id="s" value="{{ $s }}" placeholder="{{ __('site.page_pods_eps_search_place') }}">
                                <button type="submit" class="btn btn-alt-secondary"><i class="fa fa-search"></i></button>
                            </div>
                        </form>
                        <button type="button" class="btn btn-sm btn-primary btn-add-mobile ms-sm-2" data-bs-toggle="modal" data-bs-target="#modalAddEp">
                            <i class="fa fa-plus me-1"></i> {{ __('site.page_pods_eps_new') }}
                        </button>
                    </div>
                </div>

                <div class="block-content p-0">
                    @if($podcastEps->count() == 0)
                        <div class="py-5 text-center">
                            <i class="fa fa-microphone-slash fa-3x text-muted mb-3"></i>
                            <p class="fw-semibold text-muted mb-0">{{ __('site.page_pods_eps_none_found') }}</p>
                        </div>
                    @else
                        <div id="episode-list" class="list-group list-group-flush">
                            @foreach($podcastEps as $episode)
                                <div class="list-group-item episode-card {{ $episode->status == '1' ? 'published' : 'draft' }} px-2 px-sm-3" data-id="{{ $episode->id }}">
                                    <div class="row align-items-center g-0">
                                        <div class="col-auto">
                                            <div class="drag-handler">
                                                <i class="fa fa-grip-vertical"></i>
                                            </div>
                                        </div>
                                        
                                        <div class="col ms-2">
                                            <h4 class="h6 mb-1 text-truncate" style="max-width: 300px;">{{ $episode->name }}</h4>
                                            <div class="d-flex align-items-center gap-3">
                                                <span class="fs-xs fw-bold text-primary">#<span class="ep-num">{{ $episode->ep_number }}</span></span>
                                                
                                                <span class="ep-views-count">
                                                    <i class="fa fa-eye me-1 text-muted"></i> {{ number_format($episode->views ?? 0, 0, ',', '.') }}
                                                </span>

                                                <span class="badge rounded-pill {{ $episode->status == '1' ? 'bg-secondary-light text-primary' : 'bg-secondary-light text-secondary' }}" style="font-size: 0.65rem;">
                                                    {{ $episode->status == '1' ? __('site.modal_ep_status_published') : __('site.modal_ep_status_draft') }}
                                                </span>
                                            </div>
                                        </div>

                                        <div class="col-auto">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-sm btn-alt-secondary editEp" 
                                                        data-id="{{ $episode->id }}"  data-name="{{ $episode->name }}" data-description="{{ $episode->description }}"
                                                        data-status="{{ $episode->status }}" data-type="{{ $episode->type }}"
                                                        data-url="{{ $episode->url }}">
                                                    <i class="fa fa-pencil-alt me-1"></i> {{ __('site.action_edit_label') }}
                                                </button>&nbsp;
                                                <button type="button" class="btn btn-sm btn-alt-danger rmLink" id="{{ $episode->id }}">
                                                    <i class="fa fa-trash-can"></i>
                                                </button>
                                            </div>
                                            <form id="form_delete_{{ $episode->id }}" action="{{ route('site.podcastsEps.d', [$podcast->id, $episode->id]) }}" method="POST">@csrf @method('DELETE')</form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        
                        <div class="p-3 d-flex justify-content-center">
                            {{ $podcastEps->appends(['s' => $s])->links('vendor.pagination.default') }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@include('site/modals/episodesPodcast')
</main>
@include('includes/footer')

<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<script src="/assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var el = document.getElementById('episode-list');
        if (el) {
            Sortable.create(el, {
                handle: '.drag-handler',
                animation: 200,
                ghostClass: 'sortable-ghost',
                onEnd: function() {
                    let ids = [];
                    document.querySelectorAll('#episode-list .episode-card').forEach(item => {
                        ids.push(item.getAttribute('data-id'));
                    });

                    $.ajax({
                        url: "{{ route('site.podcastsEps.updateOrder') }}",
                        method: 'POST',
                        data: {
                            _token: "{{ csrf_token() }}",
                            ids: ids
                        },
                        success: function(response) {
                            if(response.success) {
                                document.querySelectorAll('#episode-list .episode-card').forEach((item, index) => {
                                    item.querySelector('.ep-num').innerText = index + 1;
                                });
                                const Toast = Swal.mixin({
                                    toast: true, position: 'top-end', showConfirmButton: false, timer: 1500
                                });
                                Toast.fire({ icon: 'success', title: 'Ordem salva!' });
                            }
                        }
                    });
                }
            });
        }
    });

    function searchL() {
        window.location.href = "{{ route('site.podcastsEps.r', $podcast->id) }}?s=" + encodeURIComponent($('#s').val());
    }

    $('.rmLink').on('click', function () {
        var id = $(this).attr('id');
        Swal.fire({
            title: 'Remover episódio?',
            text: "Os arquivos vinculados poderão ser perdidos.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Sim, remover',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) { $("#form_delete_" + id).submit(); }
        });
    });
</script>

@stack('js')