@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | '.__('Payroll Period Settings'))
@section('content')
    @php
        $periodMode = old('period_mode', $settings['period_mode']);
        $salaryBasis = old('salary_basis', $settings['salary_basis']);
        $blockIncomplete = (bool) old('block_incomplete_calendar', $settings['block_incomplete_calendar']);
        $exampleMonthNum = (int) date('n');
        $exampleYearNum = (int) date('Y');

        $modeLabels = [
            'calendar_month' => __('Calendar month'),
            'month_cutoff' => __('Month cutoff'),
            'cross_month' => __('Cross-month cycle'),
        ];
        $salaryLabels = [
            'full_month' => __('Full monthly gross'),
            'period_prorata' => __('Pro-rated gross'),
        ];
        $monthShortNames = array_map(
            fn ($m) => \Carbon\Carbon::create(null, $m, 1)->format('M'),
            range(1, 12)
        );
    @endphp
    <style>
        .pps-wrap .card { border-radius: 14px; border: 1px solid #edf0f6; box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.04); }
        .pps-wrap .card-header { background: #fff; border-bottom: 1px solid #edf0f6; font-weight: 700; }
        .pps-wrap label, .pps-wrap .pps-label { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.55); margin-bottom: 6px; }
        .pps-stat { background: #fff; border: 1px solid #edf0f6; border-radius: 10px; padding: 12px 14px; height: 100%; }
        .pps-stat .num { font-size: 1rem; font-weight: 800; line-height: 1.35; color: #0f172a; }
        .pps-stat .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; }
        .pps-section { background: #f8fafc; border: 1px solid #edf0f6; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
        .pps-section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #64748b; margin-bottom: 14px; }
        .pps-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
        .pps-mode-card { border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; padding: 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; height: 100%; }
        .pps-mode-card:hover { border-color: #c7d2fe; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08); }
        .pps-mode-card.is-active { border-color: #6366f1; background: #f5f3ff; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12); }
        .pps-mode-card__icon { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #eef2ff; color: #4f46e5; font-size: 1rem; margin-bottom: 8px; }
        .pps-mode-card.is-active .pps-mode-card__icon { background: #6366f1; color: #fff; }
        .pps-mode-card__title { font-size: 13px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
        .pps-mode-card__desc { font-size: 12px; color: #64748b; line-height: 1.45; margin: 0; }
        .pps-hint { background: #fff; border: 1px dashed #dbeafe; border-radius: 10px; padding: 12px 14px; font-size: 13px; color: #334155; line-height: 1.5; }
        .pps-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; margin-top: 12px; }
        .pps-preview { background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%); border: 1px solid #c7d2fe; border-radius: 12px; padding: 16px; }
        .pps-preview__label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #4338ca; margin-bottom: 6px; }
        .pps-preview__value { font-size: 1.05rem; font-weight: 800; color: #1e1b4b; }
        .pps-preview__meta { font-size: 12px; color: #64748b; margin-top: 4px; }
        .pps-toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; }
        .pps-toggle-row__text { flex: 1; }
        .pps-toggle-row__title { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 2px; }
        .pps-toggle-row__help { font-size: 12px; color: #64748b; line-height: 1.45; margin: 0; }
        .pps-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding-top: 4px; }
        .pps-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; }
        @media (max-width: 991.98px) {
            .pps-mode-grid { grid-template-columns: 1fr; }
        }
    </style>

    <div class="container-fluid pps-wrap">
        <div class="row mt-3">
            <div class="col-12 d-flex flex-wrap justify-content-between align-items-start mb-3">
                <div class="mb-2 mb-md-0">
                    <h4 class="page-title mb-0">{{ __('Payroll Period Settings') }}</h4>
                    <p class="text-muted mb-0">{{ __('Control attendance windows, absent rules, and salary basis when generating payroll.') }}</p>
                </div>
                <div class="pps-toolbar">
                    <a href="{{ route('payroll.index') }}" class="btn btn-outline-primary">
                        <i class="las la-file-invoice-dollar"></i> {{ __('Payroll') }}
                    </a>
                    <a href="{{ route('website.settings') }}#feaures" class="btn btn-outline-secondary">
                        <i class="las la-cog"></i> {{ __('Features Active') }}
                    </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-12 mb-3">
                <div class="row">
                    <div class="col-md-4 mb-2 mb-md-0">
                        <div class="pps-stat">
                            <div class="num">{{ $modeLabels[$periodMode] ?? $periodMode }}</div>
                            <div class="lbl">{{ __('Period mode') }}</div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-2 mb-md-0">
                        <div class="pps-stat">
                            <div class="num">{{ $salaryLabels[$salaryBasis] ?? $salaryBasis }}</div>
                            <div class="lbl">{{ __('Salary basis') }}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="pps-stat">
                            <div class="num {{ $blockIncomplete ? 'text-warning' : 'text-success' }}">
                                {{ $blockIncomplete ? __('Blocked') : __('Allowed') }}
                            </div>
                            <div class="lbl">{{ __('Mid-month generation') }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div class="card">
                    <div class="card-header">{{ __('Configuration') }}</div>
                    <form action="{{ route('payroll.period.settings.update') }}" method="POST" class="card-body" id="payrollPeriodForm">
                        @csrf

                        <div class="pps-section">
                            <div class="pps-section-title">{{ __('Attendance period') }}</div>

                            <label class="pps-label d-block">{{ __('Period mode') }}</label>
                            <select name="period_mode" id="period_mode" class="form-control d-none" required>
                                <option value="calendar_month" @selected($periodMode === 'calendar_month')>
                                    {{ __('Calendar month (1st to last day of month)') }}
                                </option>
                                <option value="month_cutoff" @selected($periodMode === 'month_cutoff')>
                                    {{ __('Month cutoff (e.g. 1st to 25th, generate on cutoff day)') }}
                                </option>
                                <option value="cross_month" @selected($periodMode === 'cross_month')>
                                    {{ __('Cross-month cycle (e.g. 26th prev month to 25th current month)') }}
                                </option>
                            </select>

                            <div class="pps-mode-grid" id="ppsModeGrid">
                                <div class="pps-mode-card" data-mode="calendar_month">
                                    <div class="pps-mode-card__icon"><i class="las la-calendar"></i></div>
                                    <div class="pps-mode-card__title">{{ __('Calendar month') }}</div>
                                    <p class="pps-mode-card__desc">{{ __('1st through last day of the labeled month.') }}</p>
                                </div>
                                <div class="pps-mode-card" data-mode="month_cutoff">
                                    <div class="pps-mode-card__icon"><i class="las la-cut"></i></div>
                                    <div class="pps-mode-card__title">{{ __('Month cutoff') }}</div>
                                    <p class="pps-mode-card__desc">{{ __('Day 1 through a fixed cutoff day each month.') }}</p>
                                </div>
                                <div class="pps-mode-card" data-mode="cross_month">
                                    <div class="pps-mode-card__icon"><i class="las la-exchange-alt"></i></div>
                                    <div class="pps-mode-card__title">{{ __('Cross-month') }}</div>
                                    <p class="pps-mode-card__desc">{{ __('Spans previous month start day to current month end day.') }}</p>
                                </div>
                            </div>

                            <div class="pps-hint mt-3" id="mode_hint_calendar">
                                {{ __('Attendance covers the full calendar month. If you generate payroll before month end, working days after today without attendance are counted as absent.') }}
                            </div>
                            <div class="pps-hint mt-3" id="mode_hint_cutoff" style="display:none;">
                                {{ __('Attendance is counted only from the 1st through the cutoff day. Days after cutoff are not treated as absent.') }}
                            </div>
                            <div class="pps-hint mt-3" id="mode_hint_cross" style="display:none;">
                                {{ __('Payroll labeled by month uses the previous month start day through current month end day (e.g. Feb payroll = Jan 26 – Feb 25).') }}
                            </div>

                            <div class="pps-panel" id="wrap_cutoff_day" style="display:none;">
                                <label class="pps-label" for="cutoff_day">{{ __('Cutoff day of month') }}</label>
                                <input type="number" name="cutoff_day" id="cutoff_day" min="1" max="28" class="form-control"
                                       style="max-width: 160px;"
                                       value="{{ old('cutoff_day', $settings['cutoff_day']) }}">
                                <small class="text-muted d-block mt-2">{{ __('Payroll period runs from day 1 through this day (max 28).') }}</small>
                            </div>

                            <div class="pps-panel" id="wrap_cross_month" style="display:none;">
                                <div class="form-row">
                                    <div class="form-group col-md-6 mb-md-0">
                                        <label class="pps-label" for="period_start_day">{{ __('Period start day') }}</label>
                                        <input type="number" name="period_start_day" id="period_start_day" min="1" max="28" class="form-control"
                                               value="{{ old('period_start_day', $settings['period_start_day']) }}">
                                        <small class="text-muted d-block mt-2">{{ __('Day in the previous month (e.g. 26).') }}</small>
                                    </div>
                                    <div class="form-group col-md-6 mb-0">
                                        <label class="pps-label" for="period_end_day">{{ __('Period end day') }}</label>
                                        <input type="number" name="period_end_day" id="period_end_day" min="1" max="28" class="form-control"
                                               value="{{ old('period_end_day', $settings['period_end_day']) }}">
                                        <small class="text-muted d-block mt-2">{{ __('Day in the labeled month (e.g. 25).') }}</small>
                                    </div>
                                </div>
                            </div>

                            <div class="mt-3" id="wrap_block_incomplete">
                                <div class="pps-toggle-row">
                                    <div class="pps-toggle-row__text">
                                        <div class="pps-toggle-row__title">{{ __('Block incomplete current month') }}</div>
                                        <p class="pps-toggle-row__help">
                                            {{ __('Prevent generating payroll for the current calendar month before it ends. When off, you can generate mid-month and remaining working days without attendance count as absent.') }}
                                        </p>
                                    </div>
                                    <label class="toggle-control mb-0">
                                        <input type="checkbox" id="block_incomplete_calendar"
                                               name="block_incomplete_calendar" value="1"
                                            @checked($blockIncomplete)>
                                        <span class="control"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="pps-section">
                            <div class="pps-section-title">{{ __('Salary calculation') }}</div>
                            <label class="pps-label" for="salary_basis">{{ __('Salary basis') }}</label>
                            <select name="salary_basis" id="salary_basis" class="form-control" required>
                                <option value="full_month" @selected($salaryBasis === 'full_month')>
                                    {{ __('Full monthly gross (deductions based on period working days)') }}
                                </option>
                                <option value="period_prorata" @selected($salaryBasis === 'period_prorata')>
                                    {{ __('Pro-rated gross for partial period') }}
                                </option>
                            </select>
                            <small class="text-muted d-block mt-2">
                                {{ __('Full month keeps gross fixed and adjusts absent/unpaid deductions. Pro-rated scales gross when the attendance period is shorter than a full month.') }}
                            </small>
                        </div>

                        <div class="pps-preview mb-3">
                            <div class="pps-preview__label">{{ __('Live preview') }}</div>
                            <div class="pps-preview__value" id="ppsExampleValue">{{ $exampleLabel }}</div>
                            <div class="pps-preview__meta">
                                {{ __('For payroll labeled :month, the attendance period will be:', ['month' => $exampleMonthName]) }}
                            </div>
                        </div>

                        <div class="pps-actions">
                            <a href="{{ route('payroll.index') }}" class="btn btn-light">{{ __('Cancel') }}</a>
                            <button type="submit" class="btn btn-primary">
                                <i class="las la-save"></i> {{ __('Save settings') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        (function () {
            var modeSelect = document.getElementById('period_mode');
            var exampleValue = document.getElementById('ppsExampleValue');
            var exampleMonth = {{ $exampleMonthNum }};
            var exampleYear = {{ $exampleYearNum }};
            var monthNames = @json($monthShortNames);

            function clampDay(value) {
                var day = parseInt(value, 10);
                if (isNaN(day)) {
                    return 1;
                }
                return Math.max(1, Math.min(28, day));
            }

            function padDay(day) {
                return String(day).padStart(2, '0');
            }

            function daysInMonth(year, month) {
                return new Date(year, month, 0).getDate();
            }

            function formatPreviewDate(day, month, year) {
                return padDay(day) + ' ' + monthNames[month - 1] + ' ' + year;
            }

            function updateExamplePreview() {
                var mode = modeSelect.value;
                var cutoffDay = clampDay(document.getElementById('cutoff_day').value);
                var startDay = clampDay(document.getElementById('period_start_day').value);
                var endDay = clampDay(document.getElementById('period_end_day').value);
                var start;
                var end;

                if (mode === 'month_cutoff') {
                    start = formatPreviewDate(1, exampleMonth, exampleYear);
                    end = formatPreviewDate(Math.min(cutoffDay, daysInMonth(exampleYear, exampleMonth)), exampleMonth, exampleYear);
                } else if (mode === 'cross_month') {
                    var prevMonth = exampleMonth === 1 ? 12 : exampleMonth - 1;
                    var prevYear = exampleMonth === 1 ? exampleYear - 1 : exampleYear;
                    start = formatPreviewDate(Math.min(startDay, daysInMonth(prevYear, prevMonth)), prevMonth, prevYear);
                    end = formatPreviewDate(Math.min(endDay, daysInMonth(exampleYear, exampleMonth)), exampleMonth, exampleYear);
                } else {
                    start = formatPreviewDate(1, exampleMonth, exampleYear);
                    end = formatPreviewDate(daysInMonth(exampleYear, exampleMonth), exampleMonth, exampleYear);
                }

                exampleValue.textContent = start + ' – ' + end;
            }

            function syncPeriodModeUi() {
                var mode = modeSelect.value;

                document.getElementById('wrap_cutoff_day').style.display = mode === 'month_cutoff' ? '' : 'none';
                document.getElementById('wrap_cross_month').style.display = mode === 'cross_month' ? '' : 'none';
                document.getElementById('wrap_block_incomplete').style.display = mode === 'calendar_month' ? '' : 'none';
                document.getElementById('mode_hint_calendar').style.display = mode === 'calendar_month' ? '' : 'none';
                document.getElementById('mode_hint_cutoff').style.display = mode === 'month_cutoff' ? '' : 'none';
                document.getElementById('mode_hint_cross').style.display = mode === 'cross_month' ? '' : 'none';

                document.querySelectorAll('.pps-mode-card').forEach(function (card) {
                    card.classList.toggle('is-active', card.getAttribute('data-mode') === mode);
                });

                updateExamplePreview();
            }

            document.querySelectorAll('.pps-mode-card').forEach(function (card) {
                card.addEventListener('click', function () {
                    modeSelect.value = card.getAttribute('data-mode');
                    syncPeriodModeUi();
                });
            });

            modeSelect.addEventListener('change', syncPeriodModeUi);
            ['cutoff_day', 'period_start_day', 'period_end_day'].forEach(function (id) {
                var input = document.getElementById(id);
                if (input) {
                    input.addEventListener('input', updateExamplePreview);
                }
            });

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