@extends('layouts.main')

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

@section('content')
    <style>
        input[readonly] {
            background-color: #f8f9fa;
            border: 1px solid #ced4da;
            font-size: 0.8rem;
        }

        .card {
            background: #fff !important;
            border-radius: 10px !important;
            box-shadow: 0 1px 2px #0003, 1px -1px 2px #00000012, 0 -2px 5px #00000008 !important;
        }

        .card-header {
            background: #e8f0fe;
            border-bottom: 1px solid #eee;
            font-size: .9em;
            font-weight: 600;
            min-width: 75px;
            text-align: left;
        }
    </style>
    <div class="container-fluid">
        <div class="row">
            <form method="POST" id="main_user_form" action="{{ route('user.store') }}" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="user_id" value="{{ $data['main_en_user']->id ?? '' }}">
                <input type="hidden" name="type" value="MAIN_MEMBER">
                <div class="card p-0 shadow rounded-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h4 class="card-title mb-0">મુખ્ય સભ્યની વિગત</h4>
                        <div class="button-group">
                            <button type="button" class="btn btn-sm btn-primary edit-btn">Edit</button>
                            <button type="button" class="btn btn-sm btn-info close-btn d-none">Close</button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-md-2 text-center mb-4 mb-md-0"
                                style="justify-items:center; position: relative;">
                                <img id="main_user_image_preview"
                                    src="{{ $data['main_en_user']->image ? asset('storage/' . $data['main_en_user']->image) : asset('front_assets/images/logo.png') }}"
                                    alt="Member Photo" class="img-fluid" style="max-width: 150px; cursor: pointer;">

                                <div class="image-change-wrapper d-none">
                                    <input type="file" name="user_image" id="main_user_image_input" accept="image/*"
                                        style="display: none;">
                                    <small class="d-block mt-2 text-primary" style="cursor: pointer;"
                                        onclick="$('#main_user_image_input').click()">Change Image</small>
                                </div>
                            </div>

                            <div class="col-md-10">
                                <div class="row g-3">
                                    @php
                                        $mainEn = $data['main_en_user'];
                                        $mainGu = $data['main_gu_user'];
                                    @endphp

                                    @php
                                        $phoneFormatted2 = isset($mainEn->phoneno2)
                                            ? substr($mainEn->phoneno2, 0, 5) . ' ' . substr($mainEn->phoneno2, 5)
                                            : '';
                                    @endphp

                                    @php
                                        $phoneFormatted1 = isset($mainEn->phoneno1)
                                            ? substr($mainEn->phoneno1, 0, 5) . ' ' . substr($mainEn->phoneno1, 5)
                                            : '';
                                    @endphp

                                    @foreach ([['surname', 'અટક'], ['name', 'નામ'], ['father_name', 'પિતાનું નામ'], ['profession', 'વ્યવસાય'], ['house_no', 'ઘર નંબર'], ['society', 'સોસાયટી'], ['village', 'ગામ'], ['subdistrict', 'તાલુકો'], ['district', 'જિલ્લો'], ['city', 'શહેર'], ['near_place', 'નજીકનુ ઓળખી શકાય એવું સ્થળ']] as [$field, $label])
                                        <div class="col-md-4">
                                            <label class="form-label">{{ $label }}</label>
                                            <input type="text" name="{{ $field }}"
                                                class="form-control form-control-sm field-en required"
                                                placeholder="{{ $label }}" value="{{ $mainEn->$field ?? '' }}" readonly>
                                            <input type="text" name="gu_{{ $field }}"
                                                class="form-control form-control-sm field-gu mt-1 required gujaratiOutput"
                                                placeholder="{{ $label }}" value="{{ $mainGu->$field ?? '' }}" readonly tabindex="-1">
                                        </div>
                                    @endforeach

                                    <div class="col-md-4">
                                        <label class="form-label">જન્મ તારીખ</label>
                                        <input type="date" name="dob" class="form-control form-control-sm field-en required"
                                            value="{{ $mainEn->dob ?? '' }}" readonly>
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label">ફોન - ૧</label>
                                        <input type="text" name="phoneno1"
                                            class="form-control form-control-sm field-en required phone-number"
                                            placeholder="પ્રાથમિક નંબર" maxlength="11" value="{{ $phoneFormatted1 ?? '' }}"
                                            readonly>
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label">ફોન - ૨</label>
                                        <input type="text" name="phoneno2"
                                            class="form-control form-control-sm field-en phone-number"
                                            placeholder="વૈકલ્પિક નંબર" maxlength="11" value="{{ $phoneFormatted2 ?? '' }}"
                                            readonly>
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label">પિન કોડ</label>
                                        <input type="text" name="pincode"
                                            class="form-control form-control-sm field-en required" placeholder="પિન કોડ"
                                            maxlength="6" value="{{ $mainEn->pincode ?? '' }}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="text-end mt-3">
                            <button type="submit" class="btn btn-success btn-sm d-none save-btn">Save</button>
                        </div>
                    </div>
                </div>
            </form>
            @foreach($data['family_en_user'] as $key => $value)
                @php $gu_value = $data['family_gu_user'][$key] ?? null; @endphp
                <form id="family_form_{{$key + 1}}" method="POST" action="{{ route('user.store') }}"
                    enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="user_id" value="{{ $value->id }}">
                    <input type="hidden" name="type" value="FAMILY_MEMBER">
                    <div class="card p-0 shadow rounded-4 mb-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="card-title mb-0">સભ્યની વિગત {{ $key + 1 }}</h5>
                            <div class="button-group">
                                <button type="button" class="btn btn-sm btn-primary edit-btn">Edit</button>
                                <button type="button" class="btn btn-sm btn-success close-btn d-none">Close</button>
                            </div>
                        </div>

                        <div class="card-body family-member-card" data-member-id="{{ $value->id }}">
                            <div class="row align-items-center">
                                <div class="col-md-2 text-center mb-3 mb-md-0"
                                    style="justify-items: center; position: relative;">
                                    <img src="{{ $value->image ? asset('storage/' . $value->image) : asset('front_assets/images/logo.png') }}"
                                        alt="Member Photo" class="img-fluid family-member-image"
                                        style="max-width: 100px; cursor: pointer;">

                                    <div class="image-change-wrapper d-none">
                                        <input type="file" name="user_image" class="family-image-input d-none" accept="image/*">
                                        <small class="d-block mt-2 text-primary change-image-trigger"
                                            style="cursor: pointer;">Change Image</small>
                                    </div>
                                </div>

                                <div class="col-md-10">
                                    <div class="row g-2">
                                        <div class="col-md-4">
                                            <label class="form-label">પ્રથમ નામ</label>
                                            <input type="text" name="f_first_name"
                                                class="form-control form-control-sm FEnglishInput required"
                                                value="{{ $value->name ?? '' }}" readonly>
                                            <input type="text" name="gu_f_first_name"
                                                class="form-control form-control-sm mt-1 FGujratiInput required"
                                                value="{{ $gu_value->name ?? '' }}" readonly tabindex="-1">
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label">મધ્ય નામ</label>
                                            <input type="text" name="f_middle_name"
                                                class="form-control form-control-sm FEnglishInput family-member-father-en required"
                                                value="{{ $value->father_name ?? '' }}" readonly>
                                            <input type="text" name="gu_f_middle_name"
                                                class="form-control form-control-sm mt-1 FGujratiInput family-member-father-gu required"
                                                value="{{ $gu_value->father_name ?? '' }}" readonly tabindex="-1">
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label">સબંધ</label>
                                            <input type="text" name="f_relation"
                                                class="form-control form-control-sm FEnglishInput family-member-relation-en required"
                                                value="{{ $value->relation ?? '' }}" readonly>
                                            <input type="text" name="gu_f_relation"
                                                class="form-control form-control-sm mt-1 FGujratiInput family-member-relation-gu required"
                                                value="{{ $gu_value->relation ?? '' }}" readonly tabindex="-1">
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label">વ્યવસાય</label>
                                            <input type="text" name="f_profession"
                                                class="form-control form-control-sm FEnglishInput family-member-profession-en required"
                                                value="{{ $value->profession ?? '' }}" readonly>
                                            <input type="text" name="gu_f_profession"
                                                class="form-control form-control-sm mt-1 FGujratiInput family-member-profession-gu required"
                                                value="{{ $gu_value->profession ?? '' }}" readonly tabindex="-1">
                                        </div>

                                        @php
                                            $phoneFormatted = isset($value->phoneno1)
                                                ? substr($value->phoneno1, 0, 5) . ' ' . substr($value->phoneno1, 5)
                                                : '';
                                        @endphp
                                        <div class="col-md-4">
                                            <label class="form-label">ફોન નં</label>
                                            <input type="text" name="f_phone_no"
                                                class="form-control form-control-sm family-member-phone required phone-number"
                                                value="{{ $phoneFormatted ?? '' }}" readonly maxlength="11">
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label">જન્મ તારીખ</label>
                                            <input type="date" name="f_dob"
                                                class="form-control form-control-sm family-member-dob required"
                                                value="{{ $value->dob ?? '' }}" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-end mt-3">
                                <button type="submit" class="btn btn-success btn-sm d-none save-btn">Save</button>
                            </div>
                        </div>
                    </div>
                </form>
            @endforeach
        </div>
    </div>
@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">
        var userAjax = '{{ route('user.ajax') }}';
        var translateLatest = '{{ route('translate.latest') }}';
        var translate = '{{ route('translate') }}';
        var csrfToken = $("[name=_token]").val();

        $(document).on('change', 'input[type="file"][name="user_image"]', function () {
            const input = this;
            const reader = new FileReader();

            reader.onload = function (e) {
                $(input).closest('.col-md-2').find('img').attr('src', e.target.result);
            };

            if (input.files && input.files[0]) {
                reader.readAsDataURL(input.files[0]);
            }
        });

        $(document).ready(function () {
            $('.edit-btn').on('click', function () {
                let card = $(this).closest('.card');
                card.find('input').removeAttr('readonly');
                card.find('.edit-btn').addClass('d-none');
                card.find('.save-btn, .close-btn').removeClass('d-none');

                // Show image change wrapper
                card.find('.image-change-wrapper').removeClass('d-none');
            });

            $('.close-btn').on('click', function () {
                let card = $(this).closest('.card');
                card.find('input').attr('readonly', true);
                card.find('.edit-btn').removeClass('d-none');
                card.find('.save-btn, .close-btn').addClass('d-none');

                // Hide image change wrapper
                card.find('.image-change-wrapper').addClass('d-none');
            });

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

                    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('input', '.phone-number', function () {
                let val = $(this).val().replace(/\s/g, '');
                let formatted = val.match(/.{1,5}/g);
                if (formatted) {
                    $(this).val(formatted.join(' '));
                }
            });

            var csrfToken = $("[name=_token").val();
            $('.englishText').on('input', function () {
                let text = $(this).val().trim();
                var count = $(this).attr('data-id');
                console.log('text', text);
                if (text === '') {
                    setInterval(() => {
                        $('.gujaratiOutput_' + count).val('');
                    }, 3000);
                    return;
                } else {
                    translateLangauge(text, count)
                }

            });

            async function translateLangauge(text, count) {
                $.ajax({
                    url: translateLatest,
                    type: 'POST',
                    data: {
                        '_token': csrfToken,
                        text: text,
                        source: 'en',
                        target: 'gu',
                        format: 'text',
                    },
                    success: function (data) {
                        $('.gujaratiOutput_' + count).val(data.transliteratedText || text);
                    },
                    error: function (err) {
                        $('.gujaratiOutput_' + count).val('Translation failed');
                    }
                });
            }

            $(document).on('input', '.field-en', function () {
                let englishText = $(this).val();
                let $gujaratiInput = $(this).closest('.col-md-4').find('.field-gu');

                if (englishText.trim() !== '') {
                    $.ajax({
                        url: translateLatest,
                        type: 'POST',
                        data: {
                            '_token': csrfToken,
                            text: englishText,
                            source: 'en',
                            target: 'gu',
                            format: 'text',
                        },
                        success: function (response) {
                            if (response.transliteratedText) {
                                $gujaratiInput.val(response.transliteratedText);
                            }
                        },
                        error: function () {
                            console.error('Translation API failed.');
                        }
                    });
                } else {
                    $gujaratiInput.val('');
                }
            });

            $(document).on('input', '.FEnglishInput', function () {
                let englishText = $(this).val();
                let $gujaratiInput = $(this).closest('.col-md-4').find('.FGujratiInput');

                if (englishText.trim() !== '') {
                    $.ajax({
                        url: translateLatest,
                        type: 'POST',
                        data: {
                            '_token': csrfToken,
                            text: englishText,
                            source: 'en',
                            target: 'gu',
                            format: 'text',
                        },
                        success: function (response) {
                            if (response.transliteratedText) {
                                $gujaratiInput.val(response.transliteratedText);
                            }
                        },
                        error: function () {
                            console.error('Translation API failed.');
                        }
                    });
                } else {
                    $gujaratiInput.val('');
                }
            });

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

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

            $('#main_user_form').ajaxForm(options);

            $('[id^=family_form_]').each(function () {
                $(this).ajaxForm(options);
            });
        });

        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("dashboard") }}';
            } 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).on('click', '.family-member-image, .change-image-trigger', function () {
            $(this).closest('.col-md-2').find('.family-image-input').click();
        });

        $(document).on('change', '.family-image-input', function () {
            const input = this;
            const reader = new FileReader();

            reader.onload = function (e) {
                $(input).closest('.col-md-2').find('img').attr('src', e.target.result);
            };

            if (input.files && input.files[0]) {
                reader.readAsDataURL(input.files[0]);
            }
        });
    </script>
@endsection