@section('title', __('site.page_pods_h1_title'))
@section('head')
    <link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.min.css">
    <style>
        .podcast-img { 
            width: 100%; 
            max-width: 100px;
            aspect-ratio: 16 / 9; 
            object-fit: cover; 
            border-radius: 8px; 
            background: #f0f0f0;
        }
        .podcast-card {
            border: 1px solid #e1e1e1;
            margin-bottom: 1.5rem;
            padding: 12px;
            border-radius: 12px;
            background: #fff;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            transition: transform 0.2s;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .podcast-card:hover { transform: translateY(-3px); border-color: var(--bs-primary); }
        
        .info-label { 
            display: block;
            font-size: 0.65rem; 
            text-transform: uppercase; 
            color: #888; 
            font-weight: 700;
            margin-bottom: 2px;
        }

        /* Grid de Informações (Eps, Views, Status) */
        .info-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
            margin-top: 15px;
            padding-bottom: 10px;
        }
        .info-item { display: flex; flex-direction: column; }

        .toolbar-container {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        @media (min-width: 768px) {
            .toolbar-container {
                flex-direction: row;
                justify-content: flex-end;
                align-items: center;
                gap: 10px;
            }
            .search-form-wrapper { width: 300px; }
            .col-five { flex: 0 0 auto; width: 20%; }
        }

        @media (max-width: 767.98px) {
            .btn-add-full { 
                width: 100% !important; 
                margin-bottom: 0.4rem !important;
            }
            .btn-add-full a { width: 100% !important; display: block; }
            .search-full { width: 100% !important; }
            .search-full form { width: 100% !important; }
            .col-five { width: 100%; }
        }

        .actions-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
            margin-top: auto;
            border-top: 1px solid #eee;
            padding-top: 12px;
        }
        .btn-manage-eps { grid-column: span 2; }
    </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-1">{{ __('site.page_pods_h1') }}</h1>
                    <p class="text-muted fs-sm mb-0">{{ __('site.page_pods_subtitle') }}</p>
                </div>
                <nav class="mt-2 mt-sm-0" 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 active">{{ __('site.menu_item_7') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    @if (session('success'))
        <div id="alert-success" class="alert alert-primary alert-dismissible fade show fw-semibold" role="alert">
            <i class="fa fa-check-circle me-1"></i> {!! session('success') !!}
        </div>
    @endif
    @if (session('error'))
        <div id="alert-error" class="alert alert-danger alert-dismissible fade show fw-semibold" role="alert">
            <i class="fa fa-check-circle me-1"></i> {!! session('error') !!}
        </div>
    @endif

    <div class="block block-rounded border shadow-sm">
        <div class="block-header block-header-default border-bottom p-3">
            <div class="toolbar-container">
                <div class="btn-add-full">
                    <a href="{{ route('site.podcasts.categories') }}" class="btn btn-primary">
                        <i class="fa fa-tags me-1"></i> {{ __('site.page_pods_cat_h1') }}
                    </a>
                </div>
                <div class="btn-add-full">
                    <a href="{{ route('site.podcasts.c') }}" class="btn btn-primary">
                        <i class="fa fa-plus me-1"></i> {{ __('site.action_add') }}
                    </a>
                </div>
                
                <div class="search-form-wrapper search-full">
                    <form action="" method="GET" id="searchForm" onsubmit="searchL(event)">
                        <div class="input-group w-100">
                            @if(!empty($catFilter))
                                <input type="hidden" name="cat" value="{{ $catFilter }}">
                            @endif

                            <input type="text" class="form-control form-control-alt" id="s" name="s" value="{{ $s ?? '' }}" placeholder="{{ __('site.page_pods_search') }}">
                            <button type="submit" class="btn btn-alt-primary">
                                <i class="fa fa-search"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="block-content py-3">
            @if($allPodcasts->count() == 0)
                <div class="py-6 text-center text-muted">
                    <i class="fa fa-microphone-slash fa-3x mb-3"></i>
                    <p class="fw-bold">{{ __('site.page_pods_none_found') }}</p>
                    @if($s || $catFilter)
                        <a href="{{ route('site.podcasts.r') }}" class="btn btn-sm btn-alt-secondary">{{ __('site.page_pods_clear_filters') }}</a>
                    @endif
                </div>
            @else
                <div class="row">
                    @foreach($allPodcasts as $podcast)
                        @php
                            $epsCount = DB::connection('mysql_site_' . session('serverID'))->table('podcasts_eps')->where('podcast_id','=',$podcast->id)->count();
                        @endphp
                        <div class="col-five mb-3">
                            <div class="podcast-card">
                                <div class="d-flex align-items-center mb-2">
                                    <img class="podcast-img shadow-sm border me-2" src="{{ ($podcast->img ? 'https://'.$serverData->name.'/contents/'.$siteData->id.'/podcasts/'.$podcast->img : '/assets/img/no-image-square.png') }}">
                                    <div class="overflow-hidden">
                                        <span class="info-label">Podcast</span>
                                        <div class="fw-bold fs-sm text-truncate" title="{{ $podcast->name }}">{{ $podcast->name }}</div>
                                    </div>
                                </div>

                                <div class="info-grid">
                                    <div class="info-item">
                                        <span class="info-label">Eps</span>
                                        <div><span class="badge bg-dark">{{ $epsCount }}</span></div>
                                    </div>
                                    <div class="info-item text-center">
                                        <span class="info-label">Views</span>
                                        <div class="fw-bold fs-xs text-muted">
                                            <i class="fa fa-eye me-1"></i>{{ number_format($podcast->views ?? 0, 0, ',', '.') }}
                                        </div>
                                    </div>
                                    <div class="info-item text-end">
                                        <span class="info-label">{{ __('general.table_status') }}</span>
                                        <div>
                                            <span class="badge rounded-pill {{ $podcast->status == '1' ? 'bg-primary' : 'bg-danger' }}">
                                                {{ $podcast->status == '1' ? __('general.status_active') : __('site.status_inactive') }}
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="actions-grid">
                                    <a href="{{ route('site.podcastsEps.r',$podcast->id) }}" class="btn btn-sm btn-primary btn-manage-eps">
                                        <i class="fa fa-list-ul me-1"></i> {{ __('site.page_pods_eps_h1_title') }}
                                    </a>
                                    <a href="{{ route('site.podcasts.u',$podcast->id) }}" class="btn btn-sm btn-alt-secondary">
                                        <i class="fa fa-pencil-alt"></i>
                                    </a>
                                    <button type="button" class="btn btn-sm btn-alt-danger rmLink" id="{{ $podcast->id }}">
                                        <i class="fa fa-trash-can"></i>
                                    </button>
                                </div>
                                
                                <form id="form_delete_{{ $podcast->id }}" action="{{ route('site.podcasts.d',$podcast->id) }}" method="POST" style="display:none;">
                                    @csrf @method('DELETE')
                                </form>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="mt-4">
                    {{ $allPodcasts->links('vendor.pagination.bootstrap-5') }}
                </div>
            @endif
        </div>
    </div>
</div>
</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>
    function searchL(e) {
        if(e) e.preventDefault();
        const s = $('#s').val();
        let url = "{{ route('site.podcasts.r') }}";
        if (s) {
            url += "/" + encodeURIComponent(s);
        }
        location.href = url;
    }

    $(document).ready(function() {
        $(document).on('click', '.rmLink', function(e) {
            e.preventDefault();
            const id = $(this).attr('id');
            
            Swal.fire({
                title: 'Excluir esse Podcast?',
                text: "Isso removerá todos os episódios vinculados!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Sim, excluir',
                cancelButtonText: 'Cancelar',
                showLoaderOnConfirm: true,
                customClass: {
                    confirmButton: 'btn btn-danger m-1',
                    cancelButton: 'btn btn-secondary m-1'
                },
                buttonsStyling: false,
                allowOutsideClick: () => !Swal.isLoading(),
                preConfirm: () => {
                    const cancelBtn = Swal.getCancelButton();
                    if (cancelBtn) {
                        cancelBtn.style.display = 'none';
                    }
                    Swal.showLoading();
                    
                    return new Promise((resolve) => {
                        $("#form_delete_" + id).submit();
                    });
                }
            });
        });
    });
</script>