@extends('layouts.portal')
@section('title', 'Second Six Months')
@section('heading', 'Assign Second Six-Month Placement')
@section('content')
@php
    $locked = $second && $second->evaluations->isNotEmpty();
    $placement = old('placement', $second && $second->hospital_id !== $allocation->hospital_id ? 'other' : 'same');
@endphp
<a href="{{ route('director.dashboard') }}" class="mb-4 inline-flex items-center gap-1 rounded-lg bg-white/90 px-3 py-1.5 text-sm font-medium text-slmc shadow-sm hover:bg-white"><i class="ri-arrow-left-line"></i> Back to dashboard</a>

<div class="grid gap-6 lg:grid-cols-3">
    <section class="slmc-card slmc-card-accent p-6">
        <p class="text-xs font-semibold tracking-widest text-slmc-600 uppercase">Intern Medical Officer</p>
        <h2 class="mt-1 text-xl font-bold text-slmc">{{ $allocation->intern->name }}</h2>
        <p class="text-sm text-gray-500">{{ $allocation->intern->registration_no ?? $allocation->intern->email }}</p>

        <div class="mt-5 rounded-2xl border border-slmc-line p-4">
            <p class="text-[10px] font-bold tracking-wider text-slate-500 uppercase">First six months</p>
            <p class="font-semibold text-slmc">{{ $allocation->hospital->name }}</p>
            <p class="text-xs text-gray-500">{{ $allocation->starts_on->format('j M Y') }} – {{ $allocation->endsOn()->format('j M Y') }}</p>
            <p class="mt-2 text-xs text-gray-500">{{ $allocation->unit ?? '—' }} · {{ $allocation->consultant?->name ?? 'No consultant' }}</p>
        </div>
        <div @class(['mt-3 rounded-2xl border p-4', 'border-slmc-line' => $second, 'border-dashed border-amber-300 bg-amber-50' => ! $second])>
            <p class="text-[10px] font-bold tracking-wider text-slate-500 uppercase">Second six months</p>
            @if($second)
                <p class="font-semibold text-slmc">{{ $second->hospital->name }}</p>
                <p class="text-xs text-gray-500">{{ $second->starts_on->format('j M Y') }} – {{ $second->endsOn()->format('j M Y') }}</p>
            @else
                <p class="font-semibold text-amber-700">Not assigned yet</p>
            @endif
        </div>
    </section>

    <section class="slmc-card p-6 lg:col-span-2">
        <h3 class="mb-1 text-lg font-bold text-slmc">Where will this intern complete the second six months?</h3>
        <p class="mb-5 text-sm text-gray-500">Most interns continue at the same hospital. If the intern moves, the receiving hospital's Director will assign their Supervisory Consultant.</p>

        @if($locked)
            <div class="rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm text-slate-600"><i class="ri-lock-line"></i> Second-period evaluations have started, so this placement can no longer be changed.</div>
        @else
            <form method="POST" action="{{ route('director.allocations.second-period.update', $allocation) }}" class="space-y-5">
                @csrf @method('PUT')

                <fieldset class="grid gap-3 md:grid-cols-2">
                    <legend class="sr-only">Placement</legend>
                    @foreach([
                        'same'  => ['ri-hospital-line',          'Same hospital',      'Continue at '.$allocation->hospital->name],
                        'other' => ['ri-arrow-left-right-line',  'Another hospital',   'Transfer for the second six months'],
                    ] as $value => [$icon, $title, $text])
                        <label class="cursor-pointer">
                            <input type="radio" name="placement" value="{{ $value }}" class="peer sr-only" @checked($placement === $value)
                                onchange="document.getElementById('other-hospital').classList.toggle('hidden', this.value !== 'other')">
                            <span class="flex h-full items-center gap-3 rounded-2xl border-2 border-slmc-line bg-white p-4 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-10 items-center justify-center rounded-xl bg-slmc-tint text-lg text-slmc-600"><i class="{{ $icon }}"></i></span>
                                <span><span class="block font-semibold text-slmc">{{ $title }}</span><span class="block text-xs text-gray-500">{{ $text }}</span></span>
                            </span>
                        </label>
                    @endforeach
                </fieldset>

                <div id="other-hospital" @class(['hidden' => $placement !== 'other'])>
                    <label for="hospital_id" class="text-sm font-semibold text-slmc">Receiving hospital <span class="text-red-500">*</span></label>
                    <select id="hospital_id" name="hospital_id" class="slmc-input mt-1.5 pl-3 @error('hospital_id') border-red-400 @enderror">
                        <option value="">Select a hospital…</option>
                        @foreach($hospitals->where('id', '!=', $allocation->hospital_id) as $h)
                            <option value="{{ $h->id }}" @selected((int) old('hospital_id', $second?->hospital_id) === $h->id)>{{ $h->name }}{{ $h->district ? ' — '.$h->district : '' }}</option>
                        @endforeach
                    </select>
                </div>
                @error('hospital_id')<p class="-mt-3 text-xs text-red-600">{{ $message }}</p>@enderror

                <div class="max-w-xs">
                    <label for="starts_on" class="text-sm font-semibold text-slmc">Second period starts on <span class="text-red-500">*</span></label>
                    <input id="starts_on" type="date" name="starts_on" required value="{{ old('starts_on', ($second?->starts_on ?? $defaultStart)->toDateString()) }}" class="slmc-input mt-1.5 pl-3 @error('starts_on') border-red-400 @enderror">
                    <p class="mt-1 text-xs text-gray-400">Normally the day after the first six months end. Runs for six months.</p>
                    @error('starts_on')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>

                <div class="flex justify-end">
                    <button type="submit" class="bg-login-panel flex items-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold text-white shadow hover:brightness-110">
                        <i class="ri-calendar-check-line"></i> {{ $second ? 'Update second six months' : 'Assign second six months' }}
                    </button>
                </div>
            </form>
        @endif
    </section>
</div>
@endsection