@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">
                <h5 class="mb-3">Reportes de Planilla</h5>
                <p class="text-muted mb-4">
                    Seleccioná una quincena calculada y descargá el reporte de
                    <strong>Ingresos</strong> o <strong>Descuentos</strong> en PDF o Excel.
                </p>

                <form method="POST" id="reports-form" target="_blank">
                    @csrf

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">
                                Quincena (Planilla calculada) <span class="text-danger">*</span>
                            </label>
                            <select class="form-select" name="date" id="report-date" required>
                                <option value="">— Seleccionar —</option>
                                @foreach ($dates as $d)
                                    <option value="{{ $d }}">{{ \Carbon\Carbon::parse($d)->format('d/m/Y') }}</option>
                                @endforeach
                            </select>
                            @if ($dates->isEmpty())
                                <small class="text-warning">
                                    No hay planillas calculadas para reportar.
                                </small>
                            @endif
                        </div>
                    </div>

                    <hr class="my-4">

                    <div class="row g-3">
                        <div class="col-md-6">
                            <h6 class="mb-3">
                                <i class="fa-solid fa-circle-arrow-up text-success"></i>
                                Ingresos Efectuados a Empleados
                            </h6>
                            <div class="d-flex gap-2">
                                <button type="button"
                                        class="btn btn-danger"
                                        data-action="{{ route('hrm.payroll.reports.incomes') }}"
                                        data-format="pdf">
                                    <i class="fa-regular fa-file-pdf"></i> Descargar Ingresos (PDF)
                                </button>
                                <button type="button"
                                        class="btn btn-success"
                                        data-action="{{ route('hrm.payroll.reports.incomes') }}"
                                        data-format="excel">
                                    <i class="fa-regular fa-file-excel"></i> Ingresos (Excel)
                                </button>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <h6 class="mb-3">
                                <i class="fa-solid fa-circle-arrow-down text-danger"></i>
                                Descuentos Efectuados a Empleados
                            </h6>
                            <div class="d-flex gap-2">
                                <button type="button"
                                        class="btn btn-danger"
                                        data-action="{{ route('hrm.payroll.reports.deductions') }}"
                                        data-format="pdf">
                                    <i class="fa-regular fa-file-pdf"></i> Descargar Descuentos (PDF)
                                </button>
                                <button type="button"
                                        class="btn btn-success"
                                        data-action="{{ route('hrm.payroll.reports.deductions') }}"
                                        data-format="excel">
                                    <i class="fa-regular fa-file-excel"></i> Descuentos (Excel)
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        (function () {
            const form = document.getElementById('reports-form');
            const dateSelect = document.getElementById('report-date');
            const buttons = form.querySelectorAll('button[data-action]');

            buttons.forEach(function (btn) {
                btn.addEventListener('click', function () {
                    if (! dateSelect.value) {
                        dateSelect.focus();
                        alert('Seleccioná una quincena primero.');
                        return;
                    }
                    form.action = btn.dataset.action;
                    let formatInput = form.querySelector('input[name="format"]');
                    if (! formatInput) {
                        formatInput = document.createElement('input');
                        formatInput.type = 'hidden';
                        formatInput.name = 'format';
                        form.appendChild(formatInput);
                    }
                    formatInput.value = btn.dataset.format;
                    form.submit();
                });
            });
        })();
    </script>
@endsection