@extends('tenant.layouts.master')

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            $module == 'pos' ?  __('breadcrumb.point_of_sale') :  __('breadcrumb.warehouses') => '/warehouses/branches',
            __('breadcrumb.items') => route('tenant.' . $module . '.categories-and-items') . '?view=items',
            __('breadcrumb.item_data') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => $module . '.categories-and-items'])
@endsection

@section('content')
    <section class="inner-content-layout form-bg-color p-4 rounded-form">
        <div class="py-2 d-flex justify-content-between position-relative">
            <h4> </h4>
            
            <div class="mx-3">
                <x-tenant.shared.backward-component :direct-to="__('breadcrumb.items')"
                    link="/{{ $module }}/categories-and-items?view=items" />
            </div>
        </div>

        <div class="row mb-2">
            <div class="col-3">
                <label for="item_id">@lang('warehouses/items/card.item')</label>
                <select id="filtered_items" name="item_id">
                    @foreach ($all_items as $i)
                        <option value="{{ $i->id }}" {{ $i->id == $item->id ? 'selected' : '' }}>
                            {{ $i->ar_name }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="row" id="item_container">
            <div class="col-md-6">
                <div>
                    <h5 class="w-auto rounded-3 px-2 py-3 m-0" style="background: #EBEBEC;"> @lang('warehouses/items/show.item_data')</h5>
                    <table class="table table-striped without-herotable">
                        <tr>
                            <th>@lang('warehouses/items/show.number')</th>
                            <td>{{ $item->full_number }}</td>
                        </tr>
                        <tr>
                            <th>@lang('warehouses/items/show.name_arabic')</th>
                            <td>{{ $item->ar_name }}</td>
                        </tr>
                        <tr>
                            <th>@lang('warehouses/items/show.name_english')</th>
                            <td>{{ $item->en_name }}</td>
                        </tr>
                        <tr>
                            <th>@lang('warehouses/items/show.description')</th>
                            <td>{{ $item->description }}</td>
                        </tr>
                        <tr>
                            <th>@lang('warehouses/items/show.family')</th>
                            <td>{{ $item->category->name }}</td>
                        </tr>
                        <tr>
                            <th>@lang('warehouses/items/show.main_supplier_name')</th>
                            <td>{{ $item->primary_supplier->name ?? '---' }}</td>
                        </tr>
                        <tr>
                            <th>@lang('warehouses/items/show.secondary_supplier_name')</th>
                            <td>{{ $item->secondary_supplier->name ?? '---' }}</td>
                        </tr>
                        <tr>
                            <th> @lang('warehouses/items/show.country_of_origin')</th>
                            <td>{{ $item->country->ar_name ?? '---' }}</td>
                        </tr>
                        <tr>
                            <th> @lang('warehouses/items/show.barcode_price_type')</th>
                            <td>
                                @foreach ($item_price_type as $price)
                                    <span>{{ $price->price_type->name }}</span> 
                                @endforeach
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="col-md-6">
                <div>
                    <h5 class="w-auto rounded-3 px-2 py-2 m-0" style="background: #EBEBEC;">@lang('warehouses/items/show.item_status') </h5>
                    <table class="table table-striped without-herotable">
                        <tr>
                            <th>@lang('warehouses/items/show.status')</th>
                            <td>
                                <span class="status-badge {{ $item->status ? 'green-status' : 'red-badge' }}">
                                    {{ $item->status ? 'فعّال' : 'غير فعّال' }}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <th>@lang('warehouses/items/show.sales_subject_to_tax')</th>
                            <td>
                                <span class="status-badge {{ $item->under_tax ? 'green-status' : 'red-status' }}">
                                    {{ $item->under_tax ? 'نعم' : 'لا' }}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <th>@lang('warehouses/items/show.has_expiration_date')</th>
                            <td>
                                <span class="status-badge {{ $item->has_expire_date ? 'green-status' : 'red-status' }}">
                                    {{ $item->has_expire_date ? 'نعم' : 'لا' }}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <th>@lang('warehouses/items/show.decimal_value')</th>
                            <td>
                                <span class="status-badge {{ $item->decimal_quantity ? 'green-status' : 'red-status' }}">
                                    {{ $item->decimal_quantity ? 'نعم' : 'لا' }}
                                </span>
                            </td>
                        </tr>
                    </table>
                </div>

                <div>
                    <h5 class="w-auto rounded-3 px-2 py-2 m-0" style="background: #EBEBEC;">
                        @lang('warehouses/items/show.barcode_settings')
                    </h5>
                    <table class="table table-striped without-herotable">
                        <tr>
                            <th>@lang('warehouses/items/show.company_name')</th>
                            <td>
                                <input type="checkbox" id="showCompany" class="custom-checkbox" checked>
                            </td>
                        </tr>
                        <tr>
                            <th>@lang('warehouses/items/show.price')</th>
                            <td>
                                <input type="checkbox" id="showPrice" class="custom-checkbox" checked>
                            </td>
                        </tr>
                        <tr>
                            <th>@lang('warehouses/items/show.barcode_number')</th>
                            <td>
                                <input type="checkbox" id="showNumber" class="custom-checkbox" checked>
                            </td>
                        </tr>
                        <tr>
                            <th>@lang('warehouses/items/show.language')</th>
                            <td>
                                <div class="d-flex gap-2">
                                    <label>
                                        <input type="radio" name="lang" class="custom-checkbox ms-2" value="ar" checked> @lang('warehouses/items/show.arabic') 
                                    </label>
                                    <label>
                                        <input type="radio" name="lang" class="custom-checkbox ms-2" value="en"> @lang('warehouses/items/show.english')
                                    </label>
                                    <label>
                                        <input type="radio" name="lang" class="custom-checkbox ms-2" value="none"> @lang('warehouses/items/show.none')
                                    </label>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="col-12">
                <div class="mt-3">
                    <h5 class="w-auto rounded-3 px-2 py-2">@lang('warehouses/items/show.barcodes')</h5>
                    <table class="table table-striped without-herotable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>@lang('warehouses/items/show.image')</th>
                                <th>@lang('warehouses/items/show.name_arabic')</th>
                                <th>@lang('warehouses/items/show.name_english')</th>
                                <th>@lang('warehouses/items/show.barcode')</th>
                                <th>@lang('warehouses/items/show.barcode_image')</th>
                                <th>@lang('warehouses/items/show.unit')</th>
                                <th>@lang('warehouses/items/show.available_quantity')</th>
                                <th>@lang('warehouses/items/show.maximum_quantity')</th>
                                <th> @lang('warehouses/items/show.minimum_quantity')</th>
                                <th> @lang('warehouses/items/show.dimensions')</th>
                                <th>  @lang('warehouses/items/show.points_of_sale')</th>
                                <th> @lang('warehouses/items/show.under_discount') </th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($item->barcodes as $barcode)
                                @php
                                    $default_price = $barcode->prices->where('is_default', true)->first();
                                    $total_batches = $barcode->batches->sum('remaining_quantity');
                                    $total_minus_out_batches = $barcode->minus_out_batches->sum('quantity');
                                    $available_quantity = ($total_batches - $total_minus_out_batches) >= 0 ? ($total_batches - $total_minus_out_batches) : 0;
                                @endphp
                                <tr>
                                    <th scope="row">{{ $loop->iteration }}</th>
                                    <td>
                                        @if ($barcode->image)
                                            <img src="{{ route('tenant.files.view', ['path' => $barcode->encrypted_image_path]) }}"
                                                alt="{{ $barcode->ar_name }}" class="img-thumbnail" width="100">
                                        @else
                                            ---
                                        @endif
                                    </td>
                                    <td style="max-width: 100px !important;">
                                        <input type="text" name="arabic_name" id="arabicName{{ $loop->index }}" class="form-control" value="{{ $barcode->ar_name }}">
                                    </td>
                                    <td style="max-width: 100px !important;">
                                        <input type="text" name="english_name" id="englishName{{ $loop->index }}" class="form-control" value="{{ $barcode->en_name }}">
                                    </td>
                                    <td>
                                        {{ $barcode->number }}
                                        <button class="btn btn-sm btn-outline-primary ms-2" onclick="printBarcode({{ $loop->index }})">
                                            <i class="fa fa-print"></i>
                                        </button>
                                    </td>
                                    <td class="text-center align-middle" style="max-width: 200px !important;">
                                        <div class="barcode-card text-center text-nowrap" id="barcode{{ $loop->index }}">
                                            <p class="company fw-bold small mt-3 mb-1">{{ $company_info['name'] }}</p>

                                            <svg id="barcode-svg{{ $loop->index }}" data-code="{{ $barcode->number }}"></svg>

                                            <p class="d-flex justify-content-around small">
                                                <span class="show-name">{{ $barcode->ar_name }}</span>
                                                <span class="show-item">@lang('warehouses/items/show.price'): {{ $default_price->price ?? '---' }} </span>
                                            </p>
                                        </div>
                                    </td>
                                    <td>{{ $barcode->unit->name }}</td>
                                    <td>{{ $available_quantity }}</td>
                                    <td>{{ $barcode->max_quantity }}</td>
                                    <td>{{ $barcode->min_quantity }}</td>
                                    <td>
                                        <ul class="list-group p-0">
                                            @if ($barcode->width)
                                                <li class="list-group-item py-1"> @lang('warehouses/items/show.width') : {{ $barcode->width }}</li>
                                            @endif
                                            @if ($barcode->height)
                                                <li class="list-group-item py-1">@lang('warehouses/items/show.height'): {{ $barcode->height }}</li>
                                            @endif
                                            @if ($barcode->size)
                                                <li class="list-group-item py-1">@lang('warehouses/items/show.size'): {{ $barcode->size }}</li>
                                            @endif
                                        </ul>
                                    </td>
                                    <td>
                                        <span class="status-badge {{ $barcode->is_pos ? 'green-status' : 'red-status' }}">
                                            {{ $barcode->is_pos ? 'نعم' : 'لا' }}
                                        </span>
                                    </td>
                                    <td>
                                        <span
                                            class="status-badge {{ $barcode->is_under_discount ? 'green-status' : 'red-status' }}">
                                            {{ $barcode->is_under_discount ? 'نعم' : 'لا' }}
                                        </span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="12" class="text-center">@lang('warehouses/items/show.no_barcodes') </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
@endsection

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

@push('script')
    <script>
        let showNumber = true;
        let selectedLang = 'ar';

        document.addEventListener('DOMContentLoaded', function() {
            initailBarcodeControls()
            generateBarcodes();
            updateNames();
        });

        function initailBarcodeControls() {
            const companyCheckBox = document.getElementById('showCompany');
            const priceCheckBox = document.getElementById('showPrice');
            const numberCheckBox = document.getElementById('showNumber');
            const langRadioButton = document.getElementsByName('lang');

            document.querySelectorAll('input[name="arabic_name"]').forEach(input => {
                input.addEventListener('input', updateNames);
            });
            document.querySelectorAll('input[name="english_name"]').forEach(input => {
                input.addEventListener('input', updateNames);
            });

            companyCheckBox.addEventListener('change', function () {
                const companies = document.querySelectorAll('.barcode-card .company');
                companies.forEach(company => {
                    company.style.visibility = this.checked ? 'visible' : 'hidden';
                });
            });

            priceCheckBox.addEventListener('change', function () {
                const prices = document.querySelectorAll('.barcode-card .show-item');
                prices.forEach(price => {
                    price.style.display = this.checked ? 'inline' : 'none';
                });
            });

            numberCheckBox.addEventListener('change', function () {
                showNumber = this.checked;
                generateBarcodes();
            })

            langRadioButton.forEach(radio => {
                radio.addEventListener('change', function () {
                    selectedLang = this.value;
                    updateNames();
                });
            });
        }

        function generateBarcodes() {

            document.querySelectorAll('svg[id^="barcode-svg"]').forEach(svg => {
            const number = svg.getAttribute('data-code');
                JsBarcode(svg, number, {
                    width: 1.5,
                    height: 30,
                    displayValue: showNumber,
                    font: "Tahoma",          
                    fontSize: 14,     
                    textMargin: 1,          
                    textAlign: "center",
                    background: "transparent",
                });
            });
        }

        function updateNames() {
            document.querySelectorAll('.barcode-card').forEach((card, index) => {
                const arabicInput = document.getElementById(`arabicName${index}`);
                const englishInput = document.getElementById(`englishName${index}`);
                const barcodeName = card.querySelector('.show-name');
                if (selectedLang === 'none') {
                    barcodeName.style.display = 'none';
                
                } else {
                    barcodeName.style.display = 'inline';
                    barcodeName.textContent = selectedLang === 'ar' ? arabicInput.value : englishInput.value;

                }
            });
        }

        function printBarcode(index) {
            const svgElement = document.getElementById('barcode' + index);

            printJS({
                printable: svgElement.id,
                type: 'html',
                targetStyles: ['*'],
                style: '@page { size: 50mm 40mm; margin: 0;}'
            });
        }

        $(document).ready(function() {
            $('#filtered_items').on('change', function() {
                let id = $(this).val();
                $.ajax({
                    url: `/warehouses/items/${id}/ajax-show`,
                    type: 'GET',
                    success: function(response) {
                        if(response.status === 'success') {
                            $('#item_container').html(response.view);
                            showNumber = document.getElementById('showNumber').checked;
                            selectedLang = document.querySelector('input[name="lang"]:checked').value;
                            
                            initailBarcodeControls()
                            generateBarcodes();
                            updateNames();
                        }
                    },
                    error: function(error) {
                        console.error(error);
                    }
                });
            });
        });
    </script>
@endpush