@extends('layout.admin')

@section('styles')

@endsection

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <h4 class="py-3 mb-2">
            <span class="text-muted fw-light">Short Codes </span> 
        </h4>
         <div class="row mb-2">
            <div class="col-lg-12">
                <button type="button" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#globalVariablesModal">
                     Global Variables
                    </button>
            </div>
        </div>
        <div class="row">
            <!-- FormValidation -->
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <form role="form" action="" class="row g-3 fv-plugins-bootstrap5 fv-plugins-framework ajax-form-admin" method="post" enctype="multipart/form-data">
                            {{csrf_field()}}
                        <div class="col-sm-12 col-md-12 col-lg-12 fv-plugins-icon-container">
                            <label class="form-label">Choose Type</label>
                            <select id="type_id" class="form-control select2 form-select" name="type_id">
                                <option value="">-- Select Type --</option>
                                <option value="FAQS">FAQS</option>
                                <option value="CheapFares">Cheap Fares Popular Destinations Home Section 1</option>
                                <option value="AffordableTour">Affordable Tour Home Section 2</option>
                                <option value="HolidayDeals">Best Holiday Deals Home Section 3</option>
                                <option value="ContinentSlider">Continent Slider Cheap Fares Home Section 4</option>
                                <option value="UmrahPackages">Best Umrah Packages Home Section 5</option>
                                <option value="OURCLIENTSAYS">What Our Clients Says</option>
                                @foreach ($types as $type)
                                    <option value="{{ $type->title }}" {{ old('type_id') == $type->title ? 'selected' : '' }}>
                                        {{ $type->title }}
                                    </option>
                                @endforeach
                            </select>

                        </div>
                        <div id="package_fields" style="display: none;">
                            <label class="form-label">Packages Type </label>
                            <input type="text" name="package_type" id="package_type" class="form-control"
                                value="{{ old('package_type') }}" placeholder="Enter Package Type">

                            <label class="form-label mt-2">Packages Night</label>
                            <input type="text" name="package_night" id="package_night" class="form-control"
                                value="{{ old('package_night') }}" placeholder="Enter Package Night">
                        </div>
                        <div id="heading_fields" style="display: none;">
                            <label class="form-label">Heading</label>
                            <input type="text" name="heading" id="heading" class="form-control"
                                value="{{ old('heading') }}" placeholder="Enter Heading">

                            <label class="form-label mt-2">Subheading</label>
                            <input type="text" name="subheading" id="subheading" class="form-control"
                                value="{{ old('subheading') }}" placeholder="Enter Subheading">
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-12 fv-plugins-icon-container" id="sectionType" style="display: none;">
                            <label class="form-label">Choose Section</label>
                            <select id="choose_section" class="form-control select2 form-select" name="choose_section">
                                <option value="">-- Select Type --</option>
                                <option value="SECTION_1">Section 1</option>
                                <option value="SECTION_2">Section 2</option>
                                <option value="SECTION_3">Section 3</option>
                            </select>
                        </div>
                        <div id="umrahPackageTypes" style="display: none;">
                            <label class="form-label mt-2">Select UmrahType</label>
                            <select name="umrahPackageType" id="umrahPackageType"
                             data-url="{{ route('get.umrah.packages', '') }}" class="form-control select2 form-select"
                            >
                                 <option value="">-- Select Type --</option>
                                @foreach ($umrahType as $t)
                                    <option value="{{$t->id}}">{{ $t->title }}</option>
                                @endforeach
                            </select>
                            <label class="form-label mt-2">Select Umrah</label>
                            <select name="umrah_package_ids[]" id="umrah_package_ids" class="form-select select2" multiple>
                                <option value="">Select only</option> {{-- Default placeholder --}}
                            </select>
                        </div>
                       
                        <div id="faq_fields" style="display: none;">
                            <label class="form-label mt-2">Select FAQs</label>
                            <select name="faq_ids[]" id="faq_ids" class="form-select select2" multiple>
                                @foreach ($faqs as $faq)
                                    <option value="{{ $faq->id }}">{{ $faq->question }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div id="reviews_fields" style="display: none;">
                            <label class="form-label mt-2">Select Reviews</label>
                            <select name="reviews_ids[]" id="reviews_ids" class="form-select select2" multiple>
                                @foreach ($reviews as $r)
                                    <option value="{{ $r->id }}">{{ $r->publisher }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12">
                            <button type="button" class="btn btn-primary" id="showCodeBtn">Show Code</button>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-12 fv-plugins-icon-container">
                            <label for="content" class="form-label">Code Output</label>
                            <textarea name="code" id="code" class="form-control" placeholder="Enter Code Output"></textarea>
                        </div>                 
                        </form>
                    </div>
                </div>
            </div>
            <!-- /FormValidation -->
        </div>

    </div>
       @include('layout.admin.globalVariablesModal')
@endsection
@section('script')
<script>


 function toggleCategory(){
        const chooseCategory = $('#choose_section').val()?.trim()?.toUpperCase();

        const umrahPackageTypes = document.getElementById('umrahPackageTypes');
        if (chooseCategory === 'SECTION_1') {
            umrahPackageTypes.style.display = 'block';
        }
         else if (chooseCategory === 'SECTION_2') {
         umrahPackageTypes.style.display = 'block';
        } 
         else if (chooseCategory === 'SECTION_3') {
         umrahPackageTypes.style.display = 'block';
        } 
 }

    function toggleFields() {
        const selectedType = $('#type_id').val()?.trim()?.toUpperCase();
        const packageFields = document.getElementById('package_fields');
        const headingFields = document.getElementById('heading_fields');
        const faqFields = document.getElementById('faq_fields');
        const umrahPackageTypes = document.getElementById('umrahPackageTypes');
        const sectionType = document.getElementById('sectionType');
        const reviewsFields = document.getElementById('reviews_fields');

         if (selectedType === 'PACKAGES') {
            packageFields.style.display = 'block';
            headingFields.style.display = 'none';
            faqFields.style.display = 'none';
            reviewsFields.style.display = 'none';
            umrahPackageTypes.style.display = 'none';
            sectionType.style.display = 'none';
        } else if (selectedType === 'FAQS') {
            packageFields.style.display = 'none';
            headingFields.style.display = 'block';
            faqFields.style.display = 'block';
            reviewsFields.style.display = 'none';
            umrahPackageTypes.style.display = 'none';
            sectionType.style.display = 'none';
        } else if (selectedType === 'OURCLIENTSAYS') {
            packageFields.style.display = 'none';
            headingFields.style.display = 'block';
            faqFields.style.display = 'none';
            reviewsFields.style.display = 'block';
            umrahPackageTypes.style.display = 'none';
            sectionType.style.display = 'none';

        } else if(selectedType === 'UMRAHPACKAGES'){
            packageFields.style.display = 'none';
            headingFields.style.display = 'block';
            faqFields.style.display = 'none';
            reviewsFields.style.display = 'none';
            umrahPackageTypes.style.display = 'block';
            sectionType.style.display = 'block';
        }
        else if (selectedType !== '') {
            packageFields.style.display = 'none';
            headingFields.style.display = 'block';
            faqFields.style.display = 'none';
            reviewsFields.style.display = 'none';
            umrahPackageTypes.style.display = 'none';
            sectionType.style.display = 'none';
        } else {
            packageFields.style.display = 'none';
            headingFields.style.display = 'none';
            faqFields.style.display = 'none';
            reviewsFields.style.display = 'none';
            umrahPackageTypes.style.display = 'none';
            sectionType.style.display = 'none';
        }
    }

    $(document).ready(function () {
        $('#type_id').on('change', toggleFields); 
        toggleFields(); 

        $('#choose_section').on('change', toggleCategory); 
        toggleCategory(); 
    });
</script>
<script>
    document.getElementById('showCodeBtn').addEventListener('click', function () {
        const selectedType = $('#type_id').val()?.trim()?.toUpperCase();
        let output = '';

        if (!selectedType) {
            alert('Please select a type first.');
            return;
        }

        if (selectedType === 'PACKAGES') {
            const packageType = document.getElementById('package_type').value || '';
            const packageNight = document.getElementById('package_night').value || '';
            output = '@{{' + selectedType + ' package_type="' + packageType + '" package_night="' + packageNight + '"}}';
        } else if (selectedType === 'FAQS') {
            const heading = document.getElementById('heading').value || '';
            const subheading = document.getElementById('subheading').value || '';
            const selectedFaqs = $('#faq_ids').val() || [];

            output = '@{{' + selectedType + ' heading="' + heading + '" sub_heading="' + subheading + '" faq_ids="' + selectedFaqs.join(',') + '"}}';
        } 
         else if (selectedType === 'OURCLIENTSAYS') {
            const heading = document.getElementById('heading').value || '';
            const subheading = document.getElementById('subheading').value || '';
            const selectedReviews = $('#reviews_ids').val() || [];

            output = '@{{' + selectedType + ' heading="' + heading + '" sub_heading="' + subheading + '" reviews_ids="' + selectedReviews.join(',') + '"}}';
        } else if (selectedType === 'UMRAHPACKAGES') {
                const heading = document.getElementById('heading').value || '';
                const subheading = document.getElementById('subheading').value || '';

                // check if #umrahPackageTypes is visible
                const isUmrahVisible = $('#umrahPackageTypes').is(':visible');
                const umrahId = $('#umrah_package_ids').val() || [];
                const umrahIdsStr = Array.isArray(umrahId) ? umrahId.join(',') : umrahId;

                let selectedUmrahType = '';
                let selectedSection = '';

                if (isUmrahVisible) {
                    selectedUmrahType = $('#umrahPackageType').val() || '';
                    selectedSection = $('#choose_section').val() || '';
                    output = '@{{' + selectedType + 
                            ' heading="' + heading + 
                            '" sub_heading="' + subheading + 
                            '" umrahPackageType="' + selectedUmrahType + 
                            '" umrah_package_ids="' + umrahIdsStr + 
                            '" section="' + selectedSection + '"}}';
                } else {
                    selectedSection = $('#choose_section').val() || '';
                    output = '@{{' + selectedType + 
                            ' heading="' + heading + 
                            '" sub_heading="' + subheading + 
                            '" section="' + selectedSection + '"}}';
                }
            }
         else {
            const heading = document.getElementById('heading').value || '';
            const subheading = document.getElementById('subheading').value || '';
            output = '@{{' + selectedType + ' heading="' + heading + '" sub_heading="' + subheading + '"}}';
        }

        // Replace '@{{' and '}}' with raw '{{' and '}}' after DOM is loaded
        output = output.replace('@{{', '{{');

        document.getElementById('code').value = output;
    });
</script>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const headingInput = document.getElementById('heading');
        const subheadingInput = document.getElementById('subheading');

        if (headingInput) {
            headingInput.addEventListener('input', function () {
                if (this.value.length > 70) {
                    this.value = this.value.substring(0, 70);
                }
            });
        }

        if (subheadingInput) {
            subheadingInput.addEventListener('input', function () {
                if (this.value.length > 200) {
                    this.value = this.value.substring(0, 200);
                }
            });
        }
    });
</script>
<script>
$('#umrahPackageType').on('change', function () {
    let type = $(this).val();
    let baseUrl = $(this).data('url');
    let packageSelect = $('#umrah_package_ids');

    // Clear packages and reset placeholder
    packageSelect.empty().append(new Option('Select only', ''));

    if (type) {
        $.ajax({
            url: baseUrl + '/' + type,
            type: 'GET',
            success: function (data) {
                if (data.length > 0) {
                    data.forEach(function (item) {
                        packageSelect.append(new Option(item.title, item.id));
                    });
                } else {
                    packageSelect.append(new Option('No packages available', ''));
                }
                packageSelect.trigger('change');
            }
        });
    }
});

</script>



@endsection