@extends('user.layouts.app')

@section('body_class', 'Tolly Fest 2025')

@section('content')
<section class="banner-slider">
    @foreach($bannerImages as $image)
    <div class="slider-item"><img src="{{ asset('/storage/distribution/images/banner_image/' . $image->image) }}"
            alt="Slide {{ $loop->iteration }}"></div>
    @endforeach
</section>

<div class="banner-inner-content">
    <div class="container">
        <ul class="bread-come">
            <li>
                <a href="/">Home</a>
            </li>
            <li>Tolly Fest – {{ date('Y') }}</li>
        </ul>
    </div>
</div>

<section class="sport-details new_reg">
    <div class="container">
        <div class="sport-details-plate">
            <div class="sport-nav">
                <ul>
                    <li>
                        <a href="#registration">New Registration</a>
                    </li>
                    <li>
                        <a href="#history">Your Registration</a>
                    </li>
                    <li>
                        <a href="#disciplines">Disciplines & Categories</a>
                    </li>
                    <li>
                        <!-- <a href="#updates">Events & Updates</a> -->
                        <a href="/tolly-fest#notices">Events & Updates</a>
                    </li>
                </ul>
            </div>
            <div class="sport-nav-content">
                <div class="section" id="registration">
                    <div class="title">
                        <h4 data-aos="fade-up">New Registration</h4>
                    </div>

                    <form action="{{ route('tollyfest.registration.store') }}" method="POST" id="registrationForm">
                        @csrf

                        @if(session('success'))
                        <script>
                            document.addEventListener("DOMContentLoaded", function () {
                                Swal.fire({
                                icon: 'success',
                                title: 'Success!',
                                text: @json(session('success')),
                                confirmButtonText: 'OK'
                                });
                            });
                        </script>
                        @endif

                        @if(session('error'))
                        <script>
                            document.addEventListener("DOMContentLoaded", function () {
                                Swal.fire({
                                icon: 'error',
                                title: 'Oops!',
                                text: @json(session('error')),
                                confirmButtonText: 'Try Again'
                                });
                            });
                        </script>
                        @endif

                        @if(session('discipline_limit'))
                        <script>
                            document.addEventListener("DOMContentLoaded", function () {
                                Swal.fire({
                                icon: 'warning',
                                title: 'Limit Reached',
                                text: @json(session('discipline_limit')),
                                confirmButtonText: 'OK'
                                });
                            });
                        </script>
                        @endif


                        {{-- year --}}
                        <input type="hidden" name="year" value="{{ now()->year }}">

                        {{-- user id --}}
                        <input type="hidden" name="user_id" value="{{ auth()->id() }}">

                        <div class="inner-form login-show-box">
                            <!-- <form> -->
                                <ul class="inner-form-ul p-0 mb-0" style="list-style: none;">
                                    <li>
                                        <div class="form-row box-focus">
                                            <div class="d-block text-dark fs-6 pb-2 fw-semibold">Participant Name*</div>
                                            <!-- <select class="custom-selectpicker" name="venue[]" multiple="" data-placeholder="---Select---"
                                                required="" style="display: none;">
                                                <option value="Antiquity Hall">Antiquity Hall</option>
                                                <option value="Antiquity Hall, Lounge &amp; Terrace">Antiquity Hall, Lounge &amp; Terrace
                                                </option>
                                            </select> -->
                                            <input type="text" class="form-control" value="{{auth()->user()->name}}" disabled>
                                            <input type="hidden" name="participent_name" value="{{ auth()->user()->name }}">
                                        </div>
                                    </li>
                                    <li>
                                        <div class="form-row box-focus">
                                            <div class="d-block text-dark fs-6 pb-2 fw-semibold">Gender</div>
                                            <select class="custom-selectpicker" name="gender" multiple=""
                                                data-placeholder="Choose from list" required="" style="display: none;">
                                                <option value="Male">Male</option>
                                                <option value="Female">Female</option>
                                            </select>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="form-row box-focus">
                                            <div class="d-block text-dark fs-6 pb-2 fw-semibold">Date of birth*</div>
                                            <div class="outer-box">
                                                <label for="event_date" class=""></label>
                                                <!-- <input id="event_date" type="text" name="event_date" class="form-control" required="" placeholder="yyyy-mm-dd"> -->
                                                <input id="event_date" type="text" name="event_date" class="form-control" required="" placeholder="dd-mm-yyyy">
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            <!-- </form> -->
                        </div>

                        <div class="inner-form login-show-box">
                            <!-- <form> -->
                                <ul class="inner-form-ul p-0 mb-0" style="list-style: none;">
                                    <li>
                                        <div class="form-row box-focus">
                                            <div class="d-block text-dark fs-6 pb-2 fw-semibold">Mobile Number*</div>
                                            <input type="number" name="mobile_number" class="form-control" required="" value="">
                                        </div>
                                    </li>
                                    <li>
                                        <div class="form-row box-focus">
                                            <div class="d-block text-dark fs-6 pb-2 fw-semibold">WhatsApp Number</div>
                                            <input type="number" name="wp_number" class="form-control" required="" value="">
                                            <span class="d-block mt-1 text_14"><input id="sameAsMobile" type="checkbox">&nbsp; Same as mobile number</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="form-row box-focus">
                                            <div class="d-block text-dark fs-6 pb-2 fw-semibold">Email Address</div>
                                            <input type="email" name="email" class="form-control" required="" value="">
                                        </div>
                                    </li>
                                </ul>
                            <!-- </form> -->

                        </div>

                        <div class="inner-form login-show-box">
                            <!-- <form> -->
                                <ul class="inner-form-ul p-0 mb-0" style="list-style: none;">
                                    <li>
                                        <div class="form-row box-focus">
                                            <div class="d-block text-dark fs-6 pb-2 fw-semibold">T-Shirt Size*</div>
                                            <!-- <select class="custom-selectpicker" name="venue[]" multiple="" data-placeholder="Choose Size"
                                            required="" style="display: none;">
                                            <option value="Antiquity Hall">Antiquity Hall</option>
                                            <option value="Antiquity Hall, Lounge &amp; Terrace">Antiquity Hall, Lounge &amp; Terrace
                                            </option>
                                        </select> -->
                                            <select class="custom-selectpicker" name="tshirt_size" multiple="" data-placeholder="Choose Size"
                                                required="" style="display: none;">
                                                <option value="" disabled="" selected="">Choose Size</option>
                                                <option value="50">50 inches</option>
                                                <option value="48">48 inches</option>
                                                <option value="46">46 inches</option>
                                                <option value="44">44 inches</option>
                                                <option value="42">42 inches</option>
                                                <option value="40">40 inches</option>
                                                <option value="38">38 inches</option>
                                                <option value="36">36 inches</option>
                                                <option value="34">34 inches</option>
                                                <option value="32">32 inches</option>
                                                <option value="30">30 inches</option>
                                                <option value="28">28 inches</option>
                                                <option value="26">26 inches</option>
                                                <option value="24">24 inches</option>
                                            </select>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="form-row box-focus">
                                            <div class="d-block text-dark fs-6 pb-2 fw-semibold">A few lines about you*</div>
                                            <div class="outer-box">
                                                <textarea name="about_you" maxlength="500" class="form-control"
                                                    placeholder="#e.g. Why will you be an asset to the team or What makes you an awesome choice or A few lines about you...maximum 100 characters."></textarea>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            <!-- </form> -->

                        </div>

                        <marquee class="choose_your_discipline">Choose your discipline(s). You can choose maximum 04 disciplines (02 Physical & 02 Cerebral / Cultural).
                        </marquee>

                        <div class="discipline-container">
                            <div class="inner-form new_reg_discipline discipline-block">
                                <span class="d-block text-light fs-6 pb-2 fw-semibold bg_green ps-1">Discipline</span>
                                <!-- <form> -->
                                    <ul class="inner-form-ul p-3 p-lg-4 mb-0" style="list-style: none;">
                                        <li>
                                            <div class="form-row box-focus">
                                                <div class="text-dark fs-6 pb-2 new_reg_discipline_label"><span>Type:</span></div>
                                                <select class="custom-selectpicker discipline-type" name="type[]" data-placeholder="---Select---" required="">
                                                    <option value="" disabled selected>---Select---</option>
                                                    <option value="Physical">Physical</option>
                                                    <option value="Cerebral/Cultural">Cerebral/Cultural
                                                    </option>
                                                </select>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-row box-focus">
                                                <div class="text-dark fs-6 pb-2 new_reg_discipline_label"><span>Discipline:</span></div>
                                                <select class="custom-selectpicker discipline-select" name="discipline_id[]" data-placeholder="---Select---" required="" disabled>
                                                    <!-- <option value="Antiquity Hall">Antiquity Hall</option>
                                                <option value="Antiquity Hall, Lounge &amp; Terrace">Antiquity Hall, Lounge &amp; Terrace
                                                </option> -->
                                                    <option value="">---Select Type First---</option>
                                                </select>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-row box-focus">
                                                <div class="text-dark fs-6 pb-2 new_reg_discipline_label"><span>Category:</span></div>
                                                <select class="custom-selectpicker category-select" name="category_id[]" data-placeholder="---Select---" required="" disabled>
                                                    <!-- <option value="Antiquity Hall">Antiquity Hall</option>
                                                <option value="Antiquity Hall, Lounge &amp; Terrace">Antiquity Hall, Lounge &amp; Terrace
                                                </option> -->
                                                    <option value="">---Select Discipline First---</option>
                                                </select>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-row box-focus">
                                                <div class="text-dark fs-6 pb-2 new_reg_discipline_label"><span>Ratings:</span></div>
                                                <div>
                                                    <!-- <select class="custom-selectpicker" name="venue[]" multiple="" data-placeholder="---Select---"
                                                    required="" style="display: none;">
                                                    <option value="Antiquity Hall">Antiquity Hall</option>
                                                    <option value="Antiquity Hall, Lounge &amp; Terrace">Antiquity Hall, Lounge &amp; Terrace
                                                    </option>
                                                </select> -->
                                                    <select class="custom-selectpicker" name="rating[]" multiple="" data-placeholder="---Select---"
                                                        required="" style="display: none;">
                                                        <option value="">---Select---</option>
                                                        <option value="5">🌟🌟🌟🌟🌟 (5-Star)</option>
                                                        <option value="4">🌟🌟🌟🌟 (4-Star)</option>
                                                        <option value="3">🌟🌟🌟 (3-Star)</option>
                                                        <option value="2">🌟🌟 (2-Star)</option>
                                                        <option value="1">🌟 (1-Star)</option>
                                                    </select>
                                                    <span class="text_14 d-block mt-2">**Skill Level Self Assessment</span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                <!-- </form> -->

                            </div>
                        </div>

                        <div class="mb-3">
                            <button class="AddMoreDiscipline">
                                <i class="fa-solid fa-plus"></i>
                                <span>Add More Discipline</span>
                            </button>
                        </div>
                        
                        <!-- Submit Button -->
                        <div class="mb-3">
                            <button class="btn btn-primary w-100" type="submit">
                                Submit
                            </button>
                        </div>

                        <!-- Disclaimer & Consent Section  -->
                        <div class="mb-3">
                            <span class="d-block text-dark fw-semibold text_14 mb-1">Disclaimer:</span>
                            <span class="d-block text_14">
                                Categories and events for a discipline are subject to change depending on the entries received
                            </span>
                        </div>
                        <div class="mb-3">
                            <span class="d-block text-dark fw-semibold text_14 mb-1">Consent for Communication and Information Use:</span>
                            <span class="d-block text_14">
                                By submitting this registration, I hereby give my consent for the club or its authorised representatives to contact me via mobile phone, WhatsApp and email. I also authorise the use of my personal information, including my name, photograph, membership number, age, gender and other relevant details, for purposes related to Tolly Fest 2026.
                            </span>
                        </div>
                        <div class="mb-3">
                            <span class="d-block text-dark fw-semibold text_14 mb-1">* Required field</span>
                        </div>
                    </form>
                </div>
                <div class="section" id="history">
                    <div class="section-inner">
                        <div class="title">
                            <h4 data-aos="fade-up">Registration history</h4>
                        </div>
                        <div class="section-description scroll">
                            <table class="custom-table">
                                <thead>
                                    <tr>
                                        <th class="slNo">Sl. No.</th>
                                        <th class="date">Fest-Year</th>
                                        <th class="date">Applied Date</th>
                                        <th class="particulars">Discipline</th>
                                        <th class="action">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($tollyFestRegistrations as $tollyFestRegistration)
                                    <tr>
                                        <td class="slNo">{{ $loop->iteration }}</td>

                                        <td class="date">Tolly Fest - {{ $tollyFestRegistration->year }}</td>

                                        <td class="date" data-label="Applied Date">
                                            {{-- {{ optional($tollyFestRegistration->created_at)->format('Y-m-d') }} --}}
                                            {{ optional($tollyFestRegistration->created_at)->format('d-m-Y') }}
                                        </td>

                                        <td class="particulars" data-label="Discipline">
                                            @if($tollyFestRegistration->details->count())
                                                <ul class="mb-0 ps-3">
                                                    @foreach($tollyFestRegistration->details as $d)
                                                        <li>
                                                            {{ $d->discipline->discipline_name ?? '' }}
                                                            @if($d->category)
                                                                - {{ $d->category->category_name }}
                                                            @endif
                                                            @if($d->rating)
                                                                ({{ $d->rating }}⭐)
                                                            @endif
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            @else
                                                <span class="text-muted">No discipline selected</span>
                                            @endif
                                        </td>

                                        <td class="action" data-label="Action">
                                            <a href=""
                                            class="btn btn-primary view">
                                                View
                                            </a>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="section" id="disciplines">
                    <div class="section-inner">
                        <div class="title">
                            <h4 data-aos="fade-up">Disciplines & Categories</h4>
                        </div>
                        <!-- <div class="accordion" id="accordion_a">
                            <h5 class="accordion_h5">Lorem, ipsum dolor.</h5>
                            <div class="accordion-item shadow mb-2">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#accordion_a_1" aria-expanded="false" aria-controls="accordion_a_1">
                                        <i class="fa-solid fa-football"></i>
                                        <span class="text-dark fw-semibold">Football</span>
                                    </button>
                                </h2>
                                <div id="accordion_a_1" class="accordion-collapse collapse" aria-labelledby="headingOne">
                                    <div class="accordion-body">
                                        <ol class="ul">
                                            <li class="text_14">Lorem ipsum dolor sit.</li>
                                            <li class="text_14">Lorem ipsum .</li>
                                            <li class="text_14">Lorem ipsum dolor.</li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item shadow mb-2">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#accordion_a_2" aria-expanded="false" aria-controls="accordion_a_2">
                                        <i class="fa-solid fa-football"></i>
                                        <span class="text-dark fw-semibold">Cricket</span>
                                    </button>
                                </h2>
                                <div id="accordion_a_2" class="accordion-collapse collapse" aria-labelledby="headingTwo">
                                    <div class="accordion-body">
                                        <ol class="ul">
                                            <li class="text_14">Lorem ipsum dolor sit.</li>
                                            <li class="text_14">Lorem ipsum .</li>
                                            <li class="text_14">Lorem ipsum dolor.</li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="accordion" id="accordion_b">
                            <h5 class="accordion_h5">Lorem, ipsum dolor.</h5>
                            <div class="accordion-item shadow mb-2">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#accordion_b_1" aria-expanded="false" aria-controls="accordion_b_1">
                                        <i class="fa-solid fa-football"></i>
                                        <span class="text-dark fw-semibold">Football 1</span>
                                    </button>
                                </h2>
                                <div id="accordion_b_1" class="accordion-collapse collapse" aria-labelledby="headingOne">
                                    <div class="accordion-body">
                                        <ol class="ul">
                                            <li class="text_14">Lorem ipsum dolor sit.</li>
                                            <li class="text_14">Lorem ipsum .</li>
                                            <li class="text_14">Lorem ipsum dolor.</li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item shadow mb-2">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#accordion_b_2" aria-expanded="false" aria-controls="accordion_b_2">
                                        <i class="fa-solid fa-football"></i>
                                        <span class="text-dark fw-semibold">Cricket 1</span>
                                    </button>
                                </h2>
                                <div id="accordion_b_2" class="accordion-collapse collapse" aria-labelledby="headingTwo">
                                    <div class="accordion-body">
                                        <ol class="ul">
                                            <li class="text_14">Lorem ipsum dolor sit.</li>
                                            <li class="text_14">Lorem ipsum .</li>
                                            <li class="text_14">Lorem ipsum dolor.</li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                        <!-- Loop through grouped disciplines -->
                        @foreach($tollyDiscipline as $type => $disciplines)
                        <div class="accordion" id="accordion_{{ $loop->index }}">
                            <h5 class="accordion_h5">{{ ucfirst($type) }}</h5> <!-- Display type as header -->

                            <!-- Loop through each discipline within the type -->
                            @foreach($disciplines as $discipline)
                            <div class="accordion-item shadow mb-2">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#accordion_{{ $loop->parent->index }}_{{ $loop->index }}"
                                        aria-expanded="false" aria-controls="accordion_{{ $loop->parent->index }}_{{ $loop->index }}">
                                        <!-- <i class="fa-solid fa-football"></i> -->
                                        <img src="/{{ $discipline->discipline_image }}" height="auto" width="30px">
                                        <span class="text-dark fw-semibold">{{ $discipline->discipline_name }}</span>
                                    </button>
                                </h2>
                                <div id="accordion_{{ $loop->parent->index }}_{{ $loop->index }}" class="accordion-collapse collapse" aria-labelledby="headingOne">
                                    <div class="accordion-body">
                                        <ol class="">
                                            @foreach($discipline->categories as $category)
                                            <li class="text_14">{{ $category->category_name }}</li>
                                            @endforeach
                                        </ol>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        @endforeach
                    </div>
                </div>
                <div class="section" id="updates">
                    <div class="section-inner">
                        <div class="title">
                            <h4 data-aos="fade-up">Events & Updates</h4>
                        </div>
                        <div class="section-description scroll">
                            <table class="custom-table">
                                <thead>
                                    <tr>
                                        <th class="slNo">SL. No.</th>
                                        <th class="date">Date</th>
                                        <th class="particulars">Particulars</th>
                                        <th class="file">File</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="slNo" data-label="SL No">1</td>
                                        <td class="date" data-label="Date"></td>
                                        <td class="particulars" data-label="Particulars"></td>
                                        <td class="file" data-label="File"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('footer')
<!-- footer bottom appears here -->
@endsection

@push('scripts')
<script>
    let slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let dots = document.getElementsByClassName("dot");
        if (n > slides.length) {
            slideIndex = 1
        }
        if (n < 1) {
            slideIndex = slides.length
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
    }
</script>


<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Select all section toggle links (like #notices, #results, etc.)
        const navLinks = document.querySelectorAll(".sport-nav a[href^='#']");
        const sections = document.querySelectorAll(".sport-nav-content .section");

        // Function to hide all sections
        function hideAllSections() {
            sections.forEach(section => section.style.display = "none");
        }

        // Function to show a specific section
        function showSection(id) {
            hideAllSections();
            const target = document.querySelector(id);
            if (target) {
                target.style.display = "block";
                // Smooth scroll into view
                target.scrollIntoView({
                    behavior: "smooth",
                    block: "start"
                });
            }
        }

        // Handle nav link clicks
        navLinks.forEach(link => {
            link.addEventListener("click", function(e) {
                const hash = this.getAttribute("href");
                if (!hash.startsWith("#")) return; // Ignore non-anchor links
                e.preventDefault();

                // Show the clicked section
                showSection(hash);

                // Update active class
                navLinks.forEach(l => l.classList.remove("active"));
                this.classList.add("active");

                // Update URL hash (no reload)
                history.replaceState(null, "", hash);
            });
        });

        // Handle page load with hash (e.g., /tolly-fest#results)
        const initialHash = window.location.hash;
        if (initialHash && document.querySelector(initialHash)) {
            showSection(initialHash);
            navLinks.forEach(l => {
                l.classList.toggle("active", l.getAttribute("href") === initialHash);
            });
        } else {
            // Default section (show 'Notices' first)
            showSection("#registration");
            document.querySelector(".sport-nav a[href='#registration']")?.classList.add("active");
        }
    });

    //date-picker script
    $(document).ready(function() {
        $("#event_date").datepicker({
            // dateFormat: "yy-mm-dd",
            dateFormat: "dd-mm-yy",
            changeMonth: true, // month dropdown
            changeYear: true, // year dropdown
            yearRange: "c-50:c+10", // optional: from 50 years ago to 10 years ahead
            // minDate: 0, // uncomment if you want to block past dates
            // showButtonPanel: true // optional: adds Today/Done buttons
        });
    });

    // same as mobile number script
    $(document).ready(function() {
        $('#sameAsMobile').on('change', function() {
            if ($(this).is(':checked')) {
                var mobileNumber = $('input[name="mobile_number"]').val();
                $('input[name="wp_number"]').val(mobileNumber).prop('readonly', true);
            } else {
                $('input[name="wp_number"]').val('').prop('readonly', false);
            }
        });

        $('input[name="mobile_number"]').on('input', function() {
            if ($('#sameAsMobile').is(':checked')) {
                $('input[name="wp_number"]').val($(this).val());
            }
        });
    });

    // type choose discipline choose and category choose accordingly
    $(document).ready(function() {

        // Get CSRF token
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // Rebuild select (useful after dynamic update)
        function rebuildCustomSelect($select) {
            $select.next('.select-wrapper').remove(); // remove old custom UI
            buildCustomSelect($select);
        }

        // When Type is selected
        $(document).on('change', '.discipline-type', function() {
            var type = $(this).val();
            var $disciplineSelect = $(this).closest('.inner-form').find('.discipline-select');
            var $categorySelect = $(this).closest('.inner-form').find('.category-select');

            // Reset discipline and category dropdowns
            $disciplineSelect.html('<option value="">---Loading---</option>').prop('disabled', true);
            $categorySelect.html('<option value="">---Select Discipline First---</option>').prop('disabled', true);

            // Rebuild custom selects
            rebuildCustomSelect($disciplineSelect);
            rebuildCustomSelect($categorySelect);

            if (type) {
                // Fetch disciplines based on type
                $.ajax({
                    url: '{{ route("get.disciplines") }}',
                    type: 'POST',
                    data: {
                        type: type,
                        _token: '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    success: function(response) {
                        console.log('Disciplines Response:', response);

                        if (response.success && response.disciplines.length > 0) {
                            var options = '<option value="">---Select---</option>';
                            $.each(response.disciplines, function(index, discipline) {
                                options += '<option value="' + discipline.id + '">' + discipline.discipline_name + '</option>';
                            });
                            $disciplineSelect.html(options).prop('disabled', false);
                        } else {
                            $disciplineSelect.html('<option value="">No disciplines available</option>');
                        }

                        // Rebuild custom select after updating options
                        rebuildCustomSelect($disciplineSelect);
                    },
                    error: function(xhr) {
                        console.error('Error:', xhr);
                        alert('Error loading disciplines');
                        $disciplineSelect.html('<option value="">Error loading data</option>');
                        rebuildCustomSelect($disciplineSelect);
                    }
                });
            }
        });

        // When Discipline is selected
        $(document).on('change', '.discipline-select', function() {
            var disciplineId = $(this).val();
            var $categorySelect = $(this).closest('.inner-form').find('.category-select');

            // Reset category dropdown
            $categorySelect.html('<option value="">---Loading---</option>').prop('disabled', true);
            rebuildCustomSelect($categorySelect);

            if (disciplineId) {
                // Fetch categories based on discipline
                $.ajax({
                    url: '{{ route("get.categories") }}',
                    type: 'POST',
                    data: {
                        discipline_id: disciplineId,
                        _token: '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    success: function(response) {
                        console.log('Categories Response:', response);

                        if (response.success && response.categories.length > 0) {
                            var options = '<option value="">---Select---</option>';
                            $.each(response.categories, function(index, category) {
                                options += '<option value="' + category.id + '">' + category.category_name + '</option>';
                            });
                            $categorySelect.html(options).prop('disabled', false);
                        } else {
                            $categorySelect.html('<option value="">No categories available</option>');
                        }

                        // Rebuild custom select after updating options
                        rebuildCustomSelect($categorySelect);
                    },
                    error: function(xhr) {
                        console.error('Error:', xhr);
                        alert('Error loading categories');
                        $categorySelect.html('<option value="">Error loading data</option>');
                        rebuildCustomSelect($categorySelect);
                    }
                });
            } else {
                $categorySelect.html('<option value="">---Select Discipline First---</option>');
                rebuildCustomSelect($categorySelect);
            }
        });

    });

    //Add more Discipline and remove discipline script
    $(document).ready(function() {

        // --- MAX LIMIT ---
        const MAX_BLOCKS = 4;

        // ----- ADD MORE DISCIPLINE -----
        $(document).on("click", ".AddMoreDiscipline", function(e) {
            e.preventDefault();

            const $container = $(".discipline-container");
            const count = $container.find(".discipline-block").length;

            if (count >= MAX_BLOCKS) {
                if (typeof Swal !== "undefined") {
                    Swal.fire({
                        icon: "warning",
                        title: "Limit Reached",
                        text: "You can add maximum 4 disciplines only.",
                        confirmButtonText: "Okay",
                    });
                } else if (typeof swal !== "undefined") {
                    swal("Limit Reached", "You can add maximum 4 disciplines only.", "warning");
                } else {
                    alert("You can add maximum 4 disciplines only.");
                }
                return;
            }

            const $last = $container.find(".discipline-block").last();

            // ✅ 1) REMOVE OLD CUSTOM UI BEFORE CLONING
            $last.find(".select-wrapper").remove();
            $last.find("select.custom-selectpicker").show(); // make selects visible for clean clone

            // ✅ 2) CLONE CLEAN BLOCK
            const $clone = $last.clone();

            // ✅ 3) RESET CLONE VALUES
            $clone.find(".discipline-type").val("");

            $clone.find(".discipline-select")
                .html('<option value="">---Select Type First---</option>')
                .prop("disabled", true)
                .val("");

            $clone.find(".category-select")
                .html('<option value="">---Select Discipline First---</option>')
                .prop("disabled", true)
                .val("");

            $clone.find(".rating-select").val("");

            // ✅ 4) ADD REMOVE BUTTON FOR CLONES
            if ($clone.find(".remove-discipline").length === 0) {
                $clone.append(`
                    <div class="mt-2 text-end">
                        <button type="button" class="remove-discipline btn btn-danger btn-sm">
                            Remove Discipline
                        </button>
                    </div>
                `);
            }

            // ✅ 5) APPEND CLONE
            $container.append($clone);

            // ✅ 6) REBUILD CUSTOM SELECT UI
            $clone.find("select.custom-selectpicker").each(function() {
                buildCustomSelect($(this));
            });

            // ✅ 7) REBUILD for last too (because we removed wrappers)
            $last.find("select.custom-selectpicker").each(function() {
                buildCustomSelect($(this));
            });
        });


        // ----- REMOVE DISCIPLINE -----
        $(document).on("click", ".remove-discipline", function() {
            $(this).closest(".discipline-block").remove();
        });


        // ----- TYPE CHANGE (works for clones) -----
        $(document).on("change", ".discipline-type", function() {
            const type = $(this).val();
            const $block = $(this).closest(".discipline-block");

            const $disciplineSelect = $block.find(".discipline-select");
            const $categorySelect = $block.find(".category-select");

            // reset dropdowns
            $disciplineSelect.html('<option value="">Loading...</option>').prop("disabled", true);
            $categorySelect.html('<option value="">---Select Discipline First---</option>').prop("disabled", true);

            // ✅ rebuild custom UI after reset
            rebuildCustomSelect($disciplineSelect);
            rebuildCustomSelect($categorySelect);

            if (!type) return;

            $.ajax({
                url: '{{ route("get.disciplines") }}',
                type: "POST",
                data: {
                    type: type,
                    _token: '{{ csrf_token() }}'
                },
                dataType: "json",
                success: function(response) {
                    if (response.success && response.disciplines.length > 0) {
                        let options = '<option value="">---Select---</option>';
                        response.disciplines.forEach(d => {
                            options += `<option value="${d.id}">${d.discipline_name}</option>`;
                        });
                        $disciplineSelect.html(options).prop("disabled", false);
                    } else {
                        $disciplineSelect.html('<option value="">No disciplines available</option>');
                    }

                    // ✅ rebuild after AJAX update
                    rebuildCustomSelect($disciplineSelect);
                },
                error: function() {
                    $disciplineSelect.html('<option value="">Error loading disciplines</option>');
                    rebuildCustomSelect($disciplineSelect);
                },
            });
        });


        // ----- DISCIPLINE CHANGE (works for clones) -----
        $(document).on("change", ".discipline-select", function() {
            const disciplineId = $(this).val();
            const $block = $(this).closest(".discipline-block");
            const $categorySelect = $block.find(".category-select");

            $categorySelect.html('<option value="">Loading...</option>').prop("disabled", true);
            rebuildCustomSelect($categorySelect);

            if (!disciplineId) {
                $categorySelect.html('<option value="">---Select Discipline First---</option>').prop("disabled", true);
                rebuildCustomSelect($categorySelect);
                return;
            }

            $.ajax({
                url: '{{ route("get.categories") }}',
                type: "POST",
                data: {
                    discipline_id: disciplineId,
                    _token: '{{ csrf_token() }}'
                },
                dataType: "json",
                success: function(response) {
                    if (response.success && response.categories.length > 0) {
                        let options = '<option value="">---Select---</option>';
                        response.categories.forEach(c => {
                            options += `<option value="${c.id}">${c.category_name}</option>`;
                        });
                        $categorySelect.html(options).prop("disabled", false);
                    } else {
                        $categorySelect.html('<option value="">No categories available</option>');
                    }

                    rebuildCustomSelect($categorySelect);
                },
                error: function() {
                    $categorySelect.html('<option value="">Error loading categories</option>');
                    rebuildCustomSelect($categorySelect);
                },
            });
        });

    });
</script>

@endpush