<x-app-layout>
    <x-module-hero
        title="Create Assignment"
        description="Pair a mentor with a mentee"
        icon="fa-link">

        <x-slot name="backButton">
            <a href="{{ route('mentorship.assignments.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 Assignments
            </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
            @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('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 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.assignments.store') }}">
            @csrf

            {{-- Programme & Participants --}}
            <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-graduation-cap mr-2 text-green-600"></i> Programme & Participants
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label for="programme_id" class="block text-sm font-medium text-gray-700 mb-1">
                            Programme <span class="text-red-500">*</span>
                        </label>
                        <select name="programme_id" id="programme_id" required
                                class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">
                            <option value="">Select a programme</option>
                            @foreach($programmes as $prog)
                                <option value="{{ $prog->id }}" {{ old('programme_id') == $prog->id ? 'selected' : '' }}>
                                    {{ $prog->title }}
                                </option>
                            @endforeach
                        </select>
                        @error('programme_id')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="mentor_id" class="block text-sm font-medium text-gray-700 mb-1">
                            Mentor <span class="text-red-500">*</span>
                        </label>
                        <select name="mentor_id" id="mentor_id" required
                                class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">
                            <option value="">Select a mentor</option>
                            @foreach($mentors as $mentor)
                                <option value="{{ $mentor->id }}" {{ old('mentor_id') == $mentor->id ? 'selected' : '' }}>
                                    {{ $mentor->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('mentor_id')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="mentee_id" class="block text-sm font-medium text-gray-700 mb-1">
                            Mentee <span class="text-red-500">*</span>
                        </label>
                        <select name="mentee_id" id="mentee_id" required
                                class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">
                            <option value="">Select a mentee</option>
                            @foreach($mentees as $mentee)
                                <option value="{{ $mentee->id }}" {{ old('mentee_id') == $mentee->id ? 'selected' : '' }}>
                                    {{ $mentee->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('mentee_id')<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-calendar-alt mr-2 text-green-600"></i> Schedule
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label for="start_date" class="block text-sm font-medium text-gray-700 mb-1">
                            Start Date <span class="text-red-500">*</span>
                        </label>
                        <input type="date" name="start_date" id="start_date" value="{{ old('start_date') }}" required
                               class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">
                        @error('start_date')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="end_date" class="block text-sm font-medium text-gray-700 mb-1">End Date</label>
                        <input type="date" name="end_date" id="end_date" value="{{ old('end_date') }}"
                               class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">
                        @error('end_date')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="meeting_frequency" class="block text-sm font-medium text-gray-700 mb-1">Meeting Frequency</label>
                        <select name="meeting_frequency" id="meeting_frequency"
                                class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">
                            <option value="">Select frequency</option>
                            <option value="daily" {{ old('meeting_frequency') == 'daily' ? 'selected' : '' }}>Daily</option>
                            <option value="weekly" {{ old('meeting_frequency') == 'weekly' ? 'selected' : '' }}>Weekly</option>
                            <option value="biweekly" {{ old('meeting_frequency') == 'biweekly' ? 'selected' : '' }}>Bi-Weekly</option>
                            <option value="monthly" {{ old('meeting_frequency') == 'monthly' ? 'selected' : '' }}>Monthly</option>
                        </select>
                    </div>
                </div>
            </div>

            {{-- Goals & Notes --}}
            <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-bullseye mr-2 text-green-600"></i> Goals & Notes
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="goals" class="block text-sm font-medium text-gray-700 mb-1">
                            Mentorship Goals <span class="text-red-500">*</span>
                        </label>
                        <textarea name="goals" id="goals" rows="4" required
                                  placeholder="Define the specific goals and objectives..."
                                  class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">{{ old('goals') }}</textarea>
                        @error('goals')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="notes" class="block text-sm font-medium text-gray-700 mb-1">Additional Notes</label>
                        <textarea name="notes" id="notes" rows="4"
                                  placeholder="Any additional notes or special instructions..."
                                  class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">{{ old('notes') }}</textarea>
                    </div>
                </div>
            </div>

            {{-- Milestones --}}
            <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-flag-checkered mr-2 text-green-600"></i> Milestones
                </h3>
                <div id="milestones-container">
                    <div class="milestone-item grid grid-cols-1 md:grid-cols-12 gap-3 mb-3">
                        <div class="md:col-span-5">
                            <input type="text" name="milestones[0][title]" placeholder="Milestone title"
                                   value="{{ old('milestones.0.title') }}"
                                   class="w-full border-gray-300 rounded-lg text-sm focus:ring-green-500 focus:border-green-500">
                        </div>
                        <div class="md:col-span-5">
                            <input type="text" name="milestones[0][description]" placeholder="Description"
                                   value="{{ old('milestones.0.description') }}"
                                   class="w-full border-gray-300 rounded-lg text-sm focus:ring-green-500 focus:border-green-500">
                        </div>
                        <div class="md:col-span-2">
                            <input type="date" name="milestones[0][due_date]"
                                   value="{{ old('milestones.0.due_date') }}"
                                   class="w-full border-gray-300 rounded-lg text-sm focus:ring-green-500 focus:border-green-500">
                        </div>
                    </div>
                </div>
                <button type="button" id="add-milestone"
                        class="inline-flex items-center gap-2 px-3 py-2 border border-gray-300 rounded-lg text-sm text-gray-600 hover:bg-gray-50 transition">
                    <i class="fas fa-plus"></i> Add Milestone
                </button>
            </div>

            {{-- Actions --}}
            <div class="flex justify-end gap-3">
                <a href="{{ route('mentorship.assignments.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-save mr-1"></i> Create Assignment
                </button>
            </div>
        </form>
    </div>

    @push('scripts')
    <script>
        let milestoneCount = 1;
        document.getElementById('add-milestone').addEventListener('click', function() {
            const container = document.getElementById('milestones-container');
            const div = document.createElement('div');
            div.className = 'milestone-item grid grid-cols-1 md:grid-cols-12 gap-3 mb-3';
            div.innerHTML = `
                <div class="md:col-span-5">
                    <input type="text" name="milestones[${milestoneCount}][title]" placeholder="Milestone title"
                           class="w-full border-gray-300 rounded-lg text-sm focus:ring-green-500 focus:border-green-500">
                </div>
                <div class="md:col-span-5">
                    <input type="text" name="milestones[${milestoneCount}][description]" placeholder="Description"
                           class="w-full border-gray-300 rounded-lg text-sm focus:ring-green-500 focus:border-green-500">
                </div>
                <div class="md:col-span-2 flex gap-2">
                    <input type="date" name="milestones[${milestoneCount}][due_date]"
                           class="flex-1 border-gray-300 rounded-lg text-sm focus:ring-green-500 focus:border-green-500">
                    <button type="button" class="text-red-500 hover:text-red-700 px-1" onclick="this.closest('.milestone-item').remove()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            `;
            container.appendChild(div);
            milestoneCount++;
        });
    </script>
    @endpush
</x-app-layout>
