@extends('layouts.app')
@section('title', 'مخزون الأجهزة')
@section('breadcrumb')<li class="breadcrumb-item active">مخزون الأجهزة</li>@endsection

@section('page_actions')
    @can('devices.create')
        <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#bulkModal">
            <i class="fa-solid fa-layer-group ms-2"></i>إضافة دفعة
        </button>
        <a href="{{ route('devices.create') }}" class="btn btn-primary"><i class="fa-solid fa-plus ms-2"></i>جهاز جديد</a>
    @endcan
@endsection

@section('content')

<div class="row g-3 mb-3">
    @foreach (\App\Models\DeviceUnit::STATUSES as $key => $label)
        <div class="col-lg-2 col-md-4 col-6">
            <div class="card h-100">
                <div class="card-body text-center py-3">
                    <div class="h4 fw-bold mb-0 text-{{ \App\Models\DeviceUnit::STATUS_COLORS[$key] }}">{{ $summary[$key] ?? 0 }}</div>
                    <div class="small text-muted">{{ $label }}</div>
                </div>
            </div>
        </div>
    @endforeach
</div>

<div class="card">
    <div class="card-header"><span><i class="fa-solid fa-microchip text-primary ms-2"></i>سجل الأجهزة</span></div>
    <div class="card-body">
        <div class="row g-2 mb-3">
            <div class="col-md-3">
                <select id="fStatus" class="form-select form-select-sm">
                    <option value="">كل الحالات</option>
                    @foreach ($statuses as $k => $v)
                        <option value="{{ $k }}" @selected(request('status') === $k)>{{ $v }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <select id="fProduct" class="form-select form-select-sm">
                    <option value="">كل الأجهزة</option>
                    @foreach ($products as $k => $v)
                        <option value="{{ $k }}" @selected((int) request('product_id') === (int) $k)>{{ $v }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <select id="fCustomer" class="form-select form-select-sm select2" data-placeholder="كل العملاء">
                    <option value="">كل العملاء</option>
                    @foreach ($customers as $c)<option value="{{ $c->id }}">{{ $c->display_name }}</option>@endforeach
                </select>
            </div>
            <div class="col-md-3">
                <button class="btn btn-sm btn-outline-secondary w-100" id="fReset"><i class="fa-solid fa-rotate-left ms-1"></i>إعادة تعيين</button>
            </div>
        </div>

        <x-datatable id="devicesTable" :headers="['#', 'IMEI', 'الجهاز', 'الرقم التسلسلي', 'الشريحة', 'العميل', 'المركبة', 'الحالة', 'الإجراءات']"/>
    </div>
</div>

@can('devices.create')
<div class="modal fade" id="bulkModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form action="{{ route('devices.bulk') }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fa-solid fa-layer-group ms-2"></i>إضافة دفعة أجهزة</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">المنتج <span class="req">*</span></label>
                            <select name="product_id" class="form-select" required>
                                <option value="">— اختر المنتج —</option>
                                @foreach ($products as $k => $v)<option value="{{ $k }}">{{ $v }}</option>@endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">مشغّل الشبكة</label>
                            <input type="text" name="sim_operator" class="form-control" placeholder="STC / Mobily / Zain">
                        </div>
                        <div class="col-12">
                            <label class="form-label">أرقام الـ IMEI <span class="req">*</span></label>
                            <textarea name="imeis" class="form-control font-monospace" rows="9" dir="ltr" required
                                      placeholder="860000000000001&#10;860000000000002|0501234567&#10;860000000000003|0501234568|SN12345"></textarea>
                            <div class="form-text">
                                سطر واحد لكل جهاز. الصيغة: <code>IMEI</code> أو <code>IMEI|رقم الشريحة</code> أو
                                <code>IMEI|رقم الشريحة|الرقم التسلسلي</code>. الأرقام المكررة تُتجاهل تلقائياً.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary"><i class="fa-solid fa-floppy-disk ms-2"></i>إضافة</button>
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">إلغاء</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endcan
@endsection

@push('scripts')
<script>
$(function () {
    let filter = '{{ request('filter') === 'available' ? 'available' : '' }}';

    const table = $('#devicesTable').DataTable(dtDefaults({
        ajax: {
            url: '{{ route('devices.index') }}',
            data: d => {
                d.status = $('#fStatus').val();
                d.product_id = $('#fProduct').val();
                d.customer_id = $('#fCustomer').val();
                d.filter = filter;
            }
        },
        columns: [
            { data: 'id', name: 'id', className: 'text-center', width: '50px' },
            { data: 'imei', name: 'imei' },
            { data: 'product_name', name: 'product.name' },
            { data: 'serial_number', name: 'serial_number' },
            { data: 'sim_number', name: 'sim_number' },
            { data: 'customer_name', name: 'customer.name' },
            { data: 'vehicle_name', name: 'vehicle.plate_number' },
            { data: 'status', name: 'status', className: 'text-center' },
            { data: 'action', name: 'action', orderable: false, searchable: false, className: 'text-center', width: '110px' },
        ],
    }));

    $('#fStatus, #fProduct, #fCustomer').on('change', () => { filter = ''; table.ajax.reload(); });
    $('#fReset').on('click', () => {
        filter = '';
        $('#fStatus, #fProduct').val('');
        $('#fCustomer').val('').trigger('change.select2');
        table.search('').ajax.reload();
    });
});
</script>
@endpush