@extends('tenant.pos.pos-tabs')

@php
    $activeTab = 'tables-and-sections';
    $view = $view ?? 'tables';
@endphp

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.pos')    => '#',
            __('breadcrumb.tables') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'pos.tables-and-sections'])
@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('css/libraries/jstree/default/style.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/layouts/custom-tabs.css') }}">
@endsection

@section('content-field')
    <div>
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h4>@lang('breadcrumb.tables')</h4>

            <div class="btn-group" role="group" aria-label="tables or sections tab" dir="ltr">
                {{-- Sections button --}}
                <button type="button"
                        class="btn toggle-view-btn {{ $view == 'sections' ? 'active-btn' : '' }}"
                        data-view="sections">
                    @lang('pos/tables-and-sections.sections')
                </button>

                {{-- Tables button --}}
                <button type="button"
                        class="btn toggle-view-btn {{ $view == 'tables' ? 'active-btn' : '' }}"
                        data-view="tables">
                    @lang('pos/tables-and-sections.tables')
                </button>
            </div>
        </div>

        {{-- Tables View --}}
        <div class="tables-view" style="display: {{ $view == 'tables' ? 'block' : 'none' }}">
             @include('tenant.pos.tables.index')
        </div>

        {{-- Tables Sections View --}}
        <div class="sections-view" style="display: {{ $view == 'sections' ? 'block' : 'none' }}">
             @include('tenant.pos.tables-sections.index')
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(() => {
            $(".toggle-view-btn").on("click", function() {
                const view = $(this).attr("data-view");

                $(this).addClass("active-btn");
                $(".toggle-view-btn").not(this).removeClass("active-btn");

                if (view === "sections") {
                    $(".sections-view").show();
                    $(".tables-view").hide();
                    window.history.pushState(null, null, "?view=sections");
                } else {
                    $(".sections-view").hide();
                    $(".tables-view").show();
                    window.history.pushState(null, null, "?view=tables");
                }
            });
        });
    </script>
@endpush