@extends('layouts.app')
@section('content')

    @include('layouts.toolbar')

    <style>
        .weeks-card { max-width: 900px; margin: 0 auto; }
        .quickfill-bar {
            background: #f8fafb;
            border: 1px solid #e6e9ed;
            border-radius: 8px;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 24px;
        }
        .quickfill-bar .qf-icon { color: #6c757d; }
        .quickfill-bar label { margin: 0; font-weight: 500; color: #555; }
        .quickfill-bar input, .quickfill-bar select {
            border: 1px solid #d0d5dd;
            border-radius: 6px;
            padding: 6px 10px;
            font-size: 14px;
            background: #fff;
        }
        .quickfill-bar .btn-autofill {
            background: #fff;
            border: 1px solid #d0d5dd;
            border-radius: 6px;
            padding: 6px 14px;
            font-weight: 500;
            font-size: 14px;
            color: #1f2937;
            margin-left: auto;
        }
        .quickfill-bar .btn-autofill:hover { background: #f3f4f6; }

        .weeks-table { width: 100%; border-collapse: separate; border-spacing: 0; }
        .weeks-table thead th {
            font-size: 11px;
            font-weight: 600;
            color: #6b7280;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            padding: 8px 12px;
            border-bottom: 1px solid #e6e9ed;
        }
        .weeks-table tbody td {
            padding: 12px;
            border-bottom: 1px solid #f0f1f3;
            vertical-align: middle;
        }
        .weeks-table tr.week-row td:first-child { font-weight: 600; color: #1f2937; }
        .weeks-table input[type=date] {
            border: 1px solid #d0d5dd;
            border-radius: 6px;
            padding: 6px 10px;
            font-size: 14px;
            width: 100%;
            background: #fff;
        }
        .weeks-table .duration-cell { color: #6b7280; font-size: 14px; }
        .weeks-table .btn-remove {
            background: transparent;
            border: 1px solid #e6e9ed;
            border-radius: 6px;
            width: 28px; height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #6b7280;
        }
        .weeks-table .btn-remove:hover { background: #f3f4f6; color: #ef4444; }
        .weeks-table tr.week-row.is-current td { background: #ecfdf5; }
        .weeks-table tr.week-row.is-invalid td { background: #fef2f2; }
        .weeks-table tr.week-row.is-invalid input[type=date] { border-color: #ef4444; }
        .badge-now {
            display: inline-block;
            background: #d1fae5;
            color: #065f46;
            border-radius: 10px;
            padding: 1px 8px;
            font-size: 11px;
            font-weight: 600;
            margin-left: 6px;
        }
        .badge-invalid { color: #b91c1c; font-weight: 600; font-size: 14px; }
        .invalid-msg {
            display: flex;
            align-items: center;
            gap: 6px;
            color: #b91c1c;
            font-size: 12px;
            margin-top: 4px;
        }
        .btn-add-week {
            display: block;
            width: 100%;
            background: #fff;
            border: 1px dashed #d0d5dd;
            border-radius: 8px;
            padding: 12px;
            font-weight: 500;
            color: #1f2937;
            margin-top: 16px;
        }
        .btn-add-week:hover { background: #f9fafb; }
        .footer-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 24px;
            padding-top: 16px;
            border-top: 1px solid #f0f1f3;
        }
        .footer-actions .btn-cancel {
            background: #fff;
            border: 1px solid #d0d5dd;
            color: #1f2937;
            padding: 8px 18px;
            border-radius: 6px;
            font-weight: 500;
        }
        .footer-actions .btn-save {
            background: #10b981;
            border: none;
            color: #fff;
            padding: 8px 18px;
            border-radius: 6px;
            font-weight: 500;
        }
        .week-meta {
            color: #6b7280;
            font-size: 13px;
            margin-top: 2px;
        }
    </style>

    <div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl">
        <div class="content flex-row-fluid" id="kt_content">
            <div class="card weeks-card">
                <div class="card-header border-0 pt-6 align-items-center">
                    <div class="card-title d-flex flex-column">
                        <h3 class="fw-bold text-gray-800 fs-2 mb-1">Add weeks</h3>
                        <span class="week-meta">Enrollment year {{ session('enrollment_year') }} · <span id="weekCountLabel">0</span> weeks</span>
                    </div>
                </div>
                <div class="card-body py-4">
                    <form id="SetWeekForm" name="SetWeekForm" class="pt-1">
                        {{ csrf_field() }}

                        <div class="quickfill-bar">
                            <i class="fa-solid fa-bolt qf-icon"></i>
                            <span class="fw-semibold">Quick fill:</span>
                            <label for="qf_start">Start</label>
                            <input type="date" id="qf_start">
                            <label for="qf_length">Length</label>
                            <select id="qf_length">
                                <option value="3">3 days</option>
                                <option value="4">4 days</option>
                                <option value="5" selected>5 days</option>
                                <option value="6">6 days</option>
                                <option value="7">7 days</option>
                            </select>
                            <button type="button" class="btn-autofill" id="qf_apply">Auto-fill all weeks</button>
                        </div>

                        <table class="weeks-table" id="weeksTable">
                            <thead>
                                <tr>
                                    <th>Week</th>
                                    <th>Start date</th>
                                    <th>End date</th>
                                    <th>Duration</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @for ($x = 1; $x <= 10; $x++)
                                    <tr class="week-row" data-order="{{ $x }}">
                                        <td>
                                            <span class="week-label">Week {{ $x }}</span>
                                            <span class="badge-now d-none">Now</span>
                                        </td>
                                        <td>
                                            @if($x == 10)
                                                <input type="date" name="start_date_{{ $x }}" class="js-start" value="{{ old('start_date_'.$x) }}">
                                            @else
                                                <input type="date" name="start_date[{{ $x }}]" class="js-start" value="{{ old('start_date.'.$x) }}">
                                            @endif
                                        </td>
                                        <td>
                                            @if($x == 10)
                                                <input type="date" name="end_date_{{ $x }}" class="js-end" value="{{ old('end_date_'.$x) }}">
                                            @else
                                                <input type="date" name="end_date[{{ $x }}]" class="js-end" value="{{ old('end_date.'.$x) }}">
                                            @endif
                                            <div class="invalid-msg d-none"><i class="fa-solid fa-circle-exclamation"></i> End date must be after start date</div>
                                        </td>
                                        <td class="duration-cell">—</td>
                                        <td class="text-end">
                                            <button type="button" class="btn-remove" title="Remove">×</button>
                                        </td>
                                    </tr>
                                @endfor
                            </tbody>
                        </table>

                        <button type="button" class="btn-add-week" id="addWeekBtn">
                            <i class="fa-solid fa-plus me-1"></i> Add another week
                        </button>

                        <div class="footer-actions">
                            <a href="{{ url('set-week/list') }}" class="btn-cancel">Cancel</a>
                            <button type="button" class="btn-save" id="SubmitForm">Save changes</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('js')
    <script type="text/javascript">
        (function() {
            const today = new Date();
            today.setHours(0,0,0,0);

            function parseDate(v) {
                if (!v) return null;
                const d = new Date(v + 'T00:00:00');
                return isNaN(d.getTime()) ? null : d;
            }
            function fmtISO(d) {
                const y = d.getFullYear();
                const m = String(d.getMonth()+1).padStart(2,'0');
                const dd = String(d.getDate()).padStart(2,'0');
                return `${y}-${m}-${dd}`;
            }
            function addDays(d, n) {
                const r = new Date(d.getTime());
                r.setDate(r.getDate() + n);
                return r;
            }
            function diffDays(a, b) {
                const ms = b.getTime() - a.getTime();
                return Math.round(ms / 86400000) + 1;
            }

            function recalcRow($row) {
                const $start = $row.find('.js-start');
                const $end = $row.find('.js-end');
                const start = parseDate($start.val());
                const end = parseDate($end.val());
                const $duration = $row.find('.duration-cell');
                const $invalidMsg = $row.find('.invalid-msg');
                const $nowBadge = $row.find('.badge-now');

                $row.removeClass('is-current is-invalid');
                $invalidMsg.addClass('d-none');
                $nowBadge.addClass('d-none');

                if (start && end) {
                    if (end < start) {
                        $row.addClass('is-invalid');
                        $invalidMsg.removeClass('d-none');
                        $duration.html('<span class="badge-invalid">Invalid</span>');
                    } else {
                        const days = diffDays(start, end);
                        $duration.text(days + ' ' + (days === 1 ? 'day' : 'days'));
                        if (today >= start && today <= end) {
                            $row.addClass('is-current');
                            $nowBadge.removeClass('d-none');
                        }
                    }
                } else {
                    $duration.text('—');
                }
            }

            function isRowEmpty($row) {
                return !$row.find('.js-start').val() && !$row.find('.js-end').val();
            }

            function refreshVisibility() {
                let visibleCount = 0;
                $('#weeksTable tbody tr.week-row').each(function() {
                    if (isRowEmpty($(this)) && $(this).data('hidden')) {
                        $(this).hide();
                    } else {
                        $(this).show();
                        visibleCount++;
                    }
                });
                $('#weekCountLabel').text(visibleCount);
                const hiddenCount = $('#weeksTable tbody tr.week-row:hidden').length;
                $('#addWeekBtn').toggle(hiddenCount > 0);
            }

            function recalcAll() {
                $('#weeksTable tbody tr.week-row').each(function() {
                    recalcRow($(this));
                });
                refreshVisibility();
            }

            $('#weeksTable tbody tr.week-row').each(function() {
                const order = parseInt($(this).data('order'), 10);
                if (isRowEmpty($(this)) && order > 1) {
                    $(this).data('hidden', true);
                }
            });

            $(document).on('input change', '.js-start, .js-end', function() {
                recalcRow($(this).closest('tr.week-row'));
                refreshVisibility();
            });

            $(document).on('click', '.btn-remove', function() {
                const $row = $(this).closest('tr.week-row');
                $row.find('.js-start, .js-end').val('');
                $row.data('hidden', true);
                recalcRow($row);
                refreshVisibility();
            });

            $('#addWeekBtn').on('click', function() {
                const $nextHidden = $('#weeksTable tbody tr.week-row:hidden').first();
                if ($nextHidden.length) {
                    $nextHidden.data('hidden', false);
                    $nextHidden.show();

                    const $rows = $('#weeksTable tbody tr.week-row:visible');
                    if ($rows.length > 1) {
                        const $prev = $rows.eq($rows.length - 2);
                        const prevEnd = parseDate($prev.find('.js-end').val());
                        const lengthDays = parseInt($('#qf_length').val(), 10);
                        if (prevEnd) {
                            const start = addDays(prevEnd, 3);
                            const end = addDays(start, lengthDays - 1);
                            $nextHidden.find('.js-start').val(fmtISO(start));
                            $nextHidden.find('.js-end').val(fmtISO(end));
                        }
                    }
                    recalcRow($nextHidden);
                    refreshVisibility();
                }
            });

            $('#qf_apply').on('click', function() {
                const startStr = $('#qf_start').val();
                const lengthDays = parseInt($('#qf_length').val(), 10);
                if (!startStr) return;
                let cursor = parseDate(startStr);
                $('#weeksTable tbody tr.week-row').each(function() {
                    const $row = $(this);
                    const start = new Date(cursor.getTime());
                    const end = addDays(start, lengthDays - 1);
                    $row.find('.js-start').val(fmtISO(start));
                    $row.find('.js-end').val(fmtISO(end));
                    $row.data('hidden', false);
                    cursor = addDays(end, 3);
                });
                recalcAll();
            });

            recalcAll();

            $('#SubmitForm').on('click', function() {
                $('#weeksTable tbody tr.week-row').each(function() {
                    const $row = $(this);
                    const empty = isRowEmpty($row);
                    $row.find('.js-start, .js-end').prop('disabled', empty);
                });
                const fd = new FormData($('#SetWeekForm')[0]);
                $('#weeksTable .js-start, #weeksTable .js-end').prop('disabled', false);
                $.ajax({
                    type: 'POST',
                    url: '{{ url("set-week/store") }}',
                    processData: false,
                    contentType: false,
                    data: fd,
                    dataType: 'json',
                    success: function(data) {
                        if (data.success) {
                            toastr.success(data.success);
                            setTimeout(function() {
                                window.location.href = "{{ url('set-week/list') }}";
                            }, 1500);
                        } else if (data.failure) {
                            let htmlError = '';
                            $.each(data.failure, function(index, value) {
                                htmlError += '<li>' + value + '</li>';
                            });
                            toastr.error(htmlError);
                        }
                    }
                });
            });
        })();
    </script>
@endsection