@extends('client.raffles.layouts.app')
@section('content')
    <section class="about section-fall" id="ball-section">
        <canvas id="flagCanvas"></canvas>
        <div class="study-destinations-banner">
            <img src="{{ asset('raffles/assets/images/backgrounds_general/cost-calc.png') }}" alt="">
        </div>

        <section class="section ">
            <div class="flex flex-col gap-5 justify-center items-center text-center">
                <h2 class="text-60 md:text-30 text-sec">Cost Calculator</h2>
                <div class="title-line mx-auto"></div>
            </div>
        </section>

        <section class="lqd-section   pb-160">
            <div class="container">
                <div class="row" id="interactiveSection">

                    <div class="col col-lg-7">

                        {{-- <form id="costForm" action="{{ route('cost.calculator') }}" method="POST">
                            @csrf
                            <input type="hidden" name="country_id" id="country_id">
                            <input type="hidden" name="test_id" id="test_id">
                            <input type="hidden" name="intake_id" id="intake_id">
                            <input type="hidden" name="programlevel_id" id="programlevel_id"> --}}

                        <div class="cost-choosing">

                            <div class="step-content active" id="step1">
                                <h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
                                <h5 class="text-ter text-18 font-medium pb-20">Which country are you planning to study
                                    in?</h5>

                                <div class="row flex py-20">
                                    @foreach ($countryOptions as $id => $country)
                                        <div class="col col-sm-4">
                                            <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
                                                <div class="circle1"></div>
                                                <a href="#" class="select-country" data-id="{{ $id }}">
                                                    <h3 class="text-20 text-ter p-0 m-0">{{ $country }}</h3>
                                                </a>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <div class="step-content" id="step2">
                                <h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
                                <h5 class="text-ter text-18 font-medium pb-20">Which level are you applying for?</h5>

                                <div class="row flex py-20">
                                    @foreach ($programLevelOptions as $id => $level)
                                        <div class="col col-sm-4">
                                            <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
                                                <div class="circle1"></div>
                                                <a href="#" class="select-programlevel_id"
                                                    data-id="{{ $id }}">
                                                    <h3 class="text-20 text-ter p-0 m-0">{{ $level }}</h3>
                                                </a>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <div class="step-content" id="step3">
                                <h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
                                <h5 class="text-ter text-18 font-medium pb-20">Are you going alone or with a dependent?
                                </h5>

                                <div class="row flex py-20">
                                    <div class="col col-sm-4">
                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
                                            <div class="circle1"></div>
                                            <a href="#" class="select-intake" data-id="">
                                                <h3 class="text-20 text-ter p-0 m-0">Alone</h3>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col col-sm-4">
                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
                                            <div class="circle1"></div>
                                            <a href="#" class="select-intake" data-id="">
                                                <h3 class="text-20 text-ter p-0 m-0">With Spouse</h3>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col col-sm-4">
                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
                                            <div class="circle1"></div>
                                            <a href="#" class="select-intake" data-id="">
                                                <h3 class="text-20 text-ter p-0 m-0">With Spouse + 1 Child</h3>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="step-content" id="step4">
                                <h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
                                <h5 class="text-ter text-18 font-medium pb-20">Cost of Living</h5>

                                <div class="row flex py-20">
                                    <div class="col col-sm-4">
                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
                                            <div class="circle1"></div>
                                            <a href="#" class="select-year" data-id="1">
                                                <h3 class="text-20 text-ter p-0 m-0">UK £829 / £9948</h3>
                                            </a>

                                        </div>
                                    </div>
                                    <div class="col col-sm-4">
                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
                                            <div class="circle2"></div>
                                            <a href="#" class="select-year" data-id="2">
                                                <h3 class="text-20 text-ter p-0 m-0">US $1,189 / $14268</h3>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col col-sm-4">
                                        <div class="flex items-center gap-10 px-10 py-10 bg-white rounded-30 tabs">
                                            <div class="circle1"></div>
                                            <a href="#" class="select-year" data-id="3">
                                                <h3 class="text-20 text-ter p-0 m-0">AU $1,049 / $12588</h3>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="step-content" id="step5">
                                <h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
                                <h5 class="text-ter text-18 font-medium pb-20">Accomodation cost per year:</h5>

                                <div class="row flex py-20">
                                    <div class="col col-sm-4">
                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
                                            <div class="circle1"></div>
                                            <a href="#" class="select-programlevel_id" data-id="">
                                                <h3 class="text-20 text-ter p-0 m-0">UK £1,079 / £12,948</h3>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col col-sm-4">
                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
                                            <div class="circle1"></div>
                                            <a href="#" class="select-programlevel_id" data-id="">
                                                <h3 class="text-20 text-ter p-0 m-0">US $1,637 / $19,644</h3>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col col-sm-4">
                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
                                            <div class="circle1"></div>
                                            <a href="#" class="select-programlevel_id" data-id="">
                                                <h3 class="text-20 text-ter p-0 m-0">AU $2700 / $32400</h3>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="step-content" id="step6">
                                <h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
                                <h5 class="text-ter text-18 font-medium pb-20">Non-Refundable onetime cost in
                                    processing:</h5>

                                <div class="row flex py-20">
                                    <div class="col col-sm-4">
                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
                                            <div class="circle1"></div>
                                            <a href="#" class="select-programlevel_id" data-id="">
                                                <h3 class="text-20 text-ter p-0 m-0">UK 2 to 3 Lakhs</h3>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col col-sm-4">
                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
                                            <div class="circle1"></div>
                                            <a href="#" class="select-programlevel_id" data-id="">
                                                <h3 class="text-20 text-ter p-0 m-0">AU 5 to 7 Lakhs</h3>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col col-sm-4">
                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
                                            <div class="circle1"></div>
                                            <a href="#" class="select-programlevel_id" data-id="">
                                                <h3 class="text-20 text-ter p-0 m-0">USA 1 to 2 Lakh</h3>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="step-content" id="step7">
                                <h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
                                <h5 class="text-ter text-18 font-medium pb-20">Do you want to include other services?
                                </h5>

                                <div class="row flex py-20">
                                    <div class="col col-sm-4">
                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
                                            <div class="circle1"></div>
                                            <a href="#" class="select-programlevel_id" data-id="">
                                                <h3 class="text-20 text-ter p-0 m-0">Flighr Ticket</h3>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col col-sm-4">
                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
                                            <div class="circle1"></div>
                                            <a href="#" class="select-programlevel_id" data-id="">
                                                <h3 class="text-20 text-ter p-0 m-0">Health Insurance</h3>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col col-sm-4">
                                        <div class="flex items-center gap-10 px-10 py-20 bg-white rounded-30 tabs">
                                            <div class="circle1"></div>
                                            <a href="#" class="select-programlevel_id" data-id="">
                                                <h3 class="text-20 text-ter p-0 m-0">Extra</h3>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class=" flex items-center justify-center next-btn">
                                <button id="nextBtn"
                                    class="rounded-30 px-20 py-10  text-ter text-16 text-center border-0 flex items-center gap-10 justify-center">
                                    <p class="m-0 p-0">Next</p> <i class="fa-solid fa-chevron-right"></i>
                                </button>
                                <button id="doneBtn" type="submit" style="display: none;">Done</button>
                            </div>

                            <div class="progress-line">
                                <div class="progress-track">
                                    <span class="banana" id="b1">
                                        <div class="dot"
                                            style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
                                    </span>
                                    <span class="banana" id="b2">
                                        <div class="dot"
                                            style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
                                    </span>
                                    <span class="banana" id="b3">
                                        <div class="dot"
                                            style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
                                    </span>
                                    <span class="banana" id="b4">
                                        <div class="dot"
                                            style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
                                    </span>
                                    <span class="banana" id="b5">
                                        <div class="dot"
                                            style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
                                    </span>
                                    <span class="banana" id="b6">
                                        <div class="dot"
                                            style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
                                    </span>
                                    <span class="banana" id="b7">
                                        <div class="dot"
                                            style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
                                    </span>
                                </div>
                                <div class="monkey" id="monkey" style="left: 0%;">
                                    <img src="{{ asset('raffles/assets/images/icons/monkey.png') }}" alt="">
                                </div>
                            </div>

                        </div>
                        {{-- </form> --}}

                    </div>

                    <div class="col col-lg-1"></div>

                    <div class="col col-lg-4">
                        <div class="total-cost">
                            <h4>Total <span class="text-black">Cost</span> </h4>
                            <table>
                                <thead>
                                    <tr>
                                        <th class="font-bold">S.N.</th>
                                        <th class="font-bold ">Select</th>
                                        <th class="font-bold ">Max Price</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Bachelors</td>
                                        <td>$13000/year</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Bachelors</td>
                                        <td>$13000/year</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Bachelors</td>
                                        <td>$13000/year</td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>Bachelors</td>
                                        <td>$13000/year</td>
                                    </tr>
                                    <tr>
                                        <td>5</td>
                                        <td>Bachelors</td>
                                        <td>$13000/year</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

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

    </section>
@endsection

{{-- @push('js')
    <script>
        $(document).ready(function() {
            const map = {
                'select-country': 'country_id',
                'select-test': 'test_id',
                'select-intake': 'intake_id',
                'select-programlevel_id': 'programlevel_id'
            };

            $(document).on('click', 'a', function(e) {
                const classes = $(this).attr('class')?.split(/\s+/) || [];
                for (const cls of classes) {
                    if (map[cls]) {
                        e.preventDefault();
                        $('#' + map[cls]).val($(this).data('id'));
                        break;
                    }
                }
            });
        });
    </script>
@endpush --}}