@section('title', __('site.page_pods_cat_title'))
@section('head')
    <link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.min.css">
    <style>
        .category-card {
            border: 1px solid #e1e1e1;
            margin-bottom: 1.5rem;
            padding: 16px;
            border-radius: 12px;
            background: #fff;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            transition: all 0.2s;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .category-card:hover { 
            transform: translateY(-3px); 
            border-color: var(--bs-primary); 
            box-shadow: 0 8px 15px rgba(0,0,0,0.1);
        }
        .info-label { 
            display: block;
            font-size: 0.65rem; 
            text-transform: uppercase; 
            color: #999; 
            font-weight: 800;
            margin-bottom: 2px;
            letter-spacing: 0.5px;
        }
        .cat-name {
            font-size: 1.1rem;
            color: #333;
            line-height: 1.2;
            margin-bottom: 15px;
        }
        .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-custom { flex: 0 0 auto; width: 25%; }
        }
        @media (max-width: 767.98px) {
            .btn-add-full { width: 100% !important; margin-bottom: 0.5rem !important; }
            .btn-add-full button { width: 100% !important; }
            .search-full { width: 100% !important; }
            .col-custom { width: 100%; }
        }
        .actions-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-top: 15px;
            border-top: 1px solid #f0f0f0;
            padding-top: 15px;
        }
        .btn-manage-eps { grid-column: span 2; }
        .date-info { font-size: 0.75rem; color: #666; }
    </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_cat_h1') }}</h1>
                    <p class="text-muted fs-sm mb-0">{{ __('site.page_pods_cat_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 text-muted"><a href="{{ route('site.podcasts.r') }}">{{ __('site.menu_item_7') }}</a></li>
                        <li class="breadcrumb-item active">{{ __('site.page_pods_cat_h1') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    @if (Session::has('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::get('success') !!}
        </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">
                    <button type="button" onclick="openCategoryModal()" class="btn btn-primary">
                        <i class="fa fa-plus me-1"></i> {{ __('site.page_pods_cat_new') }}
                    </button>
                </div>
                
                <div class="search-form-wrapper search-full">
                    <form action="" method="GET">
                        <div class="input-group w-100">
                            <input type="text" class="form-control form-control-alt" id="s" name="s" value="{{ $s ?? '' }}" placeholder="{{ __('site.page_post_cat_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(empty($allCategories) || $allCategories->count() == 0)
                <div class="py-6 text-center text-muted">
                    <i class="fa fa-folder-open fa-3x mb-3"></i>
                    <p class="fw-bold">{{ __('site.page_post_cat_search_norec') }}</p>
                </div>
            @else
                <div class="row">
                    @foreach($allCategories as $category)
                        <div class="col-custom mb-3">
                            <div class="category-card">
                                <div>
                                    <span class="info-label text-primary">{{ __('site.page_pods_cat_name_label') }}</span>
                                    <div class="fw-bold cat-name text-truncate" title="{{ $category->name }}">
                                        {{ $category->name }}
                                    </div>

                                    <div class="row g-0">
                                        <div class="col-12 mb-2">
                                            <span class="info-label">{{ __('site.page_pods_cat_linked') }}</span>
                                            <span class="badge bg-light text-dark border"><i class="fa fa-microphone me-1"></i> {{ $category->linked_podcasts ?? 0 }}</span>
                                        </div>
                                        <div class="col-12 mb-1">
                                            <span class="info-label">{{ __('site.page_pods_cat_created') }}</span>
                                            <div class="date-info">
                                                <i class="far fa-calendar-alt me-1"></i> 
                                                {{ $category->created_at ? date('d/m/Y H:i', strtotime($category->created_at)) : '--' }}
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <span class="info-label">{{ __('site.page_pods_cat_last_ep') }}</span>
                                            <div class="date-info">
                                                <i class="far fa-clock me-1"></i> 
                                                {{ $category->last_update_ep ? date('d/m/Y H:i', strtotime($category->last_update_ep)) : '--' }}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="actions-grid">
                                    {{-- AJUSTE AQUI: Redireciona para a listagem filtrando pelo ID desta categoria --}}
                                    <a href="{{ route('site.podcasts.r') }}?cat={{ $category->id }}" class="btn btn-sm btn-alt-primary btn-manage-eps">
                                        <i class="fa fa-eye me-1"></i> {{ __('site.page_pods_cat_view_pods') }}
                                    </a>
                                    
                                    <button type="button" 
                                            onclick="openCategoryModal('{{ $category->id }}', '{{ $category->name }}')" 
                                            class="btn btn-sm btn-alt-secondary" 
                                            title="{{ __('site.action_edit_label') }}">
                                        <i class="fa fa-pencil-alt"></i>
                                    </button>

                                    <button type="button" class="btn btn-sm btn-alt-danger rmLink" id="{{ $category->id }}" title="{{ __('site.action_delete') }}">
                                        <i class="fa fa-trash-can"></i>
                                    </button>
                                </div>
                                
                                <form id="form_delete_{{ $category->id }}" action="{{ route('site.podcasts.categories.d', $category->id) }}" method="POST" style="display:none;">
                                    @csrf
                                    @method('DELETE')
                                </form>
                            </div>
                        </div>
                    @endforeach
                </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>
    $(document).on('click', '.rmLink', function() {
        const id = $(this).attr('id');
        Swal.fire({
            title: 'Excluir categoria?',
            text: "Atenção: Apenas a categoria será removida. Os podcasts vinculados continuarão existindo.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Sim, excluir'
        }).then((result) => { 
            if (result.isConfirmed) { 
                $("#form_delete_" + id).submit(); 
            } 
        });
    });
    
    function openCategoryModal(id = null, currentName = '') {
        const isEdit = id !== null;
        const title = isEdit ? 'Editar Categoria' : 'Nova Categoria';
        const confirmButtonText = isEdit ? 'Salvar' : 'Criar';

        let url = isEdit  ? "{{ route('site.podcasts.categories.u.do') }}" : "{{ route('site.podcasts.categories.c.do') }}";

        Swal.fire({
            title: title,
            html: `
                <div class="text-start p-2">
                    <label for="swal-cat-name" class="form-label fw-bold">Nome da Categoria</label>
                    <input type="text" id="swal-cat-name" class="form-control form-control-lg" 
                           placeholder="Ex: Tecnologia, Saúde..." value="${currentName}">
                </div>
            `,
            showCancelButton: true,
            confirmButtonText: confirmButtonText,
            cancelButtonText: 'Cancelar',
            customClass: {
                confirmButton: 'btn btn-primary m-1',
                cancelButton: 'btn btn-alt-secondary m-1'
            },
            buttonsStyling: false,
            showLoaderOnConfirm: true,
            allowOutsideClick: false,
            preConfirm: () => {
                const name = document.getElementById('swal-cat-name').value;
                if (!name || name.trim() === '') {
                    Swal.showValidationMessage('Por favor, insira um nome válido');
                    return false;
                }
                
                return $.ajax({
                    url: url,
                    type: 'POST',
                    data: {
                        name: name,
                        id: id,
                        _token: '{{ csrf_token() }}'
                    }
                }).then(response => {
                    if (!response.success) {
                        throw new Error(response.message || 'Erro ao processar');
                    }
                    return response;
                }).catch(error => {
                    Swal.showValidationMessage(error.message);
                });
            }
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    icon: 'success',
                    title: 'Sucesso!',
                    text: isEdit ? 'Categoria atualizada com sucesso.' : 'Categoria criada com sucesso!',
                    timer: 1500,
                    showConfirmButton: false
                }).then(() => {
                    location.reload(); 
                });
            }
        });
    }
</script>