@section('page-title')
    Import Center
@endsection

@section('page-description')
    Upload CSV files and import data into the system securely.
@endsection

<x-layouts.admin>

    <section class="w-full">

        <div class="mx-auto w-full space-y-6">
          

        
            <!-- ================= SUCCESS MESSAGE ================= -->
            @if (session('success'))

                <div
                    class="flex items-start gap-4 rounded-3xl border border-green-200 bg-green-50 p-5">

                    <div
                        class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-white shadow-sm">

                        <svg xmlns="http://www.w3.org/2000/svg"
                            class="h-5 w-5 text-green-600"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor">

                            <path stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M5 13l4 4L19 7" />

                        </svg>

                    </div>

                    <div>

                        <h4 class="text-sm font-semibold text-green-800">
                            Import Successful
                        </h4>

                        <p class="mt-1 text-sm text-green-700">
                            {{ session('success') }}
                        </p>

                    </div>

                </div>

            @endif

            <!-- ================= ERROR MESSAGE ================= -->
            @if ($errors->any())

                <div
                    class="rounded-3xl border border-red-200 bg-red-50 p-5">

                    <div class="flex items-start gap-4">

                        <div
                            class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-white shadow-sm">

                            <svg xmlns="http://www.w3.org/2000/svg"
                                class="h-5 w-5 text-red-600"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor">

                                <path stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />

                            </svg>

                        </div>

                        <div>

                            <h4 class="text-sm font-semibold text-red-800">
                                Something went wrong
                            </h4>

                            <ul
                                class="mt-2 list-disc space-y-1 pl-5 text-sm text-red-700">

                                @foreach ($errors->all() as $error)

                                    <li>{{ $error }}</li>

                                @endforeach

                            </ul>

                        </div>

                    </div>

                </div>

            @endif

            <!-- ================= IMPORT CARDS ================= -->
                <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
                                <!-- LESSON TYPE -->
                <div
                    class="group overflow-hidden rounded-[30px] border border-gray-200 bg-white shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl">

                    <!-- CONTENT -->
                    <div class="p-6">

                        <!-- ICON -->
                        <svg xmlns="http://www.w3.org/2000/svg"
                            class="h-8 w-8 text-indigo-600"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor">

                            <path stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M7 16V4m0 0L3 8m4-4l4 4m6 8v4m0 0l-4-4m4 4l4-4" />

                        </svg>

                        <!-- HEADING -->
                        <div class="mt-5">
                            <h2 class="text-xl font-semibold text-gray-900">
                                Lesson Type Import
                            </h2>
                            <p class="mt-2 text-sm leading-relaxed text-gray-500">

                                Import lesson type data quickly using CSV files and manage
                                categories efficiently.

                            </p>

                        </div>

                        <!-- BUTTON -->
                        <form action="{{ route('admin.import.index') }}"
                            method="GET"
                            class="mt-6">

                            <button type="submit"
                                class="inline-flex h-12 w-full items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-indigo-600 to-blue-500 px-5 text-sm font-semibold text-white shadow-md transition hover:from-indigo-700 hover:to-blue-600">

                                <svg xmlns="http://www.w3.org/2000/svg"
                                    class="h-5 w-5"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    stroke="currentColor">

                                    <path stroke-linecap="round"
                                        stroke-linejoin="round"
                                        stroke-width="2"
                                        d="M5 13l4 4L19 7" />

                                </svg>

                                Lesson Type Import

                            </button>

                        </form>

                    </div>

                </div>

                

                <!-- INSTRUCTOR IMPORT -->
                <!-- INSTRUCTOR IMPORT -->
<div
    class="group rounded-[30px] border border-gray-200 bg-white p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-xl">

    <!-- ICON -->
    <div class="mb-5">

        <svg xmlns="http://www.w3.org/2000/svg"
            class="h-8 w-8 text-violet-600"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor">

            <path stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zm-8 8a4 4 0 018 0v1H8v-1z" />

        </svg>

    </div>

    <!-- HEADING -->
    <div>

        <h2 class="text-xl font-semibold text-gray-900">
            Instructor Import
        </h2>

        <p class="mt-2 text-sm leading-relaxed text-gray-500">

            Upload instructor CSV files and automatically import instructor
            information into the platform.

        </p>

    </div>

    <!-- BUTTON -->
    <form action="{{ route('admin.import.instructor.page') }}"
        method="GET"
        class="mt-6">

        @csrf

        <button type="submit"
            class="inline-flex h-12 w-full items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-violet-600 to-indigo-500 px-5 text-sm font-semibold text-white shadow-md transition-all duration-300 hover:from-violet-700 hover:to-indigo-600">

            <svg xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor">

                <path stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M5 13l4 4L19 7" />

            </svg>

            Import Instructors

        </button>

    </form>

</div>

                <!-- BOOKING IMPORT -->
                <!-- BOOKING IMPORT -->
<div
    class="group rounded-[30px] border border-gray-200 bg-white p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-xl">

    <!-- ICON -->
    <div class="mb-5">

        <svg xmlns="http://www.w3.org/2000/svg"
            class="h-8 w-8 text-blue-600"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor">

            <path stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M8 7V3m8 4V3m-9 8h10m-11 9h12a2 2 0 002-2V7a2 2 0 00-2-2H6a2 2 0 00-2 2v11a2 2 0 002 2z" />

        </svg>

    </div>

    <!-- HEADING -->
    <div>

        <h2 class="text-xl font-semibold text-gray-900">
            Booking Import
        </h2>

        <p class="mt-2 text-sm leading-relaxed text-gray-500">

            Import booking data using CSV format and sync booking records
            instantly into the system.

        </p>

    </div>

    <!-- BUTTON -->
    <form action="{{ route('admin.import.booking.page') }}"
        method="GET"
        class="mt-6">

        @csrf

        <button type="submit"
            class="inline-flex h-12 w-full items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-blue-600 to-cyan-500 px-5 text-sm font-semibold text-white shadow-md transition-all duration-300 hover:from-blue-700 hover:to-cyan-600">

            <svg xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor">

                <path stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M5 13l4 4L19 7" />

            </svg>

            Import Bookings

        </button>

    </form>

</div>

            </div>

        </div>

    </section>

</x-layouts.admin>