@extends('admin.layout')
@section('main')
<div class="content-overlay"></div>
<div class="header-navbar-shadow"></div>
<div class="content-wrapper">
    <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="{{ $form->iPatientFormID ?? '' }}">
                    <input type="hidden" name="iPatientMasterFieldID" id="iPatientMasterFieldID" value="">
                    <input type="hidden" name="originalFieldName" id="originalFieldName" value="">
                    <input type="hidden" name="isEditable" id="isEditable" value="">
                    <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>
                    <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>
                    <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>
                    <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>
    <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>
                        Edit Patient DCF Form
                        <a href="" data-toggle="tooltip" data-placement="right" title="" data-original-title="Modifying Patient's DCF." 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" value="{{ $form->vPatientFormName ?? '' }}">
                                                        </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 }}" {{ in_array($division->iDivisionID, $selectedDivisions ?? []) ? 'selected' : '' }}>{{ $division->vDivision }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <input type="hidden" name="iPatientFormID" id="iPatientFormID" value="{{ $form->iPatientFormID ?? '' }}">
                                                <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">
                                                                        @if($fields->isEmpty())
                                                                            <p>No master fields available.</p>
                                                                        @else
                                                                            @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 {{ in_array($field->iPatientMasterFieldID, $form->fields->pluck('iPatientMasterFieldID')->toArray()) ? 'fa-check' : 'fa-angle-right' }}"></i></div>
                                                                                </div>
                                                                            @endforeach
                                                                        @endif
                                                                    </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">
                                                                        @foreach($selectedFields as $field)
                                                                            <div class="item" data-id="{{ $field['iPatientMasterFieldID'] }}">
                                                                                <div class="left">
                                                                                    <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Drag to shuffle the field" class="drag-handle mr-1">
                                                                                        <i class="fa-solid fa-grip-vertical"></i>
                                                                                    </a>
                                                                                    <span class="field-name">{{ $field['vFieldName'] }}</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>
                                                                            </div>
                                                                        @endforeach
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
@endsection

@section('scripts')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Initialize Select2 for divisions
        $('#division_select').select2();

        // Initialize tooltips
        $('[data-toggle="tooltip"]').tooltip();

        // Make Field Master draggable
        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',
        });

        // Move field from master 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="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();
                setPatientFieldData($('#iPatientFormID').val(), fieldId, fieldName);
            }
        });
    });

    // Function to toggle field editability based on isEditable
    function toggleFieldEditability(isEditable) {
        const isEditableBool = isEditable === '1' || isEditable === 1;
        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);
    }

    function setPatientFieldData(patientFormID, masterFieldID, fieldName) {
        if (!patientFormID) {
            $.notify("Form ID is missing. Please save the form first.", "error");
            return;
        }
        $.ajax({
            url: "{{ route('admin.patientdcf.getField') }}",
            type: 'GET',
            data: {
                iPatientFormID: patientFormID,
                iPatientMasterFieldID: masterFieldID
            },
            success: function(response) {
                if (response.success) {
                    const data = response.field;
                    $('#iPatientMasterFieldID').val(data.iPatientMasterFieldID || masterFieldID);
                    $('#originalFieldName').val(data.vFieldName || fieldName);
                    $('#isEditable').val(data.isEditable ? '1' : '0');
                    $('#vFieldType').val(data.vFieldType || 'input');
                    $('#isNumeric').prop('checked', data.isNumeric == 1);
                    $('#isMultiple').prop('checked', data.isMultiple == 1);
                    $('#isMandatory').prop('checked', data.isMandatory == 1);
                    $('#vFieldName').val(data.vFieldName || fieldName);
                    $('#vPlaceholder').val(data.vPlaceholder || '');
                    $('#vHelpText').val(data.vHelpText || '');
                    $('#vMinLength').val(data.vMinLength || '');
                    $('#vMaxLength').val(data.vMaxLength || '');
                    $('#vValues').val(data.vValues || '');
                    $('#dropdownValuesSection').toggle(data.vFieldType === 'dropdown');
                    // Toggle field editability based on isEditable
                    toggleFieldEditability(data.isEditable);
                    $('#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();
        $('#isNumericSection').hide();
        $('#dropdownValuesSection').hide();
        $('#generalFields').show();
        $('#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 === '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();
        }
    }

    $(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();

            // Manually append all field values, including disabled ones
            formData.append('iPatientFormID', $('#iPatientFormID').val());
            formData.append('iPatientMasterFieldID', $('#iPatientMasterFieldID').val());
            formData.append('originalFieldName', $('#originalFieldName').val());
            formData.append('isEditable', $('#isEditable').val());
            formData.append('vFieldType', $('#vFieldType').val());
            formData.append('isNumeric', $('#isNumeric').is(':checked') ? '1' : '0');
            formData.append('isMultiple', $('#isMultiple').is(':checked') ? '1' : '0');
            formData.append('isMandatory', $('#isMandatory').is(':checked') ? '1' : '0');
            formData.append('vFieldName', $('#vFieldName').val());
            formData.append('vPlaceholder', $('#vPlaceholder').val());
            formData.append('vHelpText', $('#vHelpText').val());
            formData.append('vMinLength', $('#vMinLength').val());
            formData.append('vMaxLength', $('#vMaxLength').val());
            formData.append('vValues', $('#vValues').val());

            const isEditable = $('#isEditable').val();

            // Client-side validation only if isEditable is 1
            if (isEditable === '1') {
                const fieldType = $('#vFieldType').val();
                const fieldName = $('#vFieldName').val();
                const vValues = $('#vValues').val();

                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");
                        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");
                }
            });
        });

        // Update Form Details (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.update', ['id' => Crypt::encrypt($form->iPatientFormID)]) }}",
                type: 'POST',
                data: {
                    form_name: formName,
                    divisions: divisions
                },
                success: function(response) {
                    if (response.success) {
                        $.notify("Form updated successfully", "success");
                        $('#form-details').addClass('d-none');
                        $('#fields-section').removeClass('d-none');
                        $('#submit-form-btn').addClass('d-none');
                        $('#submit-fields-btn').removeClass('d-none');
                        $('#iPatientFormID').val(response.formId);
                    } else {
                        $.notify("Failed to update form. Please try again.", "error");
                    }
                },
                error: function(xhr) {
                    console.error('AJAX Error:', xhr.responseText);
                    $.notify("Something went wrong, please refresh.", "error");
                }
            });
        });

        // Update Fields (Step 2)
        $('#submit-fields-btn').on('click', function(e) {
            e.preventDefault();
            const formId = $('#iPatientFormID').val();
            if (!formId) {
                $.notify("Form ID is missing. Please save the form first.", "error");
                return;
            }
            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: {
                    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(response.message || "Failed to save fields. Please try again.", "error");
                    }
                },
                error: function(xhr) {
                    console.error('AJAX Error:', xhr.responseText);
                    $.notify("Something went wrong, please refresh.", "error");
                }
            });
        });
    });

    $('#editPatientFieldModal').on('shown.bs.modal', function () {
        handleFieldTypeChange();
        toggleFieldEditability($('#isEditable').val());
    });

    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');
    });
</script>
@endsection