@extends('admin.layout')

@section('title', $session ? 'Edit Session' : 'Create Session')

@push('styles')
<style>
    .session-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: 1.25rem;
        align-items: start;
    }
    .session-card {
        padding: 1.35rem 1.5rem;
    }
    .session-card h2 {
        font-size: 1rem;
        font-weight: 700;
        margin: 0 0 1.15rem;
    }
    .session-card-wide { grid-column: 1 / -1; }
    .form-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    .req::after { content: " *"; color: #EF4444; }
    .time-picker {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: .55rem;
        width: 100%;
        min-height: 52px;
        padding: .75rem .9rem;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #FAFBFC;
    }
    .time-picker-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: .5rem;
    }
    .time-picker-hint {
        font-size: .75rem;
        color: #94A3B8;
        line-height: 1.35;
        margin: 0;
    }
    .time-block {
        display: flex;
        align-items: center;
        gap: .4rem;
        flex-wrap: nowrap;
    }
    .time-block-start,
    .time-block-end { justify-content: flex-start; }
    .time-picker-label {
        font-size: .78rem;
        font-weight: 600;
        color: var(--muted);
        width: 34px;
        flex-shrink: 0;
    }
    .time-sep {
        color: #94A3B8;
        font-size: .85rem;
        font-weight: 600;
        flex-shrink: 0;
        padding: 0 .1rem;
    }
    .time-picker .form-input {
        width: auto;
        min-width: 0;
        padding: .5rem .55rem;
        font-size: .875rem;
    }
    .time-picker .time-hour { width: 58px; }
    .time-picker .time-minute { width: 58px; }
    .time-picker .time-ampm { width: 68px; }
    .role-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: .75rem;
    }
    .role-item {
        display: flex;
        align-items: center;
        gap: .55rem;
        padding: .7rem .85rem;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: #FAFBFC;
        font-size: .875rem;
        font-weight: 500;
        cursor: pointer;
    }
    .role-item:has(input:checked) {
        border-color: #C4B5FD;
        background: #F5F3FF;
        color: #6D28D9;
    }
    .parallel-box {
        padding: .85rem .9rem;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #FAFBFC;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .schedule-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        align-items: stretch;
    }
    .schedule-time,
    .schedule-parallel {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .schedule-time .time-picker,
    .schedule-parallel .parallel-box {
        flex: 1;
    }
    .schedule-time .form-label,
    .schedule-parallel .form-label {
        margin-bottom: .35rem;
    }
    .form-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: .75rem;
        margin-top: 1.25rem;
        padding: 1.15rem 1.5rem;
        border-top: 1px solid var(--border);
        background: #FAFBFC;
        border-radius: 0 0 16px 16px;
    }
    .session-form-shell {
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 220px);
    }
    .session-form-body { flex: 1; }
    @media (max-width: 991px) {
        .session-grid { grid-template-columns: 1fr; }
        .session-card-wide { grid-column: auto; }
    }
    @media (max-width: 768px) {
        .schedule-split { grid-template-columns: 1fr; }
        .time-picker { justify-content: flex-start; }
        .time-picker-controls { justify-content: flex-start; }
    }
    @media (max-width: 640px) {
        .form-grid-2 { grid-template-columns: 1fr; }
        .parallel-box { height: auto; }
        .form-actions {
            justify-content: stretch;
        }
        .form-actions .btn-purple,
        .form-actions .btn-outline {
            flex: 1;
            justify-content: center;
            text-align: center;
        }
    }
</style>
@endpush

@section('content')
<div class="pg-head">
    <div>
        <a href="{{ route('mexco.admin.sessions') }}" class="cell-sub">Sessions › {{ $session ? 'Edit Session' : 'Create Session' }}</a>
        <h1 class="mt-1">{{ $session ? 'Edit Session' : 'Create New Session' }}</h1>
        <p class="mt-1 mb-0">{{ $session ? 'Update session details for' : 'Add a session to' }} {{ $event->name }}.</p>
    </div>
</div>

<form method="POST" class="session-form-shell card"
      action="{{ $session ? route('mexco.admin.sessions.update', $session) : route('mexco.admin.sessions.store') }}">
    @csrf
    @if($session) @method('PUT') @endif

    <div class="session-form-body" style="padding:1.35rem 1.5rem 0">
        <div class="session-grid">
            <div class="session-card" style="padding:0">
                <h2>Session Details</h2>

                <div class="form-grid-2">
                    <div class="form-row">
                        <label class="form-label req" for="session_key">Session code</label>
                        <input type="text" name="session_key" id="session_key" class="form-input mono @error('session_key') is-invalid @enderror"
                               value="{{ old('session_key', $session?->session_key ?? $suggestedKey) }}" maxlength="20" required>
                        <span class="cell-sub d-block mt-1">Unique code (e.g. S7)</span>
                        @error('session_key')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                    </div>
                    <div class="form-row">
                        <label class="form-label req" for="title">Session title</label>
                        <input type="text" name="title" id="title" class="form-input @error('title') is-invalid @enderror"
                               value="{{ old('title', $session?->title ?? '') }}" placeholder="e.g. Keynote: AI for a Better Future" required>
                        @error('title')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="form-grid-2">
                    <div class="form-row">
                        <label class="form-label" for="speaker">Speaker</label>
                        <input type="text" name="speaker" id="speaker" class="form-input @error('speaker') is-invalid @enderror"
                               value="{{ old('speaker', $session?->speaker ?? '') }}" placeholder="e.g. Prof. Dr. Rui Martins">
                        @error('speaker')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                    </div>
                    <div class="form-row">
                        <label class="form-label" for="venue">Venue</label>
                        <input type="text" name="venue" id="venue" class="form-input @error('venue') is-invalid @enderror"
                               value="{{ old('venue', $session?->venue ?? '') }}" placeholder="e.g. Main Hall">
                        @error('venue')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>

            <div class="session-card" style="padding:0">
                <h2>Schedule</h2>

                <div class="form-row">
                    <label class="form-label req" for="day">Date</label>
                    <input type="date" name="day" id="day" class="form-input @error('day') is-invalid @enderror"
                           value="{{ old('day', $session ? $session->day->format('Y-m-d') : optional($event->starts_at)->format('Y-m-d')) }}" required>
                    @error('day')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                </div>

                <div class="schedule-split">
                    <div class="schedule-time">
                        <label class="form-label req">Time</label>
                        <div class="time-picker">
                            <div class="time-picker-controls">
                                <div class="time-block time-block-start">
                                    <span class="time-picker-label">Start</span>
                                    <select name="start_hour" class="form-input time-hour @error('start_hour') is-invalid @enderror" required>
                                        @for($h = 1; $h <= 12; $h++)
                                            <option value="{{ $h }}" @selected((string) old('start_hour', $timeParts['start_hour']) === (string) $h)>{{ $h }}</option>
                                        @endfor
                                    </select>
                                    <select name="start_minute" class="form-input time-minute @error('start_minute') is-invalid @enderror" required>
                                        @foreach([0, 15, 30, 45] as $minute)
                                            <option value="{{ $minute }}" @selected((int) old('start_minute', $timeParts['start_minute']) === $minute)>{{ sprintf('%02d', $minute) }}</option>
                                        @endforeach
                                    </select>
                                    <select name="start_ampm" class="form-input time-ampm @error('start_ampm') is-invalid @enderror" required>
                                        <option value="AM" @selected(old('start_ampm', $timeParts['start_ampm']) === 'AM')>AM</option>
                                        <option value="PM" @selected(old('start_ampm', $timeParts['start_ampm']) === 'PM')>PM</option>
                                    </select>
                                </div>
                                <span class="time-sep">→</span>
                                <div class="time-block time-block-end">
                                    <span class="time-picker-label">End</span>
                                    <select name="end_hour" class="form-input time-hour @error('end_hour') is-invalid @enderror" required>
                                        @for($h = 1; $h <= 12; $h++)
                                            <option value="{{ $h }}" @selected((string) old('end_hour', $timeParts['end_hour']) === (string) $h)>{{ $h }}</option>
                                        @endfor
                                    </select>
                                    <select name="end_minute" class="form-input time-minute @error('end_minute') is-invalid @enderror" required>
                                        @foreach([0, 15, 30, 45] as $minute)
                                            <option value="{{ $minute }}" @selected((int) old('end_minute', $timeParts['end_minute']) === $minute)>{{ sprintf('%02d', $minute) }}</option>
                                        @endforeach
                                    </select>
                                    <select name="end_ampm" class="form-input time-ampm @error('end_ampm') is-invalid @enderror" required>
                                        <option value="AM" @selected(old('end_ampm', $timeParts['end_ampm']) === 'AM')>AM</option>
                                        <option value="PM" @selected(old('end_ampm', $timeParts['end_ampm']) === 'PM')>PM</option>
                                    </select>
                                </div>
                            </div>
                            <p class="time-picker-hint">Choose start and end time with AM/PM.</p>
                        </div>
                        @error('start_hour')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        @error('start_minute')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        @error('start_ampm')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        @error('end_hour')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        @error('end_minute')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        @error('end_ampm')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                    </div>

                    <div class="schedule-parallel">
                        <label class="form-label">Parallel session (Optional)</label>
                        <div class="parallel-box">
                            <label class="d-flex align-items-start gap-2 mb-0" style="font-size:.875rem;cursor:pointer">
                                <input type="checkbox" name="is_parallel" value="1" class="mt-1"
                                    @checked(old('is_parallel', $session?->is_parallel ?? false))>
                                <span>
                                    <strong>Allow overlapping time with another session on the same day.</strong>
                                    <span class="cell-sub d-block mt-1">Check the box if this session is a parallel session.</span>
                                </span>
                            </label>
                        </div>
                        @error('is_parallel')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>

            <div class="session-card session-card-wide" style="padding:0">
                <h2>Access (Optional)</h2>
                <span class="cell-sub d-block mb-3">Leave all unchecked to allow all participants.</span>
                <div class="role-grid">
                    @foreach($roles as $role)
                        <label class="role-item">
                            <input type="checkbox" name="allowed_roles[]" value="{{ $role->name }}"
                                @checked(in_array($role->name, old('allowed_roles', $session?->allowed_roles ?? []), true))>
                            {{ $role->name }}
                        </label>
                    @endforeach
                </div>
                @error('allowed_roles')<div class="text-danger small mt-2">{{ $message }}</div>@enderror
            </div>
        </div>
    </div>

    <div class="form-actions">
        <a href="{{ route('mexco.admin.sessions') }}" class="btn-outline">Cancel</a>
        <button type="submit" class="btn-purple">{{ $session ? 'Save Changes' : 'Create Session' }}</button>
    </div>
</form>
@endsection
