@extends('client.raffles.layouts.app')

@push('css')
    <style>
        .wizard-container {
            max-width: 700px;
            margin: auto;
            background: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        }

        .wizard-container .step-title {
            font-size: 22px;
            margin-bottom: 5px;
        }

        .wizard-container .step-subtitle {
            font-size: 14px;
            color: #555;
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
        }

        .wizard-container .tab-pane {
            display: none;
        }

        .wizard-container .tab-pane.active {
            display: block;
        }

        .wizard-container .form-group {
            margin-bottom: 15px;
        }

        .wizard-container .form-control,
        select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }

        .wizard-container .btn {
            padding: 10px 20px;
            background: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .wizard-container .btn:disabled {
            background: #ccc;
            cursor: not-allowed;
        }

        .wizard-container .btn-prev {
            background: #6c757d;
        }

        .wizard-container .form-check {
            margin-right: 10px;
        }

        .wizard-container .d-none {
            display: none;
        }

        .wizard-container .nav {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .wizard-container .nav button {
            flex: 1;
            margin: 0 2px;
            padding: 8px;
            background: #e9ecef;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .wizard-container .nav button.active {
            background: #007bff;
            color: #fff;
        }

        .wizard-container .text-danger {
            color: red;
        }

        .wizard-container .card-radio {
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            min-width: 120px;
            text-align: center;
        }

        .wizard-container .card-radio:hover {
            border-color: #0d6efd;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .wizard-container .card-radio.active {
            border-color: #0d6efd;
            background-color: #e7f1ff;
        }
    </style>
@endpush

@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-12">

                        <div class="wizard-container">
                            <div class="nav" id="step-nav">
                                <button class="active" data-step="0">Country</button>
                                <button data-step="1">Stay Type</button>
                                <button data-step="2">Other Services</button>
                                <button data-step="3">Program Level</button>
                                <button data-step="4">Program</button>
                            </div>

                            <form id="multiStepForm" method="GET" action="{{ route('cost.getCost') }}">

                                <!-- Step 1: Select Country -->
                                <div class="tab-pane active" data-step="0">
                                    <h2 class="step-title">Which country are you planning to study in?</h2>
                                    <div class="form-group">
                                        <div class="d-flex flex-wrap">
                                            @foreach ($countries as $country)
                                                <div class="form-check country-card me-3 mb-3">
                                                    <input class="form-check-input" type="radio" name="country_id"
                                                        value="{{ $country->id }}" id="{{ $country->id }}">
                                                    <label class="form-check-label" for="{{ $country->id }}">
                                                        {{ $country->title }}
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>

                                    <div style="text-align:right;">
                                        <button type="button" class="btn btn-next">Next</button>
                                    </div>
                                </div>

                                <!-- Step 2: Stay Type Status -->
                                <div class="tab-pane" data-step="1">
                                    <h2 class="step-title">Are you going alone or with a dependent?</h2>

                                    <div class="form-group">
                                        <div class="d-flex flex-wrap">
                                            @foreach ($livingStatusOptions as $key => $status)
                                                <div class="form-check status-card me-3 mb-3">
                                                    <input class="form-check-input" type="radio" name="status_type_id"
                                                        value="{{ $key }}" id="status_type_{{ $key }}">
                                                    <label class="form-check-label" for="status_type_{{ $key }}">
                                                        {{ $status }}
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div style="display:flex; justify-content:space-between;">
                                        <button type="button" class="btn btn-prev">Previous</button>
                                        <button type="button" class="btn btn-next">Next</button>
                                    </div>
                                </div>

                                <!-- Step 3: Proficiency -->
                                <div class="tab-pane" data-step="2">
                                    <h2 class="step-title">Do you want to include other services?</h2>

                                    <div class="form-group">
                                        <input type="radio" name="services" id="yes" value="yes"> <label
                                            for="yes">Yes</label>
                                        <input type="radio" name="services" id="no" value="no"> <label
                                            for="no">No</label>
                                    </div>

                                    <div style="display:flex; justify-content:space-between;">
                                        <button type="button" class="btn btn-prev">Previous</button>
                                        <button type="button" class="btn btn-next">Next</button>
                                    </div>
                                </div>

                                <!-- Step 4: Basic -->
                                <div class="tab-pane" data-step="3">
                                    <h2 class="step-title">Which Level are you applying for?</h2>

                                    <div class="form-group">
                                        @foreach ($programLevelOptions as $level)
                                            <input type="radio" name="" id="" value=""> <label
                                                for="program_level_id">{{ $level }}</label>
                                        @endforeach
                                    </div>

                                    <div style="display:flex; justify-content:space-between;">
                                        <button type="button" class="btn btn-prev">Previous</button>
                                        <button type="button" class="btn btn-next">Next</button>
                                    </div>
                                </div>

                                <!-- Step 5: Contact -->
                                <div class="tab-pane" data-step="4">
                                    <h2 class="step-title">Which Program are you applying for?</h2>

                                    <div class="form-group">
                                        <div class="d-flex flex-wrap">
                                            @foreach ($programss as $key => $program)
                                                <select name="program_id" class="form-control" required>
                                                    <option value="">Select Program</option>
                                                    <option value="{{ $key }}">{{ $program }}</option>
                                                </select>
                                            @endforeach
                                        </div>
                                    </div>

                                    <div style="display:flex; justify-content:space-between;">
                                        <button type="button" class="btn btn-prev">Previous</button>
                                        <button type="submit" class="btn btn-next">Finish</button>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </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 id="totalCostBody">
                                    <!-- Filled dynamically -->
                                </tbody>
                            </table>
                        </div>
                    </div> --}}

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

    </section>
@endsection
@push('js')
    <script>
        const form = document.getElementById('multiStepForm');
        const tabs = document.querySelectorAll('.tab-pane');
        const nextBtns = document.querySelectorAll('.btn-next');
        const prevBtns = document.querySelectorAll('.btn-prev');
        const navButtons = document.querySelectorAll('#step-nav button');

        let currentStep = 0;

        function showStep(step) {
            tabs.forEach((tab, idx) => {
                tab.classList.toggle('active', idx === step);
            });
            navButtons.forEach((btn, idx) => {
                btn.classList.toggle('active', idx === step);
            });
        }

        nextBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                if (currentStep < tabs.length - 1) {
                    currentStep++;
                    showStep(currentStep);
                }
            });
        });

        prevBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                if (currentStep > 0) {
                    currentStep--;
                    showStep(currentStep);
                }
            });
        });

        navButtons.forEach((btn, idx) => {
            btn.addEventListener('click', () => {
                currentStep = idx;
                showStep(currentStep);
            });
        });

        // Proficiency test toggle
        const yesRadio = document.getElementById('yes');
        const noRadio = document.getElementById('no');
        const testDetailsGroup = document.getElementById('testDetailsGroup');
        const testScoreGroup = document.getElementById('testScoreGroup');
        const consideringGroup = document.getElementById('consideringGroup');

        function toggleProficiencySections() {
            if (yesRadio.checked) {
                testDetailsGroup.classList.remove('d-none');
                testScoreGroup.classList.remove('d-none');
                consideringGroup.classList.add('d-none');
            } else if (noRadio.checked) {
                testDetailsGroup.classList.add('d-none');
                testScoreGroup.classList.add('d-none');
                consideringGroup.classList.remove('d-none');
            } else {
                testDetailsGroup.classList.add('d-none');
                testScoreGroup.classList.add('d-none');
                consideringGroup.classList.add('d-none');
            }
        }

        yesRadio.addEventListener('change', toggleProficiencySections);
        noRadio.addEventListener('change', toggleProficiencySections);
        toggleProficiencySections();
    </script>
@endpush