@extends('business.layouts.app')

@section('content')
<style type="text/css">
    .user-profile-header-banner img{block-size:250px;inline-size:100%;object-fit:cover}
    .user-profile-header{margin-block-start:-2rem}
    .user-profile-header .user-profile-img{border:2px solid;border-color:var(--bs-paper-bg);inline-size:120px}
    @media(max-width: 767.98px){
        .user-profile-header-banner img{block-size:150px}
        .user-profile-header .user-profile-img{inline-size:100px}
    }
</style>
@php
    use Carbon\Carbon;
@endphp
<main class="main-content" x-data="viewPartyCrud()">
    <!-- Header -->
    <div class="row">
        <div class="col-12">
            <div class="card mt-6 mb-6 rounded-5">
                <div class="user-profile-header d-flex flex-column flex-lg-row text-sm-start text-center mb-8">
                    <div class="flex-shrink-0 mt-1 mx-sm-0 mx-auto">
                        <img src="{{ 'https://ui-avatars.com/api/?background=0070ff&color=fff&name='.urlencode($party->company_name ?? $party->name) }}" alt="user image" class="d-block h-auto ms-0 ms-sm-6 rounded-5 user-profile-img" />
                    </div>
                    <div class="flex-grow-1 mt-3 mt-lg-5">
                        <div class="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-5 flex-md-row flex-column gap-4">
                            <div class="user-profile-info">
                                <h4 class="mb-2 mt-lg-7">{{ $party->company_name ?? $party->name }}</h4>
                                <ul class="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center gap-4 mt-2">
                                    <li class="list-inline-item"><i class="icon-base ph ph-calendar-dot me-2"></i><span class="fw-medium">Created {{ Carbon::parse($party->created_at)->toFormattedDateString() }}</span></li>
                                </ul>
                            </div>
                            <a href="{{ route('parties.index') }}" class="btn btn-outline-primary mb-1"> <i class="icon-base ph ph-arrow-left icon-sm me-2"></i>Go back</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--/ Header -->

    <!-- Navbar pills -->
    <div class="row my-4">
        <div class="col-md-12">
            <div class="nav-align-top">
                <ul class="nav nav-pills flex-column flex-sm-row gap-sm-0 gap-2" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-top-profile" aria-controls="navs-pills-top-profile" aria-selected="true">
                            <i class="icon-base ph ph-user icon-sm me-1_5"></i> Profile
                        </button>
                    </li>
                    {{-- <li class="nav-item" role="presentation">
                        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#party-documents" aria-controls="party-documents" aria-selected="true">
                            <i class="icon-base ph ph-file-text icon-sm me-1_5"></i> Documents
                        </button>
                    </li> --}}
                    <li class="nav-item" role="presentation">
                        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-top-trips" aria-controls="navs-pills-top-trips" aria-selected="false" tabindex="-1">
                            <i class="icon-base ph ph-path icon-sm me-1_5"></i> Trips
                        </button>
                    </li>
                    {{-- <li class="nav-item" role="presentation">
                        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#party-ledger" aria-controls="party-invoices" aria-selected="false" tabindex="-1">
                            <i class="icon-base ph ph-receipt icon-sm me-1_5"></i> Ledger
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#party-payments" aria-controls="party-payments" aria-selected="false" tabindex="-1">
                            <i class="icon-base ph ph-plus-circle icon-sm me-1_5"></i> Payments
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#party-invoices" aria-controls="party-invoices" aria-selected="false" tabindex="-1">
                            <i class="icon-base ph ph-receipt icon-sm me-1_5"></i> Invoices
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#party-receipt-vouchers" aria-controls="party-receipt-vouchers" aria-selected="false" tabindex="-1">
                            <i class="icon-base ph ph-invoice icon-sm me-1_5"></i> Receipt Vouchers
                        </button>
                    </li> --}}
                </ul>
            </div>
        </div>
    </div>
    <!--/ Navbar pills -->

    <div class="tab-content px-0 bg-transparent shadow-none border-none">
        <div class="tab-pane fade active show" id="navs-pills-top-profile" role="tabpanel">
            @include('business.parties.components.info')
        </div>
        {{-- <div class="tab-pane fade" id="party-documents" role="tabpanel">
            @include('business.parties.components.documents')
        </div> --}}
        <div class="tab-pane fade" id="navs-pills-top-trips" role="tabpanel">
            @include('business.parties.components.trips')
        </div>
        {{-- <div class="tab-pane fade" id="party-ledger" role="tabpanel">
            @include('business.parties.components.ledger')
        </div>
        <div class="tab-pane fade" id="party-payments" role="tabpanel">
            @include('business.parties.components.payments')
        </div>
        <div class="tab-pane fade" id="party-invoices" role="tabpanel">
            @include('business.parties.components.invoices')
        </div>
        <div class="tab-pane fade" id="party-receipt-vouchers" role="tabpanel">
            @include('business.parties.components.receipt-vouchers')
        </div> --}}
    </div>
</main>
@endsection

@push('inline-scripts')
    <script>
        function viewPartyCrud()
        {
            return {
                isLoading: false,
                isEdit: false,
                errors: {},

                init() {
                    // Wrapping init in $nextTick to ensure DOM is ready
                    this.$nextTick(() => {

                        // Initialize Tabs Persistence (NEW LOGIC)
                        this.setupTabs();
                    });
                },

                // --- NEW TAB PERSISTENCE LOGIC ---
                setupTabs() {
                    const STORAGE_KEY = 'party_details_active_tab';
                    
                    // A. Restore the previously saved tab
                    const savedTabTarget = localStorage.getItem(STORAGE_KEY);
                    
                    if (savedTabTarget) {
                        // Find the button that targets the saved ID
                        const tabTrigger = document.querySelector(`button[data-bs-target="${savedTabTarget}"]`);
                        if (tabTrigger) {
                            // Use Bootstrap's API to switch to that tab
                            const tabInstance = bootstrap.Tab.getOrCreateInstance(tabTrigger);
                            tabInstance.show();
                        }
                    }

                    // B. Listen for tab switches to save the new choice
                    const navList = document.querySelector('.nav-pills');
                    if (navList) {
                        // Bootstrap fires 'shown.bs.tab' whenever a new tab is fully shown
                        navList.addEventListener('shown.bs.tab', (event) => {
                            // event.target is the button that was clicked
                            const targetId = event.target.getAttribute('data-bs-target');
                            localStorage.setItem(STORAGE_KEY, targetId);
                        });
                    }
                },
            };
        }
    </script>
@endpush