@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 ?? []" />
<!-- <div id="lead-status-subtitle"
     class="lead-status-subtitle text-muted mb-2"
     style="{{ ($currentStatusTitle ?? '') ? '' : 'display:none;' }}">
    {{ $currentStatusTitle ?? '' }}
</div> -->
@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 lead-form-row">
    <div class="col-lg-7 col-md-12 col-12">
        {{-- ── TOP LEFT CARD ── --}}
        <div class="card lead-card lead-card-top mt-3">
            <div class="card-header lead-card-header d-flex justify-content-between align-items-center p-0">
                <ul class="nav nav-tabs project-tab mb-0 flex-grow-1" 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>
            <div class="card-body p-0">
                <div class="tab-content">
                    @if(!empty($allTabForm2) && count($allTabForm2) > 0)
                    @php($tabI = 0)
                    @foreach($allTabForm2 as $tabId => $fieldForm)
                    @php($tabTitle = strtolower(trim($fieldForm['tabInfo']->title ?? '')))
                    @php($tabType = (int)($fieldForm['tabInfo']->type ?? 1))
                    <div class="tab-pane fade {{ $selectTabIndex == $tabI ? 'show active' : '' }}" tabindex="{{$tabI}}" id="profile-tab-pane{{$tabId}}" role="tabpanel" aria-labelledby="profile-tab{{$tabId}}">

                        @if($tabTitle === 'e-sign' && !empty($leadId))
                            {{-- E-Sign custom tab content --}}
                            @include('admin.leads.partials.esign_tab_content')
                        @elseif($tabTitle === 'web forms' && !empty($leadId))
                            {{-- Web Forms custom tab content --}}
                            @include('admin.leads.partials.webforms_tab_content')
                        @elseif($tabTitle === 'e-sign' || $tabTitle === 'web forms')
                            {{-- E-Sign / Web Forms on create mode: show placeholder --}}
                            <div class="card-body text-center text-muted py-4">
                                <p>Save the lead first to access {{ $fieldForm['tabInfo']->title ?? '' }}.</p>
                            </div>
                        @elseif($tabType == 1)
                        <div class="card-body mini-scroll-box">
                            @php($form = $fieldForm)
                            @include('admin.components.admin-form-wrapper')
                        </div>

                        @elseif($tabType == 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>

                        @else
                            {{-- Tab types 3-7 (Custom Documents, Funding, Custom Notes, Payments, Invoices) --}}
                            <div class="card-body mini-scroll-box">
                                @php($form = $fieldForm)
                                @include('admin.components.admin-form-wrapper')
                            </div>
                        @endif

                    </div>
                    @php($tabI++)
                    @endforeach
                    @endif
                </div> <!-- End of tab-content -->
            </div>
        </div> {{-- End TOP LEFT CARD --}}

        {{-- ── BOTTOM LEFT CARD ── --}}
        @if(!empty($leadId) && !empty($formTabListBottom) && count($formTabListBottom) > 0)
        <div class="card lead-card lead-card-bottom mt-3">
            <div class="card-header lead-card-header d-flex justify-content-between align-items-center p-0">
                <ul class="nav nav-tabs project-tab mb-0 flex-grow-1" id="myTabBottom" 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">@if(strtolower(trim($tab->title)) === 'notes' && !empty($leadId)){{ $tab->title }} ({{ \App\Models\Leads\LeadNote::where('lead_id', $leadId)->whereNull('parent_id')->count() }})@else{{ $tab->title }}@endif</button>
                    </li>
                    @endforeach
                    <li class="sticky-tab sticky-tab-style">
                        <button class="nav-link waves-effect tab-counter-bottom" id="profile-tab-more-bottom" type="button"><span class="current-tab">1</span>/{{count($formTabListBottom)}}</button>
                    </li>
                </ul>
            </div>
            <div class="card-body p-0">
                    <div class="tab-content">
                        @if(!empty($allTabForm2Bottom) && count($allTabForm2Bottom) > 0)
                        @php($tabI = 0)
                        @foreach($allTabForm2Bottom as $tabId => $fieldForm)
                        @php($tabTitleB = strtolower(trim($fieldForm['tabInfo']->title ?? '')))
                        @php($tabTypeB = (int)($fieldForm['tabInfo']->type ?? 1))
                        <div class="tab-pane fade {{ $selectTabIndexBottom == $tabI ? 'show active' : '' }}" tabindex="{{$tabI}}" id="profile-tab-pane{{$tabId}}" role="tabpanel" aria-labelledby="profile-tab{{$tabId}}">

                            @if($tabTitleB === 'e-sign' && !empty($leadId))
                                @include('admin.leads.partials.esign_tab_content')
                            @elseif($tabTitleB === 'web forms' && !empty($leadId))
                                @include('admin.leads.partials.webforms_tab_content')
                            @elseif($tabTitleB === 'notes' && !empty($leadId))
                                @include('admin.leads.partials.notes_tab', ['leadId' => $leadId])
                            @elseif($tabTitleB === 'tickets' && !empty($leadId))
                                @include('admin.leads.partials.tickets_tab', ['leadId' => $leadId])
                            @elseif($tabTitleB === 'e-sign' || $tabTitleB === 'web forms' || $tabTitleB === 'notes' || $tabTitleB === 'tickets')
                                <div class="card-body text-center text-muted py-4">
                                    <p>Save the lead first to access {{ $fieldForm['tabInfo']->title ?? '' }}.</p>
                                </div>
                            @elseif($tabTypeB == 1)
                            <div class="card-body mini-scroll-box">
                                @php($form = $fieldForm)
                                @include('admin.components.admin-form-wrapper')
                            </div>

                            @elseif($tabTypeB == 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>

                            @else
                                <div class="card-body mini-scroll-box">
                                    @php($form = $fieldForm)
                                    @include('admin.components.admin-form-wrapper')
                                </div>
                            @endif

                        </div>
                        @php($tabI++)
                        @endforeach
                        @endif
                    </div> <!-- End of tab-content -->
            </div>
        </div> {{-- End BOTTOM LEFT CARD --}}
        @endif
    </div>
    <div class="col-lg-5 col-md-12 col-12">
        @php($rightCardContentMap = [
            'assigned users' => 'admin.leads.partials.assigned_users_actions',
            'activity'       => null,
            'actions'        => 'admin.leads.partials.actions_content',
            'proposals'      => 'admin.leads.partials.proposals_content',
            'details'        => 'admin.leads.partials.details_section_content',
            'equipment orders' => 'admin.leads.partials.equipment_orders_section',
            'e-sign'         => 'admin.leads.partials.esign_section',
            'events'         => 'admin.leads.partials.events_section_content',
        ])

        @if(empty($leadId))
            <button type="submit" class="green-btn-inner waves-effect w-100 main-lead-submit disabled-effect mt-3 mb-0" disabled>
                <i class="bx {{ $submitIcon ?? 'bx-plus' }}"></i> {{ $submitLabel ?? 'Create Lead' }}
            </button>
        @endif

        @php($rightPanelCards = !empty($leadId)
            ? ['formTabListR1' => 'rightCard1', 'formTabListR2' => 'rightCard2', 'formTabListR3' => 'rightCard3', 'formTabListR4' => 'rightCard4']
            : ['formTabListR3' => 'rightCard3']
        )
        @foreach($rightPanelCards as $tabListVar => $cardId)
        @php($rightTabs = $$tabListVar ?? collect())
        @if(empty($leadId) && $tabListVar === 'formTabListR3')
            @php($rightTabs = $rightTabs->filter(fn($t) => strtolower(trim($t->title)) === 'details')->values())
        @endif
        @if($rightTabs->count() > 0)
        <div class="card lead-card lead-card-right mt-3">
            {{-- Card header with tabs + collapse chevron --}}
            <div class="card-header p-0 bg-white border-bottom d-flex justify-content-between align-items-center">
                <ul class="nav nav-tabs small card-header-tabs flex-grow-1 ps-2" role="tablist">
                    @foreach($rightTabs as $rIdx => $rTab)
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {{ $rIdx === 0 ? 'active' : '' }} waves-effect" id="rtab-{{ $rTab->id }}"
                            data-bs-toggle="tab" data-bs-target="#rtab-pane-{{ $rTab->id }}" type="button"
                            role="tab">{{ $rTab->title }}</button>
                    </li>
                    @endforeach
                </ul>
                <a href="javascript:void(0)" class="px-3 text-muted" data-bs-toggle="collapse" data-bs-target="#{{ $cardId }}Collapse">
                    <i class="bx bx-chevron-down"></i>
                </a>
            </div>
            {{-- Card body with tab content --}}
            <div id="{{ $cardId }}Collapse" class="collapse show">
                <div class="card-body p-2">
                    {{-- Create Lead button moved above right panel cards for create mode --}}
                    <div class="tab-content">
                        @foreach($rightTabs as $rIdx => $rTab)
                        @php($rTabKey = strtolower(trim($rTab->title)))
                        <div class="tab-pane fade {{ $rIdx === 0 ? 'show active' : '' }}" id="rtab-pane-{{ $rTab->id }}" role="tabpanel">
                            @if(isset($rightCardContentMap[$rTabKey]) && $rightCardContentMap[$rTabKey])
                                @include($rightCardContentMap[$rTabKey])
                            @else
                                <div class="text-muted small py-3 text-center">{{ $rTab->title }} content coming soon.</div>
                            @endif
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        @endif
        @endforeach
    </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');
            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');
            if (tabId) {
                const url = new URL(window.location.href);
                url.searchParams.set('tabIndexB', tabId);
                window.history.replaceState({}, '', url);
            }
        });

        // Tab State Persistence (sessionStorage)
        var leadId = (window.LeadPageConfig && window.LeadPageConfig.leadId) || '0';
        var LEAD_TAB_KEY = 'leadTabState_' + leadId;

        function getTabZoneKey($nav) {
            var $rightCard = $nav.closest('.lead-card-right');
            if ($rightCard.length) {
                var collapseId = $rightCard.find('.collapse').attr('id');
                if (collapseId) return collapseId;
            }
            var navId = $nav.attr('id');
            if (navId) return navId;
            return null;
        }

        function saveTabState() {
            var state = {};
            $('.nav-tabs').each(function() {
                var $nav = $(this);
                var $active = $nav.find('.nav-link.active');
                if ($active.length && $active.attr('id')) {
                    var zoneKey = getTabZoneKey($nav);
                    if (zoneKey) {
                        state[zoneKey] = $active.attr('id');
                    }
                }
            });
            try { sessionStorage.setItem(LEAD_TAB_KEY, JSON.stringify(state)); } catch(e) {}
        }

        function restoreTabState() {
            var raw;
            try { raw = sessionStorage.getItem(LEAD_TAB_KEY); } catch(e) { return; }
            if (!raw) return;
            try {
                var state = JSON.parse(raw);
                Object.keys(state).forEach(function(zoneKey) {
                    var btnId = state[zoneKey];
                    var el = document.getElementById(btnId);
                    if (el) {
                        var tab = new bootstrap.Tab(el);
                        tab.show();
                    }
                });
            } catch(e) {}
        }

        restoreTabState();

        $('body').on('shown.bs.tab', 'button[data-bs-toggle="tab"], a[data-bs-toggle="tab"]', function() {
            saveTabState();
        });
    });
</script>
@endpush