<x-app-layout>

<x-module-hero
    title="New Training Session"
    description="Schedule a new training session"
    icon="fa-calendar-plus">

    <x-slot name="backButton">
        <a href="{{ route('training.sessions.index') }}"
           class="inline-flex items-center gap-1 text-sm text-[#475569] hover:text-[#1e293b] transition-colors">
            <i class="fas fa-arrow-left text-xs"></i> Back to Sessions
        </a>
    </x-slot>

    <x-slot name="tabs">
        @can('view training packages')
            <a href="{{ route('training.packages.index') }}"
               class="module-hero-tab {{ request()->routeIs('training.packages.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-box text-sm"></i> Packages
            </a>
        @endcan
        @can('view training sessions')
            <a href="{{ route('training.sessions.index') }}"
               class="module-hero-tab {{ request()->routeIs('training.sessions.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-list text-sm"></i> Sessions
            </a>
            <a href="{{ route('training.sessions.calendar') }}"
               class="module-hero-tab {{ request()->routeIs('training.sessions.calendar') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-calendar-week text-sm"></i> Calendar
            </a>
        @endcan
        @can('view training registrations')
            <a href="{{ route('training.registrations.index') }}"
               class="module-hero-tab {{ request()->routeIs('training.registrations.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-users text-sm"></i> Registrations
            </a>
            <a href="{{ route('training.registrations.pending') }}"
               class="module-hero-tab {{ request()->routeIs('training.registrations.pending') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-clock text-sm"></i> Pending
            </a>
        @endcan
        @can('view training certificates')
            <a href="{{ route('training.certificates.index') }}"
               class="module-hero-tab {{ request()->routeIs('training.certificates.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-certificate text-sm"></i> Certificates
            </a>
        @endcan
        @can('view training reports')
            <a href="{{ route('training.reports.index') }}"
               class="module-hero-tab {{ request()->routeIs('training.reports.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-chart-bar text-sm"></i> Reports
            </a>
        @endcan
    </x-slot>

</x-module-hero>

<div class="p-6">
    <form action="{{ route('training.sessions.store') }}" method="POST" x-data="sessionForm()">
        @csrf

        @if($errors->any())
            <div class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-center gap-2">
                <i class="fas fa-exclamation-circle"></i> Please fix the errors below.
            </div>
        @endif

        {{-- Package Selection --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
            <h3 class="text-base font-semibold text-gray-800 border-b pb-3 mb-4 flex items-center gap-2">
                <i class="fas fa-box text-green-600"></i> Training Package
            </h3>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Select Package <span class="text-red-500">*</span>
                </label>
                <select name="training_package_id" required
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                    <option value="">Select a training package</option>
                    @foreach($packages as $package)
                        <option value="{{ $package->id }}" {{ old('training_package_id') == $package->id ? 'selected' : '' }}>
                            {{ $package->name }}{{ !$package->is_free ? ' - ' . $package->getFormattedFee() : '' }}
                        </option>
                    @endforeach
                </select>
                @error('training_package_id')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
        </div>

        {{-- Session Details --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
            <h3 class="text-base font-semibold text-gray-800 border-b pb-3 mb-4 flex items-center gap-2">
                <i class="fas fa-info-circle text-green-600"></i> Session Details
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Session Name <span class="text-red-500">*</span>
                    </label>
                    <input type="text" name="session_name" value="{{ old('session_name') }}" required
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500"
                           placeholder="e.g., Day 1 – Introduction to Healthcare Management">
                    @error('session_name')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Session Date <span class="text-red-500">*</span>
                    </label>
                    <input type="date" name="session_date" value="{{ old('session_date') }}" required
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                    @error('session_date')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                    <select name="status" class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                        <option value="scheduled" {{ old('status') === 'scheduled' ? 'selected' : '' }}>Scheduled</option>
                        <option value="postponed" {{ old('status') === 'postponed' ? 'selected' : '' }}>Postponed</option>
                        <option value="cancelled" {{ old('status') === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Start Time <span class="text-red-500">*</span>
                    </label>
                    <input type="time" name="start_time" value="{{ old('start_time', '09:00') }}" required
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                    @error('start_time')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        End Time <span class="text-red-500">*</span>
                    </label>
                    <input type="time" name="end_time" value="{{ old('end_time', '17:00') }}" required
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                    @error('end_time')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Session Type <span class="text-red-500">*</span>
                    </label>
                    <select name="session_type" x-model="sessionType" required
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                        <option value="">Select type</option>
                        <option value="in_person" {{ old('session_type') === 'in_person' ? 'selected' : '' }}>In-Person</option>
                        <option value="online" {{ old('session_type') === 'online' ? 'selected' : '' }}>Online</option>
                        <option value="hybrid" {{ old('session_type') === 'hybrid' ? 'selected' : '' }}>Hybrid</option>
                    </select>
                    @error('session_type')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Max Participants</label>
                    <input type="number" name="max_participants" value="{{ old('max_participants') }}" min="1"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500"
                           placeholder="Leave empty for package default">
                </div>
            </div>
        </div>

        {{-- Venue Information --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6" x-show="sessionType !== 'online'">
            <h3 class="text-base font-semibold text-gray-800 border-b pb-3 mb-4 flex items-center gap-2">
                <i class="fas fa-map-marker-alt text-green-600"></i> Venue Information
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Venue Name</label>
                    <input type="text" name="venue_name" value="{{ old('venue_name') }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500"
                           placeholder="e.g., Conference Hall A">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Venue Address</label>
                    <input type="text" name="venue_address" value="{{ old('venue_address') }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500"
                           placeholder="Physical address">
                </div>
            </div>
        </div>

        {{-- Online Session Details --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6" x-show="sessionType === 'online' || sessionType === 'hybrid'">
            <h3 class="text-base font-semibold text-gray-800 border-b pb-3 mb-4 flex items-center gap-2">
                <i class="fas fa-video text-green-600"></i> Online Session Details
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Meeting Platform</label>
                    <select name="meeting_provider" class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                        <option value="">Select platform</option>
                        <option value="zoom" {{ old('meeting_provider') === 'zoom' ? 'selected' : '' }}>Zoom</option>
                        <option value="google_meet" {{ old('meeting_provider') === 'google_meet' ? 'selected' : '' }}>Google Meet</option>
                        <option value="teams" {{ old('meeting_provider') === 'teams' ? 'selected' : '' }}>Microsoft Teams</option>
                        <option value="other" {{ old('meeting_provider') === 'other' ? 'selected' : '' }}>Other</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Meeting Link</label>
                    <input type="url" name="meeting_link" value="{{ old('meeting_link') }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500"
                           placeholder="https://zoom.us/j/...">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Meeting ID</label>
                    <input type="text" name="meeting_id" value="{{ old('meeting_id') }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Meeting Password</label>
                    <input type="text" name="meeting_password" value="{{ old('meeting_password') }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500"
                           placeholder="Optional">
                </div>
            </div>
        </div>

        {{-- Trainers --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
            <h3 class="text-base font-semibold text-gray-800 border-b pb-3 mb-4 flex items-center gap-2">
                <i class="fas fa-user-tie text-green-600"></i> Trainers / Facilitators
            </h3>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Assign Trainers</label>
                <select name="trainers[]" multiple
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500 h-28">
                    @foreach($trainers as $trainer)
                        <option value="{{ $trainer->id }}" {{ in_array($trainer->id, old('trainers', [])) ? 'selected' : '' }}>
                            {{ $trainer->name }}
                        </option>
                    @endforeach
                </select>
                <p class="mt-1 text-xs text-gray-500">Hold Ctrl/Cmd to select multiple trainers</p>
            </div>
        </div>

        {{-- Additional Information --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
            <h3 class="text-base font-semibold text-gray-800 border-b pb-3 mb-4 flex items-center gap-2">
                <i class="fas fa-align-left text-green-600"></i> Additional Information
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Session Description</label>
                    <textarea name="description" rows="4"
                              class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500"
                              placeholder="Brief description of what will be covered...">{{ old('description') }}</textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Materials / Resources</label>
                    <textarea name="materials" rows="4"
                              class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500"
                              placeholder="List any materials participants should bring...">{{ old('materials') }}</textarea>
                </div>
            </div>
        </div>

        {{-- Actions --}}
        <div class="flex justify-end gap-3">
            <a href="{{ route('training.sessions.index') }}"
               class="px-5 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm hover:bg-gray-50 transition">
                Cancel
            </a>
            <button type="submit"
                    class="px-5 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 transition">
                <i class="fas fa-save mr-1"></i> Create Session
            </button>
        </div>
    </form>
</div>

</x-app-layout>

@push('scripts')
<script>
    function sessionForm() {
        return {
            sessionType: '{{ old('session_type', '') }}'
        }
    }
</script>
@endpush
