@props([
    'addNew' => false,
    'addPermission' => null,
    'bulk' => false,
    'import' => false,
    'export' => false,
    'delete' => false,
    'deletePermission' => null,

    'status' => false,
    'statusPermission' => null,
    'verifyStudent' => false,

    'buttonLink' => false,
    'buttonUrl' => false,
    'buttonIcon' => false,
    'buttonPermission' => null,

    'search' => false,
    'refresh' => false,
    'checked' => [],
    'showFilter' => false,
    'recList' => [],
    'filters' => [],
    'showPaginate' => false,
    'paginate' => 10,
])

<x-slot name="actions">
        @if($buttonLink && $buttonPermission)
            @can($buttonPermission)
                <button
                    type="button"
                    onclick="location.href='{{ $buttonUrl ?? '/user/dashboard' }}'"
                    class="btn btn-primary btn-xs btn-outline"
                >
                    <i class="{{ $buttonIcon ?? '' }}"></i> Add New
                </button>
            @endcan
        @endif
        @if($addNew && $addPermission)
            @can($addPermission)
            <button type="button" class="btn btn-primary btn-xs btn-outline" data-bs-toggle="modal" data-bs-target=".bs-content"><i class="fa fa-plus-circle"></i> Add New</button>
            @endcan
        @endif
        @if ($bulk ?? false)
            <div class="btn-group">
                <div class="dropdown">
                    <button class="btn btn-primary btn-xs dropdown-toggle d-flex align-items-center" type="button"
                        id="bulkActionDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        @if ($checked)
                            With Checked ({{ count($checked) }})
                        @else
                            Bulk Action (0)
                        @endif
                    </button>
                    <ul class="dropdown-menu shadow-sm rounded-3" style="min-width: 112px;">
                        @if ($export ?? false)
                            <li> <a class="dropdown-item py-5 {{ !$checked ? 'disabled' : '' }}" href="#" onClick="confirm('Are you sure?') || event.stopImmediatePropagation()" wire:click="exportSelected"> <i class="fa fa-file-excel me-1 text-success"></i> Export  to Excel </a></li>
                            <li> <a class="dropdown-item py-5 {{ !$checked ? 'disabled' : '' }}" href="#" onClick="confirm('Are you sure?') || event.stopImmediatePropagation()" wire:click="exportBulkResumes"> <i class="fa fa-file-excel me-1 text-success"></i> Export  to PDF </a></li>
                        @endif
                        
                        @if($delete && $deletePermission)
                            @can($deletePermission)
                            <li><hr class="dropdown-divider"></li>                            
                                <li>
                                    <a class="dropdown-item py-5 {{ !$checked ? 'disabled' : '' }}"
                                    href="#"
                                    wire:click.prevent="delAllConfirm">
                                        <i class="fa fa-trash me-1 text-danger"></i> Delete
                                    </a>
                                </li>
                            @endcan
                        @endif
                        @if($status && $statusPermission)
                            @can($statusPermission)                        
                            <li><a class="dropdown-item py-5 {{ !$checked ? 'disabled' : '' }}" href="#" wire:click.prevent="changeActive"><i class="fa fa-check me-1 text-success"></i> Active</a></li>
                            <li><a class="dropdown-item py-5 {{ !$checked ? 'disabled' : '' }}" href="#" wire:click.prevent="changeInActive"><i class="fa fa-times me-1 text-danger"></i> In-Active</a></li>
                            @endcan
                        @endif
                        @if($verifyStudent ?? false)  
                            @can('student-verification')
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item {{ !$checked ? 'disabled' : '' }}" href="#" wire:click.prevent="changeBackToPending"><i class="fa fa-clock me-2 text-warning"></i> Back to Pending</a></li>
                            <li><a class="dropdown-item {{ !$checked ? 'disabled' : '' }}" href="#" wire:click.prevent="changeVerified"><i class="fa fa-check-circle me-2 text-primary"></i> Verify</a></li>
                            <li><a class="dropdown-item {{ !$checked ? 'disabled' : '' }}" href="#" wire:click.prevent="changeWithdrawal"><i class="fa fa-user-slash me-2 text-secondary"></i> Withdrawal</a></li>                        
                            @endcan
                        @endif
                    </ul>
                </div>
            </div>
        @endif
</x-slot>

 <!-- start serach-header -->
<div class="row align-items-center">
    <!-- Left: Paginate Dropdown -->
    <div class="col-md-5 mb-2">
        <div class="input-group input-medium" style="min-width:225px;">
            @if ($showPaginate ?? false)
                <button class="btn btn-light btn-md dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Show {{ $paginate }} </button>
                    <ul class="dropdown-menu shadow-sm rounded-3" style="min-width: 112px;">
                        <li><a class="dropdown-item py-5" href="#" wire:click.prevent="$set('paginate', 10)">10</a></li>
                        <li><a class="dropdown-item py-5" href="#" wire:click.prevent="$set('paginate', 20)">20</a></li>
                        <li><a class="dropdown-item py-5" href="#" wire:click.prevent="$set('paginate', 50)">50</a></li>
                        <li><a class="dropdown-item py-5" href="#" wire:click.prevent="$set('paginate', 100)">100</a></li>
                    </ul>
            @endif
            @if ($refresh ?? false)
                <button class="btn btn-warning btn-md" type="button" wire:click="refreashData" wire:loading.attr="disabled">
                    <i class="fa fa-refresh" wire:loading.class="fa-spin" wire:target="refreashData"></i>
                    <span wire:loading wire:target="refreashData">Refreshing..</span>
                    <span wire:loading.remove wire:target="refreashData">Refresh</span>
                </button>
            @endif
            @if ($import ?? false)
                <button type="button" class="btn btn-success btn-md btn-outline" data-bs-toggle="modal" data-bs-target=".bs-import"><i class="fa-solid fa-file-excel"></i> Import</button>
            @endif
        </div>
    </div>

    <div class="col-md-1"></div>
    <!-- Right: Search Box -->
    <div class="col-md-3 mb-2 d-flex justify-content-end">
        <div class="d-flex gap-2">
        @if ($showFilter && count($recList) ?? false)
            <select wire:model.live="selectedrole" class="form-control">
                <option value="">--- Please Select ---</option>
                    @foreach ($recList as $recDetail)
                        <option value="{{ $recDetail->id }}"> {{ $recDetail->name }}</option>
                    @endforeach
            </select>
        @endif
        {{-- NEW MULTIPLE FILTER SUPPORT --}}
        @foreach ($filters as $filter)
            @if (!empty($filter['options']))
                <select 
                    wire:model.live="{{ $filter['model'] }}"
                    class="form-control"
                    @if($filter['multiple'] ?? false) multiple @endif
                >
                    <option value="">
                        {{ $filter['placeholder'] ?? '--- Please Select ---' }}
                    </option>

                    @foreach ($filter['options'] as $option)
                        <option value="{{ $option['value'] }}">
                            {{ $option['label'] }}
                        </option>
                    @endforeach
                </select>
            @endif
        @endforeach
        </div>       
    </div>

    <div class="col-md-3 mb-2 d-flex justify-content-end">
        <div class="input-group">
            @if ($search ?? false)
                <input type="text" placeholder="Search with Name" class="form-control" wire:model.live="search">
                <span class="input-group-text bg-white"><i class="fa fa-search"></i></span>
            @endif
        </div>
    </div>
</div>
<!-- end serach-header -->

@push('toggleScript')
    <script src="{{ url('backend/layouts/cdn/sweetalert2011.js') }}"></script>
    <script>
        window.addEventListener('Show-Delete-Confirmation', event => {
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    Livewire.dispatch('deleteSingleConfirmation')
                }
            });
        });
        window.addEventListener('RecordDeleted', event => {
            Swal.fire(
                'Deleted!',
                'One Record has been deleted.',
                'success'
            )
        });

        window.addEventListener('Show-DeleteAll-Confirmation', event => {
            Swal.fire({
                title: 'Are you sure want to delete selected record?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    Livewire.dispatch('deleteAllConfirmation')
                }
            });
        });
        window.addEventListener('AllRecordDeleted', event => {
            Swal.fire(
                'Deleted!',
                'Selected Record has been deleted.',
                'success'
            )
        });

        window.addEventListener('close-model', event => {
            $('#bscontent').modal('hide');
            tinymce.get('description')?.setContent('');
        });
    </script>
@endpush