<x-app-layout>
    <x-module-hero
        title="Schedule Session"
        description="Create a new mentorship session"
        icon="fa-calendar-plus">

        <x-slot name="backButton">
            <a href="{{ route('mentorship.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 mentorship programmes')
                <a href="{{ route('mentorship.programmes.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.programmes.*') ? '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> Programmes
                </a>
            @endcan
            @can('view mentorship applications')
                <a href="{{ route('mentorship.applications.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.applications.*') ? '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-file-alt text-sm"></i> Applications
                </a>
            @endcan
            @cannot('view mentorship applications')
                @can('view own mentorship applications')
                    <a href="{{ route('mentorship.applications.index') }}"
                       class="module-hero-tab {{ request()->routeIs('mentorship.applications.*') ? '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-file-alt text-sm"></i> My Applications
                    </a>
                @endcan
            @endcannot
            @can('view mentorship assignments')
                <a href="{{ route('mentorship.assignments.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.assignments.*') ? '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-link text-sm"></i> Assignments
                </a>
            @endcan
            @can('view mentorship sessions')
                <a href="{{ route('mentorship.sessions.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.sessions.index') || request()->routeIs('mentorship.sessions.show') || request()->routeIs('mentorship.sessions.create') || request()->routeIs('mentorship.sessions.edit') ? '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-alt text-sm"></i> Sessions
                </a>
                <a href="{{ route('mentorship.sessions.calendar') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.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 text-sm"></i> Sessions Calendar
                </a>
            @endcan
            @can('view mentorship certificates')
                <a href="{{ route('mentorship.certificates.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.certificates.*') ? '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('download mentorship certificates')
                @cannot('view mentorship certificates')
                    <a href="{{ route('mentorship.certificates.my-certificates') }}"
                       class="module-hero-tab {{ request()->routeIs('mentorship.certificates.my-certificates') ? '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-award text-sm"></i> My Certificates
                    </a>
                @endcannot
            @endcan
            @can('view mentorship payments')
                <a href="{{ route('mentorship.payments.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.payments.*') ? '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-credit-card text-sm"></i> Payments
                </a>
            @endcan
            @can('view own mentorship payments')
                @cannot('view mentorship payments')
                    <a href="{{ route('mentorship.payments.my-payments') }}"
                       class="module-hero-tab {{ request()->routeIs('mentorship.payments.my-payments') ? '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-history text-sm"></i> My Payments
                    </a>
                @endcannot
            @endcan
            @can('view mentorship categories')
                <a href="{{ route('mentorship.categories.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.categories.*') ? '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-folder text-sm"></i> Categories
                </a>
            @endcan
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        @if($errors->any())
            <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
                <div class="flex items-center gap-2 mb-2">
                    <i class="fas fa-exclamation-triangle text-red-500"></i>
                    <h4 class="font-medium text-red-800">Please fix the following errors:</h4>
                </div>
                <ul class="text-sm text-red-600 list-disc list-inside">
                    @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('mentorship.sessions.store') }}" x-data="{ sessionType: '{{ old('type', 'online') }}' }">
            @csrf

            {{-- Assignment --}}
            <div class="bg-white rounded-lg border border-gray-200 p-6 mb-4">
                <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">
                    <i class="fas fa-link mr-2 text-green-600"></i> Assignment
                </h3>
                @if(isset($assignment))
                    <input type="hidden" name="assignment_id" value="{{ $assignment->id }}">
                    <div class="p-4 bg-green-50 rounded-lg border border-green-200">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                                <i class="fas fa-link text-green-600"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-900 text-sm">{{ $assignment->mentor->name }} & {{ $assignment->mentee->name }}</p>
                                <p class="text-xs text-gray-500">{{ $assignment->programme->title }}</p>
                            </div>
                        </div>
                    </div>
                @else
                    <div>
                        <label for="assignment_id" class="block text-sm font-medium text-gray-700 mb-1">
                            Assignment <span class="text-red-500">*</span>
                        </label>
                        <select name="assignment_id" id="assignment_id" required
                                class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">
                            <option value="">Select an assignment</option>
                            @php
                                $assignments = \App\Models\Mentorship\Assignment::with(['mentor', 'mentee', 'programme'])
                                    ->where('status', 'active')->get();
                            @endphp
                            @foreach($assignments as $assgn)
                                <option value="{{ $assgn->id }}" {{ old('assignment_id') == $assgn->id ? 'selected' : '' }}>
                                    {{ $assgn->mentor->name }} & {{ $assgn->mentee->name }} — {{ $assgn->programme->title }}
                                </option>
                            @endforeach
                        </select>
                        @error('assignment_id')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                @endif
            </div>

            {{-- Session Details --}}
            <div class="bg-white rounded-lg border border-gray-200 p-6 mb-4">
                <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">
                    <i class="fas fa-info-circle mr-2 text-green-600"></i> Session Details
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="md:col-span-2">
                        <label for="title" class="block text-sm font-medium text-gray-700 mb-1">
                            Session Title <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="title" id="title" value="{{ old('title') }}" required
                               placeholder="e.g., Initial Meeting, Progress Review"
                               class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">
                        @error('title')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div class="md:col-span-2">
                        <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                        <textarea name="description" id="description" rows="3"
                                  placeholder="Brief description of the session agenda..."
                                  class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">{{ old('description') }}</textarea>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Session Type <span class="text-red-500">*</span>
                        </label>
                        <div class="flex gap-4">
                            <label class="flex items-center gap-3 p-4 border rounded-lg cursor-pointer transition hover:bg-gray-50"
                                   :class="sessionType === 'online' ? 'border-green-500 bg-green-50' : 'border-gray-300'">
                                <input type="radio" name="type" value="online" x-model="sessionType"
                                       class="w-4 h-4 text-green-600 focus:ring-green-500">
                                <span class="text-sm"><i class="fas fa-video text-blue-500 mr-1"></i> Online Meeting</span>
                            </label>
                            <label class="flex items-center gap-3 p-4 border rounded-lg cursor-pointer transition hover:bg-gray-50"
                                   :class="sessionType === 'in_person' ? 'border-green-500 bg-green-50' : 'border-gray-300'">
                                <input type="radio" name="type" value="in_person" x-model="sessionType"
                                       class="w-4 h-4 text-green-600 focus:ring-green-500">
                                <span class="text-sm"><i class="fas fa-building text-purple-500 mr-1"></i> In Person</span>
                            </label>
                        </div>
                        @error('type')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>
            </div>

            {{-- Schedule --}}
            <div class="bg-white rounded-lg border border-gray-200 p-6 mb-4">
                <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">
                    <i class="fas fa-clock mr-2 text-green-600"></i> Schedule
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label for="date" class="block text-sm font-medium text-gray-700 mb-1">
                            Date <span class="text-red-500">*</span>
                        </label>
                        <input type="date" name="date" id="date" value="{{ old('date') }}" required
                               class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">
                        @error('date')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="start_time" 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" id="start_time" value="{{ old('start_time') }}" required
                               class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">
                        @error('start_time')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="end_time" 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" id="end_time" value="{{ old('end_time') }}" required
                               class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">
                        @error('end_time')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>
            </div>

            {{-- Location --}}
            <div class="bg-white rounded-lg border border-gray-200 p-6 mb-4">
                <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">
                    <i class="fas fa-map-marker-alt mr-2 text-green-600"></i> Location
                </h3>
                <div x-show="sessionType === 'online'">
                    <label for="meeting_link" class="block text-sm font-medium text-gray-700 mb-1">Meeting Link</label>
                    <div class="flex gap-2">
                        <input type="url" name="meeting_link" id="meeting_link" value="{{ old('meeting_link') }}"
                               placeholder="https://meet.google.com/xxx or https://zoom.us/j/..."
                               class="flex-1 border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">
                        <button type="button" onclick="generateLink()"
                                class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition text-sm">
                            <i class="fas fa-magic mr-1"></i> Generate
                        </button>
                    </div>
                    @error('meeting_link')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
                <div x-show="sessionType === 'in_person'">
                    <label for="venue" class="block text-sm font-medium text-gray-700 mb-1">Venue</label>
                    <input type="text" name="venue" id="venue" value="{{ old('venue') }}"
                           placeholder="e.g., Meeting Room A, 2nd Floor"
                           class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">
                    @error('venue')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
            </div>

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

    @push('scripts')
    <script>
        function generateLink() {
            const id = Math.random().toString(36).substring(2, 15);
            document.getElementById('meeting_link').value = `https://meet.jit.si/mentorship-${id}`;
        }
        const today = new Date().toISOString().split('T')[0];
        document.getElementById('date').setAttribute('min', today);
    </script>
    @endpush
</x-app-layout>
