@extends('frontend.layouts.app')
@section('bodyClass', 'frontend')
@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  
<link rel="stylesheet" href="{{ asset('slick/slick.min.css')}}">
<link rel="stylesheet" href="{{ asset('slick/slick-theme.min.css')}}">
<link rel="stylesheet" href="{{ asset('css/forms/global_form_design.css')}} ">

<div class="loader-new">
    <div class="loader-icon"></div>
</div>
<div class="ffd-banner mob-ffd-banner-d-reverse ffd-banner-bg-primary">
    <div class="ffe-banner-left">
        <div class="ffe-banner-left-inner">
            <h2>{{$templateDetail->form_name}}</h2>
            <p>{{$templateDetail->subtitle}}</p>
        </div>
    </div>
    <div class="ffe-banner-right">
        {{-- <img src="{{ asset('images/ffe-banner-img.png') }}" alt="" class="mCS_img_loaded"> --}}
        <img src="{{ asset('images/studio_images/' . $selected_studio_images[0]['img_name']) }}" class="mCS_img_loaded" alt="">
    </div>
</div>

   
<div class="ffd-content {{$member_bg_color}}">
    <div class="ffd-container">
            @if($templateDetail->form_header != '')
            <h2 class="text-center form_header_copy">{{$templateDetail->form_header ?? ''}}</h2>
            @endif
            @if($templateDetail->form_desc != '')
            <p class="text-center form_header_instruction">{{$templateDetail->form_desc ?? ''}}</p>
            @endif
        <div class="ffd-form">
            <div class="">
                <form name="{{$formDetails->id}}" id="standardform" class="standardform" >
                    <meta name="csrf-token" content="{{ csrf_token() }}">
                    <input type="hidden" name="template_id" id="template_id" value="{{$formDetails->id}}">
                    <input type="hidden" name="studio_id" id="studio_id" value="{{$studioId}}">
                    
                                        @if(count($formDetails->componentQuestionsMain) > 0)
                                                <!-- Date Range based questions - 86cugq7cp -->
                        @php 
                        $noticePeriod = $minLen = $maxLen = ''; 
                        $date_range_id =  FormHelper::getFormComponentInputId("date_range");
                        $date_single_id =  FormHelper::getFormComponentInputId("date");
                        @endphp
                        @foreach($formDetails->componentQuestionsMain as $key => $quesMain)
                         
                            @php
                             
                            if($quesMain->component_id == $date_range_id['formComponent']){
                                $extra_records = !empty($quesMain->extra_records) ? json_decode($quesMain->extra_records):'';
                                $noticePeriod = !empty($extra_records->noticePeriod) ? $extra_records->noticePeriod:'' ;
                                $minLen = !empty($extra_records->minLen) ? $extra_records->minLen:'' ;
                                $maxLen = !empty($extra_records->maxLen) ? $extra_records->maxLen:'' ;
                                $maxBlocks = !empty($extra_records->maxBlocks) ? $extra_records->maxBlocks:'' ;
                            }
                            
                            $result = FormHelper::getFormComponentHtml($quesMain->component->component_code,$quesMain,$stepscount,$studioId); 
                            
                            @endphp
                            {!! $result['htmlcode'] !!}
                            @php
                                if($quesMain->component->component_code == 'section_step') {
                                    $stepsTabHtml .= $result['stepstabhtml'];
                                    $stepscount++;
                                }
                            @endphp
                        @endforeach
                    @endif
                                    </form>
            </div> 
        </div>
    </div>
</div>
<div class="modal fade edit_modal custom-error-modal edit_modal confirm-modal" id="CusErrorModal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row align-items-center customMsg">
                
                </div>
            </div>
        </div>
    </div>
</div>
@endsection 
@push('scripts')

<script src="{{ asset('slick/slick.min.js')}}"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var stepsTabHtml1 = '';
        $("#stepbystepTabs").append(stepsTabHtml1);
        $('.membership-slider').slick({
            slidesToShow: 3,
            slidesToScroll: 1,
            dots: false,
            infinite: false,
            focusOnSelect: true,
            responsive: [
                {
                breakpoint: 1200,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                },
                },
                {
                breakpoint: 767,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                },
                },
            ],
         });
    });
    $(document).off("click", ".tabchoose").on("click", ".tabchoose", function () {
    
        var currenttab = $(this).attr('tabid');
        $('.tab_section').hide();
        $('.tabchoose .nav-link').removeClass('active');
        $(this).find('a').addClass('active');
        $('#'+currenttab+'').addClass('active show');
        $('#'+currenttab+'').show();
        
        //$('a[href="#' + currenttab + '"]').tab('show');

    });

    function preview_next_click_front(pageno, maxno){
   
        if(maxno == pageno){
           // showCustomAlert('This is final step !');
        }else{
            
            if (window.matchMedia('(max-width: 1199px)').matches) { 
                jQuery('html,body').animate({scrollTop:200},2000);
            } 
            if (window.matchMedia('(min-width: 1200px)').matches) { 
                jQuery('html,body').animate({scrollTop:475},2000);
            }
            var next_no = +pageno+1;
            $(".preview_main_view_step").css({"display":"none"});
            $(".main_div_step_"+pageno).css({"display":"block"});
            $('.tabchoose .nav-link').removeClass('active');
            $('#tab'+pageno+'').addClass('active show');
            $('#tab'+pageno+'-tab').addClass('active');
            $('#tab'+pageno+'').show();
        }

        return false;
    }

    function preview_pre_click_front(pageno) {

        if (pageno == 1) {
            //showCustomAlert('This is final step !');

        } else {            
            if (window.matchMedia('(max-width: 1199px)').matches) { 
                jQuery('html,body').animate({scrollTop:200},2000);
            } 
            if (window.matchMedia('(min-width: 1200px)').matches) { 
                jQuery('html,body').animate({scrollTop:475},2000);
            }
            var next_no = +pageno - 2;
            $(".preview_main_view_step").css({ "display": "none" });
            $(".main_div_step_" + next_no).css({ "display": "block" });
            $('.tabchoose .nav-link').removeClass('active');
            $('#tab' + next_no + '').addClass('active show');
            $('#tab' + next_no + '-tab').addClass('active');
            $('#tab' + next_no + '').show();
        }

        return false;
        }
    

    $(document).ready(function () {
    
        // Date Range changes - 86cugq7cp
        if ($('.datepicker').length > 0) {
            $('.single_date').datepicker({
                beforeShow: function(input, inst) {            
                    $('.body').addClass('active-overflow-hidden');
                },
                onSelect: function(selectedDate){ 
                    $('.body').removeClass('active-overflow-hidden');
                },
                onClose: function(input, inst) { 
                    $('.body').removeClass('active-overflow-hidden');
                },
                changeMonth: true, // Allow changing month
                changeYear: true,  // Allow changing year
                showButtonPanel: false,
                dateFormat: "dd/mm/yy",
                yearRange: "-70:+30"
            
            });

            $('.single_date').on('keydown paste', function(e) {
                e.preventDefault();
            });
        }

    // Date Range based questions - 86cugq7cp
    var date2 = null; // Variable to store the selected start date
            

        


        $('.nextbutton-sec:last a.submit_step_form').attr('id', 'submitFormBtn');
        
        $('#submitFormBtn').on('click', function () {
            var template_id = $('#template_id').val();
            var studio_id = $('#studio_id').val(); 
            $('.loader-new').addClass("active-loader");
            if(studio_id==0){
                $('.loader-new').removeClass("active-loader");
                showCustomAlert("No studios assigned to this form!");
                return false;
            }
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            }); 
            var formData = { data: {} };
            var FormDataValidation = {data:{}};
            $('form#standardform :input[name]:not([name="template_id"]):not([name="studio_id"]):not(:file)').each(function() { 

                var input = $(this);
                var name = input.attr('name');
               
                var component_code = input.data('component');
                var value;
                if (input.prop('tagName').toLowerCase() === 'textarea') {
                        var value = input.val();
                        formData.data[name] = value;
                        if (value.trim() == '') {
                            FormDataValidation.data[name] = value;
                        }
                    }
                    if (component_code !== 'undefined' && component_code !== '') {
                        var value = input.val();
                        formData.data[name] = value;
                        if (value.trim() == '') {
                            FormDataValidation.data[name] = value;
                        }else if(component_code == 'text_field_email'){
                            FormDataValidation.data[name] = value;
                        }
                    }
            });
          
            formData['template_id'] = template_id;
            formData['studio_id'] = studio_id;
            FormDataValidation['template_id'] = template_id;
            $.ajax({
            url: '{{ route('form.submitFormValidation') }}', 
            method: 'POST',
            data: FormDataValidation,
            success: function (response) {
               
                if (response.success === true) {
                    $('.loader-new').removeClass("active-loader");
                 
                   submitForm(formData);
                } else {
                    $('.loader-new').removeClass("active-loader");
                    handleValidationErrors(response.errors);
                }
            },
            error: function (error) {
                $('.loader-new').removeClass("active-loader");
                console.error('Error fetching validation rules:', error);
            }
            });
        });
        function submitForm(formData){
                $('.loader-new').addClass("active-loader");
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: '{{ route('form.userFormSubmit') }}',
                    method: 'POST',
                    data: formData,
                    success: function (response) {
                        $('.loader-new').removeClass("active-loader");
                        if (response.success === true) {
                            showSuccessAlert('Form submitted successfully!');
                            $("#standardform")[0].reset();
                        } else {
                            //console.error('Error:', response);
                        }
                    },
                    error: function (error) {
                        $('.loader-new').removeClass("active-loader");
                        console.error('Error submitting form:', error);
                    }
                });
}

        function handleValidationErrors(errors) {
            $('.error-message').text('');
        
            var activetab = 0;
            for (const fieldId in errors) {
            const errorMessage = errors[fieldId];
          
            const fieldName = $(`[name="${fieldId}"]`).attr('data-component');
            $(`#${fieldId}_error`).text(errorMessage);
            if(activetab == 0){
                const tabPane = $(`[name="${fieldId}"]`).closest('.tab-pane');
                const tabId = tabPane.attr('id');
                const tabLink = $(`a[href="#${tabId}"]`);
                tabLink.tab('show');
                tabPane.addClass('show active');
                tabPane.css('display', 'block');

                activetab++;
            }
            
        }
    }
    

    $('.file_uploads').on('change', function() {
    var maxFiles = $(this).attr('maxfileallowed');
    var maxSizeMB = $(this).attr('maxfilesize');
    
    // Convert maxSizeMB to bytes
    var maxSize = maxSizeMB * 1024 * 1024;
    
    // Check the number of selected files
    if (maxFiles > 0 && maxFiles != '') {
        var numFiles = $(this)[0].files.length;
        // If the number of selected files exceeds the maximum limit, display an error message
        if (numFiles > maxFiles) {
            $(this).next('span.file_upload_error').text('Maximum ' + maxFiles + ' files allowed.');
            $(this).val(''); // Clear the file input
            return;
        } else {
            $(this).next('span.file_upload_error').text('');
        }
    }
    
    // Check the size of each selected file
    if (maxSize > 0 && maxSizeMB != '') {
        var files = $(this)[0].files;
        var totalSize = 0;

        for (var i = 0; i < files.length; i++) {
            totalSize += files[i].size;
            // If any file exceeds the maximum size, display an error message
            if (files[i].size > maxSize) {
                $(this).next('span.file_upload_error').text('File "' + files[i].name + '" exceeds the maximum allowed size.');
                $(this).val(''); // Clear the file input
                return;
            }
        }
    }

    var fileInputs = $(this)[0].files;
    var fileDataArray = []; // Array to store file data
    var $fileUploads = $(this).attr('mainid');

    for (var j = 0; j < fileInputs.length; j++) {
        var file = fileInputs[j];
        var reader = new FileReader();

        reader.onload = (function(file) {
            return function(event) {
                // Push file name and content to fileDataArray
                fileDataArray.push({
                    name: file.name, // Original filename
                    content: event.target.result // Base64 content
                });
                
                // Update the hidden input with the JSON string
                $('#'+$fileUploads).val(JSON.stringify(fileDataArray));
            };
        })(file);

        // Read file as data URL (base64)
        reader.readAsDataURL(file);
    }
});


    });
</script>
@endpush('scripts')