@extends('admin.masterv2')

@section('styleSheet')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
    .remove-field-btn { cursor: pointer; }
    .form-field-row { margin-bottom: 15px; }
</style>
@endsection

@section('content')
<div class="page-content-wrapper">
    <div class="page-content">
        <div class="page-bar">
            <ul class="breadcrumb">
                <li><i class="fa fa-home"></i> <a href="{{route('home')}}">Dashboard</a> &raquo;</li>
                <li><a href="{{route('formFieldGroupList')}}">Form Field Group List</a> &raquo;</li>
                <li>{{ isset($formGroup) ? 'Edit Form' : 'Create Form' }}</li>
            </ul>
        </div>

        @include('admin.includesV2.backendAlert')

        <div class="card">
            <div class="card-header">
                <h4>{{ isset($formGroup) ? 'Edit Form Group' : 'Create Form Group' }}</h4>
            </div>
            <div class="card-body">
                <form id="dynamicForm" method="POST" action="{{ route('formFieldGroupAdd2') }}">
                    @csrf
                    @if(isset($formGroup))
                        <input type="hidden" name="id" value="{{ $formGroup->id }}">
                    @endif

                    <!-- Form Group Details -->
                    <div class="mb-3 row">
                        <label class="col-md-2 col-form-label">Form Group Name <span class="text-danger">*</span></label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" name="name" id="formGroupName"
                                   value="{{ $formGroup->name ?? '' }}" placeholder="Name" required>
                        </div>

                        <label class="col-md-2 col-form-label">Repeat</label>
                        <div class="col-md-4">
                            <select class="form-select" name="repeat" id="formGroupRepeat" required>
                                <option value="">--Select--</option>
                                <option value="N" {{ ($formGroup->repeat ?? '') == 'N' ? 'selected' : '' }}>No Repeat</option>
                                <option value="Y" {{ ($formGroup->repeat ?? '') == 'Y' ? 'selected' : '' }}>Repeat</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label class="col-md-2 col-form-label">Status</label>
                        <div class="col-md-4">
                            <select class="form-select" name="status" id="formGroupStatus" required>
                                <option value="">--Select--</option>
                                <option value="Y" {{ ($formGroup->status ?? '') == 'Y' ? 'selected' : '' }}>Active</option>
                                <option value="N" {{ ($formGroup->status ?? '') == 'N' ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>

                        <label class="col-md-2 col-form-label">View Order</label>
                        <div class="col-md-4">
                            <input type="number" class="form-control" name="view_order" id="formGroupViewOrder"
                                   value="{{ $formGroup->view_order ?? '' }}" placeholder="View Order" required>
                        </div>
                    </div>

                    <hr>
                    <h5>Form Fields</h5>

                    <!-- Dynamic Form Fields -->
                    <div id="formFieldsContainer">
                        @php $fieldIndex = 0; @endphp
                        @if(isset($formFields) && count($formFields))
                            @foreach($formFields as $field)
                                <div class="form-field-row row align-items-end border border-3 border-primary  border-opacity-25 pt-2 pb-2">
                                    <div class="col-md-3">
                                        <input type="text" class="form-control" placeholder="Label"
                                               name="formfields[{{ $fieldIndex }}][label]" value="{{ $field->flabel }}" required>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="text" class="form-control" placeholder="Name"
                                               name="formfields[{{ $fieldIndex }}][name]" value="{{ $field->fname }}" required>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="text" class="form-control" placeholder="Id"
                                               name="formfields[{{ $fieldIndex }}][fid]" value="{{ $field->fid }}">
                                    </div>
                                    <div class="col-md-3">
                                        <select class="form-select formfield-type" name="formfields[{{ $fieldIndex }}][type]">
                                            <option value="">--Type--</option>
                                            @foreach($inputTypes as $typeKey => $typeLabel)
                                                <option value="{{ $typeKey }}" {{ $field->ftype == $typeKey ? 'selected' : '' }}>
                                                    {{ $typeLabel }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <textarea class="form-control mt-1 options-value {{ in_array($field->ftype, ['FS','FR']) ? '' : 'd-none' }}"
                                                  name="formfields[{{ $fieldIndex }}][options_value]">{{ $field->foption_value }}</textarea>
                                    </div>
                                    <div class="col-md-3 mt-3">
                                        <input type="text" class="form-control" placeholder="Default Value"
                                               name="formfields[{{ $fieldIndex }}][default_value]" value="{{ $field->fdefault_value }}">
                                    </div>
                                    <div class="col-md-2">
                                        <input type="number" class="form-control" placeholder="Max Char"
                                               name="formfields[{{ $fieldIndex }}][fmax_char]" value="{{ $field->fmax_char }}">
                                    </div>
                                    <div class="col-md-2">
                                        <input type="number" class="form-control" placeholder="Order"
                                               name="formfields[{{ $fieldIndex }}][forder]" value="{{ $field->forder }}">
                                    </div>
                                    
                                    <div class="col-md-1">
                                        <input type="text" class="form-control" placeholder="css class"
                                               name="formfields[{{ $fieldIndex }}][fclass]" value="{{ $field->fclass }}">
                                    </div>
                                    <div class="col-md-1 text-center">
                                        <input type="checkbox" class="form-check-input"
                                               name="formfields[{{ $fieldIndex }}][required]" {{ $field->frequired == '1' ? 'checked' : '' }}> Required
                                    </div>
                                    <div class="col-md-1 text-center">
                                        <span class="btn btn-danger remove-field-btn">Remove</span>
                                    </div>
                                </div>
                                @php $fieldIndex++; @endphp
                            @endforeach
                        @else
                            <!-- Default first empty field -->
                            <div class="form-field-row row align-items-end border border-3 border-primary  border-opacity-25 pt-2 pb-2">
                                <div class="col-md-3">
                                    <input type="text" class="form-control" placeholder="Label" name="formfields[0][label]" required>
                                </div>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" placeholder="Name * (unique)" name="formfields[0][name]" required>
                                </div>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" placeholder="Id * (unique)" name="formfields[0][fid]">
                                </div>
                                <div class="col-md-3">
                                    <select class="form-select formfield-type" name="formfields[0][type]">
                                        <option value="">--Type--</option>
                                        @foreach($inputTypes as $typeKey => $typeLabel)
                                            <option value="{{ $typeKey }}">{{ $typeLabel }}</option>
                                        @endforeach
                                    </select>
                                    <textarea class="form-control mt-1 options-value d-none" placeholder="Options (value##label,...)" name="formfields[0][options_value]"></textarea>
                                </div>
                                <div class="col-md-3 mt-3">
                                    <input type="text" class="form-control" placeholder="Default Value" name="formfields[0][default_value]">
                                </div>
                                <div class="col-md-2">
                                    <input type="number" class="form-control" placeholder="Max Char" name="formfields[0][fmax_char]">
                                </div>
                                <div class="col-md-1">
                                    <input type="number" class="form-control" placeholder="Order" name="formfields[0][forder]">
                                </div>
                                
                                <div class="col-md-2">
                                    <input type="text" class="form-control" placeholder="CSS Class" name="formfields[0][fclass]" value="col-lg-4">
                                </div>
                                <div class="col-md-1 text-center">
                                    <input type="checkbox" class="form-check-input" name="formfields[0][required]"> Required
                                </div>
                                <div class="col-md-1 text-center">
                                    <span class="btn btn-danger remove-field-btn">Remove</span>
                                </div>
                            </div>


                        @endif
                    </div>

                    <div class="mt-3 text-end">
                        <button type="button" class="btn btn-info" id="addFieldBtn">Add More</button>
                    </div>


                    <div class="mt-4 text-end">
                        <button type="submit" class="btn btn-success">{{ isset($formGroup) ? 'Update' : 'Save' }}</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('customJs')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
    let fieldIndex = {{ $fieldIndex ?? 1 }};

    // Add new field row
    $('#addFieldBtn').click(function() {
        const newRow = $('.form-field-row:first').clone();
        newRow.find('input, select, textarea').each(function() {
            const name = $(this).attr('name');
            const newName = name.replace(/\d+/, fieldIndex);
            $(this).attr('name', newName).val('');
            if($(this).is(':checkbox')) $(this).prop('checked', false);
        });
        newRow.find('.options-value').addClass('d-none');
        $('#formFieldsContainer').append(newRow);
        fieldIndex++;
    });

    // Remove field row
    $(document).on('click', '.remove-field-btn', function() {
        if($('#formFieldsContainer .form-field-row').length > 1) {
            $(this).closest('.form-field-row').remove();
        } else {
            alert('At least one field is required');
        }
    });

    // Show/hide options textarea based on type
    $(document).on('change', '.formfield-type', function() {
        const type = $(this).val();
        const optionsArea = $(this).siblings('.options-value');
        if(type === 'FS' || type === 'FR') {
            optionsArea.removeClass('d-none');
        } else {
            optionsArea.addClass('d-none').val('');
        }
    });

    // jQuery Validate
    $('#dynamicForm').validate({
        rules: {
            name: { required: true, minlength: 3, maxlength: 255 },
            repeat: { required: true },
            status: { required: true },
            view_order: { required: true, number: true, min: 0 }
        },
        errorClass: 'text-danger',
        highlight: function(element) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function(element) {
            $(element).removeClass('is-invalid');
        },
        submitHandler: function(form) {
            let validFields = true;

            // Validate each dynamic field row
            $('#formFieldsContainer .form-field-row').each(function() {
                const label = $(this).find('input[name*="[label]"]');
                const fname = $(this).find('input[name*="[name]"]');
                const forder = $(this).find('input[name*="[forder]"]');
                const fmax = $(this).find('input[name*="[fmax_char]"]');

                if(label.val().trim() === '') { label.addClass('is-invalid'); validFields = false; }
                else { label.removeClass('is-invalid'); }

                if(fname.val().trim() === '') { fname.addClass('is-invalid'); validFields = false; }
                else { fname.removeClass('is-invalid'); }

                if(forder.val() && !$.isNumeric(forder.val())) { forder.addClass('is-invalid'); validFields = false; }
                else { forder.removeClass('is-invalid'); }

                if(fmax.val() && !$.isNumeric(fmax.val())) { fmax.addClass('is-invalid'); validFields = false; }
                else { fmax.removeClass('is-invalid'); }
            });

            if(!validFields) {
                alert('Please correct errors in form fields.');
                return false;
            }

            // If all valid, submit the form
            form.submit();
        }
    });
});
</script>
@endsection