@extends('frontend.layouts.app')
@section('bodyClass', 'frontend')
@section('content')
<link rel="stylesheet" href="{{ asset('css/forms/global_form_design.css')}} ">

<div class="loader-new">
    <img src="{{ asset('images/load.gif') }}" alt="">
</div>
<div class="ffd-banner mob-ffd-banner-d-reverse">
    <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="row">
                <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)
                        
                        @foreach($formDetails->componentQuestionsMain as $key => $quesMain)
                         
                            @php $result = FormHelper::getFormComponentHtml($quesMain->component->component_code,$quesMain,$stepscount); @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 type="text/javascript">        
    $(document).ready(function(){
        var stepsTabHtml1 = '';
        $("#stepbystepTabs").append(stepsTabHtml1);
       
    });
    $(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(pageno, maxno){
   
        if(maxno == pageno){
           // showCustomAlert('This is final step !');
        }else{
            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;
    }
    

    $(document).ready(function () {

        $('.nextbutton-sec:last a').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');
                console.log(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==''){
                        FormDataValidation.data[name] = value;
                        }
                    }
                    if (component_code !== 'undefined' && component_code !== '') {
                        var value = input.val();
                        formData.data[name] = value;
                        if(value==''){
                        FormDataValidation.data[name] = value;
                        }
                    }
            });
          
            formData['template_id'] = template_id;
            formData['studio_id'] = studio_id;
            console.log("formData"+JSON.stringify(formData));
            $.ajax({
            url: '{{ route('form.submitFormValidation') }}', 
            method: 'POST',
            data: FormDataValidation,
            success: function (response) {
               
                if (response.success === true) {
                    $('.loader-new').removeClass("active-loader");
                    console.log("response"+response);
                   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('');
            console.log("errormsg"+JSON.stringify(errors));
            var activetab = 0;
            for (const fieldId in errors) {
            const errorMessage = errors[fieldId];
            console.log("field id"+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')