@extends('tenant.layouts.master')

@section('style')
<link rel="stylesheet" href="{{ asset('css/layouts/custom-tabs.css') }}">
<style>
    .custom-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    .custom-tabs .nav-item {
        flex: 0 0 auto;
    }
    .custom-tabs .nav-link {
        white-space: nowrap;
    }
    @media (max-width: 767.98px) {
        .custom-tabs {
            flex-wrap: nowrap;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            white-space: nowrap;
        }
    }
</style>
@endsection

@section('content')
@php
    $activeTab = $activeTab ?? 'default-tab';
@endphp

<div class="inner-content-layout form-bg-color p-4 rounded-form">
    <div class="custom-tabs-wrapper mb-3">
        <ul class="nav nav-tabs custom-tabs" id="accountingSettingsTabs" role="tablist">
            @can('pos-branches')
                <li class="nav-item">
                    <a href="{{ route('tenant.pos.branches.index', ['module' => 'pos']) }}" class="nav-link {{ $activeTab == 'branches' ? 'active' : '' }}">
                        @lang('sidebar.branches')
                    </a>
                </li>
            @endcan
            @canany(['pos-categories', 'pos-items'])
                <li class="nav-item">
                    <a href="{{ route('tenant.pos.categories-and-items', ['module' => 'pos']) }}" class="nav-link {{ $activeTab == 'category-and-item' ? 'active' : '' }}">
                        @lang('sidebar.categories_and_items')
                    </a>
                </li>
            @endcan
            @can('receivable')
                <li class="nav-item">
                    <a href="{{ route('tenant.receivables.index', ['module' => 'pos']) }}" class="nav-link {{ $activeTab == 'receivables' ? 'active' : '' }}">
                        @lang('sidebar.receivables')
                    </a>
                </li>
            @endcan
            @can('pos-menus')
                <li class="nav-item">
                    <a href="{{ route('tenant.pos.menus.index') }}" class="nav-link {{ $activeTab == 'menus' ? 'active' : '' }}">
                        @lang('sidebar.menus')
                    </a>
                </li>
            @endcan
            @can('pos-offers')
                <li class="nav-item">
                    <a href="{{ route('tenant.pos.offers.index') }}" class="nav-link {{ $activeTab == 'offers' ? 'active' : '' }}">
                        @lang('sidebar.offers')
                    </a>
                </li>
            @endcan
            @can('pos-sections')
                <li class="nav-item">
                    <a href="{{ route('tenant.pos.sections.index') }}" class="nav-link {{ $activeTab == 'sections' ? 'active' : '' }}">
                        @lang('sidebar.sections')
                    </a>
                </li>
            @endcan
            @can('pos-cashDevices')
            <li class="nav-item">
                <a href="{{ route('tenant.pos.cash-devices.index') }}" class="nav-link {{ $activeTab == 'cash_devices' ? 'active' : '' }}">
                    @lang('sidebar.cash_devices')
                </a>
            </li>
            @endcan
            @canany(['pos-tables', 'pos-tables-sections'])
                <li class="nav-item">
                    <a href="{{ route('tenant.pos.tables-and-sections') }}"
                    class="nav-link {{ $activeTab == 'tables-and-sections' ? 'active' : '' }}">
                        @lang('sidebar.tables_and_sections')
                    </a>
                </li>
            @endcanany
            @can('pos-daysSales')
                <li class="nav-item">
                    <a href="{{ route('tenant.pos.sales-days.index') }}" class="nav-link {{ $activeTab == 'sales_days' ? 'active' : '' }}">
                        @lang('sidebar.sales_days')
                    </a>
                </li>
            @endcan
            @can('pos-posInvoices')
                <li class="nav-item">
                    <a href="{{ route('tenant.pos.pos-invoices.index') }}" class="nav-link {{ $activeTab == 'pos_invoices' ? 'active' : '' }}">
                        @lang('sidebar.pos_invoices')
                    </a>
                </li>
            @endcan
            @can('pos-reports')
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle {{ in_array($activeTab, ['deleted_items', 'boxes_sales', 'detailed_boxes']) ? 'active' : '' }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        @lang('sidebar.reports') <i class="fas fa-chevron-down"></i>
                    </a>
                    <ul class="dropdown-menu">
                        @can('pos-reports-deletedItems')
                            <li>
                                <a  href="{{ route('tenant.pos.reports.show', ['report_type' => 'deletedItems']) }}" class="nav-link {{ $activeTab == 'deleted_items' ? 'active' : '' }}">
                                    @lang('sidebar.deleted_items')
                                </a>
                            </li>
                        @endcan
                        @can('pos-reports-boxesSales')
                            <li>
                                <a  href="{{ route('tenant.pos.reports.show', ['report_type' => 'boxesSales']) }}" class="nav-link {{ $activeTab == 'boxes_sales' ? 'active' : '' }}">
                                    @lang('sidebar.boxes_sales')
                                </a>
                            </li>
                        @endcan
                        @can('pos-reports-detailedBoxes')
                            <li>
                                <a href="{{ route('tenant.pos.reports.show', ['report_type' => 'detailedBoxes']) }}" class="nav-link {{ $activeTab == 'detailed_boxes' ? 'active' : '' }}">
                                    @lang('sidebar.detailed_boxes')
                                </a>
                            </li>
                        @endcan
                    </ul>
                </li>
            @endcan
        </ul>
    </div>

    <div class="tab-content custom-tab-content">
        @yield('content-field')
    </div>
</div>

@section('script')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            if (window.innerWidth <= 767) {
                const activeTab = document.querySelector('.custom-tabs .nav-link.active');
                if (activeTab) {
                    activeTab.scrollIntoView({ behavior: 'smooth', inline: 'center' });
                }
            }
        });
    </script>
@endsection

@endsection