@extends('layouts.app')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Assign Reps to Training</h1>
        <p class="page-subtitle">Configure scheduling constraints and select sales representatives for "{{ $training->title }}"</p>
    </div>
    <a href="{{ route('admin.trainings.show', $training) }}" class="btn btn-secondary">Back to Training</a>
</div>

<div class="card" style="max-width: 640px; margin: 0 auto;">
    <form method="POST" action="{{ route('admin.trainings.assign.store', $training) }}">
        @csrf

        <div style="margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border);">
            <h3 class="card-title" style="font-size: 15px; margin-bottom: 16px; color: var(--accent);">Schedule Settings</h3>
            <input type="hidden" id="user_timezone" name="user_timezone" value="">
            <div class="grid grid-cols-1 md:grid-cols-2" style="gap: 16px;">
                <div class="form-group" style="margin-bottom: 0;">
                    <label class="form-label" for="scheduled_at">Training Start Date & Time</label>
                    <input type="text" id="scheduled_at" name="scheduled_at" class="form-control mono" placeholder="Select start date..." value="{{ old('scheduled_at', $training->scheduled_at ? $training->scheduled_at->format('Y-m-d h:i A') : '') }}" required>
                    <p style="font-size: 11px; color: var(--text-dim); margin-top: 6px;">When representatives can start taking this session.</p>
                </div>
                <div class="form-group" style="margin-bottom: 0;">
                    <label class="form-label" for="expires_at">Expiry Date & Time (Optional)</label>
                    <input type="text" id="expires_at" name="expires_at" class="form-control mono" placeholder="Select expiry date..." value="{{ old('expires_at', $training->expires_at ? $training->expires_at->format('Y-m-d h:i A') : '') }}">
                    <p style="font-size: 11px; color: var(--text-dim); margin-top: 6px;">When access closes for representatives.</p>
                </div>
            </div>
        </div>

        <div class="form-group" style="margin-bottom: 24px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                <label class="form-label" style="margin-bottom: 0;">Select Representatives to Assign</label>
                <div style="font-size: 12px; color: var(--text-dim);" class="mono">
                    <button type="button" class="btn btn-secondary btn-sm" onclick="toggleSelectAll(true)" style="padding: 2px 8px; font-size: 11px;">Select All</button>
                    <button type="button" class="btn btn-secondary btn-sm" onclick="toggleSelectAll(false)" style="padding: 2px 8px; font-size: 11px; margin-left: 4px;">Deselect All</button>
                </div>
            </div>

            <div style="display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; padding-right: 4px;">
                @forelse($users as $user)
                    <div style="display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--card-solid); border: 1px solid var(--border); border-radius: 10px; transition: border-color 0.2s ease;">
                        <input type="checkbox" id="user_{{ $user->id }}" name="user_ids[]" value="{{ $user->id }}" class="user-checkbox" {{ in_array($user->id, $assignedUserIds) ? 'checked' : '' }} style="width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer;">
                        <label for="user_{{ $user->id }}" style="cursor: pointer; flex-grow: 1; display: flex; justify-content: space-between; align-items: center;">
                            <div>
                                <div style="font-weight: 600; font-size: 14px; color: var(--white);">{{ $user->name }}</div>
                                <div style="font-size: 12px; color: var(--text-dim); margin-top: 2px;">{{ $user->email }}</div>
                            </div>
                            <span class="badge-role {{ $user->isAdmin() ? 'admin' : 'user' }}">
                                {{ $user->role }}
                            </span>
                        </label>
                    </div>
                @empty
                    <div style="padding: 16px; text-align: center; color: var(--text-dim); background: var(--muted); border-radius: 8px;">
                        No sales users found in system.
                    </div>
                @endforelse
            </div>
        </div>

        @if($training->isAiAvatar())
            <div style="font-size: 12px; color: var(--amber); margin-bottom: 20px; padding: 12px 16px; background: rgba(245, 158, 11, 0.08); border-left: 3px solid var(--amber); border-radius: 6px; line-height: 1.5;">
                Note: Submitting this assignment will queue background AI dialogue script generation for the selected representatives.
            </div>
        @endif

        <button type="submit" class="btn btn-primary" style="width: 100%; padding: 14px; font-size: 15px;">Save Assignments & Queue Processing</button>
    </form>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    try {
        const userTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
        if (userTz) document.getElementById('user_timezone').value = userTz;
    } catch(e) {}

    flatpickr("#scheduled_at", {
        enableTime: true,
        dateFormat: "Y-m-d h:i K",
        time_24hr: false,
        allowInput: true,
        minDate: "today",
        theme: "dark"
    });

    flatpickr("#expires_at", {
        enableTime: true,
        dateFormat: "Y-m-d h:i K",
        time_24hr: false,
        allowInput: true,
        minDate: "today",
        theme: "dark"
    });
});

function toggleSelectAll(selectAll) {
    document.querySelectorAll('.user-checkbox').forEach(cb => {
        cb.checked = selectAll;
    });
}
</script>
@endpush
@endsection