@extends('layouts.master')

@section('content')

<style>
    .text-on-surface-variant,
    .text-surface,
    .text-on-surface {
        color: #fff !important;
    }

    /* Quill Dark Theme Fix */
    .ql-toolbar {
        background: #1c2026;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: none;
        border-radius: 10px 10px 0 0;
    }

    .ql-container {
        background: #10141a;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0 0 10px 10px;
        min-height: 220px;
    }

    .ql-editor {
        color: #fff;
    }

    .ql-editor.ql-blank::before {
        color: rgba(255, 255, 255, 0.3);
    }

    .ql-stroke {
        stroke: #fff;
    }

    .ql-fill {
        fill: #fff;
    }
</style>

<main class="pt-24 px-8 pb-12 flex-1 space-y-8 terminal-bg min-h-screen">

    {{-- HEADER --}}
    <div class="flex items-end justify-between">
        <div>
            <h2 class="text-4xl font-extrabold tracking-tighter text-primary flex items-center gap-4">
                Course_Directory_Logs
                <span class="px-3 py-1 bg-primary/10 border border-primary/20 text-primary text-sm rounded-full">
                    {{ $courses->total() }} Active
                </span>
            </h2>

            <p class="text-gray-400 mt-2 max-w-2xl">
                Manage global courses, universities, and career pathways.
            </p>
        </div>

        <a href="{{ route('courses.create') }}"
            class="bg-gradient-to-r from-primary to-green-400 text-black px-6 py-2.5 rounded-lg font-bold text-sm flex items-center gap-2 hover:scale-105 transition">
            <span class="material-symbols-outlined">add</span>
            New Course
        </a>
    </div>
    {{-- LANGUAGE SWITCH --}}
    <div class="flex gap-2 mt-4">
        @foreach($languages as $l)
        <a href="{{ request()->fullUrlWithQuery(['lang' => $l->code]) }}"
            class="px-3 py-1 text-xs border rounded 
        {{ $lang == $l->code ? 'bg-primary text-black' : 'text-white border-gray-600' }}">
            {{ strtoupper($l->code) }}
        </a>
        @endforeach
    </div>
    {{-- FILTERS --}}
    <form method="GET" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 bg-[#1c2026] p-6 rounded-xl">

        {{-- Course Name --}}
        <input
            type="text"
            name="course"
            value="{{ request('course') }}"
            placeholder="Search Course"
            class="bg-[#10141a] text-white rounded-lg px-3 py-2" />

        {{-- University --}}
        <select name="university" class="bg-[#10141a] text-white rounded-lg px-3 py-2">
            <option value="">All Universities</option>

            @foreach($universities as $name)
            <option value="{{ $name }}" {{ request('university') == $name ? 'selected' : '' }}>
                {{ $name }}
            </option>
            @endforeach
        </select>

        {{-- Budget Preference --}}
        @php $options = filter_options('budget_preference'); @endphp

        <select name="budget_preference" class="bg-[#10141a] text-white rounded-lg px-3 py-2">
            <option value="">Budget Preference</option>

            @foreach($options as $key => $opt)
            <option value="{{ $key }}" {{ request('budget_preference') == $key ? 'selected' : '' }}>
                {{ $opt[$lang] ?? $opt['en'] }}
            </option>
            @endforeach
        </select>

        {{-- Education Level --}}
        @php $options = filter_options('education_level'); @endphp

        <select name="education_level" class="bg-[#10141a] text-white rounded-lg px-3 py-2">
            <option value="">Education Level</option>

            @foreach($options as $key => $opt)
            <option value="{{ $key }}" {{ request('education_level') == $key ? 'selected' : '' }}>
                {{ $opt[$lang] ?? $opt['en'] }}
            </option>
            @endforeach
        </select>

        {{-- University Preference --}}
        @php $options = filter_options('university_preference'); @endphp

        <select name="university_preference" class="bg-[#10141a] text-white rounded-lg px-3 py-2">
            <option value="">University Preference</option>

            @foreach($options as $key => $opt)
            <option value="{{ $key }}" {{ request('university_preference') == $key ? 'selected' : '' }}>
                {{ $opt[$lang] ?? $opt['en'] }}
            </option>
            @endforeach
        </select>

        {{-- Mode --}}
        <!-- <select name="mode" class="bg-[#10141a] text-white rounded-lg px-3 py-2">
            <option value="">All Modes</option>

            @foreach($modes as $mode)
            <option value="{{ $mode }}" {{ request('mode') == $mode ? 'selected' : '' }}>
                {{ $mode }}
            </option>
            @endforeach
        </select> -->

        {{-- Industry (optional multi select UI placeholder) --}}
        <!-- <select name="industry" class="bg-[#10141a] text-white rounded-lg px-3 py-2">
            <option value="">All Industries</option>
            @foreach($industries as $industry)
            <option value="{{ $industry->id }}" {{ request('industry') == $industry->id ? 'selected' : '' }}>
                {{ translate_field($industry->industry_name, $lang) }}
            </option>
            @endforeach
        </select> -->

        {{-- Submit --}}
        <button class="bg-gray-800 text-white py-2 rounded-lg hover:bg-gray-700">
            Apply Filters
        </button>

    </form>

    {{-- TABLE --}}
   <div class="bg-[#1c2026] rounded-xl overflow-hidden">
    <div class="overflow-x-auto">

        <table class="w-full min-w-[1200px] text-left">
            <thead>
                <tr class="bg-[#161a20] text-gray-400 text-xs uppercase">
                    <th class="px-6 py-4">Course</th>
                    <th class="px-6 py-4">University</th>
                    <th class="px-6 py-4">Budget Preference</th>
                    <th class="px-6 py-4">Current Education Qualification</th>
                    <th class="px-6 py-4">University Preference</th>
                    <th class="px-6 py-4">Industry</th>
                    <th class="px-6 py-4">Mode</th>
                    <!-- <th class="px-6 py-4">Status</th> -->
                    <th class="px-6 py-4 text-right">Actions</th>
                </tr>
            </thead>

            <tbody class="divide-y divide-gray-800">

                @forelse($courses as $course)
                <tr class="hover:bg-[#2a2f36] transition">

                    {{-- COURSE --}}
                    <td class="px-6 py-5">
                        <div class="flex items-center gap-4">

                            <!-- Image -->
                            <!-- <img src="{{ $course->image ?? asset('images/placeholder.png') }}"
                                class="w-12 h-12 rounded-lg object-cover border border-gray-700"> -->

                            <img
                                src="{{ (!empty($course->image) && file_exists(public_path($course->image)))
            ? asset($course->image)
            : asset('uploads/courses/university-default.webp') }}"
                                class="w-12 h-12 rounded-lg object-cover border border-gray-700">


                            <div>
                                <p class="font-bold text-green-400">
                                    {{ translate_field($course->name) }}
                                </p>
                                <p class="text-xs text-gray-400">
                                    {{ translate_field($course->duration ?? 'N/A') }}
                                </p>
                            </div>

                        </div>
                    </td>

                    {{-- UNIVERSITY --}}
                    <td class="px-6 py-5">
                        <div>
                            <p>{{ translate_field($course->university_name ?? '-') }}</p>
                            <p class="text-xs text-gray-400">
                                {{ translate_field($course->university_location ?? '') }}
                            </p>
                        </div>
                    </td>

                    <td class="px-6 py-5">
                        {{ filter_label('budget_preference', $course->budget_preference ?? '-', $lang) }}
                    </td>

                    <td class="px-6 py-5">
                        {{ filter_label('education_level', $course->education_level ?? '-', $lang) }}
                    </td>

                    <td class="px-6 py-5">
                        {{ filter_label('university_preference', $course->university_preference ?? '-', $lang) }}
                    </td>

                    {{-- Industry --}}
                    <td class="px-6 py-5">
                        <div class="flex flex-wrap gap-2">

                            @php
                            $industryIds = $course->industries ?? $course->industry_id ?? [];

                            if (is_string($industryIds)) {
                            $industryIds = json_decode($industryIds, true) ?? [];
                            }

                            if (is_int($industryIds)) {
                            $industryIds = [$industryIds];
                            }

                            if (!is_array($industryIds)) {
                            $industryIds = [];
                            }
                            @endphp

                            @forelse($industryIds as $id)
                            @php
                            $industry = $industries->firstWhere('id', $id);
                            @endphp

                            @if($industry)
                            <span class="px-2 py-1 text-xs bg-blue-500/10 text-blue-400 border border-blue-500/20 rounded">
                                {{ translate_field($industry->industry_name, $lang) }}
                            </span>
                            @endif
                            @empty
                            <span class="text-gray-400 text-sm">-</span>
                            @endforelse

                        </div>
                    </td>

                    {{-- MODE --}}
                    <td class="px-6 py-5">
                        <span class="text-yellow-400 text-sm">
                            {{ translate_field($course->mode ?? '-') }}
                        </span>
                    </td>



                    {{-- ACTIONS --}}
                    <td class="px-6 py-5 text-right">
                        <div class="flex justify-end gap-2">

                            <a href="{{ route('courses.edit', $course->id) }}"
                                class="p-2 hover:bg-gray-800 rounded">
                                <span class="material-symbols-outlined">edit</span>
                            </a>

                            <form action="{{ route('courses.destroy', $course->id) }}" method="POST" onsubmit="return confirm('Delete this course?')">
                                @csrf
                                @method('DELETE')
                                <button class="p-2 hover:bg-gray-800 rounded text-red-400">
                                    <span class="material-symbols-outlined">delete</span>
                                </button>
                            </form>

                        </div>
                    </td>

                </tr>
                @empty
                <tr>
                    <td colspan="6" class="text-center py-10 text-gray-400">
                        No courses found
                    </td>
                </tr>
                @endforelse

            </tbody>
        </table>
    </div>
        {{-- PAGINATION --}}
        <div class="px-6 py-4 flex justify-between items-center bg-[#161a20]">
            <p class="text-xs text-gray-400">
                Showing {{ $courses->firstItem() ?? 0 }} - {{ $courses->lastItem() ?? 0 }}
            </p>

            {{ $courses->appends(request()->query())->links() }}
        </div>

    </div>

    {{-- INSIGHTS --}}
    <div class="grid md:grid-cols-3 gap-6">

        <div class="bg-[#1c2026] p-6 rounded-xl">
            <h3 class="text-xs text-gray-400 mb-2">Total Courses</h3>
            <p class="text-2xl text-green-400 font-bold">{{ $courses->total() }}</p>
        </div>

        <div class="bg-[#1c2026] p-6 rounded-xl">
            <h3 class="text-xs text-gray-400 mb-2">Top Course</h3>
            <p class="text-lg text-white font-bold">
                {{ translate_field($topCourse->name ?? 'N/A') }}
            </p>
        </div>

        <div class="bg-[#1c2026] p-6 rounded-xl">
            <h3 class="text-xs text-gray-400 mb-2">System Status</h3>
            <p class="text-green-400 font-bold">Secure</p>
        </div>

    </div>

</main>

@endsection