@extends('tenant.warehouses.warehouses-tabs')
@php
    $activeTab = 'detailed-items-report';
@endphp
@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.home') => '/',
            __('breadcrumb.warehouses') => '/warehouses/branches',
            __('breadcrumb.reports') => '#',
            __('breadcrumb.detailed_material_report') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'warehouses.reports.detailedItems'])
@endsection

@section('style')
<link rel="stylesheet" href="{{ asset('css/layouts/custom-tabs.css') }}">
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.0/dist/css/tom-select.min.css" rel="stylesheet">

    <style media="print">
        .dsip {
            display: none !important;
        }

        table {
            border-collapse: separate;
            border-spacing: 0px;
        }

        table thead tr th,
        table tbody tr td {
            padding: 6px;
        }

        table thead tr th {
            border: 1px solid rgb(76, 76, 76) !important;
        }

        table tbody tr td {
            border: 1px solid rgba(204, 204, 204, 0.766) !important;
        }
    </style>


    <style>
        .related_based_on_inputs {
            display: none;
        }

        .columns-input-layout .selectize-input {
            max-height: 81px;
            overflow-y: auto;
        }
    </style>
@endsection

@section('content-field')
    <div>

        <x-tenant.warehouses.reports.detailedItems :request="$request">
        </x-tenant.warehouses.reports.detailedItems>

    </div>
@endsection

@push('script')
    <script type="module">
        import printSection from '/tenancy/assets/js/print.js';
        $('body').on('click', '.print_report_btn', function() {
            let target = $('#printable-section').clone();
            let title = "جرد المستودعات";
            const print_data = @json(Session::get('print_data'));
            printSection.print(target, print_data, title, '', true, {
                size: "landscape"
            });
        });
    </script>
    {{-- add the tom-select library to delete the multiple select options --}}
    <script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.0/dist/js/tom-select.complete.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const selects = [
                { id: 'branches_ids', placeholder: 'الكل' },
                { id: 'categories_ids', placeholder: 'الكل' }
            ];
        
            selects.forEach(({ id, placeholder }) => {
                const selectElement = document.getElementById(id);
                if (!selectElement) return;
                const tomSelect = new TomSelect(`#${id}`, {
                    persist: false,
                    create: false,
                    plugins: ['remove_button'],
                    render: {
                        item: (data, escape) => `<div>${escape(data.text)}</div>`
                    },
                    placeholder: ''
                });
        
                const inputElement = tomSelect.control_input;
                const updatePlaceholder = () => {
                    inputElement.placeholder = tomSelect.items.length ? '' : placeholder;
                };
        
                inputElement.addEventListener('focus', () => (inputElement.placeholder = ''));
                inputElement.addEventListener('blur', updatePlaceholder);
                updatePlaceholder();
            });
        });
    </script>
@endpush