@php($displayLeadName = !empty($leadId) ? (($lead->full_name ?? '') !== '' ? ($lead->full_name ?? '') : ($lead->dba ?? '')) : '')
@php($pageTitle = !empty($pageTitle) ? $pageTitle . ($displayLeadName !== '' ? ' (' . $displayLeadName . ')' : '') : '')
<x-heading-sec :module="$pageTitle" :options="$headingOptions1 ?? []" />
@csrf
@if(!empty($leadId))
@method('PUT')
@endif
<!-- Dummy inputs to discourage browser autofill -->
<input type="text" name="_fake_username" autocomplete="off" class="visually-hidden-offscreen" tabindex="-1" />
<input type="password" name="_fake_password" autocomplete="new-password" class="visually-hidden-offscreen" tabindex="-1" />
<div class="">
    @include('admin.components.admin-form-wrapper')
</div>
<div class="row">
    <div class="col-lg-7 col-md-12 col-12">
        <div class="project-box mt-3">
            <div class="inner-tab ">
                <ul class="nav nav-tabs project-tab mb-20" id="myTab" role="tablist">
                    @if(!empty($formTabList) && count($formTabList) > 0)
                    @foreach($formTabList as $index => $tab) 
                    <li class="nav-item" role="presentation">
                        <button class="nav-link waves-effect {{ $index == $selectTabIndex ? 'active' : '' }} lead_tab" tab-id="{{ $index }}" id="profile-tab{{$tab->id}}"
                         data-bs-toggle="tab"  data-bs-toggle-top="tab"
                            data-bs-target="#profile-tab-pane{{$tab->id}}" type="button" role="tab" aria-controls="profile-tab-pane{{$tab->id}}"
                            aria-selected="false">{{ $tab->title }}</button>
                    </li>
                    @endforeach
                    @endif
                    <li class="sticky-tab sticky-tab-style">
                        <button class="nav-link waves-effect tab-counter" id="profile-tab-more" type="button"><span class="current-tab">1</span>/{{count($formTabList)}}</button>
                    </li>
                </ul>

                <div class="tab-content">
                    @if(!empty($allTabForm2) && count($allTabForm2) > 0)
                    @php($tabI = 0)
                    @foreach($allTabForm2 as $tabId => $fieldForm)
                    <div class="tab-pane fade {{ $selectTabIndex == $tabI ? 'show active' : '' }}" tabindex="{{$tabI}}" id="profile-tab-pane{{$tabId}}" role="tabpanel" aria-labelledby="profile-tab{{$tabId}}">

                        @if(@$fieldForm['tabInfo']->type == 1)
                        <div class="card-body mini-scroll-box">
                            @php($form = $fieldForm)
                            @include('admin.components.admin-form-wrapper')
                        </div>

                        @elseif(@$fieldForm['tabInfo']->type == 2)
                        <button type="button" class="mb-3 green-btn-inner waves-effect record_set_add_btn"
                            id="record_set_add_btn__{{$tabId}}" data-tabid="{{$tabId}}">
                            <i class="bx {{ $submitIcon ?? 'bx-plus' }}"></i> Add {{$fieldForm['tabInfo']->title ?? ''}} <span class="record-count d-none"></span>
                        </button>

                        <div class="record-set-container sortable-container" id="record_set_container__{{$tabId}}">
                            <!-- Existing records will be rendered here -->
                        </div>

                        <!-- Template for the form to be cloned -->
                        <div class="d-none" id="record_set_template__{{$tabId}}">
                            <div class="card record_set_form mb-4" data-index="__INDEX__">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0 d-flex align-items-center collapsible-title" data-bs-toggle="collapse" data-bs-target="#collapse__INDEX__{{$tabId}}" aria-expanded="true" style="cursor: pointer;">
                                        <i class="bx bx-menu drag-handle"></i>
                                        <i class="bx bx-chevron-down collapse-indicator"></i>
                                        {{$fieldForm['tabInfo']->title ?? ''}} #__INDEX__
                                    </h5>
                                    <button type="button" class="btn btn-sm btn-danger record-set-remove">
                                        <i class="bx bx-trash"></i>
                                    </button>
                                </div>
                                <div id="collapse__INDEX__{{$tabId}}" class="collapse show">
                                    <div class="card-body mini-scroll-box">
                                        @php($form = $fieldForm)
                                        @include('admin.components.admin-form-wrapper')
                                        <input type="hidden" data-name="leadRecord[{{$tabId}}][__INDEX__][__display_order]" value="__INDEX__" class="display-order-input" />
                                        <input type="hidden" data-name="leadRecord[{{$tabId}}][__INDEX__][__record_set_uid]" value="" class="record-set-uid-input" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif

                    </div>
                    @php($tabI++)
                    @endforeach
                    @endif
                </div> <!-- End of tab-content -->

                <hr>


                @if(!empty($formTabListBottom) && count($formTabListBottom) > 0)
                    <ul class="nav nav-tabs project-tab mb-20" id="myTab" role="tablist">
                        @foreach($formTabListBottom as $index => $tab)
                        <li class="nav-item" role="presentation">
                            <button class="nav-link waves-effect {{ $index == $selectTabIndexBottom ? 'active' : '' }} lead_tab_bottom" tab-id="{{ $index }}" id="profile-tab{{$tab->id}}" 
                            data-bs-toggle="tab" data-bs-toggle-bottom="tab"
                                data-bs-target="#profile-tab-pane{{$tab->id}}" type="button" role="tab" aria-controls="profile-tab-pane{{$tab->id}}"
                                aria-selected="false">{{ $tab->title }}</button>
                        </li>
                        @endforeach
                        <li class="sticky-tab sticky-tab-style">
                            <button class="nav-link waves-effect tab-counter-bottom" id="profile-tab-more" type="button"><span class="current-tab">1</span>/{{count($formTabListBottom)}}</button>
                        </li>
                    </ul>

                    <div class="tab-content">
                        @if(!empty($allTabForm2Bottom) && count($allTabForm2Bottom) > 0)
                        @php($tabI = 0)
                        @foreach($allTabForm2Bottom as $tabId => $fieldForm)
                                                <div class="tab-pane fade {{ $selectTabIndexBottom == $tabI ? 'show active' : '' }}" tabindex="{{$tabI}}" id="profile-tab-pane{{$tabId}}" role="tabpanel" aria-labelledby="profile-tab{{$tabId}}">

                            @if(@$fieldForm['tabInfo']->type == 1)
                            <div class="card-body mini-scroll-box">
                                @php($form = $fieldForm)
                                @include('admin.components.admin-form-wrapper')
                            </div>

                            @elseif(@$fieldForm['tabInfo']->type == 2)
                            <button type="button" class="mb-3 green-btn-inner waves-effect record_set_add_btn"
                                id="record_set_add_btn__{{$tabId}}" data-tabid="{{$tabId}}">
                                <i class="bx {{ $submitIcon ?? 'bx-plus' }}"></i> Add {{$fieldForm['tabInfo']->title ?? ''}} <span class="record-count d-none"></span>
                            </button>

                            <div class="record-set-container sortable-container" id="record_set_container__{{$tabId}}">
                                <!-- Existing records will be rendered here -->
                            </div>

                            <!-- Template for the form to be cloned -->
                            <div class="d-none" id="record_set_template__{{$tabId}}">
                                <div class="card record_set_form mb-4" data-index="__INDEX__">
                                    <div class="card-header d-flex justify-content-between align-items-center">
                                        <h5 class="mb-0 d-flex align-items-center collapsible-title" data-bs-toggle="collapse" data-bs-target="#collapse__INDEX__{{$tabId}}" aria-expanded="true" style="cursor: pointer;">
                                            <i class="bx bx-menu drag-handle"></i>
                                            <i class="bx bx-chevron-down collapse-indicator"></i>
                                            {{$fieldForm['tabInfo']->title ?? ''}} #__INDEX__
                                        </h5>
                                        <button type="button" class="btn btn-sm btn-danger record-set-remove">
                                            <i class="bx bx-trash"></i>
                                        </button>
                                    </div>
                                    <div id="collapse__INDEX__{{$tabId}}" class="collapse show">
                                        <div class="card-body mini-scroll-box">
                                            @php($form = $fieldForm)
                                            @include('admin.components.admin-form-wrapper')
                                            <input type="hidden" data-name="leadRecord[{{$tabId}}][__INDEX__][__display_order]" value="__INDEX__" class="display-order-input" />
                                            <input type="hidden" data-name="leadRecord[{{$tabId}}][__INDEX__][__record_set_uid]" value="" class="record-set-uid-input" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif

                        </div>
                        @php($tabI++)
                        @endforeach
                        @endif
                    </div> <!-- End of tab-content -->
                @endif
            </div> <!-- End of inner-tab -->
        </div>
    </div>
    <div class="col-lg-5 col-md-12 col-12">
        <div class="project-box mt-3">
            @if(!empty($leadId))
            @include('admin.leads.partials.assigned_users_actions')
            @endif
            @if(empty($leadId))
            <button type="submit" class="mb-3 green-btn-inner waves-effect w-100 main-lead-submit disabled-effect" disabled><i class="bx {{ $submitIcon ?? 'bx-plus' }}"></i> {{ $submitLabel ?? 'Create Lead' }}</button>
            @endif

            @if(!empty($form3) || !empty($form4))
            @include('admin.leads.partials.details_events_sections')
            @endif
        </div>
    </div>
</div>

@push('page_script')
<script>
    $(document).ready(function() {
        $(".input-mask").inputmask();

        $('.lead_tab').on('click', function(e) {
            var tabId = e.target.getAttribute('tab-id');
            // alert('Tab activated: ' + e.target.getAttribute('tab-id'));
            if (tabId) {
                const url = new URL(window.location.href);
                url.searchParams.set('tabIndex', tabId);
                window.history.replaceState({}, '', url);
            }
        });
        $('.lead_tab_bottom').on('click', function(e) {
            var tabId = e.target.getAttribute('tab-id');
            // alert('Tab activated: ' + e.target.getAttribute('tab-id'));
            if (tabId) {
                const url = new URL(window.location.href);
                url.searchParams.set('tabIndexB', tabId);
                window.history.replaceState({}, '', url);
            }
        });
    });
</script>
@endpush