@php(
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    )
)
@php($headingOptions = [
    '<a href="' . route('my-merchants.index') . '" class="'. \Config::get('view.buttons.secondary') .'"><i class="' . \Config::get('settings.icon_back') . '"></i> Back</a>',
])
@extends('admin.layouts.layout', $headerOption)
@section('content')
<div class="col-12">
    <x-heading-sec :module="'Merchant Details (' . ($data->dba ?? $data->legal_name) . ')'" :options="$headingOptions" />

    <!-- Tabs Navigation (active state driven by controller param) -->
    @php($activeMerchantTab = $activeMerchantTab ?? 'batches')
    <ul class="nav nav-tabs project-tab mb-30" id="merchantDetailTabs" role="tablist">
        @php($tabs = [
            'batches' => 'Batches',
            'account-status' => 'Account Status',
            'financials' => 'Financials',
            'retrievals' => 'Retrievals',
            'chargebacks' => 'Chargebacks',
            'statements' => 'Statements',
            'profile' => 'Profile',
            'tickets' => 'Tickets'
        ])
        @foreach($tabs as $tKey => $tLabel)
            <li class="nav-item" role="presentation">
                <button class="nav-link {{ $activeMerchantTab === $tKey ? 'active' : '' }}" id="{{ $tKey }}-tab" data-bs-toggle="tab" data-bs-target="#{{ $tKey }}" type="button" role="tab" aria-controls="{{ $tKey }}" aria-selected="{{ $activeMerchantTab === $tKey ? 'true' : 'false' }}" data-tab-key="{{ $tKey }}">{{ $tLabel }}</button>
            </li>
        @endforeach
    </ul>

    <!-- Tabs Content -->
    <div class="tab-content" id="merchantDetailTabsContent">
        <div class="tab-pane fade show {{ $activeMerchantTab==='batches' ? 'active' : '' }}" id="batches" role="tabpanel" aria-labelledby="batches-tab">
            @include('admin.my-merchants.partials.batches')
        </div>
        <div class="tab-pane fade show {{ $activeMerchantTab==='account-status' ? 'active' : '' }}" id="account-status" role="tabpanel" aria-labelledby="account-status-tab">
            @include('admin.my-merchants.partials.account-status')
        </div>
        <div class="tab-pane fade show {{ $activeMerchantTab==='financials' ? 'active' : '' }}" id="financials" role="tabpanel" aria-labelledby="financials-tab">
            @include('admin.my-merchants.partials.financials')
        </div>
        <div class="tab-pane fade show {{ $activeMerchantTab==='retrievals' ? 'active' : '' }}" id="retrievals" role="tabpanel" aria-labelledby="retrievals-tab">
            @include('admin.my-merchants.partials.retrievals')
        </div>
        <div class="tab-pane fade show {{ $activeMerchantTab==='chargebacks' ? 'active' : '' }}" id="chargebacks" role="tabpanel" aria-labelledby="chargebacks-tab">
            @include('admin.my-merchants.partials.chargebacks')
        </div>
        <div class="tab-pane fade show {{ $activeMerchantTab==='statements' ? 'active' : '' }}" id="statements" role="tabpanel" aria-labelledby="statements-tab">
            @include('admin.my-merchants.partials.statements')
        </div>
        <div class="tab-pane fade show {{ $activeMerchantTab==='profile' ? 'active' : '' }}" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            @if(!empty($data->lead_id))
                <form action="{{ route('leads.update', $data->lead_id) }}" method="POST" enctype="multipart/form-data" id="merchantEmbeddedLeadForm" autocomplete="off" class="mb-3">
                    @include('admin.leads.partials.form_body')
                </form>
            @else
                @include('admin.my-merchants.partials.profile')
            @endif
        </div>
        <div class="tab-pane fade show {{ $activeMerchantTab==='tickets' ? 'active' : '' }}" id="tickets" role="tabpanel" aria-labelledby="tickets-tab">
            @include('admin.my-merchants.partials.tickets')
        </div>
    </div>
</div>

@endsection

@push('page_script')
<script>
$(function(){
    // Initialize tooltips
    $('[data-toggle="tooltip"]').tooltip();
    // Persist tab selection in URL (without full reload) and respect server-side activeMerchantTab on initial render
    $('#merchantDetailTabs button[data-tab-key]').on('shown.bs.tab', function(e){
        const key = $(this).data('tab-key');
        const url = new URL(window.location.href);
        url.searchParams.set('tab', key);
        window.history.replaceState({}, '', url.toString());
    });
    // Email preview button original logic retained
    $("#preview-welcome-email").on('click', function(){
        const pName = $("#welcome_contact_name").val();
        const pEmail = $("#welcome_contact_email").val();
        if(!pName || !pEmail){
            showRequiredTooltip($("#welcome_contact_name"), 'Please enter a contact name.');
            showRequiredTooltip($("#welcome_contact_email"), 'Please enter a contact email.');
            return false;
        }
        const url = "{{ route('merchants.welcome-email.create') }}?name=" + encodeURIComponent(pName) + "&email=" + encodeURIComponent(pEmail);
        $(this).attr('href', url);
    });
});
@if(!empty($data->lead_id))
// Lead page config for embedded form (mirrors leads/create setup)
window.LeadPageConfig = {
    leadId: {{ (int)($data->lead_id ?? 0) }},
    savedRecordSets: @json($savedRecordSets ?? []),
    csrf: '{{ csrf_token() }}',
    routes: {
        assignUser: function(id){ return '{{ route('leads.assigned-users.assign',['lead'=>'__L__']) }}'.replace('__L__',id); },
        removeUser: function(lid,uid){ return '{{ route('leads.assigned-users.remove',['lead'=>'__L__','user'=>'__U__']) }}'.replace('__L__',lid).replace('__U__',uid); },
        duplicate: function(id){ return '{{ route('leads.duplicate',['lead'=>'__L__']) }}'.replace('__L__',id); },
        destroy: function(id){ return '{{ route('leads.destroy',['lead'=>'__L__']) }}'.replace('__L__',id); },
    }
};
@endif
</script>
@if(!empty($data->lead_id))
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>
<script src="{{ asset('assets/js/leads-create.js') }}?v={{ time() }}"></script>
@endif
<script src="{{ asset('assets/js/common.js') }}"></script>
<script src="{{ asset('assets/js/merchant-access-permissions.js') }}"></script>
<script src="{{ asset('assets/js/my-merchant-batches.js') }}"></script>
@endpush