@extends('business.layouts.app')

@section('content')
<main class="main-content" x-data="masterDataCrud()">
    <div class="d-flex justify-content-between align-items-center mb-4">
            <h4 class="fw-bold py-3 mb-0">
                Master Data
            </h4>
        </div>
    
        <div class="row">
            <div class="col-md-3 mb-4">
                <div class="card shadow-sm">
                    <div class="card-body p-2">
                        <div class="nav flex-column nav-pills text-start" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    
                            <button class="nav-link active text-start rounded-2 mb-1 px-3" id="settings-general-tab" data-bs-toggle="pill" data-bs-target="#settings-general" type="button" role="tab">
                                <i class="ph-bold ph-gear-six me-2"></i> General
                            </button>
    
                            <button class="nav-link text-start rounded-2 mb-1 px-3" id="settings-vehicle-types-tab" data-bs-toggle="pill" data-bs-target="#settings-vehicle-types" type="button" role="tab">
                                <i class="ph-bold ph-garage me-2"></i> Vehicle Types
                            </button>
                            
                            <button class="nav-link text-start rounded-2 mb-1 px-3" id="settings-vehicleCapacities-tab" data-bs-toggle="pill" data-bs-target="#settings-vehicle-capacities" type="button" role="tab">
                                <i class="ph-bold ph-garage me-2"></i> Vehicle Capacity
                            </button>
    
                            <button class="nav-link text-start rounded-2 mb-1 px-3" id="settings-payment-modes-tab" data-bs-toggle="pill" data-bs-target="#settings-payment-modes" type="button" role="tab">
                                <i class="ph-bold ph-money-wavy me-2"></i> Payment Modes
                            </button>

                            <button class="nav-link text-start rounded-2 mb-1 px-3" id="settings-accounting-periods-tab" data-bs-toggle="pill" data-bs-target="#settings-accounting-periods" type="button" role="tab">
                                <i class="ph-bold ph-calendar-dots me-2"></i> Accounting Periods
                            </button>

                            <button class="nav-link text-start rounded-2 mb-1 px-3" id="settings-bank-accounts-tab" data-bs-toggle="pill" data-bs-target="#settings-bank-accounts" type="button" role="tab">
                                <i class="ph-bold ph-bank me-2"></i> Bank Accounts
                            </button>
    
                        </div>
                    </div>
                </div>
            </div>
    
            <div class="col-md-9">
                <div class="tab-content p-0" id="v-pills-tabContent">

                    @include('business.settings.components.general')
                    @include('business.settings.components.vehicle_type')
                    @include('business.settings.components.vehicle_capacity')
                    @include('business.settings.components.payment_mode')
                    @include('business.settings.components.accounting_period')
                    @include('business.settings.components.bank_account')
    
                </div> 
            </div> 
        </div>
</main>
@endsection

@push('inline-scripts')
    <script>
        function masterDataCrud() {
            return {
                init() {
                    this.setupTabs();
                },

                setupTabs() {
                    const STORAGE_KEY = 'master_data_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