@extends('layouts.main')

@section('title', 'User Creation')

@section('content')

    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

        td,
        th {
            border: 1px solid #000;
            padding: 5px 8px;
            font-size: 16px;
        }

        .no-border {
            border: none !important;
        }

        .sub-header {
            text-align: center;
            font-size: 16px;
        }

        .form-group {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-top: 5px;
        }

        .form-group label {
            width: 48%;
            margin-bottom: 4px;
        }

        .form-control {
            display: inline-block;
            width: 100%;
            border: none;
            border-bottom: 1px solid #000;
        }

        .form-container {
            background-color: white !important;
            border-radius: 8px !important;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1) !important;
            padding: 25px !important;
        }

        .form-header {
            color: #0d6efd;
            border-bottom: 2px solid #0d6efd;
            padding-bottom: 8px;
            margin-bottom: 20px;
            font-weight: 600;
            text-align: center;
            font-size: 20px;
        }

        .form-label {
            font-weight: 500 !important;
            margin-bottom: 5px !important;
            color: #495057 !important;
        }

        .form-control,
        .form-control-sm {
            border: 1px solid #ced4da !important;
            border-radius: 4px !important;
        }

        .englishText {
            border-bottom: none !important;
            border-bottom-left-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
            margin-bottom: 0px !important;
        }

        .gujaratiOutput {
            border-top-left-radius: 0 !important;
            border-top-right-radius: 0 !important;
            margin-bottom: 12px !important;
        }

        #myTable .FEnglishInput {
            border-bottom: none !important;
            border-bottom-left-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
            margin-bottom: 0px !important;
        }

        #myTable .FGujratiInput {
            border-top-left-radius: 0 !important;
            border-top-right-radius: 0 !important;
        }

        .main-header {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            padding-bottom: 5px;
        }

        .upload-box {
            display: inline-grid;
            text-align: center;
            margin: 0px;
            border: 2px dashed #898989;
            padding: 10px;
            cursor: pointer;
            width: 60px;
            height: 60px;
            place-content: center;
            position: relative;
        }

        .upload-box:hover {
            background-color: #f5f5f5;
        }

        .uploaded-img {
            object-fit: cover;
            border-radius: 4px;
            margin-top: 5px;
        }

        label .text-danger {
            margin-left: 4px;
        }
    </style>


    <div class="main-header">માધવ આશ્રમ</div>
    <div class="sub-header">(ગુરુભાઈ પરિવાર ની યાદી ફોર્મ)</div>

    <form action="{{ route('user.store') }}" method="POST" id="userForm" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="user_id" value="0">
        <div class="container py-2">
            <div class="row justify-content-center">
                <div class="form-container">
                    
                    {{-- Form Image Section --}}
                    <div class="row mb-4">
                        <div class="col-12 text-center">
                            <label class="form-label mb-2 fw-bold" style="font-size: 18px; color: #0d6efd;">Form Image (ફોર્મ ફોટો)</label>
                            <div class="form-image-container p-3 border rounded bg-light" style="min-height: 150px; position: relative;">
                                <div class="upload-form-box" onclick="triggerFormUpload()" style="cursor: pointer; position: absolute; top: 10px; right: 10px; z-index: 10;">
                                    <button type="button" class="btn btn-sm btn-outline-primary bg-white">
                                        <i class="bx bxs-cloud-upload font-size-16 align-middle me-2"></i>Change Image
                                    </button>
                                </div>
                                <input type="file" class="d-none" id="form_image_input" name="form_image" accept="image/*" onchange="previewFormImage(this)">
                                
                                <img id="form_image_preview" src="" alt="Form Image" class="img-fluid d-none" style="max-height: 300px; width: auto; border: 1px solid #ddd; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
                                
                                <div id="form_image_placeholder" class="text-center py-5">
                                    <i class="bx bxs-image font-size-48 text-muted mb-2"></i>
                                    <p class="text-muted mb-0">No form image uploaded</p>
                                    <button type="button" class="btn btn-primary btn-sm mt-3" onclick="triggerFormUpload()">Check / Add Form Image</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <h5 class="form-header">મુખ્ય સભ્ય નું નામ</h5>
                    <div class="row g-3">
                        <div class="d-flex justify-content-between">
                            <div class="col-md-2 text-center">
                                <label class="form-label mb-1 form-label-sm d-block">ફોટો</label>
                                <div class="upload-box p-2" onclick="triggerUpload(this)" style="cursor: pointer;"
                                    id="upload-box">
                                    <i class="bx bxs-cloud-upload font-size-18 upload-img-icon d-block mb-1"></i>
                                    <small class="text-muted upload-img-icon">Image</small>
                                    <input type="file" class="d-none upload-img" name="user_image" accept="image/*"
                                        onchange="previewImage(this)">
                                    <img class="d-none uploaded-img" id="main_user_image_upload" src="" alt="Uploaded Image"
                                        width="50" height="50">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label mb-1 form-label-sm">અટક<span class="text-danger">*</span></label>
                                <input name="surname" class="form-control form-control-sm englishText mb-1" type="text"
                                    data-id="1" placeholder="Surname" required>
                                <input name="gu_surname" class="form-control form-control-sm gujaratiOutput gujaratiOutput_1" type="text"
                                    data-id="1" placeholder="અટક" required>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label mb-1 form-label-sm">નામ<span class="text-danger">*</span></label>
                                <input name="name" class="form-control form-control-sm englishText mb-1" type="text"
                                    data-id="2" placeholder="Name" required>
                                <input name="gu_name" class="form-control form-control-sm gujaratiOutput gujaratiOutput_2"
                                    tabindex="-1" type="text" data-id="2" placeholder="નામ" required>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label mb-1 form-label-sm">પિતાનું નામ<span
                                        class="text-danger">*</span></label>
                                <input name="father_name" class="form-control form-control-sm englishText mb-1" type="text"
                                    data-id="3" placeholder="Father Name" required>
                                <input name="gu_father_name"
                                    class="form-control form-control-sm gujaratiOutput gujaratiOutput_3" type="text"
                                    tabindex="-1" data-id="3" placeholder="પિતાનું નામ" required>
                            </div>
                        </div>


                        <div class="col-md-4">
                            <label class="form-label mb-1 form-label-sm">ગામ<span class="text-danger">*</span></label>
                            <input name="village" class="form-control form-control-sm englishText mb-1" type="text"
                                data-id="4" placeholder="Village" required>
                            <input name="gu_village" class="form-control form-control-sm gujaratiOutput gujaratiOutput_4"
                                tabindex="-1" type="text" data-id="4" placeholder="ગામ" required>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label mb-1 form-label-sm">તાલુકો<span class="text-danger">*</span></label>
                            <input name="subdistrict" class="form-control form-control-sm englishText mb-1" type="text"
                                data-id="5" placeholder="Subdistrict" required>
                            <input name="gu_subdistrict"
                                class="form-control form-control-sm gujaratiOutput gujaratiOutput_5" type="text" data-id="5"
                                tabindex="-1" placeholder="તાલુકો" required>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label mb-1 form-label-sm">જિલ્લો<span class="text-danger">*</span></label>
                            <input name="district" class="form-control form-control-sm englishText mb-1" type="text"
                                data-id="6" placeholder="District" required>
                            <input name="gu_district" class="form-control form-control-sm gujaratiOutput gujaratiOutput_6"
                                tabindex="-1" type="text" data-id="6" placeholder="જિલ્લો" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label mb-1 form-label-sm">જન્મ તારીખ<span
                                    class="text-danger">*</span></label>
                            <input name="dob" class="form-control form-control-sm" type="date" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label mb-1 form-label-sm">ફોન - ૧<span class="text-danger">*</span></label>
                            <input name="phoneno1" class="form-control form-control-sm phone-number" type="text"
                                data-id="13" placeholder="ફોન - ૧" maxlength="11" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label mb-1 form-label-sm">ફોન - ૨</label>
                            <input name="phoneno2" class="form-control form-control-sm phone-number" type="text"
                                data-id="14" placeholder="ફોન - ૨" maxlength="11">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label mb-1 form-label-sm">વ્યવસાય<span class="text-danger">*</span></label>
                            <input name="profession" class="form-control form-control-sm englishText mb-1" type="text"
                                data-id="7" placeholder="Profession" required>
                            <input name="gu_profession" class="form-control form-control-sm gujaratiOutput gujaratiOutput_7"
                                tabindex="-1" type="text" data-id="7" placeholder="વ્યવસાય" required>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label mb-1 form-label-sm">ઘર નં<span class="text-danger">*</span></label>
                            <input name="house_no" class="form-control form-control-sm mb-1 englishText" type="text"
                                data-id="8" placeholder="House No" required>
                            <input name="gu_house_no" class="form-control form-control-sm gujaratiOutput gujaratiOutput_8"
                                tabindex="-1" type="text" data-id="8" placeholder="ઘર નં" required>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label mb-1 form-label-sm">સોસાયટી<span class="text-danger">*</span></label>
                            <input name="society" class="form-control form-control-sm englishText mb-1" type="text"
                                data-id="9" placeholder="Society" required>
                            <input name="gu_society" class="form-control form-control-sm gujaratiOutput gujaratiOutput_9"
                                tabindex="-1" type="text" data-id="9" placeholder="સોસાયટી" required>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label mb-1 form-label-sm">નજીકનુ ઓળખી શકાય એવું સ્થળ<span
                                    class="text-danger">*</span></label>
                            <input name="near_place" class="form-control form-control-sm englishText mb-1" type="text"
                                data-id="10" placeholder="Near Place" required>
                            <input name="gu_near_place"
                                class="form-control form-control-sm gujaratiOutput gujaratiOutput_10" type="text"
                                tabindex="-1" data-id="10" placeholder="નજીકનુ ઓળખી શકાય એવું સ્થળ" required>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label mb-1 form-label-sm">શહેર<span class="text-danger">*</span></label>
                            <input name="city" class="form-control form-control-sm englishText mb-1" type="text"
                                data-id="12" placeholder="City" required>
                            <input name="gu_city" class="form-control form-control-sm gujaratiOutput gujaratiOutput_12"
                                tabindex="-1" type="text" data-id="12" placeholder="શહેર" required>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label mb-1 form-label-sm">પિન કોડ<span class="text-danger">*</span></label>
                            <input name="pincode" class="form-control form-control-sm" type="number" data-id="11"
                                placeholder="પિન કોડ" required>
                        </div>
                    </div>

                    <h5 class="form-header mt-3 d-flex justify-content-between align-items-center">
                        <div>
                            પરિવારના સભ્યો ની વિગત
                        </div>
                        <div>
                            <a href="javascript:void(0)" style="font-size: 15px;" onclick="addNewRow()">+ Add Member</a>
                        </div>
                    </h5>
                    <table id="myTable" class="table table-bordered table-striped display" cellspacing="0" width="100%">
                        <thead class="table-light">
                            <tr>
                                <th>ક્રમ</th>
                                <th>ફોટો</th>
                                <th>પ્રથમ નામ<span class="text-danger">*</span></th>
                                <th>મધ્ય નામ<span class="text-danger">*</span></th>
                                <th>સબંધ<span class="text-danger">*</span></th>
                                <th>ફોન નં</th>
                                <th>વ્યવસાય</th>
                                <th>જન્મ તારીખ<span class="text-danger">*</span></th>
                                <th>એક્શન</th>
                            </tr>

                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>
                                    <div class="upload-box" onclick="triggerUpload(this)">
                                        <i class="bx bxs-cloud-upload font-size-18 upload-img-icon"></i>
                                        <small class="text-muted upload-img-icon">Image</small>
                                        <input type="file" class="d-none upload-img" name="f_image[]" accept="image/*"
                                            onchange="previewImage(this)">
                                        <img class="d-none uploaded-img" src="" alt="Uploaded Image" width="50" height="50">
                                    </div>
                                </td>
                                <td>
                                    <input name="f_first_name[]" class="form-control form-control-sm FEnglishInput"
                                        type="text" placeholder="First Name" required>
                                    <input name="gu_f_first_name[]" class="form-control form-control-sm FGujratiInput"
                                        type="text" placeholder="પ્રથમ નામ" required tabindex="-1">
                                </td>
                                <td>
                                    <input name="f_middle_name[]" class="form-control form-control-sm FEnglishInput"
                                        type="text" placeholder="Middle Name" required>
                                    <input name="gu_f_middle_name[]" class="form-control form-control-sm FGujratiInput"
                                        type="text" placeholder="મધ્ય નામ" required tabindex="-1">
                                </td>
                                <td>
                                    <input name="f_relation[]" class="form-control form-control-sm FEnglishInput"
                                        type="text" placeholder="Relation" required>
                                    <input name="gu_f_relation[]" class="form-control form-control-sm FGujratiInput"
                                        type="text" placeholder="સબંધ" required tabindex="-1">
                                </td>
                                <td>
                                    <input name="f_phone_no[]" class="form-control form-control-sm phone-number" type="text"
                                        placeholder="Phone No" maxlength="11">
                                </td>
                                <td>
                                    <input name="f_profession[]" class="form-control form-control-sm FEnglishInput"
                                        type="text" placeholder="Profession">
                                    <input name="gu_f_profession[]" class="form-control form-control-sm FGujratiInput"
                                        type="text" placeholder="વ્યવસાય" tabindex="-1">
                                </td>
                                <td>
                                    <input name="f_dob[]" class="form-control form-control-sm" type="date" required>
                                </td>
                                <td>
                                    <button class="btn btn-danger btn-sm delete-row">Delete</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <button type="submit" class="btn btn-primary mt-3">Save All</button>
    </form>

@endsection
@section('script')
    <script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
    <script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>
    <script src="{{ asset('assets/js/flatpickr.js') }}"></script>
    <script src="{{ asset('assets/js/dataTables.js') }}"></script>
    <script src="{{ asset('assets/js/dataTables.bootstrap5.js') }}"></script>
    <script src="{{ asset('assets/js/dataTables.buttons.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var csrfToken = $('input[name="_token"]').val(); 
            var routeUrl = '{{ route('transliterate.suggestions') }}';

            // Function to make fields accessible
            function makeFieldsAccessible() {
                $('.gujaratiOutput, .FGujratiInput').removeAttr('tabindex');
            }

            // Run on load
            makeFieldsAccessible();

            // Run when new rows are added (MutationObserver)
            var observer = new MutationObserver(function(mutations) {
                makeFieldsAccessible();
            });
            observer.observe(document.body, { childList: true, subtree: true });

            // Event Delegation for all Gujarati Output fields (Surname + Family members)
            $(document).on('input', '.gujaratiOutput, .FGujratiInput', function(e) {
                var $input = $(this);
                var text = $input.val();
                
                // Visual feedback that script is active
                $input.css('border-color', '#86b7fe'); 

                var cursorPosition = e.target.selectionStart;
                var leftPart = text.slice(0, cursorPosition);
                var match = leftPart.match(/([a-zA-Z]+)$/);

                if (!match) {
                    removeSuggestionBox();
                    return;
                }

                var currentWord = match[1];

                // Debounce
                clearTimeout($input.data('debounce'));
                $input.data('debounce', setTimeout(function() {
                    fetchSuggestions(currentWord, $input[0]);
                }, 300));
            });

            // Auto Transliterate from English to Gujarati on Blur
            $(document).on('blur', '.englishText, .FEnglishInput', function() {
                var $englishInput = $(this);
                var text = $englishInput.val().trim();
                
                // Find sibling Gujarati input
                var $gujaratiInput = $englishInput.closest('td, div').find('.gujaratiOutput, .FGujratiInput'); // Try to find in same container

                if ($gujaratiInput.length === 0) {
                     // Fallback for sibling
                     $gujaratiInput = $englishInput.siblings('.gujaratiOutput, .FGujratiInput');
                }

                if (text && $gujaratiInput.length > 0) {
                     // Only fetch if English text exists
                     fetch(routeUrl, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        },
                        body: JSON.stringify({
                            text: text,
                            target: 'gu',
                            num: 1 // We only need the top suggestion
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data && data.suggestions && data.suggestions.length > 0) {
                            // If user hasn't manually edited (or even if they have, this behavior 
                            // implies "auto translate what I typed"). 
                            // To be safe, maybe only if target is empty? 
                            // User said: "if i need any changes in gujrati then i will make it manually". 
                            // This implies we should Provide the draft.
                            // I will overwrite.
                            $gujaratiInput.val(data.suggestions[0]);
                        }
                    })
                    .catch(error => console.error('Auto-transliterate error:', error));
                }
            });

            // Close suggestions on click outside
            $(document).on('click', function(e) {
                if (!$(e.target).closest('.transliteration-suggestions').length && !$(e.target).is('input')) {
                    removeSuggestionBox();
                }
            });

            // Key navigation
            $(document).on('keydown', '.gujaratiOutput, .FGujratiInput', function(e) {
                var $box = $('.transliteration-suggestions');
                if ($box.length === 0) return;

                var $items = $box.find('.suggestion-item');
                var selectedIndex = $box.data('selectedIndex') || 0;

                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    selectedIndex = (selectedIndex + 1) % $items.length;
                    updateSelection($box, $items, selectedIndex);
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    selectedIndex = (selectedIndex - 1 + $items.length) % $items.length;
                    updateSelection($box, $items, selectedIndex);
                } else if (e.key === 'Enter') {
                    if ($items.length > 0) {
                        e.preventDefault();
                        e.stopPropagation();
                        // Apply the text from the selected item
                        applySuggestion($(this)[0], $items.eq(selectedIndex).text());
                    }
                } else if (e.key === 'Tab') {
                    // Optional: allow tab to select
                    if ($items.length > 0) {
                         applySuggestion($(this)[0], $items.eq(selectedIndex).text());
                    }
                    removeSuggestionBox();
                } else if (e.key === 'Escape') {
                    removeSuggestionBox();
                }
            });

            function fetchSuggestions(text, inputElement) {
                fetch(routeUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken
                    },
                    body: JSON.stringify({
                        text: text,
                        target: 'gu',
                        num: 5
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data && data.suggestions) {
                        createSuggestionBox(inputElement, data.suggestions);
                    }
                })
                .catch(error => console.error('Error:', error));
            }

            function createSuggestionBox(inputElement, suggestions) {
                removeSuggestionBox();
                if (suggestions.length === 0) return;

                var rect = inputElement.getBoundingClientRect();
                var scrollTop = window.scrollY || document.documentElement.scrollTop;
                var scrollLeft = window.scrollX || document.documentElement.scrollLeft;

                var $box = $('<div class="transliteration-suggestions"></div>').css({
                    'position': 'absolute',
                    'top': (rect.bottom + scrollTop) + 'px',
                    'left': (rect.left + scrollLeft) + 'px',
                    'background': '#fff',
                    'border': '1px solid #ccc',
                    'z-index': 99999,
                    'border-radius': '4px',
                    'box-shadow': '0 4px 6px rgba(0,0,0,0.1)',
                    'max-height': '200px',
                    'overflow-y': 'auto',
                    'min-width': '150px'
                });

                suggestions.forEach(function(text, index) {
                    var $item = $('<div class="suggestion-item"></div>').text(text).css({
                        'padding': '8px 12px',
                        'cursor': 'pointer',
                        'border-bottom': '1px solid #eee'
                    });
                    
                    if (index === 0) $item.css('background-color', '#e9ecef');

                    $item.on('mousedown', function(e) {
                         e.preventDefault();
                         applySuggestion(inputElement, text);
                    });

                    $item.on('mouseenter', function() {
                        updateSelection($box, $box.find('.suggestion-item'), index);
                    });

                    $box.append($item);
                });

                $('body').append($box);
                $box.data('selectedIndex', 0);
            }

            function removeSuggestionBox() {
                $('.transliteration-suggestions').remove();
            }

            function updateSelection($box, $items, index) {
                $items.css('background-color', 'transparent');
                $items.eq(index).css('background-color', '#e9ecef');
                $box.data('selectedIndex', index);
            }

            function applySuggestion(inputElement, text) {
                var cursorPosition = inputElement.selectionStart;
                var currentValue = inputElement.value;
                var leftPart = currentValue.slice(0, cursorPosition);
                var rightPart = currentValue.slice(cursorPosition);
                var match = leftPart.match(/(\S+)$/);
                
                var newLeftPart;
                if (match) {
                    var wordToReplace = match[0];
                    var startOfWord = leftPart.length - wordToReplace.length;
                    newLeftPart = leftPart.substring(0, startOfWord) + text;
                } else {
                    newLeftPart = leftPart + text; 
                }

                inputElement.value = newLeftPart + " " + rightPart;
                var newCursorPos = newLeftPart.length + 1;
                inputElement.setSelectionRange(newCursorPos, newCursorPos);
                inputElement.focus();
                removeSuggestionBox();
            }
        });
    </script>
    <script type="text/javascript">
        var translateLatest = '{{ route('translate.latest') }}';
        var transliterateSuggestionsRoute = '{{ route('transliterate.suggestions') }}';
        var translate = '{{ route('translate') }}';
        var userEdit = '{{ route('user.edit') }}';

        var user_id = {{$data['user_id']}};

        $(document).ready(function () {
            if (user_id != 0 && user_id != '') {
                $.ajax({
                    type: 'GET',
                    url: userEdit + "?user_id=" + user_id,
                    success: function (resultData) {
                        if (resultData['status'] == 1) {
                            var user = resultData['data']['user'];
                            var gu_user = resultData['data']['gu_user'];
                            var userFamily = resultData['data']['userFamily'];
                            var gu_userFamily = resultData['data']['gu_userFamily'];

                            $('#main_user_image_upload').attr('src', '/storage/' + user['image']);
                            $('#main_user_image_upload').removeClass('d-none');
                            $('#upload-box i').addClass('d-none');
                            $('#upload-box small').addClass('d-none');

                            // Set Form Image
                            if (user['form_image']) {
                                $('#form_image_preview').attr('src', '/storage/' + user['form_image']);
                                $('#form_image_preview').removeClass('d-none');
                                $('#form_image_placeholder').addClass('d-none');
                            } else {
                                $('#form_image_preview').addClass('d-none');
                                $('#form_image_placeholder').removeClass('d-none');
                            }

                            $('[name=user_id]').val(user_id)
                            // SET EDIT DATA IN THERE
                            $('[name=surname]').val(user['surname']);
                            $('[name=name]').val(user['name']);
                            $('[name=father_name]').val(user['father_name']);
                            $('[name=village]').val(user['village']);
                            $('[name=subdistrict]').val(user['subdistrict']);
                            $('[name=district]').val(user['district']);
                            $('[name=profession]').val(user['profession']);
                            $('[name=dob]').val(user['dob']);
                            $('[name=house_no]').val(user['house_no']);
                            $('[name=society]').val(user['society']);
                            $('[name=near_place]').val(user['near_place']);
                            $('[name=pincode]').val(user['pincode']);
                            $('[name=city]').val(user['city']);
                            $('[name=phoneno1]').val(addSpaceInmobileNumber(user['phoneno1']));
                            $('[name=phoneno2]').val(addSpaceInmobileNumber(user['phoneno2']));
                            $('[name=gu_surname]').val(gu_user['surname']);
                            $('[name=gu_name]').val(gu_user['name']);
                            $('[name=gu_father_name]').val(gu_user['father_name']);
                            $('[name=gu_village]').val(gu_user['village']);
                            $('[name=gu_subdistrict]').val(gu_user['subdistrict']);
                            $('[name=gu_district]').val(gu_user['district']);
                            $('[name=gu_profession]').val(gu_user['profession']);
                            $('[name=gu_dob]').val(gu_user['dob']);
                            $('[name=gu_house_no]').val(gu_user['house_no']);
                            $('[name=gu_society]').val(gu_user['society']);
                            $('[name=gu_near_place]').val(gu_user['near_place']);
                            $('[name=gu_pincode]').val(gu_user['pincode']);
                            $('[name=gu_city]').val(gu_user['city']);
                            $('[name=gu_phoneno1]').val(gu_user['phoneno1']);
                            $('[name=gu_phoneno2]').val(gu_user['phoneno2']);


                            if (userFamily.length > 0 || gu_userFamily.length > 0) {
                                $('#myTable tbody').html("");

                                for (var i = 0; i < Math.max(userFamily.length, gu_userFamily.length); i++) {
                                    const member = userFamily[i] || {};
                                    const gu_member = gu_userFamily[i] || {};

                                    var row = `
                                        <tr>
                                            <td>${i + 1}</td>
                                            <td>
                                                <div class="upload-box" onclick="triggerUpload(this)">
                                                    <i class="bx bxs-cloud-upload font-size-18 upload-img-icon d-none"></i>
                                                    <small class="text-muted upload-img-icon d-none">Image</small>
                                                    <input type="file" class="d-none upload-img" name="f_image[]" accept="image/*" onchange="previewImage(this)">
                                                    <input type="hidden" name="f_images[]" value="${member.image || ''}">
                                                    ${member.image
                                                        ? `<img class="uploaded-img" src="/storage/${member.image}" alt="Uploaded Image" width="50" height="50">`
                                                        : `<img class="d-none uploaded-img" src="" alt="Uploaded Image" width="50" height="50">`
                                                    }
                                                </div>
                                            </td>
                                            <td>
                                                <input type="text" name="f_first_name[]" class="form-control form-control-sm FEnglishInput" value="${member.name || ''}" placeholder="First Name" required>
                                                <input type="text" name="gu_f_first_name[]" class="form-control form-control-sm FGujratiInput" value="${gu_member.name || ''}" placeholder="પ્રથમ નામ" required tabindex="-1">
                                            </td>
                                            <td>
                                                <input type="text" name="f_middle_name[]" class="form-control form-control-sm FEnglishInput" value="${member.father_name || ''}" placeholder="Middle Name" required>
                                                <input type="text" name="gu_f_middle_name[]" class="form-control form-control-sm FGujratiInput" value="${gu_member.father_name || ''}" placeholder="મધ્ય નામ" required tabindex="-1">
                                            </td>
                                            <td>
                                                <input type="text" name="f_relation[]" class="form-control form-control-sm FEnglishInput" value="${member.relation || ''}" placeholder="Relation" required>
                                                <input type="text" name="gu_f_relation[]" class="form-control form-control-sm FGujratiInput" value="${gu_member.relation || ''}" placeholder="સબંધ" required tabindex="-1">
                                            </td>
                                            <td>
                                                <input type="text" name="f_phone_no[]" class="form-control form-control-sm phone-number" value="${addSpaceInmobileNumber(member.phoneno1 || '')}" placeholder="Phone No" maxlength="11">
                                            </td>
                                            <td>
                                                <input type="text" name="f_profession[]" class="form-control form-control-sm FEnglishInput" value="${member.profession || ''}" placeholder="Profession">
                                                <input type="text" name="gu_f_profession[]" class="form-control form-control-sm FGujratiInput" value="${gu_member.profession || ''}" placeholder="વ્યવસાય" tabindex="-1">
                                            </td>
                                            <td>
                                                <input type="date" name="f_dob[]" class="form-control form-control-sm" value="${member.dob || ''}" required>
                                            </td>
                                            <td><button type="button" class="btn btn-danger btn-sm delete-row">Delete</button></td>
                                        </tr>
                                    `;
                                    $('#myTable tbody').append(row);
                                }
                            }
                        } else {
                            toastr["error"](resultData['msg']);
                        }
                    }
                });
            }
        });

        function triggerFormUpload() {
            $('#form_image_input').click();
        }

        function previewFormImage(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#form_image_preview').attr('src', e.target.result);
                    $('#form_image_preview').removeClass('d-none');
                    $('#form_image_placeholder').addClass('d-none');
                }
                reader.readAsDataURL(input.files[0]);

                // Trigger Auto-Extraction
                var formData = new FormData();
                formData.append('image', input.files[0]);
                formData.append('_token', $('input[name="_token"]').val());

                toastr.info("Extracting data from image... Please wait.");

                $.ajax({
                    url: '{{ route("image.extract") }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success) {
                            toastr.success("Data extracted successfully!");
                            fillObj = response.data;
                            
                            // Map extracted data to known Gujarati fields
                            if(fillObj['અટક ટાપણિયા']) $('[name=gu_surname]').val(fillObj['અટક ટાપણિયા']); // OCR might read surname label as value or vice versa
                            // A better mapping strategy is needed based on OCR keys
                            
                            // Direct mapping based on keys from parseFormData
                            var map = {
                                'gu_surname': ['અટક', 'અટક ટાપણિયા'],
                                'gu_name': ['નામ', 'મુખ્ય સભ્ય નું નામ'],
                                'gu_father_name': ['પિતાજી નું નામ'],
                                'gu_village': ['ગામ', 'દરેડ'],
                                'gu_subdistrict': ['તાલુકો'],
                                'gu_district': ['જિલ્લો', 'લાવનગર'],
                                'gu_profession': ['વ્યવસાય', 'મજુરીકામ'],
                                'gu_house_no': ['ઘર નં'],
                                'gu_society': ['સોસાયટી'],
                                'gu_near_place': ['નજીકનું ઓળખી શકાય એવું સ્થળ', 'કાળા તળાવરોs'],
                                'gu_city': ['શહેર'],
                                'pincode': ['પિન કોડ', 'ચિન મેડ'],
                                'phoneno1': ['ફોન-૧', 'ઝોન-૧'],
                                'phoneno2': ['ફોન-૨']
                            };

                            for (var formField in map) {
                                var ocrKeys = map[formField];
                                for (var i = 0; i < ocrKeys.length; i++) {
                                    var key = ocrKeys[i];
                                    if (fillObj[key]) {
                                        $('[name=' + formField + ']').val(fillObj[key]);
                                        // Trigger input event to handle any dependent logic (like transliteration if we were setting English)
                                        $('[name=' + formField + ']').trigger('input'); 
                                        break; 
                                    }
                                }
                            }
                            
                            // Handle Family Members (If present)
                            if (fillObj['પરિવાર ની વિગત'] && Array.isArray(fillObj['પરિવાર ની વિગત'])) {
                                var members = fillObj['પરિવાર ની વિગત'];
                                $('#myTable tbody').html(""); // Clear existing rows
                                
                                members.forEach(function(member, index) {
                                    var row = `
                                        <tr>
                                            <td>${index + 1}</td>
                                            <td>
                                                <div class="upload-box" onclick="triggerUpload(this)">
                                                    <i class="bx bxs-cloud-upload font-size-18 upload-img-icon d-none"></i>
                                                    <small class="text-muted upload-img-icon d-none">Image</small>
                                                    <input type="file" class="d-none upload-img" name="f_image[]" accept="image/*" onchange="previewImage(this)">
                                                    <img class="d-none uploaded-img" src="" alt="Uploaded Image" width="50" height="50">
                                                </div>
                                            </td>
                                            <td>
                                                <input type="text" name="f_first_name[]" class="form-control form-control-sm FEnglishInput" placeholder="First Name" required>
                                                <input type="text" name="gu_f_first_name[]" class="form-control form-control-sm FGujratiInput" value="${member['પ્રથમ નામ'] || ''}" placeholder="પ્રથમ નામ" required tabindex="-1">
                                            </td>
                                            <td>
                                                <input type="text" name="f_middle_name[]" class="form-control form-control-sm FEnglishInput" placeholder="Middle Name" required>
                                                <input type="text" name="gu_f_middle_name[]" class="form-control form-control-sm FGujratiInput" value="${member['મધ્ય નામ'] || ''}" placeholder="મધ્ય નામ" required tabindex="-1">
                                            </td>
                                            <td>
                                                <input type="text" name="f_relation[]" class="form-control form-control-sm FEnglishInput" placeholder="Relation" required>
                                                <input type="text" name="gu_f_relation[]" class="form-control form-control-sm FGujratiInput" value="${member['સબંધ'] || ''}" placeholder="સબંધ" required tabindex="-1">
                                            </td>
                                            <td>
                                                <input type="text" name="f_phone_no[]" class="form-control form-control-sm phone-number" value="${member['ફોન નં'] || ''}" placeholder="Phone No" maxlength="11">
                                            </td>
                                            <td>
                                                <input type="text" name="f_profession[]" class="form-control form-control-sm FEnglishInput" placeholder="Profession">
                                                <input type="text" name="gu_f_profession[]" class="form-control form-control-sm FGujratiInput" value="${member['વ્યવસાય'] || ''}" placeholder="વ્યવસાય" tabindex="-1">
                                            </td>
                                            <td>
                                                <input type="date" name="f_dob[]" class="form-control form-control-sm" value="${member['જન્મ તારીખ'] || ''}" required>
                                            </td>
                                            <td><button type="button" class="btn btn-danger btn-sm delete-row">Delete</button></td>
                                        </tr>
                                    `;
                                    $('#myTable tbody').append(row);
                                });
                            }


                        }
                    },
                    error: function(xhr) {
                        console.error(xhr);
                        toastr.error("Failed to extract data: " + (xhr.responseJSON?.error || "Unknown error"));
                    }
                });
            }
        }

        $(document).ready(function () {
            var options = {
                beforeSubmit: showRequest,
                success: showResponse
            };

            $('#userForm').ajaxForm(options);
        });

        function addSpaceInmobileNumber(mobileNumber) {
            let number = mobileNumber;
            if (number.length === 10) {
                let formatted = number.slice(0, 5) + ' ' + number.slice(5);
                return formatted;
            } else {
                return mobileNumber;
            }
        }

        function showRequest(formData, jqForm, options) {
            var queryString = $.param(formData);

            return true;
        }

        function showResponse(responseText, statusText, xhr, $form) {

            if (responseText['status'] == 1) {
                toastr["success"](responseText['msg']);
                window.location.href = '{{ route("user.index") }}';
            } else if (responseText['status'] == 0) {
                if (typeof responseText['data'] !== "undefined") {
                    var size = Object.keys(responseText['data']).length;
                    if (size > 0) {
                        for (var [key, value] of Object.entries(responseText['data'])) {
                            toastr["error"](value);
                        }
                    }
                } else {
                    toastr["error"](responseText['msg']);
                }
            }
        }

        $(document).ready(function () {
            $(document).on('keydown', 'input', function (e) {
                if (e.key === 'Enter') {
                    e.preventDefault(); // prevent form submit

                    let $inputs = $('input')
                        .not('.gujaratiOutput')
                        .not('.FGujratiInput')
                        .filter(':visible:not([readonly]):not([disabled])');

                    let index = $inputs.index(this);
                    if (index !== -1 && index < $inputs.length - 1) {
                        $inputs.eq(index + 1).focus();
                    }
                }
            });
        });

        $(document).on('keydown', '#myTable input', function (e) {
            if (e.key === 'Enter') {
                e.preventDefault();

                const $input = $(this);
                const $row = $input.closest('tr');
                const $inputs = $row.find('input');
                const index = $inputs.index($input);

                const isLastInputInRow = index === $inputs.length - 1;
                const isLastRow = $row.is($('#myTable tbody tr:last'));

                if (!isLastInputInRow) {
                    $inputs.eq(index + 1).focus();
                } else {
                    if (isLastRow) {
                        addNewRow();
                    } else {
                        $row.next().find('input:first').focus();
                    }
                }
            }
        });

        function addNewRow() {
            const $tbody = $('#myTable tbody');
            const rowCount = $tbody.find('tr').length + 1;

            const newRow = `
                        <tr>
                            <td>${rowCount}</td>
                            <td>
                                <div class="upload-box" onclick="triggerUpload(this)">
                                    <i class="bx bxs-cloud-upload font-size-18 upload-img-icon"></i>
                                    <small class="text-muted upload-img-icon">Image</small>
                                    <input type="file" class="d-none upload-img" name="f_image[]" accept="image/*" onchange="previewImage(this)">
                                    <img class="d-none uploaded-img" src="" alt="Uploaded Image" width="50" height="50">
                                </div>
                            </td>
                            <td>
                                <input name="f_first_name[]" class="form-control form-control-sm FEnglishInput" type="text" placeholder="First Name" required />
                                <input name="gu_f_first_name[]" class="form-control form-control-sm FGujratiInput" type="text" placeholder="પ્રથમ નામ" required />
                            </td>
                            <td>
                                <input name="f_middle_name[]" class="form-control form-control form-control-sm FEnglishInput" type="text" placeholder="Middle Name" required />
                                <input name="gu_f_middle_name[]" class="form-control form-control-sm FGujratiInput" type="text" placeholder="મધ્ય નામ" required />
                            </td>
                            <td>
                                <input name="f_relation[]" class="form-control form-control form-control-sm FEnglishInput" type="text" placeholder="Relation" required />
                                <input name="gu_f_relation[]" class="form-control form-control-sm FGujratiInput" type="text" placeholder="સબંધ" required />
                            </td>
                            <td>
                                <input name="f_phone_no[]" class="form-control form-control form-control-sm phone-number" type="text" placeholder="Phone No" maxlength="11" />
                            </td>
                            <td>
                                <input name="f_profession[]" class="form-control form-control form-control-sm FEnglishInput" type="text" placeholder="Profession" />
                                <input name="gu_f_profession[]" class="form-control form-control-sm FGujratiInput" type="text" placeholder="વ્યવસાય" />
                            </td>
                            <td>
                                <input name="f_dob[]" class="form-control form-control-sm" type="date" required />
                            </td>
                            <td><button class="btn btn-danger btn-sm delete-row">Delete</button></td>
                        </tr>
                    `;

            $tbody.append(newRow);
            updateRowNumbers();
            $tbody.find('tr:last input:first').focus();
        }

        $(document).on('click', '.delete-row', function () {
            $(this).closest('tr').remove();
            updateRowNumbers();
        });

        function updateRowNumbers() {
            $('#myTable tbody tr').each(function (index) {
                $(this).find('td:first').text(index + 1);
            });
        }

        $(document).on('input', '.phone-number', function () {
            let val = $(this).val().replace(/\s/g, ''); // Remove all spaces
            let formatted = val.match(/.{1,5}/g);       // Break into chunks of 5
            if (formatted) {
                $(this).val(formatted.join(' '));       // Join chunks with space
            }
        });

        function triggerUpload(box) {
            const input = box.querySelector('.upload-img');
            input.click();
        }

        function previewImage(input) {
            const box = input.closest('.upload-box');
            const img = box.querySelector('.uploaded-img');
            const icons = box.querySelectorAll('.upload-img-icon');

            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    img.src = e.target.result;
                    img.classList.remove('d-none');
                    icons.forEach(el => el.classList.add('d-none'));
                };
                reader.readAsDataURL(input.files[0]);
            }
        }

    </script>
@endsection