@extends('frontend::layouts.app')
@section('title', $metaTags['metaTitle'])
@section('description', $metaTags['metaDescription'])
@section('keywords', $metaTags['metaKeywords'])
@section('other_meta_tags')
    {!! $metaTags['otherMetaTags'] !!}
@endsection
@section('content')
    <div id="pageWrapper" class="experienceCenterPage InnerPage">
        <section id="ExperienceSec">
            <div class="topSc">
                <div class="container">
                    <div class="mainT">
                        Experience Ultimate Comfort With Our Range Of Chairs
                    </div>
                </div>
            </div>
            <div class="btmSc">
                <div class="container">
                    <div class="formBx">
                        <form class="FullForm" method="post" action="{{ route('experience-centre-visit-submit') }}"
                            id="experience-centre-visit-form">
                            @csrf
                            @honeypot
                            <div class="fTitle">Please fill in the form below</div>
                            @if ($userTypes->isNotEmpty())
                                <div class="ttle">I am an</div>
                                <div class="topFlx">
                                    @foreach ($userTypes as $userType)
                                        <div class="radioBx">
                                            <input type="radio" id="{{ $userType->id }}" name="user_type_id"
                                                value="{{ $userType->id }}" @checked($loop->first)>
                                            <label for="{{ $userType->id }}">{{ $userType->name }}</label>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                            @if ($locations->isNotEmpty())
                                <div class="ttle">Experience Centre to Visit</div>
                                <div class="form-group">
                                    <select name="location_id" class="select2" required>
                                        <option selected disabled>Choose centre</option>
                                        @foreach ($locations as $location)
                                            <option value="{{ $location->id }}">{{ $location->title }}</option>
                                        @endforeach
                                    </select>
                                    <span class="error-block"></span>
                                </div>
                            @endif
                            <div class="ttle">
                                Visitor Details
                                <span>(please give exact & complete details of visitors)</span>
                            </div>
                            <div id="visitor-rows">
                                <div class="row">
                                    <div class="form-group">
                                        <input type="text" class="form-control visitor-name" name="visitor_name[0]"
                                            placeholder="Name" required>
                                        <span class="error-block"></span>
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control visitor-organization"
                                            name="visitor_organization[0]" placeholder="Organization" required>
                                        <span class="error-block"></span>
                                    </div>
                                    <div class="col-lg-10 col-sm-9">
                                        <div class="form-group">
                                            <input type="email" class="form-control visitor-email" name="visitor_email[0]"
                                                placeholder="Email" required>
                                            <span class="error-block"></span>
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-sm-3">
                                        <button type="button" class="adMore" onclick="addMoreVisitor()">
                                            <span class="ico">
                                                <img src="{{ asset('frontend/images/pls.svg') }}" alt="">
                                            </span>
                                            <span class="txt">Add More</span>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-4 col-sm-6">
                                    <div class="form-group">
                                        <div class="ttle">Date of visit</div>
                                        <input type="date" name="visit_date" class="form-control" required
                                            placeholder="DD/MM/YYYY" min="{{ \Carbon\Carbon::tomorrow()->toDateString() }}">
                                        <span class="error-block"></span>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-sm-6">
                                    <div class="form-group">
                                        <div class="ttle">Expected time of arrival</div>
                                        <input type="text" name="arrival_time" placeholder="Choose a time"
                                            onfocus="this.type='time'" class="form-control" required
                                            placeholder="Choose a time">
                                        <span class="error-block"></span>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-sm-6">
                                    <div class="form-group">
                                        <div class="ttle">Expected duration of the visit</div>
                                        <select name="visit_duration" class="select2" required>
                                            <option selected disabled="disabled">Choose a time</option>
                                            @for ($i = 1; $i <= 12; $i++)
                                                <option value="{{ $i }}">{{ $i }}</option>
                                            @endfor
                                        </select>
                                        <span class="error-block"></span>
                                    </div>
                                </div>
                            </div>
                            @if ($productCategories->isNotEmpty())
                                <div class="ttle">Category in focus</div>
                                <div class="chCkBlk">
                                    @foreach ($productCategories as $productCategory)
                                        <div class="flB">
                                            <input type="checkbox" class="category-checkbox"
                                                id="{{ $productCategory->slug }}" name="product_category_ids[]"
                                                value="{{ $productCategory->id }}">
                                            <label for="{{ $productCategory->slug }}">
                                                {{ $productCategory->title }}
                                            </label>
                                        </div>
                                    @endforeach
                                    <div class="flB">
                                        <input type="checkbox" id="select_all_categories">
                                        <label for="select_all_categories">
                                            Select All
                                        </label>
                                    </div>
                                </div>
                            @endif
                            <div id="project-rows">
                                <div class="row">
                                    <div class="col-lg-5 col-sm-6">
                                        <div class="form-group">
                                            <div class="ttle">Project(s) working on</div>
                                            <input type="text" class="form-control project-name"
                                                name="project_name[0]" placeholder="Project name" required>
                                            <span class="error-block"></span>
                                        </div>
                                    </div>
                                    <div class="col-lg-5 col-sm-6">
                                        <div class="form-group">
                                            <div class="ttle">Location</div>
                                            <input type="text" class="form-control project-location"
                                                name="location[0]" placeholder="Location" required>
                                            <span class="error-block"></span>
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <button type="button" class="adMore pt30" onclick="addMoreProject()">
                                            <span class="ico">
                                                <img src="{{ asset('frontend/images/pls.svg') }}" alt="">
                                            </span>
                                            <span class="txt">Add More</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <textarea class="form-control" name="message" placeholder="Message"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="btnBx">
                                <button class="submit hoveranim experience-centre-visit-btn">
                                    <span class="txt">Submit</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection
@push('js')
    <!-- Flatpickr -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/themes/dark.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.js"></script>

    <!-- SELECT2-->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(".select2").select2({
            minimumResultsForSearch: -1,
            maximumSelectionLength: 3,
            theme: "bootstrap-5",
            containerCssClass: "select2--small",
            selectionCssClass: "select2--small",
            dropdownCssClass: "select2--small",
        });
    </script>
    <script>
        function addMoreVisitor() {
            let maxIndex = -1;
            $("#visitor-rows .visitor-row").each(function() {
                const currentIndex = parseInt($(this).find(".visitor-name").attr("name").match(/\d+/)[0]);
                if (currentIndex > maxIndex) {
                    maxIndex = currentIndex;
                }
            });

            // Increment the index
            const index = maxIndex === -1 ? 1 : maxIndex + 1;

            const visitorRow = `
                <div class="row visitor-row">
                    <div class="form-group">
                        <input type="text" class="form-control visitor-name" name="visitor_name[${index}]" placeholder="Name" required>
                        <span class="error-block"></span>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control visitor-organization" name="visitor_organization[${index}]" placeholder="Organization" required>
                        <span class="error-block"></span>
                    </div>
                    <div class="col-lg-10 col-sm-9">
                        <div class="form-group">
                            <input type="email" class="form-control visitor-email" name="visitor_email[${index}]" placeholder="Email" required>
                            <span class="error-block"></span>
                        </div>
                    </div>
                    <div class="col-lg-2 col-sm-3">
                        <button type="button" class="remove removeVisitor" onclick="removeVisitor(this)">
                            <span class="ico">
                                <img src="{{ asset('frontend/images/close1.svg') }}" alt="">
                            </span>
                            <span class="txt">Remove Visitor</span>
                        </button>
                    </div>
                </div>`;
            $("#visitor-rows").append(visitorRow);
        }

        function removeVisitor(button) {
            const row = $(button).closest(".visitor-row");
            row.remove();
        }

        function addMoreProject() {
            let maxIndex = -1;
            $("#project-rows .project-row").each(function() {
                const currentIndex = parseInt($(this).find(".project-name").attr("name").match(/\d+/)[0]);
                if (currentIndex > maxIndex) {
                    maxIndex = currentIndex;
                }
            });

            // Increment the index
            const index = maxIndex === -1 ? 1 : maxIndex + 1;

            const projectRow = `
                <div class="row project-row">
                   <div class="col-lg-5 col-sm-6">
                        <div class="form-group">
                            <div class="ttle">Project(s) working on</div>
                            <input type="text" class="form-control project-name" name="project_name[${index}]"
                                placeholder="Project name" required>
                            <span class="error-block"></span>
                        </div>
                    </div>
                    <div class="col-lg-5 col-sm-6">
                        <div class="form-group">
                            <div class="ttle">Location</div>
                            <input type="text" class="form-control project-location" name="location[${index}]"
                                placeholder="Location" required>
                            <span class="error-block"></span>
                        </div>
                    </div>
                    <div class="col-lg-2 col-sm-3">
                        <button type="button" class="remove removeProject pt30" onclick="removeProject(this)">
                            <span class="ico">
                                <img src="{{ asset('frontend/images/close1.svg') }}" alt="">
                            </span>
                            <span class="txt">Remove Project</span>
                        </button>
                    </div>
                </div>
            `;
            $("#project-rows").append(projectRow);

        }

        function removeProject(button) {
            var row = button.closest('.project-row');
            row.remove();
        }

        // Get the "Select All" checkbox and category checkboxes
        const selectAllCheckbox = document.getElementById('select_all_categories');
        const categoryCheckboxes = document.querySelectorAll('.category-checkbox');

        // Function to toggle all checkboxes based on the "Select All" checkbox state
        selectAllCheckbox.addEventListener('change', function() {
            categoryCheckboxes.forEach(checkbox => {
                checkbox.checked = selectAllCheckbox.checked;
            });
        });

        // Optionally, if individual category checkboxes are unchecked, uncheck the "Select All" checkbox
        categoryCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                if (!checkbox.checked) {
                    selectAllCheckbox.checked = false;
                } else if (Array.from(categoryCheckboxes).every(checkbox => checkbox.checked)) {
                    selectAllCheckbox.checked = true;
                }
            });
        });

        // Remove the "all" value from the form data before submitting
        const form = document.querySelector('form'); // Assuming you have a form element wrapping the checkboxes
        form.addEventListener('submit', function(event) {
            // If the "Select All" checkbox is checked, remove its value from the form submission
            if (selectAllCheckbox.checked) {
                const allValueIndex = Array.from(form.querySelectorAll('input[name="product_category_ids[]"]'))
                    .findIndex(input => input.value === 'all');
                if (allValueIndex !== -1) {
                    form.querySelectorAll('input[name="product_category_ids[]"]')[allValueIndex].checked =
                        false; // Uncheck the "all" checkbox
                }
            }
        });

        $(document).ready(function() {
            // Real-time validation handler for form
            $("#experience-centre-visit-form").validate({
                messages: {
                    location_id: {
                        required: "The centre field is required.",
                    },
                    visit_date: {
                        required: "The visit date field is required.",
                    },
                    arrival_time: {
                        required: "The visit date field is required.",
                    },
                    visit_duration: {
                        required: "The visit date field is required.",
                    },
                },
                errorPlacement: function(error, element) {
                    $(element).closest('.form-group').find('.error-block').text(error.text());
                },
                success: function(label, element) {
                    $(element).closest('.form-group').find('.error-block').text('');
                    $(element).removeClass('is-invalid');
                },
                onchange: function(element) {
                    $(element).valid(); // Validate the changed element
                },
                onfocusout: function(element, event) {
                    if (element.tagName === "TEXTAREA" || (element.tagName === "INPUT" && element
                            .type !== "password")) {
                        element.value = $.trim(element.value);
                    }
                    if (!this.checkable(element) && (element.name in this.submitted || !this.optional(
                            element))) {
                        this.element(element);
                    }
                },
                submitHandler: function(form) {
                    $('.error-block').text('');

                    var $submitBtn = $(form).find(':submit');
                    var originalBtnHtml = $submitBtn.html(); // Store the original button HTML

                    $submitBtn.prop("disabled", true)
                        .html('<i class="mdi mdi-rotate-right"></i> <span>Submitting...</span>');

                    var formData = new FormData(form);

                    $.ajax({
                        type: "POST",
                        url: $(form).attr('action'),
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            if (response.success) {
                                showToast('success',
                                    'Your application has been successfully submitted');
                                setTimeout(function() {
                                    location.reload();
                                }, 3000);
                            } else {
                                showToast('error',
                                    'Oops! Something went wrong. Please try again.');
                                $submitBtn.prop('disabled', false)
                                    .html(originalBtnHtml);
                            }
                        },
                        error: function(xhr) {
                            $submitBtn.prop('disabled', false)
                                .html(originalBtnHtml);

                            if (xhr.status === 422) {
                                var errors = xhr.responseJSON.errors;
                                $.each(errors, function(field, messages) {
                                    $('[name="' + field + '"]').closest(
                                            '.form-group').find('.error-block')
                                        .text(messages.join(', '));
                                });
                            } else {
                                console.error('Unexpected error occurred.');
                            }
                        }
                    });
                }
            });

            $('select[name="location_id"], select[name="visit_duration"]').on('change', function() {
                // Check if the select has an error
                if ($(this).closest('.form-group').find('.error-block').text()) {
                    $(this).closest('.form-group').find('.error-block').text('');
                    $(this).removeClass('is-invalid');
                }
            });
        });
    </script>
@endpush