@php
    $sectionType = $sectionType ?? request('section_type');
@endphp

@extends('layouts.app')

@push('pageTitle')
    {{ __('labels.pending_approvals_with_type', ['type' => __("labels.$sectionType")]) }}
@endpush

@push('css')
<style>
    .file-preview {
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 8px;
        cursor: pointer;
        transition: transform 0.2s;
    }
    .file-preview:hover {
        transform: scale(1.1);
    }
    .file-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8f9fa;
        border-radius: 8px;
        font-size: 20px;
    }
    .status-badge {
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
    }
    .table-row:hover {
        background-color: #f8f9fa;
    }
    .file-info {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .file-details {
        flex: 1;
    }
    .file-name {
        font-weight: 500;
        margin-bottom: 2px;
    }
    .file-meta {
        font-size: 11px;
        color: #6c757d;
    }
    .module-badge {
        background: #e9ecef;
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
    }
    .tooltip-custom {
        position: relative;
        display: inline-block;
    }
    .error-tooltip {
        cursor: help;
        border-bottom: 1px dashed #dc3545;
    }
</style>
@endpush

@section('content')
    <div class="row">
        <div class="col-xl-12">
        @include('pages.pending-approvals.partials.stats',[
            'section_type' => $sectionType,
            'comments_count'    => $counts['comments'] ?? 0,
            'posts_count'       => $counts['posts'] ?? 0,
            'discussions_count' => $counts['discussions'] ?? 0,
            'total_count' => $counts['total'] ?? 0,
        ])

            <div class="row" data-paginate-type="backend" data-paginate-container data-url="{{ route('pending-approvals.index') }}?section_type="{{ $sectionType }}">
                @include('pages.pending-approvals.partials.sort-filters')
                @include('components.common.flush-message')
                <div class="col-xl-12 wow fadeInUp" data-wow-delay="1.5s">
                    @include('components.datatable.backend-pagination.error')
                    @include('components.datatable.backend-pagination.loading')
                    <div class="table-responsive full-data">
                        <table class="table-responsive-lg table display dataTablesCard dataTable no-footer">
                            <thead class="thead-light">
                                <tr>
                                    <th style="width:50px;">
                                        <div class="form-check custom-checkbox checkbox-success check-lg me-3">
                                            <input type="checkbox" class="form-check-input" id="select-all-selectable-items"
                                                {{ isset($readonly) && $readonly ? 'disabled' : '' }} 
                                                rel="tooltip" data-toggle="tooltip" data-placement="top"
                                                data-bs-toggle="tooltip" title="{{ __('labels.select_all') }}"
                                                onchange="selectAllSelectableItems(this)"
                                                >
                                            <label class="form-check-label" for="select-all-selectable-items"></label>
                                        </div>
                                    </th>
                                    <th width="50">#</th>
                                    <th>{{ __('labels.user') }}</th>
                                    <th>{{ __('labels.content') }}</th>
                                    <th>{{ __('labels.more_details') }}</th>
                                    <th>{{ __('labels.created_at') }}</th>
                                    <th width="80">{{ __('labels.actions') }}</th>
                                </tr>
                            </thead>
                            <tbody data-table-container>
                                @include('pages.pending-approvals.partials.datatable-rows', ['listresults' => $listresults])
                            </tbody>
                        </table>
                    </div>
                    @include('components.datatable.backend-pagination.pagination',[
                        'listresults' => $listresults
                    ])
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
<script>
$(document).ready(function() {
    initBackendPagination();
});

const lang_yes_approve_them = "@lang('datatable.yes_approve_them')";
const lang_are_you_sure_approve_selected = "@lang('messages.are_you_sure_approve_selected')";
const lang_please_select_at_least_one_item_to_approve = "@lang('messages.please_select_at_least_one_item_to_approve')";


function approveSelectedItems() {
    const selection = metaDataBackendPagination.selectedSelectableItems;
    let hasSelection = false;
    
    // Check if anything is selected
    if (selection.all) {
        hasSelection = true;
    } else if (selection.selectedItems && selection.selectedItems.length > 0) {
        hasSelection = true;
    }
    
    if (!hasSelection) {
        showNotification(lang_please_select_at_least_one_item_to_approve, 'warning');
        return;
    }
    
    Swal.fire({
        title: lang_are_you_sure,
        text: lang_are_you_sure_approve_selected,
        icon: "question",
        showCancelButton: true,
        confirmButtonColor: "#28a745",  // Green for approve
        cancelButtonColor: "#d33",
        confirmButtonText: 'Yes, approve them!',
        cancelButtonText: lang_cancel || 'Cancel',
    }).then((result) => {
        if (result.isConfirmed) {
            performApproveRequest();
        }
    });
}

function performApproveRequest() {
    const url = `/pending-approvals/approve`;
    
    // Show loading
    Swal.fire({
        title: lang_please_wait,
        text: lang_processing,
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });
    
    $.ajaxSetup({
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            "Accept": "application/json",
        },
    });

    const selection = metaDataBackendPagination.selectedSelectableItems;
    $.ajax({
        url: url,
        method: 'POST',
        data: {
            section_type: '{{ $sectionType }}',
            select_all: selection.all ? 1 : 0,
            unselected_items: selection.unselectedItems,
            selected_items: selection.selectedItems
        },
        success: function(response) {
            if (response.status) {
                Swal.fire({
                    icon: 'success',
                    title: 'Approved!',
                    text: response.message || 'Items approved successfully',
                    confirmButtonColor: "#28a745"
                }).then(() => {
                    location.reload();
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error!',
                    text: response.message || 'Something went wrong',
                    confirmButtonColor: "#d33"
                });
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.error('Error:', errorThrown);
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: lang_something_went_wrong || 'Something went wrong',
                confirmButtonColor: "#d33"
            });
        }
    });
}


</script>
@endpush