@extends('frontend.maintemplate.maintemplate')
@section('title', 'Checkout' . ' :: AgeLess Institute')

@section('content')

    <style>
        .error-message {
            color: red;
            /* Make text red */
            font-size: 0.875em;
            /* Slightly smaller font */
            margin-top: 5px;
            /* Add some space above the error message */
        }

        /* .checkout-section-wrapper .checkout-inner .checkout-right .coupon-apply-wrapper button {
                        width: 100%;
                    } */

        .submit_btn:hover {
            background-color: transparent;
            color: #3a6a59;
        }

        .submit_btn {
            width: 100%;
            border-radius: 10px;
            text-align: center;
            font-size: 18px;
            margin-top: 15px;
            font-weight: 500;
            color: #e1f0e9;
            background-color: #3a6a59;
            border: 1px solid #3a6a59;
            padding: 14px 15px;
            transition: 0.3s ease-in-out;
        }

        .form-group {
            margin-bottom: 15px;
            position: relative;
        }

        .form-group label {
            text-align: left;
            display: block;
            padding-left: 15px;
            font-size: 22px;
            font-weight: 500;
            color: #3A6A59;
            margin-bottom: 8px;
        }

        .form-group select {
            background-color: #F7F7F7;
            border-radius: 40px;
            font-size: 22px;
            font-weight: 500;
            color: #3C705E;
            padding: 12px;
            border: 1px solid transparent;
            padding-right: 20px;
            -webkit-appearance: none;
            appearance: none;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23666d81' d='M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z'/%3E%3C/svg%3E") right 1rem center / 40px 15px no-repeat;
            background-position: right;
            background-color: #F7F7F7;
        }

        .form-group select:focus {
            border-color: #3C705E;
            outline: none;
            box-shadow: none;
        }
    </style>

    <!-- Checkout Section  -->
    <div class="cart-section-wrapper">
        <div class="container-fluid">
            <form action="{{ route('student.checkout.store') }}" method="POST" id="checkin_form" novalidate="novalidate">
                @csrf

                <input type="hidden" name="course_ids" value="{{ implode(',', array_keys(session('cart', []))) }}">

                <div class="cart-section-inner-container">
                    <div class="cart-section-inner">
                        <div class="title-wrapepr">
                            <h4>Checkout</h4>
                        </div>
                        <div class="cart-inner-wrapepr">
                            <div class="left-section">
                                <div class="items-count">
                                    <h6>You have <span>{{ count(session()->get('cart', [])) }}</span> items in your cart
                                    </h6>
                                </div>
                                <div class="items-wrapper">
                                    @foreach ($courses as $course)
                                        <div class="items-box">
                                            <div class="name-details-box-wrapper">
                                                <div class="image-box">
                                                    <img src="{{ asset('storage/' . $course->thumbnail_image) }}"
                                                        alt="">
                                                </div>
                                                <div class="name-details-box">
                                                    <h5>{{ $course->subcategory->name??"" }}</h5>
                                                    <h6>({{ $course->name }})</h6>
                                                    @php
                                                        $totalPracticalHours = $course->courseTopics->sum(
                                                                                            function ($courseTopic) {
                                                                                                return optional(
                                                                                                    $courseTopic->topic,
                                                                                                )->practical_hours;
                                                                                            },
                                                                                        );
                                                    @endphp
                                                    <p>Flying Hours : <span>{{ $totalPracticalHours }}</span> Hrs</p>
                                                </div>
                                            </div>
                                            <div class="price-remove-deletion-wrapper">
                                                <div class="price-wrapper">
                                                    <h5>₹{{ number_format(session('cart')[$course->id]['total_price'] ?? $course->current_fee, 0, '.', ',') }}
                                                    </h5>
                                                </div>
                                            </div>
                                        </div>
                                        <button type="button" class="btn btn-sm btn-outline-primary toggle-table mb-3" style="width: 100%; color: #3C705E; background-color: white; transition: 0.3s ease-in-out; border-color: #3C705E;">
                                            Show/Hide Topics
                                        </button>

                                        <div class="table-wrapper table-container" style="height: 0; overflow: hidden; transition: height 0.6s ease; width: 100%;">
                                            <div class="table-responsive">
                                                <table class="table table-bordered table-hover">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col">Topics</th>
                                                            <th scope="col">Types</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @php
                                                            $cartTopics = $cart[$course->id]['topics'] ?? [];
                                                            $cartTopicIds = array_keys($cartTopics);
                                                            $hasCartTopics = !empty($cartTopics);

                                                            if (!empty($cartTopics)) {
                                                                $customeTopicId = array_keys($cartTopics);
                                                                $filteredCourseTopics = \App\Models\Topic::whereIn( 'id',$customeTopicId)
                                                                ->orderByRaw('FIELD(id, ' . implode(',', $customeTopicId) . ')')
                                                                ->get();
                                                            } else {
                                                                $filteredCourseTopics = collect($course->courseTopics->sortBy('sequence_number'));
                                                            }

                                                            // If cart topics exist, filter course topics accordingly
                                                            if ($hasCartTopics) {
                                                                $filteredCourseTopics = $filteredCourseTopics->filter(
                                                                    function ($courseTopic) use ($cartTopicIds) {
                                                                        return in_array(
                                                                            $courseTopic->id,
                                                                            $cartTopicIds,
                                                                        );
                                                                    },
                                                                );
                                                            }
                                                        @endphp

                                                        @forelse($filteredCourseTopics as $courseTopic)
                                                            <tr>
                                                                @if ($hasCartTopics)
                                                                    <td>{{ $courseTopic->title ?? '' }}</td>
                                                                    <td>
                                                                        @php
                                                                            $type = $cartTopics[$courseTopic->id] ?? '';

                                                                            if ($type === 'practical') {
                                                                                $displayType = 'Theory + Practical';
                                                                            } elseif ($type === 'demo') {
                                                                                $displayType = 'Theory + Demo';
                                                                            } else {
                                                                                $displayType = 'Theory Only';
                                                                            }
                                                                        @endphp
                                                                        {{ $displayType }}
                                                                    </td>
                                                                @else
                                                                    <td>{{ $courseTopic->topic->title ?? '' }}</td>
                                                                    <td>
                                                                        @php
                                                                            $types = is_array($courseTopic->types) ? $courseTopic->types : json_decode($courseTopic->types,true,);
                                                                            if (in_array('practical', $types)) {
                                                                                $displayTypes = 'Theory + Practical';
                                                                            } elseif (in_array('demo', $types)) {
                                                                                $displayTypes = 'Theory + Demo';
                                                                            } else {
                                                                                $displayTypes = 'Theory Only';
                                                                            }
                                                                        @endphp
                                                                        {{-- {{ $types ? implode(' + ', $types) : '' }} --}}
                                                                        {{ $displayTypes }}
                                                                    </td>
                                                                @endif
                                                            </tr>
                                                        @empty
                                                            <tr>
                                                                <td colspan="2">No topics available.</td>
                                                            </tr>
                                                        @endforelse
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="right-section">
                                <div class="order-title-wrapper">
                                    <h6>Order Summary</h6>
                                </div>
                                <div class="order-details-box-wrapper">
                                    {{-- <h5>Total Price:
                                        <span>{{ number_format(session('cart')[$course->id]['total_price'] ?? $courses->sum('current_fee'), 0, '.', ',') }}</span>
                                    </h5>
                                    <h6>Total:
                                        <span>{{ number_format(session('cart')[$course->id]['total_price'] ?? $courses->sum('current_fee'), 0, '.', ',') }}</span>
                                    </h6> --}}
                                    @php
                                        $totalPrice = 0;
                                        foreach ($courses as $course) {
                                            $totalPrice += session('cart')[$course->id]['total_price'] ?? $course->current_fee;
                                        }
                                    @endphp

                                    <h5>Total Price: <span>₹{{ number_format($totalPrice, 0, '.', ',') }}</span></h5>
                                    <h6>Total: <span>₹{{ number_format($totalPrice, 0, '.', ',') }}</span></h6>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" name="terms_and_conditions">
                                        <label class="form-check-label" for="flexCheckDefault">
                                            I agree to the Terms and Conditions and Privacy Policy
                                        </label>
                                    </div>
                                </div>
                                <div class="checkout-button-wrapper">
                                    <button class="checkout_btn">Complete Purchase</button>
                                </div>
                            </div>
                        </div>
                        <div class="billing-details-wrapper">
                            <div class="title-wrapepr">
                                <h4>Billing Details</h4>
                            </div>
                            <div class="personal-details-wrapper">
                                <h5>Personal Details</h5>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="">First Name <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="first_name"
                                                value="{{ old('first_name', $student->first_name) }}">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="">Last Name <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="last_name"
                                                value="{{ old('last_name', $student->last_name) }}">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="">Phone No. <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="mobile_number"
                                                value="{{ old('mobile_number', $student->mobile_number) }}">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="">Email Address <span class="text-danger">*</span></label>
                                            <input type="email" class="form-control" name="email"
                                                value="{{ old('email', $student->email) }}">
                                        </div>
                                    </div>
                                </div>
                                <h5 class="margin_top">Address</h5>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="">Full Address: <span class="text-danger">*</span></label>
                                            <textarea name="address_1" id="address_1" name="address_1" class="form-control">{{ old('address_1', $student->address_1) }}</textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="">Landmark <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="landmark" name="landmark" value="{{ old('landmark', $student->landmark) }}">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="">Country <span class="text-danger">*</span></label>
                                            <select class="form-select" aria-label="Default select example">
                                                <option selected>India</option>

                                            </select>
                                            {{-- <input type="text" class="form-control" name="country"> --}}
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="">State/Province: <span
                                                    class="text-danger">*</span></label>
                                            {{-- <input type="text" class="form-control" name="state"> --}}
                                            <select class="form-select" aria-label="Default select example"
                                                id="state" name="state">
                                                <option value="">Select a state</option>
                                                @foreach ($states as $state)
                                                    <option value="{{ $state->id }}"
                                                        {{ old('state', $student->state) == $state->id ? 'selected' : '' }}>
                                                        {{ $state->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="">City <span class="text-danger">*</span></label>
                                            {{-- <input type="text" class="form-control" name="city"> --}}
                                            <select class="form-select" aria-label="Default select example"
                                                id="city" name="city">
                                                <option value="">Select a city</option>
                                                <!-- Cities will be dynamically populated here via AJAX -->
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="">Zip Code <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="pincode"
                                                value="{{ old('pincode', $student->pincode) }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="checkout-button-wrapper">
                                            <button class="checkout_btn">Complete Purchase</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- Checkout Section  -->


    <script>
        $(document).ready(function() {
            // Function to update both buttons' state

            // Form submission handler for both buttons
            $(".checkout_btn").on('click', function(e) {

                // Then validate other form fields
                var isValid = true;
                $(".error-message").remove();

                var firstName = $("input[name='first_name']").val();
                var lastName = $("input[name='last_name']").val();
                var email = $("input[name='email']").val();
                var mobileNumber = $("input[name='mobile_number']").val();
                var address = $("textarea[name='address_1']").val();
                var state = $("select[name='state']").val();
                var city = $("select[name='city']").val();
                var pincode = $("input[name='pincode']").val();
                var landmark = $("input[name='landmark']").val();
                var terms_and_conditions = $("input[name='terms_and_conditions']").is(':checked');

                // Validate first name
                if (firstName === "") {
                    isValid = false;
                    $("input[name='first_name']").after(
                        '<div class="error-message">First Name is required.</div>');
                }

                if (!terms_and_conditions) {
                    isValid = false;
                    $("input[name='terms_and_conditions']").parent().append(
                        '<div class="error-message" style="color:red;">You must agree to the Terms and Conditions.</div>');
                }

                // Validate last name
                if (lastName === "") {
                    isValid = false;
                    $("input[name='last_name']").after(
                        '<div class="error-message">Last Name is required.</div>');
                }

                // Validate email
                if (email === "") {
                    isValid = false;
                    $("input[name='email']").after('<div class="error-message">Email is required.</div>');
                } else if (!validateEmail(email)) {
                    isValid = false;
                    $("input[name='email']").after('<div class="error-message">Please enter a valid email address.</div>');
                }

                // Validate mobile number
                if (mobileNumber === "") {
                    isValid = false;
                    $("input[name='mobile_number']").after(
                        '<div class="error-message">Mobile Number is required.</div>');
                }

                // Validate address
                if (address === "") {
                    isValid = false;
                    $("textarea[name='address_1']").after(
                        '<div class="error-message">Address is required.</div>');
                }

                // Validate state and city
                if (state === "") {
                    isValid = false;
                    $("select[name='state']").after('<div class="error-message">State is required.</div>');
                }

                if (city === "") {
                    isValid = false;
                    $("select[name='city']").after('<div class="error-message">City is required.</div>');
                }

                // Validate pincode
                if (pincode === "") {
                    isValid = false;
                    $("input[name='pincode']").after(
                        '<div class="error-message">Zip Code is required.</div>');
                }

                if (landmark === "") {
                    isValid = false;
                    $("input[name='landmark']").after(
                        '<div class="error-message">Landmark is required.</div>');
                }

                if (!isValid) {
                    e.preventDefault();
                    $('html, body').animate({
                        scrollTop: $(".error-message:first").offset().top - 100
                    }, 500);
                    return false;
                }

                return true;
            });

            // Helper function to validate email format
            function validateEmail(email) {
                var regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                return regex.test(email);
            }

            // Fetch cities based on state
            function fetchCities(stateId, selectedCityId = null) {
                var baseUrl = "{{ url('/student') }}";
                $.ajax({
                    url: baseUrl + '/cities/' + stateId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#city').empty();
                        $('#city').append('<option value="">Select a city</option>');

                        $.each(data, function(index, city) {
                            var isSelected = (city.id == selectedCityId) ? 'selected' : '';
                            $('#city').append('<option value="' + city.id + '" ' + isSelected +
                                '>' + city.city + '</option>');
                        });
                    },
                    error: function() {
                        alert('Failed to load cities');
                    }
                });
            }

            $("#state").change(function() {
                var stateId = $(this).val();
                var selectedCityId = "{{ old('city', $student->city) }}";
                if (stateId) {
                    fetchCities(stateId, selectedCityId);
                } else {
                    $('#city').empty();
                    $('#city').append('<option value="">Select a city</option>');
                }
            });

            var initialStateId = "{{ old('state', $student->state) }}";
            if (initialStateId) {
                fetchCities(initialStateId, "{{ old('city', $student->city) }}");
            }
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const buttons = document.querySelectorAll('.toggle-table');

            buttons.forEach(function (btn) {
                btn.addEventListener('click', function () {
                    const container = this.nextElementSibling;

                    if (!container) {
                        console.warn('No container found for this button.');
                        return;
                    }

                    if (container.style.height === '0px' || !container.style.height) {
                        // Expand
                        container.style.height = container.scrollHeight + 'px';
                        console.log('Expanding:', container.scrollHeight);
                    } else {
                        // Collapse
                        container.style.height = '0px';
                        console.log('Collapsing');
                    }
                });
            });
        });
    </script>

@endsection