@extends('backend.layouts.app')
@section('title', @$data['title'])

@section('content')
    {!! breadcrumb([
        'title' => @$data['title'],
        route('admin.dashboard') => _trans('common.Dashboard'),
        '' => _trans('common.Payroll'),
        '#' => @$data['title'],
    ]) !!}
    <div class="table-content table-basic">
        <div class="card">
            <div class="card-body">
                {{-- Toolbar --}}
                <div class="table-toolbar d-flex flex-wrap gap-2 flex-xl-row justify-content-between align-content-center pb-3">
                    <div class="d-flex flex-wrap gap-2 align-items-center">
                        {{-- Botón Generar Planilla --}}
                        @if (hasPermission('salary_create'))
                            <a href="javascript:;" role="button" class="btn-add" data-bs-toggle="tooltip"
                                data-bs-placement="right"
                                data-bs-title="{{ _trans('payroll.Generar Planilla') }}"
                                onclick="mainModalOpen(`{{ @$data['salary_generate'] }}`)">
                                <span><i class="fa-solid fa-plus"></i></span>
                                <span class="d-none d-xl-inline">{{ _trans('payroll.Generar Planilla') }}</span>
                            </a>
                        @endif

                        {{-- Filtro Departamento --}}
                        <div class="dropdown dropdown-designation" data-bs-toggle="tooltip" data-bs-placement="right"
                            data-bs-title="{{ _trans('common.Department') }}">
                            <button type="button" class="btn-designation" data-bs-toggle="dropdown"
                                aria-expanded="false" data-bs-auto-close="false">
                                <span class="icon"><i class="fa-solid fa-user-shield"></i></span>
                                <span class="d-none d-xl-inline">{{ _trans('common.Department') }}</span>
                            </button>
                            <div class="dropdown-menu">
                                <select name="department_id" id="filter_department"
                                    class="form-control pl-2 select2 w-100" onchange="reloadGroupedView()">
                                    <option value="0" selected>{{ _trans('common.All') }}</option>
                                    @foreach ($data['departments'] as $dept)
                                        <option value="{{ $dept->id }}">{{ @$dept->title }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Filtro Estado --}}
                        <div class="dropdown dropdown-designation" data-bs-toggle="tooltip" data-bs-placement="right"
                            data-bs-title="{{ _trans('common.Status') }}">
                            <button type="button" class="btn-designation" data-bs-toggle="dropdown"
                                aria-expanded="false" data-bs-auto-close="false">
                                <span class="icon"><i class="fa fa-tag" aria-hidden="true"></i></span>
                                <span class="d-none d-xl-inline">{{ _trans('common.Status') }}</span>
                            </button>
                            <div class="dropdown-menu">
                                <select name="status" id="filter_status" class="form-control select2"
                                    onchange="reloadGroupedView()">
                                    <option value="0" selected>{{ _trans('common.All') }}</option>
                                    <option value="9">{{ _trans('common.Unpaid') }}</option>
                                    <option value="8">{{ _trans('common.Paid') }}</option>
                                    <option value="20">{{ _trans('common.Partially Paid') }}</option>
                                </select>
                            </div>
                        </div>

                        {{-- Búsqueda --}}
                        <div class="search-box d-flex">
                            <input class="form-control" placeholder="{{ _trans('common.Search') }}"
                                id="filter_search" onkeyup="reloadGroupedView()" autocomplete="off" />
                            <span class="icon"><i class="fa-solid fa-magnifying-glass"></i></span>
                        </div>
                    </div>
                </div>

                {{-- Vista agrupada por quincena --}}
                <div id="grouped-salary-container">
                    @include('backend.payroll.salary.partials.grouped_list', ['groups' => $data['groups']])
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script>
    // Recargar vista agrupada con filtros (redirección directa)
    let _reloadTimer = null;
    function reloadGroupedView() {
        // Debounce para búsqueda por teclado
        clearTimeout(_reloadTimer);
        _reloadTimer = setTimeout(function() {
            let department = document.getElementById('filter_department')?.value || '';
            let status = document.getElementById('filter_status')?.value || '';
            let search = document.getElementById('filter_search')?.value || '';

            let url = `{{ route('hrm.payroll_salary.index') }}?department=${department}&status=${status}&search=${search}`;
            location.href = url;
        }, 400);
    }

    // Confirmar eliminación de planilla completa
    function confirmDeletePlanilla(date) {
        if (!confirm('{{ _trans("message.Are you sure you want to delete the entire payroll for this period?") }}')) {
            return;
        }

        let form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route("hrm.payroll_salary.delete_bulk") }}';

        let tokenInput = document.createElement('input');
        tokenInput.type = 'hidden';
        tokenInput.name = '_token';
        tokenInput.value = '{{ csrf_token() }}';
        form.appendChild(tokenInput);

        let dateInput = document.createElement('input');
        dateInput.type = 'hidden';
        dateInput.name = 'date';
        dateInput.value = date;
        form.appendChild(dateInput);

        document.body.appendChild(form);
        form.submit();
    }
</script>
@endsection