@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | '.__('Payroll Register Export'))
@section('content')
    @php
        use App\Services\PayrollRegisterExportSettingsService as Pres;
        $exportPackaging = old('export_packaging', $settings['export_packaging'] ?? Pres::EXPORT_PACKAGING_WORKBOOK);
        $formSheets = old('sheets', $sheets ?? []);
        if (! is_array($formSheets) || $formSheets === []) {
            $formSheets = [Pres::defaultSheet()];
        }
        $maxSheets = Pres::MAX_SHEETS;
    @endphp
    <style>
        .pres-wrap .card { border-radius: 14px; border: 1px solid #edf0f6; box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.04); }
        .pres-wrap .card-header { background: #fff; border-bottom: 1px solid #edf0f6; font-weight: 700; }
        .pres-section { background: #f8fafc; border: 1px solid #edf0f6; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
        .pres-section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #64748b; margin-bottom: 14px; }
        .pres-option { border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; padding: 12px 14px; cursor: pointer; height: 100%; }
        .pres-option.is-active { border-color: #6366f1; background: #f5f3ff; box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
        .pres-option input { margin-right: 8px; }
        .pres-sheet-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; margin-bottom: 14px; }
        .pres-sheet-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
        .pres-sheet-title-input { font-weight: 700; font-size: 15px; border: 0; border-bottom: 2px solid #e2e8f0; background: transparent; min-width: 220px; padding: 4px 0; }
        .pres-sheet-title-input:focus { outline: none; border-bottom-color: #6366f1; }
        .pres-col-group { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px; margin-bottom: 12px; }
        .pres-col-group h6 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #475569; }
        .pres-col-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 13px; }
        .pres-col-item.is-disabled { opacity: .55; }
        .pres-preview-table { font-size: 12px; }
        .pres-preview-table th { background: #f1f5f9; font-size: 10px; text-transform: uppercase; }
        .pres-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; }
        .pres-quick-btns .btn { font-size: 12px; }
        .pres-sheet-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
        .pres-sheet-meta label { font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 4px; display: block; }
        .pres-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: #eef2ff; color: #4338ca; padding: 3px 8px; border-radius: 999px; }
    </style>

    <div class="container-fluid pres-wrap">
        <div class="row mt-3">
            <div class="col-12 d-flex flex-wrap justify-content-between align-items-start mb-3">
                <div>
                    <h4 class="page-title mb-0">{{ __('Payroll Register (Excel)') }}</h4>
                    <p class="text-muted mb-0 small">{{ __('Build a workbook with one or more sheets. Each sheet can use its own column preset.') }}</p>
                </div>
                <div class="pres-toolbar">
                    <a href="{{ route('payroll.index') }}" class="btn btn-outline-primary btn-sm">{{ __('Payroll') }}</a>
                    <a href="{{ route('website.settings') }}#feaures" class="btn btn-outline-secondary btn-sm">{{ __('Features') }}</a>
                </div>
            </div>

            @if(session('message'))
                <div class="col-12"><div class="alert alert-success">{{ session('message') }}</div></div>
            @endif
            @if($errors->any())
                <div class="col-12"><div class="alert alert-danger">{{ $errors->first() }}</div></div>
            @endif

            <div class="col-lg-8">
                <form method="post" action="{{ route('payroll.register.export.settings.update') }}" id="presForm">
                    @csrf

                    <div class="pres-section">
                        <div class="pres-section-title">{{ __('Export packaging') }}</div>
                        <div class="row">
                            @foreach([
                                Pres::EXPORT_PACKAGING_WORKBOOK => [__('Single workbook'), __('All sheets in one .xlsx file.')],
                                Pres::EXPORT_PACKAGING_ZIP => [__('ZIP archive'), __('Each sheet as a separate Excel file in a ZIP.')],
                            ] as $val => [$title, $desc])
                                <div class="col-md-6 mb-2">
                                    <label class="pres-option d-block mb-0 @if($exportPackaging === $val) is-active @endif">
                                        <input type="radio" name="export_packaging" value="{{ $val }}" @checked($exportPackaging === $val)>
                                        <strong>{{ $title }}</strong>
                                        <div class="small text-muted">{{ $desc }}</div>
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="pres-section">
                        <div class="d-flex flex-wrap justify-content-between align-items-center mb-2">
                            <div class="pres-section-title mb-0">{{ __('Quick templates') }}</div>
                        </div>
                        <div class="pres-quick-btns d-flex flex-wrap gap-2 mb-2">
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-pres-template="single-standard">{{ __('1 sheet — Standard') }}</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-pres-template="single-full">{{ __('1 sheet — Full') }}</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-pres-template="split-standard">{{ __('2 sheets — Earnings + Deductions') }}</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-pres-template="triple-mix">{{ __('3 sheets — Full + Custom + Standard') }}</button>
                        </div>
                        <p class="small text-muted mb-0">{{ __('Templates replace the sheet list below. You can still edit each sheet after applying.') }}</p>
                    </div>

                    <div class="pres-section">
                        <div class="d-flex flex-wrap justify-content-between align-items-center mb-2">
                            <div class="pres-section-title mb-0">{{ __('Workbook sheets') }} <span class="pres-badge" id="presSheetCount">{{ count($formSheets) }}</span></div>
                            <button type="button" class="btn btn-sm btn-primary" id="presAddSheet">{{ __('Add sheet') }}</button>
                        </div>
                        <div id="presSheets">
                            @foreach($formSheets as $index => $sheet)
                                @include('admin.payroll.partials.register_export_sheet', [
                                    'index' => $index,
                                    'sheet' => $sheet,
                                    'registry' => $registry,
                                    'groups' => $groups,
                                ])
                            @endforeach
                        </div>
                    </div>

                    <div class="text-right">
                        <button type="submit" class="btn btn-primary">{{ __('Save settings') }}</button>
                    </div>
                </form>
            </div>

            <div class="col-lg-4">
                @foreach($sheetPreviews as $preview)
                    <div class="card mb-3">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <span>{{ $preview['title'] }}</span>
                            <span class="pres-badge">{{ count($preview['columns']) }} {{ __('cols') }}</span>
                        </div>
                        <div class="card-body p-2">
                            <div class="table-responsive" style="max-height: 280px; overflow-y: auto;">
                                <table class="table table-sm pres-preview-table mb-0">
                                    <thead><tr><th>{{ __('Column') }}</th><th>{{ __('Group') }}</th></tr></thead>
                                    <tbody>
                                    @foreach($preview['columns'] as $col)
                                        <tr>
                                            <td>{{ $col['label'] }}</td>
                                            <td class="text-muted">{{ $groups[$col['group']] ?? $col['group'] }}</td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <template id="presSheetTemplate">
        @include('admin.payroll.partials.register_export_sheet', [
            'index' => '__INDEX__',
            'sheet' => Pres::defaultSheet(),
            'registry' => $registry,
            'groups' => $groups,
        ])
    </template>
@endsection

@section('script')
    <script>
        (function () {
            const maxSheets = {{ (int) $maxSheets }};
            const sheetsEl = document.getElementById('presSheets');
            const sheetCountEl = document.getElementById('presSheetCount');
            const templateEl = document.getElementById('presSheetTemplate');

            function reindexSheets() {
                sheetsEl.querySelectorAll('.pres-sheet-card').forEach((card, idx) => {
                    card.dataset.sheetIndex = String(idx);
                    card.querySelector('.pres-sheet-num').textContent = String(idx + 1);
                    card.querySelectorAll('[name]').forEach((input) => {
                        input.name = input.name.replace(/sheets\[\d+]/, 'sheets[' + idx + ']');
                    });
                    card.querySelectorAll('[id]').forEach((el) => {
                        el.id = el.id.replace(/pres_sheet_\d+/, 'pres_sheet_' + idx);
                    });
                    card.querySelectorAll('label[for]').forEach((el) => {
                        el.htmlFor = el.htmlFor.replace(/pres_sheet_\d+/, 'pres_sheet_' + idx);
                    });
                });
                sheetCountEl.textContent = String(sheetsEl.querySelectorAll('.pres-sheet-card').length);
                syncAddButton();
            }

            function syncAddButton() {
                const count = sheetsEl.querySelectorAll('.pres-sheet-card').length;
                document.getElementById('presAddSheet').disabled = count >= maxSheets;
            }

            function bindSheetCard(card) {
                card.querySelector('.pres-remove-sheet')?.addEventListener('click', () => {
                    if (sheetsEl.querySelectorAll('.pres-sheet-card').length <= 1) return;
                    card.remove();
                    reindexSheets();
                });

                const presetInputs = card.querySelectorAll('.pres-preset-input');
                const panel = card.querySelector('.pres-column-panel');
                const checks = card.querySelectorAll('.pres-col-check');

                function syncPresetUi() {
                    const custom = card.querySelector('.pres-preset-input:checked')?.value === 'custom';
                    if (panel) panel.style.opacity = custom ? '1' : '.65';
                    checks.forEach((el) => {
                        if (el.dataset.required === '1') return;
                        el.disabled = !custom || el.closest('.is-disabled');
                    });
                }

                const totalsSelect = card.querySelector('select[name$="[totals_mode]"]');

                presetInputs.forEach((el) => {
                    el.addEventListener('change', () => {
                        card.querySelectorAll('.pres-preset-option').forEach((opt) => opt.classList.remove('is-active'));
                        el.closest('.pres-preset-option')?.classList.add('is-active');
                        if (totalsSelect) {
                            totalsSelect.value = el.value === 'minimal' ? 'absolute' : 'visible';
                        }
                        syncPresetUi();
                    });
                });

                card.querySelector('.pres-select-all')?.addEventListener('click', () => {
                    const custom = card.querySelector('.pres-preset-input[value="custom"]');
                    if (custom) {
                        custom.checked = true;
                        custom.dispatchEvent(new Event('change'));
                    }
                    checks.forEach((el) => { if (!el.disabled) el.checked = true; });
                });

                syncPresetUi();
            }

            function addSheet(html) {
                const count = sheetsEl.querySelectorAll('.pres-sheet-card').length;
                if (count >= maxSheets) return;
                const wrapper = document.createElement('div');
                wrapper.innerHTML = html.replace(/__INDEX__/g, String(count));
                const card = wrapper.firstElementChild;
                sheetsEl.appendChild(card);
                bindSheetCard(card);
                reindexSheets();
            }

            document.getElementById('presAddSheet')?.addEventListener('click', () => {
                addSheet(templateEl.innerHTML);
            });

            sheetsEl.querySelectorAll('.pres-sheet-card').forEach(bindSheetCard);

            document.querySelectorAll('input[name="export_packaging"]').forEach((el) => {
                el.addEventListener('change', () => {
                    document.querySelectorAll('input[name="export_packaging"]').forEach((p) => p.closest('.pres-option')?.classList.remove('is-active'));
                    el.closest('.pres-option')?.classList.add('is-active');
                });
            });

            const templates = {
                'single-standard': [{ title: 'Payroll Register', preset: 'standard', column_filter: '' }],
                'single-full': [{ title: 'Payroll Register', preset: 'full', column_filter: '' }],
                'split-standard': [
                    { title: 'Earnings Register', preset: 'standard', column_filter: 'earnings' },
                    { title: 'Deductions Register', preset: 'standard', column_filter: 'deductions' },
                ],
                'triple-mix': [
                    { title: 'Full Register', preset: 'full', column_filter: '' },
                    { title: 'Custom View', preset: 'custom', column_filter: '' },
                    { title: 'Standard Summary', preset: 'standard', column_filter: '' },
                ],
            };

            document.querySelectorAll('[data-pres-template]').forEach((btn) => {
                btn.addEventListener('click', () => {
                    const key = btn.getAttribute('data-pres-template');
                    const defs = templates[key];
                    if (!defs) return;
                    sheetsEl.innerHTML = '';
                    defs.forEach((def, i) => {
                        let html = templateEl.innerHTML.replace(/__INDEX__/g, String(i));
                        const wrapper = document.createElement('div');
                        wrapper.innerHTML = html;
                        const card = wrapper.firstElementChild;
                        card.querySelector('.pres-sheet-title-input').value = def.title;
                        const preset = card.querySelector('.pres-preset-input[value="' + def.preset + '"]');
                        if (preset) preset.checked = true;
                        const filter = card.querySelector('select[name$="[column_filter]"]');
                        if (filter) filter.value = def.column_filter || 'none';
                        const totals = card.querySelector('select[name$="[totals_mode]"]');
                        if (totals) totals.value = def.preset === 'minimal' ? 'absolute' : 'visible';
                        sheetsEl.appendChild(card);
                        bindSheetCard(card);
                    });
                    reindexSheets();
                });
            });

            reindexSheets();
        })();
    </script>
@endsection