@extends('layouts.app') {{-- Include the layout --}}

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Customize Form Fields</div>
                <div class="card-body">
                    <form method="POST" action="{{ route('saveFields') }}" onsubmit="return validateForm()">
                        @csrf
                        <div class="form-group">
                            <label for="name"></label>
                            <select name="formid" id="formid" class="form-control" onChange="ShowFields()">
                                <option>Select Form</option>
                                
                                @foreach($formslist as $form)
                                    <option value="{{ $form->id }}"  {{ (isset($selectedform) && $selectedform == $form->id) ? 'selected' : '' }} >{{ $form->name }}</option>
                                @endforeach
                                
                                
                            </select>
                            
                        </div>
                        <br>
                        <div class="form-group" id="maindiv" style="display:none">
                            <label for="name"><b>Select Fields</b></label>
                            <div id="fieldsdiv">
                            </div>
                            
                        </div>
                        
                        <br>
                            <a href="{{ route('home') }}"><button type="button" class="btn btn-primary">Back</button></a>
                            <button type="submit" class="btn btn-success">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    ShowFields();
    function ShowFields(){
        var formid=$('#formid').val();
        
        if(formid>0){
            $.ajax({
            url: 'form-fields/'+formid, // The route to fetch the data
            type: 'GET',
            success: function(data) {
                
                if(data!='')
                {
                    $('#maindiv').css('display','block');
                    $('#fieldsdiv').html(data);
                }
                else {
                    $('#maindiv').css('display','none');
                    $('#fieldsdiv').html('');
                }
                
                
            },
            error: function() {
                alert('Error loading data.');
            }
        });
        }
        else {
            $('#maindiv').css('display','none');
            $('#fieldsdiv').html('');
        }
        
    }
    
    function validateForm() {
        var formid = $('#formid').val();
        var checkboxes = document.querySelectorAll('input[name="fieldcheck[]"]:checked');
        
        if (formid > 0 && checkboxes.length > 0) {
            return true; // Submit the form
        } else {
            alert('Please Select a Form and Check at least one Checkbox.');
            return false; // Prevent the form from submitting
        }
    }
    
</script>

@endsection