@section('title', 'تسوية وجرد المخزون')

@extends('layouts.master')

@section('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    /* تحسين مظهر البطاقات وحقول الإدخال */
    .card-reconciliation {
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple {
        border: 1px solid #e1e5ef !important;
        border-radius: 4px !important;
        min-height: 40px !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 38px !important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #007bff !important;
        color: #fff !important;
        border: none !important;
        border-radius: 3px !important;
        padding: 3px 8px !important;
        margin-top: 4px !important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: #fff !important;
        margin-left: 5px !important;
    }
    /* شارات الفروقات */
    .diff-badge {
        font-size: 0.95rem;
        font-weight: 700;
        padding: 6px 12px;
        border-radius: 4px;
        display: inline-block;
        min-width: 65px;
    }
    .badge-surplus { background-color: #28a745; color: #fff; }
    .badge-deficit { background-color: #dc3545; color: #fff; }
    .badge-equal   { background-color: #6c757d; color: #fff; }
    
    .table-reconciliation th {
        background-color: #f4f6fa !important;
        color: #334155;
        font-weight: 600;
        font-size: 13px;
        vertical-align: middle !important;
    }
    .table-reconciliation td {
        vertical-align: middle !important;
    }
    .search-box-wrapper {
        background: #fdfdfd;
        border: 1px dashed #cbd5e1;
        border-radius: 6px;
        padding: 15px;
        margin-bottom: 20px;
    }
</style>
@endsection

@section('content')
<!-- breadcrumb -->
<div class="breadcrumb-header justify-content-between">
    <div class="my-auto">
        <div class="d-flex">
            <h4 class="content-title mb-0 my-auto">{{ __('home.Stock_Reconciliation') ?? 'الجرد وتسوية المخزون' }}</h4>
            <span class="text-muted mt-1 tx-13 mr-2 mb-0">/ {{ __('home.reconciliation') ?? 'تسوية وجرد المخزون' }}</span>
        </div>
    </div>
</div>
<!-- breadcrumb -->

{{-- رسائل التنبيه --}}
@if (session()->has('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <strong>{{ session()->get('success') }}</strong>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

@if (session()->has('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <strong>{{ session()->get('error') }}</strong>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

<div class="row">
    <div class="col-xl-12">
        <div class="card card-reconciliation">
            <div class="card-header pb-0 border-bottom d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0 text-primary">
                    <i class="fa fa-boxes mr-1"></i> {{ __('home.reconciliation') ?? 'تسوية وجرد المخزون' }}
                </h5>
                <span class="badge badge-light border text-muted px-3 py-2">
                    {{ __('home.Status') ?? 'حالة المسودة' }}
                </span>
            </div>

            <div class="card-body">
                <form action="{{ route('stock.reconciliation.store') }}" method="POST" id="reconciliationForm">
                    @csrf

                    {{-- 1. البيانات الأساسية للعملية --}}
                    <div class="row mb-3">
                        <div class="col-md-4 form-group">
                            <label class="form-label font-weight-bold">
                                {{ __('home.Branch') ?? 'الفرع' }} <span class="text-danger">*</span>
                            </label>
                            <select name="branch_id" id="branch_id" class="form-control select2" required style="width: 100%;">
                                <option value="">{{ __('home.Select_Branch') ?? '-- اختر الفرع --' }}</option>
                                                            </select>
                        </div>

                        <div class="col-md-4 form-group">
                            <label class="form-label font-weight-bold">
                                {{ __('home.Adjustment_Date') ?? 'تاريخ التسوية' }} <span class="text-danger">*</span>
                            </label>
                            <input type="date" name="adjustment_date" class="form-control" value="{{ date('Y-m-d') }}" required>
                        </div>

                        <div class="col-md-4 form-group">
                            <label class="form-label font-weight-bold">
                                {{ __('home.Notes') ?? 'ملاحظات عامة' }}
                            </label>
                            <input type="text" name="notes" class="form-control" placeholder="{{ __('home.Enter_Notes') ?? 'أدخل أي ملاحظات عامة حول التسوية' }}">
                        </div>
                    </div>

                    {{-- 2. صندوق البحث الذكي عن الأصناف --}}
                    <div class="search-box-wrapper">
                        <label class="form-label font-weight-bold text-dark mb-2">
                            <i class="fa fa-search text-primary ml-1"></i> {{ __('home.Select_Product_To_Adjust') ?? 'البحث عن الأصناف وإضافتها للجرد' }}
                        </label>
                        <div class="row align-items-center">
                            <div class="col-lg-10 col-md-9 mb-2 mb-md-0">
                                <select id="product_selector" class="form-control" multiple="multiple" style="width: 100%;">
                                </select>
                                <small class="text-muted d-block mt-1">
                                    <i class="fa fa-info-circle text-info"></i> {{ __('home.Search_Help_Text') ?? 'اكتب اسم الصنف أو الباركود للبحث المباشر، ويمكنك تحديد أكثر من صنف معاً' }}
                                </small>
                            </div>
                            <div class="col-lg-2 col-md-3">
                                <button type="button" id="btn_add_product" class="btn btn-primary btn-block shadow-sm" style="height: 42px;">
                                    <i class="fa fa-plus-circle ml-1"></i> {{ __('home.Add_To_Adjustment_List') ?? 'إضافة للقائمة' }}
                                </button>
                            </div>
                        </div>
                    </div>

                    {{-- 3. جدول بنود الجرد والتسوية --}}
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover text-center table-reconciliation" id="itemsTable">
                            <thead>
                                <tr>
                                    <th style="width: 45px;">#</th>
                                    <th style="width: 130px;">{{ __('home.Product_Code') ?? 'كود الصنف' }}</th>
                                    <th>{{ __('home.Product_Name') ?? 'اسم الصنف' }}</th>
                                    <th style="width: 120px;">{{ __('home.Book_Quantity') ?? 'الرصيد الدفتري' }}</th>
                                    <th style="width: 150px;">
                                        {{ __('home.Actual_Quantity') ?? 'الجرد الفعلي' }} <span class="text-danger">*</span>
                                    </th>
                                    <th style="width: 110px;">{{ __('home.Difference') ?? 'الفرق' }}</th>
                                    <th style="width: 110px;">{{ __('home.Cost_Price') ?? 'التكلفة' }}</th>
                                    <th>{{ __('home.Item_Notes') ?? 'ملاحظة البند' }}</th>
                                    <th style="width: 60px;">{{ __('home.Action') ?? 'حذف' }}</th>
                                </tr>
                            </thead>
                          <tbody>
    {{-- إذا كان الصنف قادماً من صفحة السالب ينزل تلقائياً هنا --}}
    @if(isset($initialProduct) && $initialProduct)
        @php
            $cost = (double) ($initialProduct->{'purchasingـprice'} ?? ($initialProduct->purchasing_price ?? ($initialProduct->average_cost ?: 0)));
            $oldQty = (double) ($initialProduct->numberofpice ?? 0);
            $newQty = 0; // اقتراح تصفير السالب افتراضياً
            $diff = $newQty - $oldQty; // الفرق موجب لتغطية العجز
        @endphp
        <tr id="row_product_{{ $initialProduct->id }}">
            <td class="font-weight-bold text-muted">1</td>
            <td>
                <span class="badge badge-light px-2 py-1">{{ $initialProduct->Product_Code ?? '-' }}</span>
                <input type="hidden" name="items[{{ $initialProduct->id }}][product_id]" value="{{ $initialProduct->id }}">
            </td>
            <td class="text-right font-weight-bold text-dark">{{ $initialProduct->product_name }}</td>
            <td>
                <span class="badge badge-danger p-2 font-weight-bold" style="font-size: 14px;">{{ $oldQty }}</span>
                <input type="hidden" class="old-qty" value="{{ $oldQty }}">
            </td>
            <td>
                <input type="number" step="any" name="items[{{ $initialProduct->id }}][new_quantity]" 
                       class="form-control text-center new-qty font-weight-bold" 
                       value="{{ $newQty }}" required style="font-size: 15px; height: 36px;" autofocus>
            </td>
            <td>
                <span class="diff-badge badge-surplus diff-display">+{{ $diff }}</span>
            </td>
            <td class="text-muted">{{ number_format($cost, 2) }}</td>
            <td>
                <input type="text" name="items[{{ $initialProduct->id }}][item_notes]" 
                       class="form-control form-control-sm" value="تسوية رصيد سالب">
            </td>
            <td>
                <button type="button" class="btn btn-sm btn-outline-danger btn-remove-row" title="حذف">
                    <i class="fa fa-trash"></i>
                </button>
            </td>
        </tr>
    @else
        {{-- صف افتراضي عند خلو الجدول --}}
        <tr id="empty_row">
            <td colspan="9" class="text-center py-4 text-muted font-weight-bold">
                <i class="fa fa-clipboard-list fa-2x d-block mb-2 text-secondary"></i>
                لم يتم إضافة أي أصناف حتى الآن، استخدم مربع البحث أعلاه لإضافة الأصناف.
            </td>
        </tr>
    @endif
</tbody>
                        </table>
                    </div>

                    {{-- 4. إحصائيات سريعة وزر الحفظ --}}
                    <div class="row align-items-center mt-4 pt-3 border-top">
                        <div class="col-md-6 mb-2 mb-md-0">
                            <span class="mr-3 font-weight-bold">
                                إجمالي الأصناف: <strong id="total_items_count" class="text-primary">0</strong>
                            </span>
                        </div>
                        <div class="col-md-6 text-left">
                            <button type="submit" class="btn btn-success btn-lg px-5 shadow">
                                <i class="fa fa-save ml-1"></i> {{ __('home.Save_Adjustment') ?? 'حفظ وتحديث الأرصدة' }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    // 1. تفعيل select2 للفرع
    $('#branch_id').select2({
        dir: "rtl",
        placeholder: "{{ __('home.Select_Branch') ?? 'اختر الفرع' }}",
        width: '100%'
    });

    // 2. تفعيل Select2 مع Ajax للأصناف
    $('#product_selector').select2({
        dir: "rtl",
        width: '100%',
        placeholder: "ابحث باسم الصنف أو الباركود...",
        allowClear: true,
        minimumInputLength: 1,
        language: {
            inputTooShort: function() {
                return "يرجى كتابة حرف واحد على الأقل للبحث...";
            },
            noResults: function() {
                return "لم يتم العثور على نتائج";
            },
            searching: function() {
                return "جاري البحث...";
            }
        },
        ajax: {
            url: "{{ route('stock.ajax.searchProducts') }}",
            dataType: 'json',
            delay: 300,
            data: function (params) {
                return {
                    term: params.term,
                    branch_id: $('#branch_id').val()
                };
            },
            processResults: function (data) {
                return {
                    results: data.results
                };
            },
            cache: true
        }
    });

    // تفريغ قائمة الأصناف عند تغيير الفرع
    $('#branch_id').on('change', function() {
        $('#product_selector').val(null).trigger('change');
    });

    var rowIndex = 0;

    // تحديث إجمالي عدد الأصناف في الجدول
    function updateTotalCount() {
        var count = $('#itemsTable tbody tr:not(#empty_row)').length;
        $('#total_items_count').text(count);
        if (count === 0) {
            $('#empty_row').show();
        } else {
            $('#empty_row').hide();
        }
    }

    // 3. إضافة الأصناف المحددة للجدول
    $('#btn_add_product').on('click', function() {
        var branchId = $('#branch_id').val();
        if (!branchId) {
            alert('يرجى اختيار الفرع أولاً قبل إضافة الأصناف');
            return;
        }

        var selectedData = $('#product_selector').select2('data');

        if (!selectedData || selectedData.length === 0) {
            alert('يرجى اختيار صنف واحد على الأقل من مربع البحث');
            return;
        }

        $('#empty_row').hide();

  selectedData.forEach(function(item) {
        var productId = item.id;

        // تخطي الصنف إذا كان موجوداً مسبقاً في الجدول
        if ($('#row_product_' + productId).length > 0) {
            return;
        }

        var code = item.code || '-';
        var name = item.name || item.text;
        var oldQty = parseFloat(item.qty) || 0;
        
        // قراءة التكلفة القادمة من الـ JSON
        var cost = parseFloat(item.cost) || 0;

        rowIndex++;

        var tr = `
            <tr id="row_product_${productId}">
                <td class="font-weight-bold text-muted">${rowIndex}</td>
                <td>
                    <span class="badge badge-light px-2 py-1">${code}</span>
                    <input type="hidden" name="items[${productId}][product_id]" value="${productId}">
                </td>
                <td class="text-right font-weight-bold text-dark">${name}</td>
                <td>
                    <span class="font-weight-bold">${oldQty}</span>
                    <input type="hidden" class="old-qty" value="${oldQty}">
                </td>
                <td>
                    <input type="number" step="any" name="items[${productId}][new_quantity]" 
                           class="form-control text-center new-qty font-weight-bold" 
                           value="${oldQty}" required style="font-size: 15px; height: 36px;">
                </td>
                <td>
                    <span class="diff-badge badge-equal diff-display">0</span>
                </td>
                <td class="text-muted">${cost.toFixed(2)}</td>
                <td>
                    <input type="text" name="items[${productId}][item_notes]" 
                           class="form-control form-control-sm" placeholder="سبب التسوية (اختياري)">
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove-row" title="حذف">
                        <i class="fa fa-trash"></i>
                    </button>
                </td>
            </tr>
        `;

        $('#itemsTable tbody').append(tr);
    });

        // تفريغ مربع الاختيار بعد الإضافة
        $('#product_selector').val(null).trigger('change');
        updateTotalCount();
    });

    // 4. احتساب الفرق وتحديث لون الشارة فور تعديل الكمية الفعلية
    $(document).on('input', '.new-qty', function() {
        var row = $(this).closest('tr');
        var oldQty = parseFloat(row.find('.old-qty').val()) || 0;
        var newQty = parseFloat($(this).val()) || 0;
        var diff = newQty - oldQty;

        var badge = row.find('.diff-display');
        badge.text(diff > 0 ? '+' + diff : diff);

        badge.removeClass('badge-surplus badge-deficit badge-equal');
        if (diff > 0) {
            badge.addClass('badge-surplus'); // زيادة
        } else if (diff < 0) {
            badge.addClass('badge-deficit'); // عجز
        } else {
            badge.addClass('badge-equal');   // متطابق
        }
    });

    // 5. حذف صنف من الجدول
    $(document).on('click', '.btn-remove-row', function() {$(this).closest('tr').remove();
        updateTotalCount();
    });

    // 6. منع إرسال النموذج إذا كان الجدول فارغاً
    $('#reconciliationForm').on('submit', function(e) {
        if ($('#itemsTable tbody tr:not(#empty_row)').length === 0) {
            e.preventDefault();
            alert('يرجى إضافة صنف واحد على الأقل في قائمة الجرد قبل الحفظ.');
        }
    });
});
</script>
@endsection