@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-item-transfer {
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    .select2-container--default .select2-selection--single {
        border: 1px solid #e1e5ef !important;
        border-radius: 4px !important;
        height: 42px !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 40px !important;
    }
    .product-box {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 20px;
        height: 100%;
    }
    .product-box.source-box {
        border-top: 4px solid #dc3545;
    }
    .product-box.target-box {
        border-top: 4px solid #28a745;
    }
    .stock-preview {
        background: #fff;
        border: 1px dashed #cbd5e1;
        border-radius: 6px;
        padding: 12px;
        margin-top: 15px;
    }
    .transfer-divider {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: #007bff;
        height: 100%;
    }
</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.Item_Transfer') ?? 'تحويل من صنف إلى صنف' }}</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-item-transfer">
            <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-random mr-1"></i> إذن تحويل كمية بين صنفين (إعادة تعبئة / تالف / تصحيح)
                </h5>
                <span class="badge badge-light border text-muted px-3 py-2">
                    تسوية صنف إلى صنف
                </span>
            </div>

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

                    {{-- 1. البيانات الأساسية --}}
                    <div class="row mb-4">
                        <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="">-- اختر الفرع --</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 style="height: 42px;">
                        </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="مثال: تحويل صنف تالف، فك عبوة..." style="height: 42px;">
                        </div>
                    </div>

                    <hr>

                    {{-- 2. صناديق الأصناف والتحويل --}}
                    <div class="row align-items-stretch">
                        {{-- الصنف المصدر (الذي سيتم الخصم منه) --}}
                        <div class="col-lg-5 col-md-12 mb-3 mb-lg-0">
                            <div class="product-box source-box shadow-sm">
                                <h6 class="font-weight-bold text-danger mb-3">
                                    <i class="fa fa-minus-circle ml-1"></i> الصنف المحول منه (المصدر - خصم)
                                </h6>
                                <div class="form-group mb-2">
                                    <label class="form-label small text-muted font-weight-bold">اختر الصنف المصدر بالاسم أو الكود:</label>
                                    <select name="from_product_id" id="from_product_id" class="form-control" required style="width: 100%;">
                                    </select>
                                </div>

                                {{-- معاينة رصيد الصنف المصدر --}}
                                <div class="stock-preview" id="from_preview" style="display: none;">
                                    <div class="d-flex justify-content-between mb-1">
                                        <span class="text-muted">الرصيد الدفتري الحالي:</span>
                                        <strong id="from_current_qty" class="text-dark">0</strong>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <span class="text-muted">الرصيد المتوقع بعد الخصم:</span>
                                        <strong id="from_new_qty" class="text-danger font-weight-bold">0</strong>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- سهم التحويل وحقل الكمية --}}
                        <div class="col-lg-2 col-md-12 my-auto text-center">
                            <div class="py-3">
                                <label class="form-label font-weight-bold text-primary">
                                    الكمية المحولة <span class="text-danger">*</span>
                                </label>
                                <input type="number" step="any" min="0.01" name="quantity" id="transfer_qty" 
                                       class="form-control text-center font-weight-bold text-primary" 
                                       value="1" required style="font-size: 1.2rem; height: 48px;">
                                <div class="transfer-divider mt-2">
                                    <i class="fa fa-arrow-left"></i>
                                </div>
                            </div>
                        </div>

                        {{-- الصنف المستلم (الذي سيتم الإضافة إليه) --}}
                        <div class="col-lg-5 col-md-12 mb-3 mb-lg-0">
                            <div class="product-box target-box shadow-sm">
                                <h6 class="font-weight-bold text-success mb-3">
                                    <i class="fa fa-plus-circle ml-1"></i> الصنف المحول إليه (المستلم - إضافة)
                                </h6>
                                <div class="form-group mb-2">
                                    <label class="form-label small text-muted font-weight-bold">اختر الصنف المستلم بالاسم أو الكود:</label>
                                    <select name="to_product_id" id="to_product_id" class="form-control" required style="width: 100%;">
                                    </select>
                                </div>

                                {{-- معاينة رصيد الصنف المستلم --}}
                                <div class="stock-preview" id="to_preview" style="display: none;">
                                    <div class="d-flex justify-content-between mb-1">
                                        <span class="text-muted">الرصيد الدفتري الحالي:</span>
                                        <strong id="to_current_qty" class="text-dark">0</strong>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <span class="text-muted">الرصيد المتوقع بعد الإضافة:</span>
                                        <strong id="to_new_qty" class="text-success font-weight-bold">0</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 3. زر التنفيذ --}}
                    <div class="mt-4 pt-3 border-top text-left">
                        <button type="submit" class="btn btn-success btn-lg px-5 shadow">
                            <i class="fa fa-check ml-1"></i> تأكيد نقل الكمية بين الصنفين
                        </button>
                    </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() {
    // تفعيل select2 للفرع
    $('#branch_id').select2({ dir: "rtl", width: '100%' });

    var fromAvailableQty = 0;
    var toAvailableQty   = 0;

    // دالة تهيئة Select2 Ajax
    function initAjaxSelect2(elementId, placeholderText) {
        $(elementId).select2({
            dir: "rtl",
            width: '100%',
            placeholder: placeholderText,
            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
            }
        });
    }

    initAjaxSelect2('#from_product_id', 'ابحث عن الصنف المحول منه...');
    initAjaxSelect2('#to_product_id', 'ابحث عن الصنف المحول إليه...');

    // تحديث المعاينة الحسابية للأرصدة
    function updateCalculations() {
        var transferQty = parseFloat($('#transfer_qty').val()) || 0;

        if ($('#from_product_id').val()) {
            $('#from_current_qty').text(fromAvailableQty);
            $('#from_new_qty').text(fromAvailableQty - transferQty);
            $('#from_preview').slideDown(200);
        } else {
            $('#from_preview').hide();
        }

        if ($('#to_product_id').val()) {
            $('#to_current_qty').text(toAvailableQty);
            $('#to_new_qty').text(toAvailableQty + transferQty);
            $('#to_preview').slideDown(200);
        } else {
            $('#to_preview').hide();
        }
    }

    // عند اختيار الصنف المحول منه
    $('#from_product_id').on('select2:select', function(e) {
        var data = e.params.data;
        fromAvailableQty = parseFloat(data.qty) || 0;
        updateCalculations();
    });
    $('#from_product_id').on('select2:clear', function() {
        fromAvailableQty = 0;
        $('#from_preview').hide();
    });

    // عند اختيار الصنف المحول إليه
    $('#to_product_id').on('select2:select', function(e) {
        var data = e.params.data;
        toAvailableQty = parseFloat(data.qty) || 0;
        updateCalculations();
    });
    $('#to_product_id').on('select2:clear', function() {
        toAvailableQty = 0;
        $('#to_preview').hide();
    });

    // عند تغيير الكمية
    $('#transfer_qty').on('input', function() {
        updateCalculations();
    });

    // عند تغيير الفرع
    $('#branch_id').on('change', function() {
        $('#from_product_id').val(null).trigger('change');
        $('#to_product_id').val(null).trigger('change');
        $('#from_preview').hide();
        $('#to_preview').hide();
    });

    // التحقق قبل الحفظ
    $('#itemTransferForm').on('submit', function(e) {
        var fromId = $('#from_product_id').val();
        var toId   = $('#to_product_id').val();
        var qty    = parseFloat($('#transfer_qty').val()) || 0;

        if (!fromId || !toId) {
            e.preventDefault();
            alert('يرجى اختيار الصنف المصدر والصنف المستلم.');
            return;
        }

        if (fromId === toId) {
            e.preventDefault();
            alert('لا يمكن التحويل لنفس الصنف! يرجى اختيار صنفين مختلفين.');
            return;
        }

        if (qty <= 0) {
            e.preventDefault();
            alert('يرجى إدخال كمية صحيحة أكبر من الصفر.');
            return;
        }
    });
});
</script>
@endsection