{{-- Extends layout --}}
@extends(getThemeBasePath())
@section('page_title')
{{$page_title}}
@endsection
{{-- Content --}}
@section('content')
<form class="form" method="post" action="{{$action}}" id="manage_form" enctype="multipart/form-data">
    @if(!empty($data['id']))
    @method('PUT')
    @endif
    @csrf
    <div class="card shadow-sm">
        <!--begin::Card header-->
        <div class="card-header card-header-tabs-line nav-tabs-line-3x">
            <!--begin::Toolbar-->
            <div class="card-toolbar">
                <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0">
                    <!--begin::Item-->
                    <li class="nav-item me-3">
                        <a class="nav-link active" data-bs-toggle="tab" href="#kt_user_edit_tab_1">
                            <span class="nav-icon">
                                <i class="fa fa-list"></i>
                            </span>
                            <span class="nav-text font-size-lg">Profile</span>
                        </a>
                    </li>
                    <!--end::Item-->
                    <!--begin::Item-->
                    <li class="nav-item me-3">
                        <a class="nav-link" data-bs-toggle="tab" href="#kt_user_edit_tab_2">
                            <span class="nav-icon">
                                <i class="fa fa-list"></i>
                            </span>
                            <span class="nav-text font-size-lg">Details</span>
                        </a>
                    </li>
                    <!--end::Item-->
                    <!--begin::Item-->
                    <li class="nav-item me-3">
                        <a class="nav-link" data-bs-toggle="tab" href="#kt_user_edit_tab_3">
                            <span class="nav-icon">
                                <i class="fa fa-list"></i>
                            </span>
                            <span class="nav-text font-size-lg">Health Information</span>
                        </a>
                    </li>
                    <!--end::Item-->
                    <!--begin::Item-->
                    <li class="nav-item me-3">
                        <a class="nav-link" data-bs-toggle="tab" href="#kt_user_edit_tab_4">
                            <span class="nav-icon">
                                <i class="fa fa-list"></i>
                            </span>
                            <span class="nav-text font-size-lg">Other Needs</span>
                        </a>
                    </li>
                    <!--end::Item-->
                    <!--begin::Item-->
                    <li class="nav-item me-3">
                        <a class="nav-link" data-bs-toggle="tab" href="#kt_user_edit_tab_5">
                            <span class="nav-icon">
                                <i class="fa fa-list"></i>
                            </span>
                            <span class="nav-text font-size-lg">State Clinical Services Manager</span>
                        </a>
                    </li>
                    <!--end::Item-->
                    <!--begin::Item-->
                    <li class="nav-item me-3">
                        <a class="nav-link" data-bs-toggle="tab" href="#kt_user_edit_tab_6">
                            <span class="nav-icon">
                                <i class="fa fa-list"></i>
                            </span>
                            <span class="nav-text font-size-lg">Action Plan</span>
                        </a>
                    </li>
                    <!--end::Item-->
                    @if(!empty($data['id']))
                    <!--begin::Item-->
                    <li class="nav-item me-3">
                        <a class="nav-link" data-bs-toggle="tab" href="#kt_user_edit_tab_7">
                            <span class="nav-icon">
                                <i class="fa fa-list"></i>
                            </span>
                            <span class="nav-text font-size-lg">Shared Participant History</span>
                        </a>
                    </li>
                    <!--end::Item-->
                    @endif
                </ul>
            </div>
            <!--end::Toolbar-->
        </div>
        <!--end::Card header-->
        <!--begin::Card body-->
        <div class="card-body">

            <div class="tab-content">
                <!--begin::Tab-->
                <div class="tab-pane show active" id="kt_user_edit_tab_1" role="tabpanel">
                    @include('backend.client.tab_1')
                </div>
                <!--end::Tab-->
                <!--begin::Tab-->
                <div class="tab-pane show" id="kt_user_edit_tab_2" role="tabpanel">
                    @include('backend.client.tab_2')
                </div>
                <!--end::Tab-->
                <!--begin::Tab-->
                <div class="tab-pane show" id="kt_user_edit_tab_3" role="tabpanel">
                    @include('backend.client.tab_3')
                </div>
                <!--end::Tab-->
                <!--begin::Tab-->
                <div class="tab-pane show" id="kt_user_edit_tab_4" role="tabpanel">
                    @include('backend.client.tab_4')
                </div>
                <!--end::Tab-->
                <!--begin::Tab-->
                <div class="tab-pane show" id="kt_user_edit_tab_5" role="tabpanel">
                    @include('backend.client.tab_5')
                </div>
                <!--end::Tab-->
                <!--begin::Tab-->
                <div class="tab-pane show" id="kt_user_edit_tab_6" role="tabpanel">
                    @include('backend.client.tab_6')
                </div>
                <!--end::Tab-->
                @if(!empty($data['id']))
                <!--begin::Tab-->
                <div class="tab-pane show" id="kt_user_edit_tab_7" role="tabpanel">
                    @include('backend.client.tab_7')
                </div>
                <!--end::Tab-->
                @endif
            </div>
        </div>
        <!--begin::Card body-->
        <div class="card-footer text-right">
            <button type="buton" class="btn btn-primary me-2 btn-hover-rise" id="submit_btn" onclick="submitForm()">Submit</button>
            <a href="{{route('participants.index')}}"><button type="button" class="btn btn-secondary btn-hover-rise">Cancel</button></a>
        </div>
    </div>
    <!--end::Card-->
</form>
<!--begin::Card-->
@endsection

{{-- Scripts Section --}}
@section('scripts')
    {!! $html->scripts() !!}
@include('backend.client.map')
<script type="text/template" id="template_1">
    <tr>
    <td>
        <select class="form-control form-control-lg form-control-solid shared_client_id form-select" name="shared_clients[<%= i %>][client_id]">
            <option value="">Select</option>
            @foreach($shared_clients_list as $cid => $cname)
            <option value="{{$cid}}">{{$cname}}</option>
            @endforeach
        </select>
    </td>
    <td class="text-center">
        <input type="hidden" class="" value="0" name="shared_clients[<%= i %>][is_skip_cron]" />
        <input class="form-check-input skip_shift_case_note_check mt-2" type="checkbox" value="1" name="shared_clients[<%= i %>][is_skip_cron]" />
    </td>
    <td class="text-center">Enabled</td>
    <td class="text-center">
        <a href="javascript:;" class="btn btn-icon btn-sm btn-warning remove_shared_client" data-toggle="tooltip" data-placement="top" title="" data-original-title="Remove Client" data-card-type="soft">
            <i class="fa fa-times icon-nm"></i>
        </a>
    </td>
</tr>
</script>
<script src="{{asset('js/underscore-umd-min.js')}}" type="text/javascript"></script>
<script type="text/javascript">
    jQuery.validator.addMethod("xeroEmail", function(value, element) {
        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return this.optional(element) || re.test(String(value).toLowerCase());
    }, "Please enter a valid email address.");

    var sharedClientCount = 0;
    function bindRadiusToggle() {
        var checkbox = document.querySelector('input[name="skip_location_check"]');
        var radiusWrap = document.getElementById('radius_field_wrap');
        if (!checkbox || !radiusWrap) return;

        function toggleRadius() {
            radiusWrap.style.display = checkbox.checked ? 'none' : '';
        }

        checkbox.addEventListener('change', toggleRadius);
        toggleRadius();
    }

    $(document).ready(function() {
        bindRadiusToggle();

        $('#kt_header_menu_wrapper').attr('style', 'visibility:hidden;');
        $('#manage_form').validate({
            ignore: [],
            rules: {
                'client[xero_email]': {
                    xeroEmail: true
                }
            },
            invalidHandler: function(form, validator) {
                var errors = validator.numberOfInvalids();
                if (errors && errors > 0) {
                    $.each(validator.errorList, function(index, errorData) {
                        if (index == 0) {
                            $(errorData['element']).focus();
                        }
                        // console.log(index, errorData)
                    })
                }
                $(".tab-content").find('.tab-pane:not(.active) .text-danger:not([style*="display: none"]):first').each(function(index, tab) {
                    var id = $(tab).parents('.tab-pane:first').attr("id");
                    // console.log(id)
                    $('a[href="#' + id + '"]').tab('show');
                });
            }
        });
        sharedClientCount = $('#shared_client_tbl .shared_client_id').length;
        hideShowSharedClientSection();
    });

    function submitForm() {
        if ($('#manage_form').valid()) {
            $('#manage_form').submit();
        }
    }

    $(document).on('click', '.active_shared_client', function() {
        $this = $(this);
        let cardType = $this.attr('data-card-type');

        if (cardType == "soft") {
            $(this).parents('tr:first').remove();
            hideShowSelectedOptions();
        }
        if (cardType == "hard") {
            let client_id = $this.attr('data-client_id');
            let shared_client_id = $this.attr('data-shared_client_id');

            deleteAlert['text'] = "Are you sure you want to add this Participant?";
            deleteAlert['confirmButtonText'] = "Yes, Add!";

            Swal.fire(deleteAlert).then(function(result) {
                if (result.value && client_id && shared_client_id) {
                    $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            client_id: client_id,
                            shared_client_id: shared_client_id,
                            status: 1,
                            "_token": "{{ csrf_token() }}",
                        },
                        url: "{!! route('participants.change_shared_client_status') !!}",
                        success: function(data) {
                            if (data.status) {
                                deleteSuccessAlert['text'] = "Participant added successfully!";
                                Swal.fire(deleteSuccessAlert);
                                window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                                $this.parents('.shared_client_row').find('.shared_client_status').text("Enabled");
                                $this.parents('.shared_client_row').find('.remove_shared_client').removeClass("d-none");
                                $this.addClass("d-none");
                                hideShowSelectedOptions();
                            }else{
                                errorAlert['text'] = data.message;
                                Swal.fire(errorAlert);
                            }
                        }
                    });
                }
            });   
        }
    });
    
    $(document).on('click', '.remove_shared_client', function() {
        $this = $(this);
        let cardType = $this.attr('data-card-type');

        if (cardType == "soft") {
            $(this).parents('tr:first').remove();
            hideShowSelectedOptions();
        }
        if (cardType == "hard") {
            let client_id = $this.attr('data-client_id');
            let shared_client_id = $this.attr('data-shared_client_id');

            deleteAlert['text'] = "Are you sure you want to remove this Participant?";
            deleteAlert['confirmButtonText'] = "Yes, Remove!";

            Swal.fire(deleteAlert).then(function(result) {
                if (result.value && client_id && shared_client_id) {
                    $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            client_id: client_id,
                            shared_client_id: shared_client_id,
                            status: 0,
                            "_token": "{{ csrf_token() }}",
                        },
                        url: "{!! route('participants.change_shared_client_status') !!}",
                        success: function(data) {
                            if (data.status) {
                                deleteSuccessAlert['text'] = "Participant removed successfully!";
                                Swal.fire(deleteSuccessAlert);
                                window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                                hideShowSelectedOptions();
                                $this.parents('.shared_client_row').find('.shared_client_status').text("Disabled");
                                $this.parents('.shared_client_row').find('.active_shared_client').removeClass("d-none");
                                $this.addClass("d-none");
                            }else{
                                errorAlert['text'] = data.message;
                                Swal.fire(errorAlert);
                            }
                        }
                    });
                }
            });   
        }
    });
    $(document).on('click', '.add_shared_client', function() {
        let count = sharedClientCount;
        let template = $("#template_1").html();
        let newTr = _.template(template);
        $('#shared_client_tbl tbody').append(newTr({
            'i': (count)
        }));
        hideShowSelectedOptions();
        sharedClientCount++;
    });
    $(document).on('change', '.shared_client_id', function() {
        hideShowSelectedOptions();
    });
    $(document).on('change', '#client_type', function() {
        hideShowSharedClientSection();
    });


    function hideShowSelectedOptions() {
        let count = $('#shared_client_tbl .shared_client_id').length;
        $('#shared_count').val(count);
        $('#shared_client_tbl .shared_client_id option').each(function() {
            $(this).removeClass('d-none');
        });
        $('#shared_client_tbl .shared_client_id').each(function() {
            let _self = $(this);
            let selected = $(this).find('option:selected').attr('value');
            // console.log(_self, selected)
            $('#shared_client_tbl .shared_client_id').not(_self).each(function() {
                // $(this).find('option').removeClass('d-none');
                $(this).find('option[value="' + selected + '"]').addClass('d-none');
            });
        });
    }

    function hideShowSharedClientSection() {
        let type = $('#client_type').find('option:selected').attr('value');
        if (type == 0) {
            $('.shared_client_section select').removeClass('required');
            $('.shared_client_section').addClass('d-none');

            $('.is_skip_cron_div').removeClass('d-none');
        } else {
            $('.shared_client_section select').addClass('required');
            $('.shared_client_section').removeClass('d-none');
            window.LaravelDataTables["dataTableBuilder"].ajax.reload();

            $('.is_skip_cron_div').addClass('d-none');
        }
    }
</script>

@if($is_xero_invoice_method ?? false)
<script type="text/javascript">
    var _isAddForm = {{ empty($data['id']) ? 'true' : 'false' }};
    var _xeroFetchTimer = null;
    var _emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    // Auto-fetch on xero email blur for Add form only
    $(document).on('blur', '#xero_email_input', function() {
        if (!_isAddForm) return;
        clearTimeout(_xeroFetchTimer);
        _xeroFetchTimer = setTimeout(function() {
            triggerXeroFetch(false);
        }, 300);
    });

    // Fetch Contacts From XERO button click
    $(document).on('click', '#btn_fetch_xero_contacts', function() {
        triggerXeroFetch(true);
    });

    function triggerXeroFetch(showErrors) {
        var email = $('#xero_email_input').val().trim();
        var participantName = $('input[name="client[name]"]').val() ? $('input[name="client[name]"]').val().trim() : '';

        if (!email) {
            if (showErrors) showXeroMessage('Please enter a XERO Email address first.', 'danger');
            return;
        }
        if (!_emailRegex.test(email)) {
            if (showErrors) showXeroMessage('Please enter a valid email address.', 'danger');
            return;
        }

        var $btn = $('#btn_fetch_xero_contacts');
        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Fetching...');
        $('#xero_contacts_result').show();
        $('#xero_contacts_list').html('');
        showXeroMessage('Fetching contacts from XERO...', 'info');

        $.ajax({
            url: '{{ route("participants.fetch_xero_contacts") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                xero_email: email,
                participant_name: participantName,
                participant_id: '{{ $data["id"] ?? "" }}'
            },
            dataType: 'json',
            success: function(response) {
                $btn.prop('disabled', false).html('<i class="fa fa-search"></i> Fetch Contacts From XERO');
                if (response.status && response.contacts && response.contacts.length > 0) {
                    showXeroMessage(response.message, 'success');
                    renderXeroContacts(response.contacts);
                } else if (response.status && (!response.contacts || response.contacts.length === 0)) {
                    showXeroMessage(response.message || 'No contacts found in XERO for this email.', 'warning');
                    $('#xero_contacts_list').html('');
                } else {
                    showXeroMessage(response.message || 'Failed to fetch contacts.', 'danger');
                    $('#xero_contacts_list').html('');
                }
            },
            error: function(xhr) {
                $btn.prop('disabled', false).html('<i class="fa fa-search"></i> Fetch Contacts From XERO');
                showXeroMessage('An error occurred while connecting to XERO. Please try again.', 'danger');
                $('#xero_contacts_list').html('');
            }
        });
    }

    function showXeroMessage(message, type) {
        var alertClass = 'alert-' + type;
        $('#xero_contacts_message').html(
            '<div class="alert ' + alertClass + ' py-2 px-3 mb-2">' + message + '</div>'
        );
        $('#xero_contacts_result').show();
    }

    function renderXeroContacts(contacts) {
        var html = '<div class="table-responsive"><table class="table table-bordered table-sm">';
        html += '<thead><tr><th style="width:50px;"></th><th>Contact Name</th><th>Email</th><th>Phone Number</th></tr></thead>';
        html += '<tbody>';

        var firstAvailableSelected = false;
        $.each(contacts, function(index, contact) {
            var isLinked = contact.linked_participant ? true : false;
            var checked = '';
            if (!isLinked && !firstAvailableSelected) {
                checked = 'checked';
                firstAvailableSelected = true;
            }

            html += '<tr' + (isLinked ? ' class="table-warning"' : '') + '>';
            html += '<td class="text-center"><input type="radio" name="xero_contact_selection" class="form-check-input xero_contact_radio" value="' + index + '" ' + checked + ' ';
            if (isLinked) html += 'disabled ';
            html += 'data-contact-id="' + (contact.contact_id || '') + '" ';
            html += 'data-contact-name="' + escapeHtml(contact.name || '') + '" ';
            html += 'data-contact-email="' + escapeHtml(contact.email || '') + '" ';
            html += 'data-contact-phone="' + escapeHtml(contact.phone || '') + '" ';
            html += '/></td>';
            html += '<td>' + escapeHtml(contact.name || '-');
            if (isLinked) {
                html += '<br><small class="text-danger"><i class="fa fa-exclamation-triangle"></i> Contact is not allowed to link with this participant as it is already linked with <strong>' + escapeHtml(contact.linked_participant) + '</strong>.</small>';
            }
            html += '</td>';
            html += '<td>' + escapeHtml(contact.email || '-') + '</td>';
            html += '<td>' + escapeHtml(contact.phone || '-') + '</td>';
            html += '</tr>';
        });

        html += '</tbody></table></div>';
        $('#xero_contacts_list').html(html);

        // Auto-select first available radio and update hidden fields
        if (firstAvailableSelected) {
            updateXeroHiddenFields();
        }
    }

    // When radio selection changes, update hidden fields
    $(document).on('change', '.xero_contact_radio', function() {
        updateXeroHiddenFields();
    });

    function updateXeroHiddenFields() {
        var $selected = $('input[name="xero_contact_selection"]:checked');
        if ($selected.length > 0) {
            $('#xero_uuid_input').val($selected.data('contact-id'));
            $('#xero_contact_name_input').val($selected.data('contact-name'));
            $('#xero_contact_email_input').val($selected.data('contact-email'));
            $('#xero_contact_phone_input').val($selected.data('contact-phone'));
        }
    }

    function escapeHtml(text) {
        var div = document.createElement('div');
        div.appendChild(document.createTextNode(text));
        return div.innerHTML;
    }

    $(document).ready(function() {
        $('.nav-tabs a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
            var target = $(e.target).attr("href") // activated tab
            if (target == "#kt_user_edit_tab_7") {
                window.LaravelDataTables["dataTableBuilder"].ajax.reload();
            }
        });
    });
</script>
@endif
@endsection