@extends('layouts.admin')
@php $editing = $batch->exists; $locked = $editing && $batch->datesLocked(); @endphp
@section('title', 'Batches')
@section('heading', $editing ? 'Edit Batch' : 'Create Internship Batch')
@use('App\Models\InternshipBatch', 'Batch')
@use('App\Models\InternHospitalAllocation', 'Allocation')
@section('content')
@php
    $start = old('starts_on', $batch->starts_on?->toDateString());
    $err = fn ($k) => $errors->first($k);
    $input = 'w-full rounded-xl border bg-white px-3.5 py-3 text-sm text-gray-800 focus:ring-2 focus:outline-none';
    $ok = 'border-slate-200 focus:border-blue-300 focus:ring-blue-100';
    $bad = 'border-red-400 focus:border-red-400 focus:ring-red-100';
@endphp

<a href="{{ $editing ? route('admin.batches.show', $batch) : route('admin.batches.index') }}" class="mb-4 inline-flex items-center gap-1 text-sm font-medium text-slmc-600 hover:underline"><i class="ri-arrow-left-line"></i> {{ $editing ? 'Back to batch' : 'All batches' }}</a>

<form method="POST" action="{{ $editing ? route('admin.batches.update', $batch) : route('admin.batches.store') }}" class="grid gap-6 xl:grid-cols-5">
    @csrf
    @if($editing) @method('PUT') @endif

    {{-- ═════════ Details ═════════ --}}
    <section class="admin-card p-5 sm:p-7 xl:col-span-3">
        <h2 class="text-lg font-bold text-slmc">Batch details</h2>
        <p class="mb-6 text-sm text-gray-500">Define the internship intake. The completion date is set automatically to one year after the start date.</p>

        <div class="space-y-5">
            <div>
                <label for="name" class="mb-1.5 block text-sm font-semibold text-slmc">Title <span class="text-red-500">*</span></label>
                <input id="name" name="name" required maxlength="150" value="{{ old('name', $batch->name) }}" placeholder="e.g. 2026 Main Internship Batch" class="{{ $input }} {{ $err('name') ? $bad : $ok }}">
                @if($err('name'))<p class="mt-1 text-xs text-red-600">{{ $err('name') }}</p>@endif
            </div>

            <div class="grid gap-5 sm:grid-cols-3">
                <div>
                    <label for="year" class="mb-1.5 block text-sm font-semibold text-slmc">Batch year <span class="text-red-500">*</span></label>
                    <input id="year" name="year" type="number" required min="2000" max="2100" value="{{ old('year', $batch->year) }}" class="{{ $input }} {{ $err('year') ? $bad : $ok }}">
                    @if($err('year'))<p class="mt-1 text-xs text-red-600">{{ $err('year') }}</p>@endif
                </div>
                <fieldset class="sm:col-span-2">
                    <legend class="mb-1.5 block text-sm font-semibold text-slmc">Batch type <span class="text-red-500">*</span></legend>
                    <div class="grid grid-cols-2 gap-3">
                        @foreach(['main' => ['ri-stack-line', 'Main', 'Regular intake'], 'repeat' => ['ri-repeat-line', 'Repeat', 'Repeating interns']] as $value => [$icon, $label, $hint])
                            <label class="cursor-pointer">
                                <input type="radio" name="type" value="{{ $value }}" class="peer sr-only" @checked(old('type', $batch->type) === $value)>
                                <span class="flex h-full items-center gap-3 rounded-xl border-2 border-slate-200 bg-white p-3 transition peer-checked:border-slmc peer-checked:bg-slmc-tint peer-focus-visible:ring-2 peer-focus-visible:ring-blue-300">
                                    <span @class(['flex size-9 shrink-0 items-center justify-center rounded-lg text-lg', 'bg-slmc text-white' => $value === 'main', 'bg-orange-500 text-white' => $value === 'repeat'])><i class="{{ $icon }}"></i></span>
                                    <span class="min-w-0"><span class="block text-sm font-bold text-slmc">{{ $label }}</span><span class="block truncate text-xs text-gray-500">{{ $hint }}</span></span>
                                </span>
                            </label>
                        @endforeach
                    </div>
                    @if($err('type'))<p class="mt-1 text-xs text-red-600">{{ $err('type') }}</p>@endif
                </fieldset>
            </div>

            <div>
                <label for="description" class="mb-1.5 block text-sm font-semibold text-slmc">Description</label>
                <textarea id="description" name="description" rows="4" maxlength="2000" placeholder="Optional notes about this intake…" class="{{ $input }} {{ $err('description') ? $bad : $ok }}">{{ old('description', $batch->description) }}</textarea>
                @if($err('description'))<p class="mt-1 text-xs text-red-600">{{ $err('description') }}</p>@endif
            </div>

            <div class="grid gap-5 sm:grid-cols-2">
                <div>
                    <label for="starts_on" class="mb-1.5 block text-sm font-semibold text-slmc">Internship start date <span class="text-red-500">*</span></label>
                    <input id="starts_on" name="starts_on" type="date" required value="{{ $start }}" @readonly($locked) class="{{ $input }} {{ $err('starts_on') ? $bad : $ok }} {{ $locked ? 'cursor-not-allowed bg-slate-50 text-gray-500' : '' }}">
                    @if($err('starts_on'))<p class="mt-1 text-xs text-red-600">{{ $err('starts_on') }}</p>
                    @elseif($locked)<p class="mt-1 text-xs text-gray-500"><i class="ri-lock-line"></i> Locked: evaluations have started for this batch.</p>@endif
                </div>
                <div>
                    <label for="ends_on" class="mb-1.5 block text-sm font-semibold text-slmc">Completion date <span class="ml-1 rounded bg-emerald-50 px-1.5 py-0.5 text-[10px] font-bold tracking-wider text-emerald-700 uppercase">Auto</span></label>
                    <div class="relative">
                        <input id="ends_on" type="text" readonly tabindex="-1" value="{{ $start ? Batch::completionFor(\Illuminate\Support\Carbon::parse($start))->format('j M Y') : '' }}" placeholder="Set a start date"
                            class="{{ $input }} {{ $ok }} cursor-default bg-slate-50 pr-10 font-semibold text-slmc" aria-describedby="ends_hint">
                        <i class="ri-magic-line pointer-events-none absolute top-1/2 right-3.5 -translate-y-1/2 text-emerald-500"></i>
                    </div>
                    <p id="ends_hint" class="mt-1 text-xs text-gray-500">One year after the start date.</p>
                </div>
            </div>

            @if($editing)
                <label class="flex cursor-pointer items-center justify-between gap-4 rounded-xl border border-slate-200 p-4">
                    <span><span class="block text-sm font-semibold text-slmc">Active batch</span><span class="block text-xs text-gray-500">Inactive batches are kept for records but hidden from new allocations.</span></span>
                    <input type="hidden" name="is_active" value="0">
                    <input type="checkbox" name="is_active" value="1" class="peer sr-only" @checked(old('is_active', $batch->is_active))>
                    <span class="relative h-6 w-11 shrink-0 rounded-full bg-slate-300 transition after:absolute after:top-0.5 after:left-0.5 after:size-5 after:rounded-full after:bg-white after:shadow after:transition peer-checked:bg-emerald-500 peer-checked:after:translate-x-5 peer-focus-visible:ring-2 peer-focus-visible:ring-blue-300"></span>
                </label>
            @endif
        </div>

        <div class="mt-8 flex flex-col-reverse gap-3 border-t border-slate-100 pt-6 sm:flex-row sm:justify-end">
            <a href="{{ $editing ? route('admin.batches.show', $batch) : route('admin.batches.index') }}" class="inline-flex items-center justify-center rounded-xl border border-slate-200 px-5 py-3 text-sm font-semibold text-gray-600 hover:bg-slate-50">Cancel</a>
            <button type="submit" class="bg-login-panel inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold text-white shadow hover:brightness-110">
                <i class="ri-check-line text-lg"></i> {{ $editing ? 'Save changes' : 'Create batch' }}
            </button>
        </div>
    </section>

    {{-- ═════════ Live cycle preview ═════════ --}}
    <aside class="xl:col-span-2">
        <section class="admin-card sticky top-24 overflow-hidden">
            <div class="bg-slmc-hero p-5 text-white sm:p-6">
                <p class="text-[11px] font-semibold tracking-[.18em] text-blue-100 uppercase"><i class="ri-magic-line text-orange-300"></i> Generated automatically</p>
                <h3 class="mt-1 text-lg font-bold">Evaluation cycles</h3>
                <p class="text-sm text-blue-100/85">Four 3-month cycles across two six-month periods.</p>
            </div>
            <div id="cycle-empty" @class(['p-6 text-center text-sm text-gray-500', 'hidden' => $start])>
                <i class="ri-calendar-line mb-2 block text-3xl text-slate-300"></i> Choose a start date to preview the cycles.
            </div>
            <ol id="cycle-list" @class(['divide-y divide-slate-100', 'hidden' => ! $start])>
                @for($q = 1; $q <= 4; $q++)
                    @php $p = (int) ceil($q / 2); @endphp
                    @if($q === 1 || $q === 3)
                        <li class="bg-slate-50 px-5 py-2 text-[10px] font-bold tracking-wider text-slate-500 uppercase sm:px-6">Period {{ $p }} · {{ Allocation::PERIOD_LABELS[$p] }}</li>
                    @endif
                    <li class="flex items-center gap-4 px-5 py-4 sm:px-6">
                        <span @class(['flex size-10 shrink-0 items-center justify-center rounded-xl text-sm font-extrabold text-white', 'bg-slmc' => $p === 1, 'bg-slmc-600' => $p === 2])>Q{{ $q }}</span>
                        <div class="min-w-0">
                            <p class="text-sm font-bold text-slmc">Evaluation {{ $q }}</p>
                            <p class="text-xs text-gray-500" data-cycle="{{ $q }}">
                                @if($start) @php $c = Batch::cyclesFor(\Illuminate\Support\Carbon::parse($start))[$q]; @endphp {{ $c['starts_on']->format('j M Y') }} – {{ $c['ends_on']->format('j M Y') }} @endif
                            </p>
                        </div>
                    </li>
                @endfor
            </ol>
        </section>
    </aside>
</form>

<script>
(() => {
    const start = document.getElementById('starts_on');
    const end = document.getElementById('ends_on');
    const year = document.getElementById('year');
    const fmt = d => d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
    // Same rule as Carbon::addMonthsNoOverflow (clamp to the last day of the target month).
    const addMonths = (d, m) => {
        const r = new Date(d.getFullYear(), d.getMonth() + m, 1);
        r.setDate(Math.min(d.getDate(), new Date(r.getFullYear(), r.getMonth() + 1, 0).getDate()));
        return r;
    };
    const minusDay = d => new Date(d.getFullYear(), d.getMonth(), d.getDate() - 1);
    let yearTouched = {{ $editing ? 'true' : 'false' }};
    year.addEventListener('input', () => yearTouched = true);

    const render = () => {
        const [y, m, d] = (start.value || '').split('-').map(Number);
        const has = !!(y && m && d);
        document.getElementById('cycle-empty').classList.toggle('hidden', has);
        document.getElementById('cycle-list').classList.toggle('hidden', !has);
        if (!has) { end.value = ''; return; }
        const s = new Date(y, m - 1, d);
        end.value = fmt(minusDay(addMonths(s, 12)));
        if (!yearTouched) year.value = y;
        for (let q = 1; q <= 4; q++) {
            const from = addMonths(s, 3 * (q - 1));
            const to = q === 4 ? minusDay(addMonths(s, 12)) : minusDay(addMonths(s, 3 * q));
            document.querySelector(`[data-cycle="${q}"]`).textContent = `${fmt(from)} – ${fmt(to)}`;
        }
    };
    start.addEventListener('input', render);
    start.addEventListener('change', render);
})();
</script>
@endsection