@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-transfer {
        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;
    }
    .search-box-wrapper {
        background: #fdfdfd;
        border: 1px dashed #cbd5e1;
        border-radius: 6px;
        padding: 15px;
        margin-bottom: 20px;
    }
    .table-transfer th {
        background-color: #f4f6fa !important;
        color: #334155;
        font-weight: 600;
        font-size: 13px;
        vertical-align: middle !important;
    }
    .table-transfer td {
        vertical-align: middle !important;
    }
    .branch-transfer-arrow {
        font-size: 1.5rem;
        color: #007bff;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        margin-top: 25px;
    }
    .target-product-select {
        min-width: 220px;
    }
</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.Branch_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-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-dolly 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.branchTransfer.store') }}" method="POST" id="transferForm">
                    @csrf

                    {{-- 1. تحديد الفرع المحول منه والمحول إليه --}}
                    <div class="row mb-3 align-items-center">
                        <div class="col-md-5 form-group">
                            <label class="form-label font-weight-bold">
                                من الفرع (المصدر) <span class="text-danger">*</span>
                            </label>
                            <select name="from_branch_id" id="from_branch_id" class="form-control select2" required style="width: 100%;">
                                <option value="">-- اختر الفرع المحول منه --</option>
                                                            </select>
                        </div>

                        <div class="col-md-2 text-center d-none d-md-block">
                            <div class="branch-transfer-arrow">
                                <i class="fa fa-exchange-alt"></i>
                            </div>
                        </div>

                        <div class="col-md-5 form-group">
                            <label class="form-label font-weight-bold">
                                إلى الفرع (الوجهة) <span class="text-danger">*</span>
                            </label>
                            <select name="to_branch_id" id="to_branch_id" class="form-control select2" required style="width: 100%;">
                                <option value="">-- اختر الفرع المحول إليه --</option>
                                                            </select>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6 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-6 form-group">
                            <label class="form-label font-weight-bold">
                                {{ __('home.Notes') ?? 'ملاحظات / سبب النقل' }}
                            </label>
                            <input type="text" name="notes" class="form-control" placeholder="أدخل أي ملاحظات تخص التحويل">
                        </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> ابحث عن الأصناف من الفرع المحول منه
                        </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> اكتب الاسم أو الباركود؛ تظهر فقط الأصناف التابعة للفرع المصدر ورصيدها المتاح.
                                </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> إضافة للقائمة
                                </button>
                            </div>
                        </div>
                    </div>

                    {{-- 3. جدول الأصناف المراد تحويلها --}}
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover text-center table-transfer" id="itemsTable">
                            <thead>
                                <tr>
                                    <th style="width: 45px;">#</th>
                                    <th style="width: 120px;">كود المصدر</th>
                                    <th>الصنف بالفرع المصدر</th>
                                    <th style="width: 110px;">الرصيد المتاح</th>
                                    <th style="width: 130px;">الكمية المحولة <span class="text-danger">*</span></th>
                                    <th style="width: 260px;">الصنف المقابل بالفرع المستلم (اختياري / مطابق)</th>
                                    <th style="width: 100px;">التكلفة</th>
                                    <th>ملاحظات البند</th>
                                    <th style="width: 60px;">حذف</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr id="empty_row">
                                    <td colspan="9" class="text-center py-4 text-muted font-weight-bold">
                                        <i class="fa fa-truck-loading fa-2x d-block mb-2 text-secondary"></i>
                                        لم يتم إضافة أصناف للتحويل بعد. اختر الفرعين وابحث عن الأصناف أعلاه.
                                    </td>
                                </tr>
                            </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-check-circle ml-1"></i> إتمام عملية التحويل
                            </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() {$('.select2').select2({ dir: "rtl", width: '100%' });

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

    // تفريغ الجدول عند تغيير الفرع المصدر
    $('#from_branch_id').on('change', function() {
        $('#product_selector').val(null).trigger('change');
        if ($('#itemsTable tbody tr:not(#empty_row)').length > 0) {
            if (confirm('تغيير الفرع المصدر سيؤدي إلى مسح الأصناف الحالية من الجدول، هل تريد المتابعة؟')) {
                $('#itemsTable tbody tr:not(#empty_row)').remove();
                updateTotalCount();
            }
        }
    });

    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();
        }
    }

    // إضافة أصناف إلى الجدول
    $('#btn_add_product').on('click', function() {
        var fromBranch = $('#from_branch_id').val();
        var toBranch = $('#to_branch_id').val();

        if (!fromBranch) {
            alert('يرجى اختيار الفرع المحول منه (المصدر) أولاً.');
            return;
        }

        if (!toBranch) {
            alert('يرجى اختيار الفرع المحول إليه (الوجهة) أولاً.');
            return;
        }

        if (fromBranch === toBranch) {
            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 availableQty = parseFloat(item.qty) || 0;
            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="badge badge-info p-2 font-weight-bold" style="font-size: 13px;">${availableQty}</span>
                    </td>
                    <td>
                        <input type="number" step="any" min="0.01" max="${availableQty > 0 ? availableQty : ''}" 
                               name="items[${productId}][quantity]" 
                               class="form-control text-center font-weight-bold text-primary" 
                               value="1" required style="font-size: 15px; height: 36px;">
                    </td>
                    {{-- حقل الصنف المقابل في الفرع المستلم --}}
                    <td>
                        <select name="items[${productId}][to_product_id]" 
                                id="target_product_${productId}" 
                                class="form-control target-product-select select2-ajax-target" 
                                style="width: 100%;">
                            <option value="">-- تلقائي (مطابقة بالكود أو الاسم) --</option>
                        </select>
                    </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);

            // تهيئة Select2 لهذا السطر للبحث حصراً في أصناف الفرع المستلم (to_branch_id)
            $(`#target_product_${productId}`).select2({
                dir: "rtl",
                width: '100%',
                placeholder: "-- تلقائي (مطابقة بالكود أو الاسم) --",
                allowClear: true,
                minimumInputLength: 1,
                ajax: {
                    url: "{{ route('stock.ajax.searchProducts') }}",
                    dataType: 'json',
                    delay: 300,
                    data: function (params) {
                        return {
                            term: params.term,
                            branch_id: $('#to_branch_id').val() // البحث في الفرع المستلم
                        };
                    },
                    processResults: function (data) {
                        return { results: data.results };
                    },
                    cache: true
                }
            });

            // محاولة مطابقة تلقائية فورية: إذا كان الصنف موجوداً بنفس الكود في الفرع المستلم يتم اختياره مسبقاً
            $.ajax({
                url: "{{ route('stock.ajax.searchProducts') }}",
                dataType: 'json',
                data: {
                    term: code !== '-' ? code : name,
                    branch_id: $('#to_branch_id').val()
                },
                success: function(response) {
                    if (response.results && response.results.length > 0) {
                        // مطابقة بالكود أولاً أو بالاسم
                        var match = response.results.find(p => p.code === code) || response.results[0];
                        if (match) {
                            var option = new Option(match.text, match.id, true, true);
                            $(`#target_product_${productId}`).append(option).trigger('change');
                        }
                    }
                }
            });
        });

        $('#product_selector').val(null).trigger('change');
        updateTotalCount();
    });

    // حذف سطر
    $(document).on('click', '.btn-remove-row', function() {$(this).closest('tr').remove();
        updateTotalCount();
    });

    // التحقق عند الإرسال
    $('#transferForm').on('submit', function(e) {
        var fromBranch = $('#from_branch_id').val();
        var toBranch = $('#to_branch_id').val();

        if (fromBranch === toBranch) {
            e.preventDefault();
            alert('خطأ: الفرع المصدر والفرع المستلم متطابقان!');
            return;
        }

        if ($('#itemsTable tbody tr:not(#empty_row)').length === 0) {
            e.preventDefault();
            alert('يرجى إضافة صنف واحد على الأقل في قائمة التحويل.');
            return;
        }
    });
});
</script>
@endsection