@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->sold_out == 1 ? 'bg-danger' : 'bg-success' }}">
                                            {{ $scholarship->sold_out == 1 ? 'Sold Out' : '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>
                        <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->id) }}"
                                class="btn btn-red rounded-pill">Apply</a>
                        </div>
                    </div>
                </div>

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





    @include('layouts.footer')

@endsection