@extends('layouts.master')

@section('title', 'Scholarship Details')

@section('style')

@endsection

@section('script')
    <!-- Litepicker CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/litepicker/dist/css/litepicker.css" />

    <!-- Litepicker JS -->
    <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {

            new Litepicker({
                element: document.getElementById('inlineCalendar'),
                inlineMode: true, // ⭐ โชว์ปฏิทินทันทีบนหน้า
                singleMode: false, // ใช้ช่วงวันที่
                numberOfMonths: 2,
                numberOfColumns: 2,
                format: 'DD MMM YYYY',
                startDate: "{{ $scholarship->start_date }}",
                endDate: "{{ $scholarship->end_date }}",
                minDate: "{{ $scholarship->start_date }}",
                maxDate: "{{ $scholarship->end_date }}",
                autoApply: true,
                allowRepick: false, // ป้องกันไม่ให้ผู้ใช้กดแก้ range
                selectable: false // ⭐ ห้ามคลิกเลือก — ใช้แค่ดูอย่างเดียว
            });

        });
    </script>


@endsection

@section('content')

    @include('layouts.header')
    @include('layouts.header-sub')

    {{-- <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">
            <div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">

                <!-- รูปทุน -->
                <div class="col-md-8 col-lg-6 col-xl-5 order-lg-2 position-relative">
                    <div class="shape bg-soft-primary rounded-circle rellax w-20 h-20" data-rellax-speed="1"
                        style="top: -2rem; right: -1.9rem;"></div>
                    <figure class="rounded">
                        <img src="{{ asset($scholarship->cover_pic) }}" alt="{{ $scholarship->name_en }}"
                            style="width:100%; height:auto; border-radius: .5rem;">
                    </figure>

                    <!-- ⭐ ปฏิทินโชว์เลย ⭐ -->
                    <div class="mt-4">
                        <h4 class="mb-3">Application Period</h4>
                        <div id="inlineCalendar"></div>
                    </div>
                </div>

                <!-- ข้อมูลทุน -->
                <div class="col-lg-6">
                    <div class="display-4 mb-3 fs-30 text-bold">{{ $scholarship->name_en }}</div>
                    <h5 class="mb-3 text-muted">{{ $scholarship->name_th }}</h5>
                    <p class="lead fs-lg">{{ $scholarship->description }}</p>

                    <div class="row gx-xl-10 gy-6 mt-6">
                        <div class="col-md-6">
                            <div class="d-flex flex-row">
                                <div>
                                    <img src="{{ asset('sandbox/img/icons/lineal/calendar.svg') }}"
                                        class="svg-inject icon-svg icon-svg-sm me-4" alt="" />
                                </div>
                                <div>
                                    <h4 class="mb-1">Start Date</h4>
                                    <p class="mb-0">
                                        {{ $scholarship->start_date ? date('d M Y', strtotime($scholarship->start_date)) : '-' }}
                                        -
                                        {{ $scholarship->end_date ? date('d M Y', strtotime($scholarship->end_date)) : '-' }}
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="d-flex flex-row">
                                <div>
                                    <div class="svg-inject icon-svg icon-svg-sm me-4"><i class="uil uil-bookmark"></i></div>
                                </div>
                                <div>
                                    <h4 class="mb-1">Status</h4>
                                    <p class="mb-0">
                                        <span class="badge {{ $scholarship->status == 1 ? 'bg-danger' : 'bg-success' }}">
                                            {{ $scholarship->status == 1 ? 'Status' : 'Available' }}
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12 mt-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h4>Sponsor</h4>
                                    <p class="mb-0">{{ $scholarship->sponsor ?? 'No Sponsor' }}</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12 mt-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h4>Applicant Qualifications</h4>
                                    <p class="mb-0">-</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12 mt-2">
                            <h4>More Info</h4>
                            <p>
                                <a href="{{ $scholarship->create_url }}"
                                    target="_blank">{{ $scholarship->create_url ?? '-' }}</a>
                            </p>
                        </div>

                        @php
                            $today = \Carbon\Carbon::today();
                        @endphp

                        @if ($scholarship->end_date && $today->gt($scholarship->end_date))

                        @else
                            <div class="col-md-12 mt-4" align="center">
                                <input type="hidden" name="redirect_to" value="{{ url()->previous() }}">
                                <a href="{{ url('/scholarship_by_studentgetedit/' . $scholarship->scholarship_id) }}"
                                    class="btn btn-red rounded-pill">Apply</a>
                            </div>
                        @endif
                    </div>
                </div>

            </div>
        </div>
    </section> --}}

    <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">

            <!-- หัวข้อ -->
            <div class="row text-center mb-10">
                <div class="col-md-11 col-lg-9 col-xl-8 mx-auto position-relative">
                    <h2 class="fs-16 text-uppercase text-muted mb-3">
                        Scholarship Information
                    </h2>
                    <h2 class="display-3 mb-6 fs-24">
                        {{ $scholarship->name_en }}
                        @if ($scholarship->shortname)
                            <span class="text-gradient gradient-7">
                                ({{ $scholarship->shortname }})
                            </span>
                        @endif
                    </h2>

                </div>
            </div>

            <div class="row align-items-start">

                <!-- ซ้าย : รูปทุน -->
                <div class="col-lg-6 position-lg-sticky" style="top: 8rem;">
                    <figure class="rounded shadow-lg">
                        <img src="{{ asset($scholarship->cover_pic) }}" alt="{{ $scholarship->name_en }}"
                            class="img-fluid rounded">
                    </figure>
                    <br><br>
                    {{-- description ใต้รูป --}}
                    @if (!empty($scholarship->description))
                        <h5 class="mb-2">About this scholarship</h5>
                        <p class="mb-0 text-muted">
                            {!!nl2br(e($scholarship->description))!!}
                        </p>
                    @endif
                </div>

                <!-- ขวา : รายละเอียด -->
                <div class="col-lg-5 ms-auto">

                    <!-- ช่วงเวลา -->
                    <div class="d-flex flex-row mb-8">
                        <div>
                            <div class="svg-bg svg-bg-lg bg-blue rounded-xl me-5">
                                <i class="uil uil-calender fs-24"></i>
                            </div>
                        </div>
                        <div>
                            <h4 class="fs-20">Application Period</h4>
                            <p>
                                {{ date('d M Y', strtotime($scholarship->start_date)) }}
                                -
                                {{ date('d M Y', strtotime($scholarship->end_date)) }}
                            </p>
                        </div>
                    </div>

                    <!-- สถานะ -->
                    <div class="d-flex flex-row mb-8">
                        <div>
                            <div class="svg-bg svg-bg-lg bg-green rounded-xl me-5">
                                <i class="uil uil-info-circle fs-24"></i>
                            </div>
                        </div>
                        <div>
                            <h4 class="fs-20">Status</h4>
                            <p>
                                <span class="badge bg-{{ $scholarship->status === 'open' ? 'success' : 'danger' }}">
                                    {{ strtoupper($scholarship->status) }}
                                </span>
                            </p>
                        </div>
                    </div>

                    <!-- รายละเอียดทุน -->
                    <div class="d-flex flex-row mb-8">
                        <div>
                            <div class="svg-bg svg-bg-lg bg-yellow rounded-xl me-5">
                                <i class="uil uil-file-alt fs-24"></i>
                            </div>
                        </div>
                        <div>
                            <h4 class="fs-20">Scholarship Details</h4>
                            <p>
                                {{ $scholarship->details ?? 'No details available.' }}
                            </p>
                        </div>
                    </div>

                    {{-- <!-- คุณสมบัติ -->
                    <div class="d-flex flex-row mb-8">
                        <div>
                            <div class="svg-bg svg-bg-lg bg-yellow rounded-xl me-5">
                                <i class="uil uil-user-check fs-24"></i>
                            </div>
                        </div>
                        <div>
                            <h4 class="fs-20">Applicant Qualifications</h4>

                        </div>
                    </div> --}}

                    <!--แนบไฟล์-->
                    <div class="d-flex flex-row mb-8">
                        <div>
                            <div class="svg-bg svg-bg-lg bg-red rounded-xl me-5">
                                <i class="uil uil-file-download fs-24"></i>
                            </div>
                        </div>
                        <div>
                            <h4 class="fs-20">File Attachments</h4>
                            <p>
                                <a href="{{ asset($scholarship->pdf_file) }}" class="btn btn-sm btn-outline-danger"
                                    target="_blank">
                                    <i class="uil uil-file-download"></i> Download PDF
                                </a>
                            </p>
                        </div>
                    </div>

                    <!-- ปุ่มสมัคร -->
                    @php
                        $today = \Carbon\Carbon::today();
                        $isExpired = $scholarship->end_date && $today->gt($scholarship->end_date);
                    @endphp

                    <div class="mt-6">
                        @if ($isExpired || $scholarship->status !== 'open')
                            <button class="btn btn-secondary rounded-pill px-6" disabled>
                                Application Closed
                            </button>
                        @else
                            <a href="{{ url('/application_getedit/' . $scholarship->scholarship_id) }}"
                                class="btn btn-danger rounded-pill px-6">
                                Apply Now
                            </a>
                        @endif
                    </div>

                </div>
            </div>
        </div>
    </section>





    @include('layouts.footer')

@endsection