@extends('layouts.app')

@section('title', 'DAV College Portal')

@section('styles')
<style>
    :root {
        --primary-bg: #00105a;
        --accent-color: #0069d9;
    }

    /* ===== Tab section transitions ===== */
    .tab-section {
        display: none;
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.35s ease-out, transform 0.35s ease-out;
    }
    .tab-section.active {
        display: block;
        opacity: 1;
        transform: translateY(0);
        background: #edf3f9;
    }

    /* ===== Active Nav Tab ===== */
    .nav-tab-btn.active {
        color: var(--accent-color) !important;
        border-bottom: 3px solid var(--accent-color);
        font-weight: 700;
    }

    /* ===== Site Header ===== */
    .site-header {
        background: var(--primary-bg) !important;
        height: 7rem;
    }

    /* ===== Welcome Banner ===== */
    .welcome-banner {
        position: relative;
        width: 100%;
        min-height: 230px;
        background:
            linear-gradient(to right, rgba(238,241,248,1) 20%, rgba(238,241,248,0.5) 40%, rgba(238,241,248,0) 55%),
            url('{{ asset('images/intro_cover_image.jpg') }}') center center / cover no-repeat;
        display: flex;
        align-items: center;
        padding: 28px 32px;
        gap: 24px;
        overflow: hidden;
    }
    /* Left: welcome text */
    .banner-left {
        flex: 0 0 38%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        z-index: 1;
    }
    /* Right: Why Choose card */
    .banner-right-card {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: relative;
        z-index: 1;
    }

    /* ===== Why Choose card (dark navy floating) ===== */
    .why-choose-card {
        background: #00105a;
        color: #fff;
        border-radius: 14px;
        padding: 22px 26px;
        min-width: 260px;
        max-width: 310px;
        box-shadow: 0 8px 32px rgba(0,16,90,0.28);
    }
    .why-choose-card h3 {
        font-size: 1.05rem;
        font-weight: 800;
        margin-bottom: 16px;
    }
    .why-choose-card ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .why-choose-card ul li {
        display: flex;
        align-items: center;
        gap: 11px;
        font-size: 0.92rem;
        font-weight: 600;
    }
    .why-choose-card ul li .icon-wrap {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: rgba(255,255,255,0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 0.7rem;
    }

    /* ===== Inquiry Form section ===== */
    .inquiry-section-wrap {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 24px;
        align-items: start;
        background: #f8fafc;
        padding: 0;
    }
    @media (max-width: 900px) {
        .inquiry-section-wrap { grid-template-columns: 1fr; }
        .why-choose-card { max-width: 100%; min-width: 0; }
    }

    /* ===== INQUIRY FORM card ===== */
    .inq-form-card {
        background: #fff;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid #e2e8f0;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        /* width: 90%; */
    }

    .inq-form-bar {
        background: var(--primary-bg);
        color: #fff;
        text-align: center;
        padding: 12px 20px;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 2.5px;
        text-transform: uppercase;
    }
    .inq-form-body {
        padding: 22px 30px 28px;
    }

    /* ===== Form rows ===== */
    .form-row {
        display: flex;
        align-items: flex-start;
        padding: 10px 0;
        border-bottom: 1px solid #f1f5f9;
        gap: 12px;
        flex-wrap: wrap;
    }
    .form-row:last-of-type { border-bottom: none; }
    .form-label {
        min-width: 210px;
        max-width: 210px;
        font-size: 0.92rem;
        font-weight: 700;
        color: #1e293b;
        padding-top: 8px;
        flex-shrink: 0;
    }
    .form-label .req { color: #e11d48; font-weight: 800; margin-left: 1px; }
    .form-value { flex: 1; min-width: 0; }

    .form-inp {
        border: 1px solid #d1d5db;
        border-radius: 5px;
        padding: 8px 12px;
        font-size: 0.92rem;
        color: #1e293b;
        background: #fff;
        outline: none;
        width: 100%;
        transition: border-color 0.2s, box-shadow 0.2s;
        font-family: 'Outfit', sans-serif;
    }
    .form-inp:focus {
        border-color: var(--accent-color);
        box-shadow: 0 0 0 3px rgba(0,105,217,0.12);
    }
    .field-hint {
        font-size: 0.8rem;
        color: #94a3b8;
        font-style: italic;
        margin-top: 2px;
    }

    /* Radio groups */
    .radio-group { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; padding-top: 6px; }
    .radio-opt {
        display: flex; align-items: center; gap: 6px;
        font-size: 0.92rem; font-weight: 500; color: #374151; cursor: pointer;
    }
    .radio-opt input[type="radio"] {
        accent-color: var(--accent-color);
        width: 16px; height: 16px; cursor: pointer;
    }

    /* Mobile & Email inline */
    .mobile-email-row {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
    }
    .mobile-email-row .phone-wrap { flex: 1; min-width: 120px; }
    .mobile-email-row .email-label {
        font-size: 0.92rem; font-weight: 700; color: #1e293b;
        white-space: nowrap;
    }
    .mobile-email-row .email-label .req { color: #e11d48; }
    .mobile-email-row .email-wrap { flex: 1.4; min-width: 140px; }

    /* Apply Now button */
    .apply-btn {
        background: var(--accent-color);
        color: #fff;
        border: none;
        border-radius: 7px;
        padding: 11px 40px;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
        box-shadow: 0 4px 14px rgba(0,105,217,0.28);
        font-family: 'Outfit', sans-serif;
        letter-spacing: 0.3px;
    }
    .apply-btn:hover { background: #0053b3; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,105,217,0.38); }
    .apply-btn:active { transform: translateY(0); }

    /* ===== Sidebar – About DAV ===== */
    .sidebar-card {
        background: #fff;
        border-radius: 14px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        padding: 18px;
    }
    .sidebar-card h3 {
        font-size: 0.85rem;
        font-weight: 800;
        color: #1e293b;
        margin-bottom: 12px;
    }
    .about-img {
        width: 100%;
        border-radius: 10px;
        aspect-ratio: 16/10;
        object-fit: cover;
        margin-bottom: 12px;
    }
    .about-text {
        font-size: 0.74rem;
        color: #475569;
        line-height: 1.65;
        margin-bottom: 10px;
    }
    .learn-more {
        font-size: 0.74rem;
        font-weight: 700;
        color: var(--accent-color);
        text-decoration: none;
        display: flex; align-items: center; gap: 5px;
    }
    .learn-more:hover { text-decoration: underline; color: #0053b3; }

    /* ===== Achievements grid ===== */
    .achievement-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 0;
    }
    .ach-box {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 12px 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 5px;
    }
    .ach-box .ach-icon { font-size: 1.1rem; color: var(--accent-color); }
    .ach-box .ach-number { font-size: 0.95rem; font-weight: 900; color: #1e293b; }
    .ach-box .ach-label { font-size: 0.62rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; }

    /* Page background */
    .page-bg { background: #f1f5f9; }

    /* CMAT info-tab card responsive */
    @media (max-width: 900px) {
        .inq-form-body { padding: 16px; }
        .form-label { min-width: 100%; max-width: 100%; padding-top: 0; }
        .form-row { flex-direction: column; gap: 4px; }
        .mobile-email-row { flex-direction: column; }
        .apply-btn { width: 100%; }
    }
</style>
@endsection

@section('content')

<!-- ===== Site Header ===== -->
<header class="site-header text-white shadow-md">
    <div class="container mx-auto px-4 py-7 flex flex-col md:flex-row items-center justify-between gap-3">
        <div class="flex items-center gap-3">
            <img src="{{ asset('logos/dav_logo_white.png') }}" alt="DAV College Logo" style="height:48px; width:auto; object-fit:contain;">
            <div>
                <div style="font-size:1.15rem; font-weight:900; line-height:1.15; letter-spacing:0.3px;">DAV College</div>
                <div style="font-size:0.65rem; color:rgba(255,255,255,0.85); font-weight:600; margin-top:1px;">Affiliated to Tribhuvan University</div>
                <div style="font-size:0.6rem; color:rgba(255,255,255,0.7); margin-top:1px;">DAV College is one of the leading Management College in Nepal.</div>
            </div>
        </div>
        <!-- <div class="flex" style="justify-content:flex-end;">
            <div style="text-align:left; max-width:18rem;">
                <div class="text-white font-extrabold text-xs tracking-wider uppercase" style="line-height:1.4;">Contact: 01-5433044,54290299</div>
                <div class="text-white font-extrabold text-xs tracking-wider uppercase" style="line-height:1.4;">Dhobighat, Lalitpur</div>
                <div class="text-white font-extrabold text-xs tracking-wider uppercase" style="line-height:1.4;">Email: davcollege.tu@gmail.com</div>
                <div class="text-white font-extrabold text-xs tracking-wider uppercase" style="line-height:1.4;">Url : www.davcollege.edu.np</div>
            </div>
        </div> -->
    </div>
</header>

<!-- ===== Sticky Nav Tabs ===== -->
<nav class="sticky top-0 bg-white shadow-sm z-40 border-b border-slate-200">
    <div class="container mx-auto px-4">
        <div class="flex overflow-x-auto whitespace-nowrap py-0.5">
            <button onclick="switchTab('inquiry')" id="tab-inquiry"
                class="nav-tab-btn text-slate-500 hover:text-blue-600 py-3.5 px-5 text-sm font-semibold border-b-3 border-transparent transition-all flex items-center gap-2">
                <i class='fas fa-address-card'></i> Inquiry
            </button>
            <button onclick="switchTab('cmat')" id="tab-cmat"
                class="nav-tab-btn text-slate-500 hover:text-blue-600 py-3.5 px-5 text-sm font-semibold border-b-3 border-transparent transition-all flex items-center gap-2">
                <i class="fa-solid fa-file-signature text-xs"></i> CMAT
            </button>
        </div>
    </div>
</nav>

<!-- ===== MAIN CONTENT ===== -->
<div class="page-bg flex-grow">

    <!-- ============ INQUIRY TAB ============ -->
    <div id="sect-inquiry" class="tab-section">

        <!-- WELCOME BANNER -->
        <div class="welcome-banner">

            <!-- Col 1: Welcome Text -->
            <div class="banner-left">
                <p style="font-size:1rem; font-weight:700; color:#F5680C; margin-bottom:5px;">Welcome to</p>
                <h2 style="font-size:3.5rem; font-weight:900; color:#0017A8; line-height:1.05; margin:0 0 8px 0;">DAV College</h2>
                <p style="font-size:1rem; font-weight:700; color:#F5680C; margin-bottom:12px;"><i>BE A BOSS TOMORROW</i></p>
                <p style="font-size:0.92rem; color:#475569; line-height:1.72; max-width:340px;">
                    Thank you for visiting DAV College. Please fill out the form so we can know you better and guide you on your academic journey.
                </p>
            </div>

            <!-- Col 2: Why Choose DAV Card (right side, over the background image) -->
            <div class="banner-right-card">
                <div class="why-choose-card">
                    <h3>Why Choose DAV College?</h3>
                    <ul>
                        <li>
                            <div class="icon-wrap"><i class="fa-solid fa-graduation-cap"></i></div>
                            Affiliated to Tribhuvan University
                        </li>
                        <li>
                            <div class="icon-wrap"><i class="fa-solid fa-user-graduate"></i></div>
                            Experienced &amp; Qualified Faculty
                        </li>
                        <li>
                            <div class="icon-wrap"><i class="fa-solid fa-building-columns"></i></div>
                            Modern Infrastructure &amp; Facilities
                        </li>
                        <li>
                            <div class="icon-wrap"><i class="fa-solid fa-briefcase"></i></div>
                            Career Guidance &amp; Placement Support
                        </li>
                    </ul>
                </div>
            </div>

        </div>
        <!-- END WELCOME BANNER -->

        <!-- FORM + SIDEBAR -->
        <div class="container mx-auto px-4 py-6">
            <div class="inquiry-section-wrap">

                <!-- LEFT: Inquiry Form -->
                <div class="inq-form-card">
                    <div class="inq-form-bar">INQUIRY FORM</div>
                    <form id="inquiry-form" method="POST" action="{{ route('inquiry.store') }}" class="inq-form-body">
                        @csrf

                        <!-- Name -->
                        <div class="form-row">
                            <div class="form-label">Name ( in BLOCK letters):<span class="req">*</span></div>
                            <div class="form-value">
                                <div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;">
                                    <div>
                                        <input type="text" name="first_name" class="form-inp" placeholder="" required>
                                        <div class="field-hint">(First Name)</div>
                                    </div>
                                    <div>
                                        <input type="text" name="middle_name" class="form-inp" placeholder="">
                                        <div class="field-hint">(Middle Name)</div>
                                    </div>
                                    <div>
                                        <input type="text" name="last_name" class="form-inp" placeholder="" required>
                                        <div class="field-hint">(Last Name)</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Gender -->
                        <div class="form-row">
                            <div class="form-label">Gender:<span class="req">*</span></div>
                            <div class="form-value">
                                <div class="radio-group">
                                    <label class="radio-opt"><input type="radio" name="gender" value="Male" required> Male</label>
                                    <label class="radio-opt"><input type="radio" name="gender" value="Female"> Female</label>
                                </div>
                            </div>
                        </div>

                        <!-- Faculty -->
                        <div class="form-row">
                            <div class="form-label">Faculty Applying for:<span class="req">*</span></div>
                            <div class="form-value">
                                <div class="radio-group">
                                    <label class="radio-opt"><input type="radio" name="program" value="BBA" required> BBA</label>
                                    <label class="radio-opt"><input type="radio" name="program" value="BBM"> BBM</label>
                                    <label class="radio-opt"><input type="radio" name="program" value="BBS"> BBS</label>
                                </div>
                            </div>
                        </div>

                        <!-- Mobile -->
                        <div class="form-row">
                            <div class="form-label">Phone No.:<span class="req">*</span></div>
                            <div class="form-value">
                                <input type="text" name="contact_no" class="form-inp" placeholder="98XXXXXXXX" pattern="[0-9]{10}" maxlength="10" minlength="10" title="Phone number must be exactly 10 digits and numbers only" inputmode="numeric" required>
                            </div>
                        </div>

                        <!-- Email -->
                        <div class="form-row">
                            <div class="form-label">Email:<span class="req">*</span></div>
                            <div class="form-value">
                                <input type="email" name="email" class="form-inp" placeholder="" required>
                            </div>
                        </div>


                        <!-- Address -->
                        <div class="form-row">
                            <div class="form-label">Address:<span class="req">*</span></div>
                            <div class="form-value">
                                <input type="text" name="address" class="form-inp" required>
                            </div>
                        </div>

                        <!-- +2 College -->
                        <div class="form-row">
                            <div class="form-label">High school(+2 College) Name:<span class="req">*</span></div>
                            <div class="form-value">
                                <input type="text" name="xii_college_name" class="form-inp" required>
                            </div>
                        </div>

                        <!-- Heard From -->
                        <div class="form-row" style="border-bottom:none;">
                            <div class="form-label">How did you hear about us?<span class="req">*</span></div>
                            <div class="form-value">
                                <div class="radio-group">
                                    <label class="radio-opt"><input type="radio" name="heard_from" value="Facebook" required> Facebook</label>
                                    <label class="radio-opt"><input type="radio" name="heard_from" value="Friends"> Friends</label>
                                    <label class="radio-opt"><input type="radio" name="heard_from" value="Others"> Others</label>
                                </div>
                            </div>
                        </div>

                        <!-- Submit -->
                        <div style="text-align:center; padding-top:18px;">
                            <button type="submit" id="inquiry-submit-btn" class="apply-btn">
                                Apply Now
                            </button>
                        </div>
                    </form>
                </div>
                <!-- END LEFT FORM -->

                <!-- RIGHT: Sidebar -->
                <div style="display:flex; flex-direction:column; gap:16px;">

                    <!-- About DAV College -->
                    <div class="sidebar-card">
                        <h3>About DAV College</h3>
                        <img src="{{ asset('images/career.jpg') }}"
                             alt="DAV College Building" class="about-img">
                        <p class="about-text">
                            DAV College, affiliated to Tribhuvan University, offers quality education in Management programs. Our mission is to nurture professionals with strong ethics, leadership skills, and practical knowledge.
                        </p>
                        <a href="https://davcollege.edu.np" target="_blank" class="learn-more">
                            Learn more about us <i class="fa-solid fa-arrow-right" style="font-size:0.65rem;"></i>
                        </a>
                    </div>

                    <!-- Our Achievements -->
                    <div class="sidebar-card">
                        <h3>Our Achievements</h3>
                        <div class="achievement-grid">
                            <div class="ach-box">
                                <div class="ach-icon"><i class="fa-solid fa-trophy"></i></div>
                                <div class="ach-number">&nbsp;Awarded</div>
                                <div class="ach-label"> No. 1 <br> Management College</div>
                            </div>
                            <div class="ach-box">
                                <div class="ach-icon"><i class="fa-solid fa-graduation-cap"></i></div>
                                <div class="ach-number">Academic Excellence</div>
                                <div class="ach-label">Successful Alumni Network</div>
                            </div>
                            <div class="ach-box">
                                <div class="ach-icon"><i class="fa-solid fa-users"></i></div>
                                <div class="ach-number">32+</div>
                                <div class="ach-label">Regular Recruiters & Placement Partners</div>
                            </div>
                            <div class="ach-box">
                                <div class="ach-icon"><i class="fa-solid fa-book-open"></i></div>
                                <div class="ach-number">International</div>
                                <div class="ach-label"> Academic MOUs</div>
                            </div>
                            
                        </div>
                    </div>

                </div>
                <!-- END SIDEBAR -->

            </div>
        </div>
    </div>
    <!-- END INQUIRY TAB -->

    <!-- ============ CMAT TAB ============ -->
    <div id="sect-cmat" class="tab-section">
        <div class="container mx-auto px-4 py-8">
            @include('cmat-content', ['isStandalone' => false])
        </div>
    </div>

</div>
<!-- END PAGE BG -->

<!-- ===== Success Modal ===== -->
<div class="modal fade" id="successModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-2xl border-0 shadow-2xl overflow-hidden">
            <div class="text-white p-6 text-center relative" style="background: linear-gradient(135deg, #0069d9, #00105a);">
                <div class="w-16 h-16 bg-white/20 border border-white/30 rounded-full flex items-center justify-center mx-auto mb-4 animate-bounce">
                    <i class="fa-solid fa-check-double text-3xl"></i>
                </div>
                <h3 class="text-xl font-bold">Submission Successful!</h3>
                <p class="text-xs text-slate-200 mt-1">Thank you for submitting your inquiry to DAV College</p>
            </div>
            <div class="p-6 text-center space-y-4">
                <div class="mb-2">
                    <i class="fa-solid fa-thumbs-up" style="font-size: 3.5rem; color: #22c55e;"></i>
                </div>
                <p class="text-slate-600 text-sm font-semibold">Our team will contact you soon...</p>
                <div class="pt-3 border-t border-slate-100">
                    <button type="button" class="btn btn-secondary rounded-pill px-6 py-2 w-full text-sm font-semibold" data-bs-dismiss="modal">
                        Close &amp; New Submission
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
    function switchTab(tabId) {
        document.querySelectorAll('.nav-tab-btn').forEach(btn => btn.classList.remove('active'));
        document.querySelectorAll('.tab-section').forEach(sec => sec.classList.remove('active'));

        const activeBtn = document.getElementById(`tab-${tabId}`);
        if (activeBtn) activeBtn.classList.add('active');

        const activeSec = document.getElementById(`sect-${tabId}`);
        if (activeSec) activeSec.classList.add('active');

        sessionStorage.setItem('current_visitor_tab', tabId);
    }

    document.addEventListener("DOMContentLoaded", function () {
        const urlParams = new URLSearchParams(window.location.search);
        const tabParam = urlParams.get('tab');
        const savedTab = tabParam || sessionStorage.getItem('current_visitor_tab') || 'inquiry';
        switchTab(savedTab);
    });

    // AJAX Form submission
    document.getElementById('inquiry-form').addEventListener('submit', function (e) {
        e.preventDefault();

        const form = this;
        const submitBtn = document.getElementById('inquiry-submit-btn');
        const originalHtml = submitBtn.innerHTML;

        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Submitting...';

        const formData = new FormData(form);

        // Concatenate names
        const firstName = (form.querySelector('[name="first_name"]').value || '').trim();
        const middleName = (form.querySelector('[name="middle_name"]').value || '').trim();
        const lastName = (form.querySelector('[name="last_name"]').value || '').trim();
        const fullName = [firstName, middleName, lastName].filter(Boolean).join(' ');
        formData.set('name', fullName);

        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(r => r.json().then(d => ({ status: r.status, body: d })))
        .then(res => {
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalHtml;
            if (res.status === 200 && res.body.success) {
                new bootstrap.Modal(document.getElementById('successModal')).show();
                form.reset();
            } else if (res.status === 422) {
                let msgs = '';
                for (const f in res.body.errors) msgs += `${res.body.errors[f][0]}\n`;
                alert('Validation Errors:\n' + msgs);
            } else {
                alert('An error occurred. Please try again.');
            }
        })
        .catch(() => {
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalHtml;
            alert('Connection error. Please try again.');
        });
    });
</script>
@endsection