@extends('tenant.pos.pos-tabs')
@php
    $activeTab = 'cash_devices';
@endphp

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.pos') => '#',
            __('breadcrumb.cash_devices') => '#',
        ],
    ])
    <div id="message-box" class="position-sticky top-0 z-3"></div>
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'pos.cash-devices'])
@endsection

@section('content-field')
<style>
    .table-responsive{
        max-height: 400px; 
        overflow: auto;
    }
    .table-responsive table {
        min-width: 600px;
    }
    .table-responsive table table-light {
        position: sticky;
        top: 0;
        z-index: 2;
    }
</style>
    <div class="container-fluid">
        <h4>@lang('sidebar.cash_devices')</h4>
        <div class="table-responsive">
            <table class="table table-bordered table-striped table-hover mt-3" >
                <thead class="table-light"  >
                    <tr>
                        <th>#</th>
                        <th>@lang('pos/cashDevices/index.box_name_ar')</th>
                        <th>@lang('pos/cashDevices/index.box_name_en')</th>
                        <th>@lang('pos/cashDevices/index.box_branch_name')</th>
                        <th>@lang('pos/cashDevices/index.status')</th>
                        <th>@lang('pos/cashDevices/index.custody')</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($cashDevices as $device)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $device->ar_name }}</td>
                            <td>{{ $device->en_name }}</td>
                            <td>{{ $device->branch->name ?? '-' }}</td>
                            <td class="text-{{ $device->is_active ? 'success' : 'danger' }}">
                                {{ $device->is_active ? __('pos/cashDevices/index.active') : __('pos/cashDevices/index.inactive') }}
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <input type="text" value="{{ $device->custody_on_boxes }}" readonly
                                        class="form-control form-control-sm custody-input me-2"
                                        data-id="{{ $device->id }}" style="width: 80px;">
                                    <button class="btn btn-sm custody-edit-btn edit-button"
                                        style="display:none; margin-right:8px; background-color: orange; border-color: orange; color: white; padding: 3px 8px; font-size: 0.85rem;">
                                        @lang('pos/cashDevices/index.edit')       
                                    </button>
                                </div>
                            </td>
                        </tr>

                    @empty
                        <tr>
                            <td colspan="100%" class="text-center">@lang('pos/cashDevices/index.no_results')</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection

<script>
   document.addEventListener('DOMContentLoaded', function() {
    const rows = document.querySelectorAll('tbody tr');
    rows.forEach(row => {
        const input = row.querySelector('.custody-input');
        const btn = row.querySelector('.custody-edit-btn');
        input.addEventListener('click', () => {
            input.removeAttribute('readonly');
            input.focus();
            btn.style.display = 'inline-block';
        });
        btn.addEventListener('click', () => {
            const newCustody = input.value.trim();
            const deviceId = input.getAttribute('data-id');
            fetch("{{ url('/pos/cash-devices') }}/" + deviceId + "/update", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: JSON.stringify({
                        custody_on_boxes: newCustody
                    })
                })
                .then(response => response.json())
                .then(data => {
                    const messageBox = document.getElementById('message-box');
                    const status = data.success ? 'success' : 'error';
                    const iconClass = data.success ? 'fa fa-thumbs-up' : 'fa-solid fa-thumbs-down';
                    const message = data.message ?? (data.success ? 'تم التحديث بنجاح.' : 'حدث خطأ، حاول مرة أخرى');
                    messageBox.innerHTML = `
                        <div class="w-75 mx-auto">
                            <div class="alert ${status}-alert" style="position: relative; padding: 8px 12px; display: flex; align-items: center; font-size: 14px;">
                                <span class="alert-icon" style="margin-right: 8px;"><i class="${iconClass}"></i></span>
                                <span style="flex-grow: 1;">${message}</span>
                                <button type="button" class="btn-close" style="margin-left: auto; font-size: 1rem;" aria-label="Close"></button>
                            </div>
                        </div>
                    `;
                    const closeBtn = messageBox.querySelector('.btn-close');
                    closeBtn.addEventListener('click', () => {
                        messageBox.innerHTML = '';
                    });
                    setTimeout(() => {
                        messageBox.innerHTML = '';
                    }, 4000);
                    if (data.success) {
                        input.setAttribute('readonly', true);
                        btn.style.display = 'none';
                    }
                })
                .catch(() => {
                    const messageBox = document.getElementById('message-box');
                    messageBox.innerHTML = `
                        <div class="w-75 mx-auto">
                            <div class="alert error-alert" style="position: relative; padding: 8px 12px; display: flex; align-items: center; font-size: 14px;">
                                <span class="alert-icon" style="margin-right: 8px;"><i class="fa-solid fa-thumbs-down"></i></span>
                                <span style="flex-grow: 1;">خطأ في الاتصال بالخادم</span>
                                <button type="button" class="btn-close" style="margin-left: auto; font-size: 1rem;" aria-label="Close"></button>
                            </div>
                        </div>
                    `;
                    const closeBtn = messageBox.querySelector('.btn-close');
                    closeBtn.addEventListener('click', () => {
                        messageBox.innerHTML = '';
                    });
                    setTimeout(() => {
                        messageBox.innerHTML = '';
                    }, 4000);
                });
        });
    });
});
</script>