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

    @include('layouts.toolbar')

    @php
        use Carbon\Carbon;
        $weeksByOrder = $weeks->keyBy('order');
        $weekOptions = [];
        foreach ($weeks as $w) {
            $weekOptions[(int)$w->order] = [
                'order' => (int)$w->order,
                'label' => 'Week ' . $w->order,
                'dates' => Carbon::parse($w->start_date)->format('d M') . ' – ' . Carbon::parse($w->end_date)->format('d M'),
                'start' => $w->start_date,
                'end' => $w->end_date,
            ];
        }
    @endphp

    <style>
        .cycle-edit { width: 100%; }
        .cycle-edit .page-head {
            padding: 24px 28px 8px;
        }
        .cycle-edit .page-head h2 { margin: 0; font-size: 22px; font-weight: 700; color: #1f2937; }
        .cycle-edit .page-head .subtitle { color: #6b7280; font-size: 13px; margin-top: 2px; }

        .cycle-edit .form-body { padding: 16px 28px 24px; }

        .ec-card {
            background: #fff;
            border: 1px solid #e6e9ed;
            border-radius: 10px;
            padding: 18px 20px;
            margin-bottom: 16px;
        }
        .ec-card .ec-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
        }
        .ec-card .ec-title { font-size: 16px; font-weight: 700; color: #1f2937; }
        .ec-card .ec-optional { color: #9ca3af; font-size: 12px; font-weight: 500; }

        .ec-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        .ec-field label {
            display: block;
            font-size: 12px;
            font-weight: 600;
            color: #4b5563;
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .ec-field select, .ec-field input[type=date], .ec-field input[type=number] {
            width: 100%;
            border: 1px solid #d0d5dd;
            border-radius: 6px;
            padding: 8px 10px;
            font-size: 14px;
            background: #fff;
            color: #1f2937;
        }
        .ec-field select:focus, .ec-field input:focus {
            outline: 2px solid #10b981;
            border-color: #10b981;
        }

        .ec-summary {
            margin-top: 12px;
            background: #f8fafb;
            border-radius: 8px;
            padding: 10px 12px;
            font-size: 13px;
            color: #374151;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            flex-wrap: wrap;
        }
        .ec-summary .meta { color: #6b7280; }
        .ec-summary .bad { color: #b91c1c; font-weight: 600; }

        .ec-field.has-error select, .ec-field.has-error input { border-color: #ef4444; background: #fef2f2; }
        .ec-error { color: #b91c1c; font-size: 12px; margin-top: 4px; display: none; }
        .ec-error.show { display: block; }

        .transfer-card {
            background: #fff;
            border: 1px solid #e6e9ed;
            border-radius: 10px;
            padding: 18px 20px;
            margin-bottom: 16px;
        }
        .transfer-card .tc-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;
        }
        .transfer-card .tc-title { font-size: 16px; font-weight: 700; color: #1f2937; }
        .transfer-card .tc-sub { color: #6b7280; font-size: 12px; margin-bottom: 12px; }

        .ec-foot {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid #f0f1f3;
        }
        .ec-foot .btn-cancel {
            background: #fff;
            border: 1px solid #d0d5dd;
            color: #1f2937;
            padding: 8px 18px;
            border-radius: 6px;
            font-weight: 500;
            text-decoration: none;
        }
        .ec-foot .btn-save {
            background: #10b981;
            border: none;
            color: #fff;
            padding: 8px 18px;
            border-radius: 6px;
            font-weight: 500;
        }
        .ec-foot .btn-save:disabled { opacity: 0.6; cursor: not-allowed; }

        .overlap-warning {
            margin: 12px 0 0;
            background: #fef2f2;
            border: 1px solid #fecaca;
            color: #991b1b;
            border-radius: 8px;
            padding: 10px 12px;
            font-size: 13px;
            display: none;
        }
        .overlap-warning.show { display: block; }

        .no-weeks-banner {
            background: #fef3c7;
            border: 1px solid #fde68a;
            color: #92400e;
            padding: 12px 16px;
            border-radius: 8px;
            margin: 0 28px 16px;
            font-size: 13px;
        }
    </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 cycle-edit">
                <div class="page-head">
                    <h2>Edit billing cycles</h2>
                    <div class="subtitle">Enrollment year {{ $set_cycle->enrollment_year ?? session('enrollment_year') }} · {{ count($weekOptions) }} configured weeks</div>
                </div>

                @if(count($weekOptions) === 0)
                    <div class="no-weeks-banner">
                        <i class="fa-solid fa-triangle-exclamation me-1"></i>
                        No weeks have been configured yet. Set up <a href="{{ url('set-week/list') }}">Set Week</a> first.
                    </div>
                @endif

                <div class="form-body">
                    <form id="Set_Cycle_Form" name="Set_Cycle_Form">
                        {{ csrf_field() }}
                        <input type="hidden" name="id" value="{{ $set_cycle->id }}">
                        <input type="hidden" name="enrollment_year" value="{{ $set_cycle->enrollment_year ?? session('enrollment_year') }}">

                        @php
                            $cyclesMeta = [
                                ['key' => 'one', 'num' => 1, 'required' => true],
                                ['key' => 'two', 'num' => 2, 'required' => false],
                                ['key' => 'three', 'num' => 3, 'required' => false],
                            ];
                        @endphp

                        @foreach($cyclesMeta as $cm)
                            @php
                                $key = $cm['key'];
                                $startSel = $set_cycle->{"billing_start_week_$key"} ?? '';
                                $endSel = $set_cycle->{"billing_end_week_$key"} ?? '';
                                $invStart = $set_cycle->{"invoice_start_date_$key"} ?? '';
                                $invEnd = $set_cycle->{"invoice_end_date_$key"} ?? '';
                            @endphp
                            <div class="ec-card" data-cycle="{{ $cm['num'] }}">
                                <div class="ec-head">
                                    <div class="ec-title">Cycle {{ $cm['num'] }}</div>
                                    @if(!$cm['required'])
                                        <span class="ec-optional">Optional</span>
                                    @endif
                                </div>

                                <div class="ec-row">
                                    <div class="ec-field">
                                        <label>Start week</label>
                                        <select name="billing_start_week_{{ $key }}" class="form-select form-select-sm form-select-solid js-start-week" data-control="select2" data-placeholder="Select week" {{ $cm['required'] ? 'required' : '' }}>
                                            <option value="">— Select week —</option>
                                            @foreach($weekOptions as $w)
                                                <option value="{{ $w['order'] }}" data-start="{{ $w['start'] }}" data-end="{{ $w['end'] }}"
                                                        {{ (string)$startSel === (string)$w['order'] ? 'selected' : '' }}>
                                                    {{ $w['label'] }} ({{ $w['dates'] }})
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="ec-field">
                                        <label>End week</label>
                                        <select name="billing_end_week_{{ $key }}" class="form-select form-select-sm form-select-solid js-end-week" data-control="select2" data-placeholder="Select week" {{ $cm['required'] ? 'required' : '' }}>
                                            <option value="">— Select week —</option>
                                            @foreach($weekOptions as $w)
                                                <option value="{{ $w['order'] }}" data-start="{{ $w['start'] }}" data-end="{{ $w['end'] }}"
                                                        {{ (string)$endSel === (string)$w['order'] ? 'selected' : '' }}>
                                                    {{ $w['label'] }} ({{ $w['dates'] }})
                                                </option>
                                            @endforeach
                                        </select>
                                        <div class="ec-error js-week-error">End week must be on or after start week.</div>
                                    </div>
                                </div>

                                <div class="ec-row" style="margin-top: 12px;">
                                    <div class="ec-field">
                                        <label>Invoice opens</label>
                                        <input type="date" name="invoice_start_date_{{ $key }}" class="js-inv-start"
                                               value="{{ $invStart }}" {{ $cm['required'] ? 'required' : '' }}>
                                    </div>
                                    <div class="ec-field">
                                        <label>Invoice due</label>
                                        <input type="date" name="invoice_end_date_{{ $key }}" class="js-inv-end"
                                               value="{{ $invEnd }}" {{ $cm['required'] ? 'required' : '' }}>
                                        <div class="ec-error js-date-error">Due date must be on or after open date.</div>
                                    </div>
                                </div>

                                <div class="ec-summary">
                                    <span class="js-week-summary meta">—</span>
                                    <span class="js-invoice-summary meta">—</span>
                                </div>
                            </div>
                        @endforeach

                        <div class="overlap-warning js-overlap">
                            <i class="fa-solid fa-circle-exclamation me-1"></i>
                            <span class="js-overlap-text">Some cycles cover overlapping weeks.</span>
                        </div>

                        <div class="transfer-card">
                            <div class="tc-head">
                                <div class="tc-title">Transfer date</div>
                            </div>
                            <div class="tc-sub">Last day an enrollment can be transferred between cycles.</div>
                            <div class="ec-row">
                                <div class="ec-field">
                                    <label>Date</label>
                                    <input type="date" name="transfer_date" value="{{ $set_cycle->transfer_date }}" required>
                                </div>
                                <div></div>
                            </div>
                        </div>

                        <div class="ec-foot">
                            <a href="{{ route('set-cycle.index') }}" 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() {
            function parseDate(v) {
                if (!v) return null;
                const d = new Date(v + 'T00:00:00');
                return isNaN(d.getTime()) ? null : d;
            }
            function diffDays(a, b) {
                return Math.round((b.getTime() - a.getTime()) / 86400000);
            }
            function fmt(d) {
                return d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short' });
            }

            function validateCard($card) {
                const $start = $card.find('.js-start-week');
                const $end = $card.find('.js-end-week');
                const $invStart = $card.find('.js-inv-start');
                const $invEnd = $card.find('.js-inv-end');
                const $weekError = $card.find('.js-week-error');
                const $dateError = $card.find('.js-date-error');
                const $weekSum = $card.find('.js-week-summary');
                const $invSum = $card.find('.js-invoice-summary');

                $weekError.removeClass('show');
                $dateError.removeClass('show');
                $end.closest('.ec-field').removeClass('has-error');
                $invEnd.closest('.ec-field').removeClass('has-error');

                const sw = parseInt($start.val(), 10);
                const ew = parseInt($end.val(), 10);
                if (sw && ew) {
                    if (ew < sw) {
                        $weekError.addClass('show');
                        $end.closest('.ec-field').addClass('has-error');
                        $weekSum.html('<span class="bad">Invalid week range</span>');
                    } else {
                        const count = ew - sw + 1;
                        const startOpt = $start.find('option:selected');
                        const endOpt = $end.find('option:selected');
                        const dStart = parseDate(startOpt.data('start'));
                        const dEnd = parseDate(endOpt.data('end'));
                        if (dStart && dEnd) {
                            $weekSum.text(`Covers ${count} ${count === 1 ? 'week' : 'weeks'} · ${fmt(dStart)} – ${fmt(dEnd)}`);
                        } else {
                            $weekSum.text(`Covers ${count} ${count === 1 ? 'week' : 'weeks'}`);
                        }
                    }
                } else {
                    $weekSum.text('—');
                }

                const is = parseDate($invStart.val());
                const ie = parseDate($invEnd.val());
                if (is && ie) {
                    if (ie < is) {
                        $dateError.addClass('show');
                        $invEnd.closest('.ec-field').addClass('has-error');
                        $invSum.html('<span class="bad">Invalid invoice dates</span>');
                    } else {
                        const days = diffDays(is, ie) + 1;
                        $invSum.text(`Invoice open ${days} ${days === 1 ? 'day' : 'days'}`);
                    }
                } else {
                    $invSum.text('—');
                }
            }

            function detectOverlap() {
                const ranges = [];
                $('.ec-card').each(function() {
                    const num = $(this).data('cycle');
                    const s = parseInt($(this).find('.js-start-week').val(), 10);
                    const e = parseInt($(this).find('.js-end-week').val(), 10);
                    if (s && e && e >= s) ranges.push({ num, s, e });
                });
                const overlaps = [];
                for (let i = 0; i < ranges.length; i++) {
                    for (let j = i + 1; j < ranges.length; j++) {
                        const a = ranges[i], b = ranges[j];
                        if (a.s <= b.e && b.s <= a.e) overlaps.push(`Cycle ${a.num} & Cycle ${b.num}`);
                    }
                }
                const $warn = $('.js-overlap');
                if (overlaps.length) {
                    $('.js-overlap-text').text('Overlapping weeks detected: ' + overlaps.join(', '));
                    $warn.addClass('show');
                } else {
                    $warn.removeClass('show');
                }
            }

            function refreshAll() {
                $('.ec-card').each(function() { validateCard($(this)); });
                detectOverlap();
            }

            $(document).on('change input', '.ec-card select, .ec-card input', function() {
                refreshAll();
            });

            refreshAll();

            $('#SubmitForm').on('click', function() {
                $.ajax({
                    type: 'POST',
                    url: '{{ url("set-cycle/update") }}',
                    processData: false,
                    contentType: false,
                    data: new FormData($('#Set_Cycle_Form')[0]),
                    dataType: 'json',
                    success: function(data) {
                        if (data.success) {
                            toastr.success(data.success);
                            setTimeout(function() {
                                window.location.href = "{{ url('set-cycle') }}";
                            }, 1200);
                        } else if (data.failure) {
                            let htmlError = '';
                            $.each(data.failure, function(i, v) { htmlError += '<li>' + v + '</li>'; });
                            toastr.error(htmlError);
                        }
                    }
                });
            });
        })();
    </script>
@endsection