@extends('layouts.master')
@section('title','form')

@section('content')


@php
    $deadline = \Carbon\Carbon::parse('2025-12-01 00:00:00'); // آخر لحظة لتقديم الطلبات
    $now = \Carbon\Carbon::now();
    $isClosed = $now->greaterThanOrEqualTo($deadline);
@endphp

@if($isClosed)
    {{-- الفورم مقفول تمامًا --}}
    <section class="application-closed text-center py-5" style="background: #f8f9fa; min-height: 70vh; display: flex; align-items: center; justify-content: center;">
        <div class="auto-container">
            <div class="p-5 bg-white rounded shadow-lg">
                <h2 class="text-danger mb-4">Application Period Has Ended</h2>
                <p class="lead mb-4">
                    Thank you for your interest in the <strong>Letsia Forward Program</strong>.<br>
                    The application deadline was <strong>November 30, 2025</strong>.
                </p>
                <p>We are no longer accepting new applications.</p>
                <a href="{{ url('/') }}" class="theme-btn btn-style-one bg-yellow mt-4">
                    <span class="btn-title">Back to Home</span>
                </a>
            </div>
        </div>
    </section>

    {{-- إيقاف باقي الصفحة تمامًا --}}
    @php exit; @endphp
@endif


{{-- Countdown Banner – Auto-hides after 11 days (after Nov 30, 2025) --}}
@php
    $launchDate = \Carbon\Carbon::parse('2025-12-01'); // Program starts December 1st
    $today      = \Carbon\Carbon::today();
    $daysLeft   = $today->diffInDays($launchDate, false); // negative = already passed
@endphp



<section class="page-title" style="background-image: url(images/icons/pattern-7.jpg);">


@if($daysLeft > 0)
<section class="urgency-banner position-relative overflow-hidden" style="background: linear-gradient(120deg, #f9b233 0%, #e67e22 100%); padding: 28px 0; box-shadow: 0 10px 30px rgba(249, 178, 51, 0.3);">
    <div class="auto-container">
        <div class="d-flex flex-column flex-md-row align-items-center justify-content-center gap-4 text-white">
            
            <!-- النص الترحيبي -->
            <div class="text-part text-center text-md-start">
                <h4 class="mb-1 fw-bold fs-3 animate__animated animate__fadeInLeft">
                    We are delighted to have you join us...
                </h4>
                <p class="mb-0 opacity-95 fs-5">The Letsia Forward Program kicks off this December!</p>
            </div>

            <!-- العداد الدائري الجميل -->
            <div class="countdown-part animate__animated animate__zoomIn animate__delay-1s">
                <div class="d-flex align-items-center gap-3 bg-white text-dark rounded-pill px-5 py-3 shadow-lg">
                    <div class="text-end">
                        <div class="fw-bolder" style="font-size: 3.2rem; line-height: 1; color: #e67e22;">
                            <span id="days-left">{{ $daysLeft }}</span>
                        </div>
                        <div class="small text-muted fw-medium">Days Left</div>
                    </div>
                    <div class="vr opacity-50"></div>
                    <div>
                        <strong class="fs-4 text-danger">Only</strong><br>
                        <span class="text-primary fw-bold">Limited Seats!</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- زخرفة خلفية خفيفة -->
    <div class="position-absolute top-0 start-0 w-100 h-100 opacity-10">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="w-100">
            <path fill="#fff" fill-opacity="0.3" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,176C1248,192,1344,192,1392,192L1440,192L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path>
        </svg>
    </div>

    <!-- تحديث تلقائي يومي + إخفاء بعد انتهاء المدة -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const banner = document.querySelector('.urgency-banner');
            const daysEl = document.getElementById('days-left');
            const target = new Date('2025-12-01T00:00:00');

            function update() {
                const now = new Date();
                const diff = Math.floor((target - now) / (1000 * 60 * 60 * 24));
                
                if (diff > 0) {
                    daysEl.textContent = diff;
                } else {
                    banner.style.transition = 'all 0.8s ease';
                    banner.style.opacity = '0';
                    banner.style.transform = 'translateY(-20px)';
                    setTimeout(() => banner.remove(), 800);
                }
            }

            update();
            setInterval(update, 86400000); // كل 24 ساعة
        });
    </script>
</section>
@endif
    <div class="shape-thirtyfour"></div>
    <div class="auto-container">
        <div class="inner-container">
            <h3 class="title">Intensive Training for Arab Youth <br> in Innovation and Entrepreneurship</h3>
        </div>
    </div>
</section>

<section class="contact-section pt-0">
    <div class="auto-container">
        <div class="row justify-content-center">
            <div class="form-column col-xl-8 col-lg-12 col-sm-12">
                <div class="inner-column">
                    <div class="contact-form over-form">
                        <div class="sec-title text-center orange">
                            <span class="sub-title">Welcome Back</span>
                            <h3 class="scrub-each-word text-split">Letsia Forward Program Kicks Off This December</h3>
                        </div>

                        <!-- Functional Laravel Form -->
                        <form action="{{ route('applications.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row g-4">
                                <!-- All your existing form fields remain unchanged -->
                                <div class="col-md-12">
                                    <label for="fullname" class="form-label">Full Name</label>
                                    <input type="text" name="fullname" class="form-control" id="fullname"
                                           placeholder="Enter Full Name" required>
                                </div>

                                <div class="col-md-6">
                                    <label for="date_of_birth" class="form-label">Date of Birth</label>
                                    <input type="date" name="date_of_birth" class="form-control" id="date_of_birth" required>
                                </div>

                                <div class="col-md-6">
                                    <label for="gender" class="form-label">Gender</label>
                                    <select name="gender" class="form-control form-select" id="gender" required>
                                        <option value="">Select Gender</option>
                                        <option value="Male">Male</option>
                                        <option value="Female">Female</option>
                                        <option value="Prefer not to say">Prefer not to say</option>
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label for="email" class="form-label">Email Address</label>
                                    <input type="email" name="email" class="form-control" id="email"
                                           placeholder="Enter Email Address" required>
                                </div>

                                <div class="col-md-6">
                                    <label for="phone" class="form-label">Mobile Number (with country code)</label>
                                    <input type="text" name="phone" class="form-control" id="phone"
                                           placeholder="+971..." required>
                                </div>

                                <div class="col-md-6">
                                    <label for="country" class="form-label">Country of Residence</label>
                                    <select name="country" class="form-control form-select" id="country" required>
                                        <option value="">Select Country</option>
                                        <option value="UAE">UAE</option>
                                        <option value="Egypt">Egypt</option>
                                        <option value="KSA">KSA</option>
                                        <option value="Bahrain">Bahrain</option>
                                        <option value="Sri Lanka">Sri Lanka</option>
                                        <option value="Other">Other</option>
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label for="occupation" class="form-label">Current Occupation / Field of Study</label>
                                    <input type="text" name="occupation" class="form-control" id="occupation"
                                           placeholder="Enter Current Occupation / Field of Study">
                                </div>

                                <div class="col-md-12">
                                    <label for="linkedin" class="form-label">LinkedIn Profile (optional)</label>
                                    <input type="url" name="linkedin" class="form-control" id="linkedin"
                                           placeholder="Enter LinkedIn Profile (optional)">
                                </div>

                                <div class="col-md-12">
                                    <label for="cv" class="form-label">Upload CV / Portfolio (PDF or DOCX)</label>
                                    <input type="file" name="cv" class="form-control" id="cv"
                                           accept=".pdf,.doc,.docx">
                                </div>

                                <div class="col-md-12">
                                    <label for="project_stage">Project Stage</label>
                                    <select name="project_stage" class="form-control" id="project_stage" required>
                                        <option value="">Select your project stage</option>
                                        <option value="idea">Idea stage</option>
                                        <option value="prototype">Prototype / MVP ready</option>
                                        <option value="testing">Early users / pilot testing</option>
                                        <option value="revenue">Revenue stage</option>
                                        <option value="scaling">Scaling / Seeking investment</option>
                                    </select>
                                </div>

                                <div class="col-md-12">
                                    <label class="form-label">Area of Interest</label>
                                    <div class="checkboxes">
                                        @foreach(['Entrepreneurship','AI & Emerging Tech','Business Development','Marketing & Growth','Other'] as $interest)
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="interests[]" value="{{ $interest }}">
                                                <label class="form-check-label">{{ $interest }}</label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <label for="reason" class="form-label">Why do you want to join the program?</label>
                                    <textarea name="reason" class="form-control" rows="4" required></textarea>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="confirm_info" value="1" required>
                                        <label class="form-check-label">I confirm that all information is accurate.</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="agree_terms" value="1" required>
                                        <label class="form-check-label">I agree to the terms and conditions.</label>
                                    </div>
                                </div>

                                <div class="col-md-12 d-flex justify-content-center">
                                    <button type="submit" class="theme-btn btn-style-one bg-yellow">
                                        <span class="btn-title">Submit Application</span>
                                    </button>
                                </div>
                            </div>
                        </form>

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

@section('scripts')
    {{-- SweetAlert2 --}}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    @if (session('success'))
        <script>
            Swal.fire({
                title: 'Success!',
                text: '{{ session('success') }}',
                icon: 'success',
                confirmButtonColor: '#f9b233',
            });
        </script>
    @endif

    @if (session('error'))
        <script>
            Swal.fire({
                title: 'Error!',
                text: '{{ session('error') }}',
                icon: 'error',
                confirmButtonColor: '#d33',
            });
        </script>
    @endif
@endsection

@endsection