@extends('admin.layout')
@section('main')
<div class="content-overlay"></div>
<div class="header-navbar-shadow"></div>
<div class="content-wrapper">
    {{-- Patient Form Field Edit Modal --}}
    <div class="modal fade text-left" data-backdrop="static" data-keyboard="false" id="editPatientFieldModal" tabindex="-1"
         role="dialog" aria-labelledby="editPatientFieldModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                {{ Form::open(['url' => route('admin.patientdcf.updateField'), 'name' => 'patientFieldForm', 'id' => 'patientFieldForm', 'enctype' => 'multipart/form-data']) }}
                <div class="modal-header">
                    <h5 class="modal-title font-weight-bolder" id="editPatientFieldModalLabel">Edit Patient Field</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body p-2">
                    <input type="hidden" name="iPatientFormID" id="iPatientFormID" value="{{ $formId ?? '' }}">
                    <input type="hidden" name="iPatientMasterFieldID" id="iPatientMasterFieldID" value="">
                    <input type="hidden" name="originalFieldName" id="originalFieldName" value="">
                    <input type="hidden" name="isEditable" id="isEditable" value="">
                    {{-- Field Type --}}
                    <div class="form-group my-1">
                        <label for="vFieldType" class="form-label">Field Type<span style="color: red">*</span></label>
                        <select name="vFieldType" class="form-control" id="vFieldType" onchange="handleFieldTypeChange()">
                            <option value="input">Input</option>
                            <option value="datepicker">Date Picker</option>
                            <option value="textarea">Text Area</option>
                            <option value="dropdown">Dropdown</option>
                        </select>
                    </div>
                    {{-- Is Numeric --}}
                    <div id="isNumericSection" class="form-group  mb-1 mt-1 ml-1">
                        <div class="custom-control custom-switch custom-control-inline">
                            <input type="checkbox" class="custom-control-input" id="isNumeric" name="isNumeric">
                            <label for="isNumeric" class="custom-control-label">Numeric Only</label>
                        </div>
                    </div>
                    {{-- General Fields --}}
                    <div id="generalFields">
                        <div class="form-group  mb-1 mt-1 ml-1">
                            <div class="custom-control custom-switch custom-control-inline">
                                <input type="checkbox" class="custom-control-input ml-2" name="isMandatory" id="isMandatory">
                                <label class="custom-control-label" for="isMandatory">Required</label>
                            </div>
                        </div>
                        <div class="form-group my-1">
                            <label for="vFieldName" class="form-label">Label<span style="color: red">*</span></label>
                            <input type="text" class="form-control" id="vFieldName" placeholder="Enter Field Name" name="vFieldName">
                        </div>
                        <div class="form-group my-1">
                            <label for="vPlaceholder" class="form-label">Placeholder</label>
                            <input type="text" class="form-control" id="vPlaceholder" placeholder="Enter Placeholder" name="vPlaceholder">
                        </div>
                        <div class="form-group my-1">
                            <label for="vHelpText" class="form-label">Help Text</label>
                            <input type="text" class="form-control" id="vHelpText" placeholder="Enter Help Text" name="vHelpText">
                        </div>
                        <div class="form-group my-1">
                            <label for="vMinLength" class="form-label">Min Length/Items</label>
                            <input type="number" class="form-control" id="vMinLength" placeholder="Enter Minimum Length" name="vMinLength">
                        </div>
                        <div class="form-group my-1">
                            <label for="vMaxLength" class="form-label">Max Length/Items</label>
                            <input type="number" class="form-control" id="vMaxLength" placeholder="Enter Maximum Length" name="vMaxLength">
                        </div>
                    </div>
                    {{-- Dropdown Values --}}
                   

                    <div id="dropdownValuesSection" style="display: none;">
                        <div class="form-group mb-1 mt-1 ml-1">
                            <div class="custom-control custom-switch custom-control-inline">
                                <input type="checkbox" class="custom-control-input ml-2" name="isMultiple" id="isMultiple">
                                <label class="custom-control-label" for="isMultiple">Is Multiple</label>
                            </div>
                        </div>

                        <div class="form-group my-1">
                            <label for="vValues" class="form-label">Dropdown Options (Comma separated)</label>
                            <textarea class="form-control" id="vValues" name="vValues" placeholder="Enter options separated by comma"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer p-2">
                    <button type="submit" class="btn btn-primary btn-sm">Save Changes</button>
                    <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
                </div>
                {{ Form::close() }}
            </div>
        </div>
    </div>
    {{-- Patient Form Field Edit Modal END --}}
    <div class="content-body">
        <section id="dashboard-ecommerce">
            <div class="row match-height justify-content-end g-2 mb-0">
                <div class="col-lg-auto col-md-auto col-sm-auto col-auto mr-auto my-auto">
                    <h2 class="m-0">
                        <a href="{{ route('admin.manage.patientdcf') }}" class="ml-1 mr-1">
                            <i class="fa-solid fa-arrow-left-long"></i>
                        </a>
                        Patient DCF Form
                        <a href="" data-toggle="tooltip" data-placement="right" title="" data-original-title="Setup Patient's information form." class="ml-1">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle">
                                <circle cx="12" cy="12" r="10"></circle>
                                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                                <line x1="12" y1="17" x2="12.01" y2="17"></line>
                            </svg>
                        </a>
                    </h2>
                </div>
                <div class="col-lg-auto col-md-auto col-sm-auto col-auto mr-1">
                    <a href="#" id="submit-form-btn" class="btn btn-primary btn-toggle-sidebar waves-effect waves-float waves-light">
                        <span> Submit Form </span>
                    </a>
                    <a href="#" id="submit-fields-btn" class="btn btn-primary btn-toggle-sidebar waves-effect waves-float waves-light d-none">
                        <span> Save Fields </span>
                    </a>
                </div>
            </div>
        </section>
        <section id="">
            <div class="row">
                <div class="col-12">
                    <div class="tabing_rs_detiles">
                        <div id="tab-2" class="tab-content current">
                            <div class="second_tab">
                                <div class="inside_detiles">
                                    <div class="tab-content tab-content-1 active">
                                        <div class="row pb-0 justify-content-between">
                                        </div>
                                        <div class="card">
                                            <div class="card-datatable p-2">
                                                <div class="row" id="form-details">
                                                    <div class="col-md-6 mb-2">
                                                        <div class="form-group">
                                                            <label for="form_name_input">Patient DCF Name <span class="text-danger">*</span></label>
                                                            <input type="text" class="form-control" id="form_name_input" placeholder="Enter Patient DCF Name">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 mb-2">
                                                        <div class="form-group">
                                                            <label for="division_select">Select Division <span class="text-danger">*</span></label>
                                                            <select class="select2 select-label form-control w-100" id="division_select" name="select-label[]" multiple>
                                                                <option value="all">Select All Divisions</option>
                                                                @foreach($divisions as $division)
                                                                    <option value="{{ $division->iDivisionID }}">{{ $division->vDivision }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row d-none" id="fields-section">
                                                    <div class="w-100">
                                                        <div class="row">
                                                            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                                                <div class="white_rs">
                                                                    <h5>Field Master</h5>
                                                                    <div class="approve_rs" id="field-master">
                                                                        @foreach($fields as $field)
                                                                            <div class="item draggable" data-id="{{ $field->iPatientMasterFieldID }}">
                                                                                <div class="left"> {{ $field->vFieldName }} </div>
                                                                                <div class="right"><i class="fa-solid fa-angle-right"></i></div>
                                                                            </div>
                                                                        @endforeach
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                                                <div class="white_rs">
                                                                    <h5>Selected Fields</h5>
                                                                    <div class="approve_rs" id="selected-fields">
                                                                        <!-- Dropped fields will appear here dynamically -->
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
    $(document).ready(function () {
        // Initialize tooltips
        $('[data-toggle="tooltip"]').tooltip();

        // Handle click on disabled edit button
        $('.disabled-edit').on('click', function (e) {
            e.preventDefault();
            alert('This form is in use by a camp and cannot be edited.');
        });
    });

    // Function to toggle field editability based on isEditable
    function toggleFieldEditability(isEditable) {
        const isEditableBool = isEditable == '1' || isEditable == true;
        const fieldsToDisable = [
            '#vFieldType',
            '#isNumeric',
            '#vFieldName',
            '#vPlaceholder',
            '#vHelpText',
            '#vMinLength',
            '#vMaxLength',
            '#isMultiple',
            '#vValues'
        ];

        fieldsToDisable.forEach(selector => {
            $(selector).prop('disabled', !isEditableBool);
        });

        // Ensure isMandatory is always editable
        $('#isMandatory').prop('disabled', false);
    }

    document.addEventListener('DOMContentLoaded', function () {
        // Initialize Select2 for divisions
        $('#division_select').select2();

        // Sortable initialization remains unchanged
        new Sortable(document.getElementById('field-master'), {
            group: {
                name: 'master',
                pull: false,
                put: false
            },
            sort: false,
            animation: 150,
        });

        new Sortable(document.getElementById('selected-fields'), {
            group: {
                name: 'selected',
                pull: true,
                put: true,
            },
            sort: true,
            handle: '.drag-handle',
            animation: 150,
            ghostClass: 'sortable-ghost',
        });

        // Handle icon click (move field to selected)
        document.getElementById('field-master').addEventListener('click', function(e) {
            if (e.target.classList.contains('fa-angle-right')) {
                e.preventDefault();
                let item = e.target.closest('.item');
                let fieldName = item.querySelector('.left').innerText.trim();
                let fieldId = item.getAttribute('data-id');
                let icon = item.querySelector('.right i');
                if (icon) {
                    icon.className = 'fa-solid fa-check';
                }
                const newItem = document.createElement('div');
                newItem.className = 'item';
                newItem.setAttribute('data-id', fieldId);
                newItem.innerHTML = `
                    <div class="left">
                        <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Drag to shuffle the field" class="drag-handle mr-1">
                            <i class="fa-solid fa-grip-vertical"></i>
                        </a>
                        <span class="field-name">${fieldName}</span>
                    </div>
                    <div class="right">
                        <a href="#" class="edit-field"><i class="fa fa-pen"></i></a>
                        <a href="#" class="remove-field ml-2"><i class="fa fa-times"></i></a>
                    </div>
                `;
                document.getElementById('selected-fields').appendChild(newItem);
                $('[data-toggle="tooltip"]').tooltip();
            }
        });

        // Remove Field from selected and reset in master
        document.getElementById('selected-fields').addEventListener('click', function(e) {
            if (e.target.closest('.remove-field')) {
                e.preventDefault();
                let item = e.target.closest('.item');
                let fieldId = item.getAttribute('data-id');
                let masterItem = document.querySelector('#field-master .item[data-id="' + fieldId + '"]');
                if (masterItem) {
                    let icon = masterItem.querySelector('.right i');
                    if (icon) {
                        icon.className = 'fa-solid fa-angle-right';
                    }
                }
                item.remove();
            }
        });

        // Edit Field
        document.getElementById('selected-fields').addEventListener('click', function(e) {
            if (e.target.closest('.edit-field')) {
                e.preventDefault();
                let item = e.target.closest('.item');
                let fieldId = item.getAttribute('data-id');
                let fieldName = item.querySelector('.field-name').innerText.trim();
                // Fetch field details via AJAX
                $.ajax({
                    url: "{{ route('admin.patientdcf.getField') }}",
                    type: 'GET',
                    data: {
                        iPatientMasterFieldID: fieldId,
                        iPatientFormID: $('#iPatientFormID').val()
                    },
                    success: function(response) {
                        if (response.success) {
                            let field = response.field;
                            $('#iPatientMasterFieldID').val(fieldId);
                            $('#originalFieldName').val(fieldName);
                            $('#vFieldType').val(field.vFieldType || 'input');
                            $('#isNumeric').prop('checked', field.isNumeric == 1);
                            $('#isMandatory').prop('checked', field.isMandatory == 1);
                            $('#vFieldName').val(field.vFieldName || fieldName);
                            $('#vPlaceholder').val(field.vPlaceholder || '');
                            $('#vHelpText').val(field.vHelpText || '');
                            $('#vMinLength').val(field.vMinLength || '');
                            $('#vMaxLength').val(field.vMaxLength || '');
                            $('#vValues').val(field.vValues || '');
                            $('#isEditable').val(field.isEditable ? '1' : '0');
                            $('#isMultiple').prop('checked', field.isMultiple == 1);
                            $('#dropdownValuesSection').toggle(field.vFieldType === 'dropdown');
                            // Toggle field editability based on isEditable
                            toggleFieldEditability(field.isEditable);
                            // Trigger field type change to set visibility
                            handleFieldTypeChange();
                            $('#editPatientFieldModal').modal('show');
                        } else {
                            $.notify("Failed to load field details.", "error");
                        }
                    },
                    error: function() {
                        $.notify("An error occurred while fetching field data.", "error");
                    }
                });
            }
        });
    });

    function setPatientFieldData(patientFormID, masterFieldID, fieldName) {
        $.ajax({
            url: "{{ route('admin.patientdcf.getField') }}",
            type: 'GET',
            data: {
                iPatientFormID: patientFormID,
                iPatientMasterFieldID: masterFieldID
            },
            success: function(response) {
                if (response.success) {
                    const data = response.field;

                    // Set hidden field values
                    $('#editPatientFieldModal input[name="iPatientFormID"]').val(data.iPatientFormID || patientFormID);
                    $('#editPatientFieldModal input[name="iPatientMasterFieldID"]').val(data.iPatientMasterFieldID || masterFieldID);
                    $('#editPatientFieldModal input[name="originalFieldName"]').val(data.vFieldName || fieldName);
                    $('#editPatientFieldModal input[name="isEditable"]').val(data.isEditable ? '1' : '0');

                    // Set form field values
                    $('#editPatientFieldModal input[name="vFieldName"]').val(data.vFieldName || '');
                    $('#editPatientFieldModal input[name="vPlaceholder"]').val(data.vPlaceholder || '');
                    $('#editPatientFieldModal input[name="vHelpText"]').val(data.vHelpText || '');
                    $('#editPatientFieldModal input[name="vMinLength"]').val(data.vMinLength || '');
                    $('#editPatientFieldModal input[name="vMaxLength"]').val(data.vMaxLength || '');
                    $('#editPatientFieldModal #isMandatory').prop('checked', data.isMandatory == 1);
                    $('#editPatientFieldModal #isNumeric').prop('checked', data.isNumeric == 1);
                    $('#editPatientFieldModal #isMultiple').prop('checked', data.isMultiple == 1);
                    $('#editPatientFieldModal select[name="vFieldType"]').val(data.vFieldType || 'input');

                    // Handle dropdown options
                    if (data.vFieldType === 'dropdown') {
                        $('#editPatientFieldModal textarea[name="vValues"]').val(data.vValues || '');
                    } else {
                        $('#editPatientFieldModal textarea[name="vValues"]').val('');
                    }

                    // Toggle field editability based on isEditable
                    toggleFieldEditability(data.isEditable);

                    // Trigger field type change to set visibility
                    handleFieldTypeChange();

                    $('#editPatientFieldModal').modal('show');
                } else {
                    $.notify("Failed to load field details.", "error");
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
                $.notify("An error occurred while fetching field data.", "error");
            }
        });
    }

    function handleFieldTypeChange() {
        const fieldType = $('#vFieldType').val();
        
        // Reset visibility
        $('#isNumericSection').hide();
        $('#dropdownValuesSection').hide();
        $('#generalFields').show();
        
        // Show all general fields by default
        $('#vMinLength').closest('.form-group').show();
        $('#vMaxLength').closest('.form-group').show();
        $('#vPlaceholder').closest('.form-group').show();
        $('#vHelpText').closest('.form-group').show();
        
        if (fieldType === 'input') {
            $('#isNumericSection').show();
        } else if (fieldType === 'textarea') {
            // No specific changes needed
        } else if (fieldType === 'dropdown') {
            $('#dropdownValuesSection').show();
            $('#vPlaceholder').closest('.form-group').hide();
        } else if (fieldType === 'datepicker') {
            $('#vMinLength').closest('.form-group').hide();
            $('#vMaxLength').closest('.form-group').hide();
            $('#vPlaceholder').closest('.form-group').hide();
        }
    }

    // Initialize form validation and submission
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('#patientFieldForm').on('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);

            // Convert checkbox values to booleans
            formData.set('isNumeric', $('#isNumeric').is(':checked') ? '1' : '0');
            formData.set('isMandatory', $('#isMandatory').is(':checked') ? '1' : '0');
            formData.set('isMultiple', $('#isMultiple').is(':checked') ? '1' : '0');

            // Basic client-side validation
            const fieldType = $('#vFieldType').val();
            const fieldName = $('#vFieldName').val();
            const vValues = $('#vValues').val();
            const isEditable = $('#isEditable').val();

            if (isEditable == '1' || isEditable == true) {
                if (!fieldName) {
                    $.notify("Field Name is required.", "error");
                    return;
                }
                
                if (fieldType === 'dropdown' && !vValues) {
                    $.notify("Dropdown options are required.", "error");
                    return;
                }
            }

            $.ajax({
                url: "{{ route('admin.patientdcf.updateField') }}",
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        $('#editPatientFieldModal').modal('hide');
                        $.notify("Field updated successfully.", "success");
                        // Update field name in selected fields if editable
                        const fieldId = $('#iPatientMasterFieldID').val();
                        const item = $(`#selected-fields .item[data-id="${fieldId}"]`);
                        if (item.length && isEditable === '1') {
                            item.find('.field-name').text($('#vFieldName').val());
                        }
                    } else {
                        $.notify(response.message || 'Failed to update field.', "error");
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                    $.notify('An error occurred while updating the field.', "error");
                }
            });
        });
    });

    // Trigger field type change and editability on modal show
    $('#editPatientFieldModal').on('shown.bs.modal', function () {
        handleFieldTypeChange();
        toggleFieldEditability($('#isEditable').val());
    });

    // Division Select Logic
    let isAllSelected = false;
    $('#division_select').on('change', function() {
        const selected = $(this).val() || [];
        if (selected.includes('all') && !isAllSelected) {
            isAllSelected = true;
            $(this).find('option').prop('selected', true);
            $(this).val($(this).find('option').map(function() { return $(this).val(); }).get());
        }
        if (!selected.includes('all') && isAllSelected) {
            isAllSelected = false;
        }
        $(this).trigger('change.select2');
    });

    // Submit Form (Step 1)
    $('#submit-form-btn').on('click', function(e) {
        e.preventDefault();
        const formName = $('#form_name_input').val();
        let divisions = $('#division_select').val();
        if (!formName) {
            $.notify("Add a Patient DCF Name before submitting", "error");
            return;
        }
        if (divisions.length == 0) {
            $.notify("Select at least one Division for the form", "error");
            return;
        }

        // Filter out 'all' from divisions
        divisions = divisions.filter(id => id !== 'all');

        $.ajax({
            url: "{{ route('admin.patientdcf.store') }}",
            type: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                form_name: formName,
                divisions: divisions
            },
            success: function(response) {
                if (response.success) {
                    $.notify("Form created successfully", "success");
                    $('#iPatientFormID').val(response.formId);
                    $('#form-details').addClass('d-none');
                    $('#fields-section').removeClass('d-none');
                    $('#submit-form-btn').addClass('d-none');
                    $('#submit-fields-btn').removeClass('d-none');
                } else {
                    $.notify(response.message, "error");
                }
            },
            error: function(xhr) {
                $.notify("Something went wrong, please refresh.", "error");
            }
        });
    });

    // Submit Fields (Step 2)
    $('#submit-fields-btn').on('click', function(e) {
        e.preventDefault();
        const formId = $('#iPatientFormID').val();
        const selectedFields = [];
        $('#selected-fields .item').each(function() {
            selectedFields.push({
                id: $(this).data('id'),
                name: $(this).find('.field-name').text().trim()
            });
        });
        if (selectedFields.length == 0) {
            $.notify("Select at least one field for the form", "error");
            return;
        }
        $.ajax({
            url: "{{ route('admin.patientdcf.storeFields') }}",
            type: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                form_id: formId,
                fields: selectedFields
            },
            success: function(response) {
                if (response.success) {
                    $.notify("Fields saved successfully", "success");
                    setTimeout(function() {
                        window.location.href = "{{ route('admin.manage.patientdcf') }}";
                    }, 2000);
                } else {
                    $.notify("Failed to save fields. Please try again.", "error");
                }
            },
            error: function(xhr) {
                $.notify("Something went wrong, please refresh.", "error");
            }
        });
    });
</script>
@endsection