@php
    $layout = match ($module) {
        'rentals' => 'tenant.rentals.rentals-tabs',
        'accounting' => 'tenant.accounting.accounting-tabs',
        'warehouses' => 'tenant.warehouses.warehouses-tabs',
        'pos' => 'tenant.pos.pos-tabs',
        default => 'tenant.accounting.accounting-tabs',
    };
    $activeTab = 'category-and-item';
@endphp
@extends($layout)
@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            $module == 'pos' ? __('breadcrumb.point_of_sale') : __('breadcrumb.warehouses') => '/warehouses/branches',
            __('breadcrumb.categories_and_items') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', [
        'activeItem' => $module == 'pos' ? 'pos.categories-and-items' : 'warehouses.categories-and-items',
    ])
@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">
            <h4>@lang('breadcrumb.categories_and_items')</h4>

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

                <button type="button" class="btn toggle-view-btn {{ $view == 'items' ? 'active-btn' : '' }}"
                    data-view="items">
                    @lang('settings/warehouses/categories-and-items.items')
                </button>
            </div>
        </div>

        {{-- Items View --}}
        <div class="items-view" style="display: {{ $view == 'items' ? 'block' : 'none' }}">
            @php
                $items_page_data = [
                    'categories_to_dropdown' => $categories_to_dropdown,
                    'suppliers' => $suppliers,
                    'classifications' => $classifications,
                    'branches' => $branches,
                    'items_list' => $items,
                    'public_path' => public_path(''),
                    'totalQuantity' => $totalQuantity, 
                    'totalCost' => $totalCost,
                    'company_info' => $company_info
                ];
            @endphp

            <items-page module="{{ $module }}" data="{{ json_encode($items_page_data) }}">
            </items-page>
        </div>

        {{-- Categories View --}}
        <div class="categories-view" style="display: {{ $view == 'categories' ? 'block' : 'none' }}">
            <div class="form-bg-color p-4 rounded-form">
                @can($module . '-categories-add')
                    <div>
                        <a href="{{ route('tenant.' . $module . '.categories.create') }}"
                            class="btn btn-sm orange-btn add-root-category-btn">
                            <i class="fas fa-plus-circle"></i> @lang('breadcrumb.add_main_category')
                        </a>
                    </div>
                @endcan

                <div class="mb-4 row">
                    {{-- Categories Tree --}}
                    <div class="col-3">
                        @if ($categories->count())
                            <div id="categories-tree">
                                <ul>
                                    @foreach ($categories as $category)
                                        @include('tenant.warehouses.categories.item-tree-template', [
                                            'category' => $category,
                                        ])
                                    @endforeach
                                </ul>
                            </div>
                        @else
                            <p>@lang('settings/warehouses/categories-and-items.no_categories_yet')</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('prepend-script')
    <script src="{{ asset('js/libraries/jsBarcode.min.js') }}"></script>
@endpush

@push('script')
    @scriptag('build/js/vue-components/warehouses-items-page.js')
    <script src="{{ asset('js/libraries/jstree.min.js') }}"></script>

    <script>
        const module = @json($module);
        const addCategoryPermission = "{{ Auth::user()->hasPermissionTo($module . '-categories-add') }}";
        const editCategoryPermission = "{{ Auth::user()->hasPermissionTo($module . '-categories-edit') }}";
        const deleteCategoryPermission = "{{ Auth::user()->hasPermissionTo($module . '-categories-delete') }}";

        $(() => {
            $('.add-root-category-btn').on('click', function() {
                $('#addCategoryModal input[name="parent_id"]').val("");
            });
        });
    </script>

    <script src="{{ asset('js/warehouses/categories/index.js') }}"></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 == "categories") {
                    $(".categories-view").show();
                    $(".items-view").hide();
                    window.history.pushState(null, null, "?view=categories");
                } else {
                    $(".categories-view").hide();
                    $(".items-view").show();
                    window.history.pushState(null, null, "?view=items");
                }
            });

            $(".confirm-delete-btn").click(function(e) {
                $.confirm({
                    title:$lang('warehousescategories-and-items.confirm_delete_item'),
                    content: $lang('warehousescategories-and-items.will_delete_item_permanently'),
                    type: "red",
                    buttons: {
                        ok: {
                            text:  $lang('general.yes'),
                            btnClass: "btn orange-btn form-btn",
                            keys: ["enter"],
                            action: () => {
                                $(this).closest("form").submit();
                            }
                        },
                        cancel: {
                            text: $lang('general.cancel'),
                            btnClass: "btn-default",
                            keys: ["esc"]
                        }
                    }
                });
            });
        });
    </script>
@endpush