@extends('layouts.master')
@section('css')
<!-- Internal Data table css -->
<link href="{{ URL::asset('assets/plugins/datatable/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
<link href="{{ URL::asset('assets/plugins/datatable/css/buttons.bootstrap4.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/plugins/datatable/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" />
<link href="{{ URL::asset('assets/plugins/datatable/css/jquery.dataTables.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/plugins/datatable/css/responsive.dataTables.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet">

<style>
    .product-selection {
        max-width: 95vw !important;
        width: 95vw !important;
    }
    .modal-xl.product-selection .modal-content {
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        border: none;
    }
    .highlight-flash {
        animation: flashGreen 1s ease-in-out;
    }
    @keyframes flashGreen {
        0% { background-color: rgba(46, 204, 113, 0.25); }
        100% { background-color: transparent; }
    }
    .badge-code {
        font-family: 'Consolas', monospace;
        background: #f1f5f9;
        color: #0f172a;
        padding: 4px 8px;
        border-radius: 6px;
        font-weight: 700;
        border: 1px solid #e2e8f0;
    }
</style>

@section('title')
{{ __('supprocesses.product_movement') }}
@stop
@endsection

@section('page-header')
<div class="main-parent">
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between parent-heading">
        <div class="my-auto">
            <div class="d-flex align-items-center">
                <h4 class="content-title mb-0 my-auto text-dark font-weight-bold">
                    <i class="fas fa-edit text-primary mr-2"></i> {{ __('supprocesses.product_movement') }}
                </h4>
            </div>
        </div>
    </div>
    <!-- breadcrumb -->
</div>
@endsection

@section('content')

@if (count($errors) > 0)
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <button aria-label="Close" class="close" data-dismiss="alert" type="button">
        <span aria-hidden="true">&times;</span>
    </button>
    <strong><i class="fas fa-exclamation-triangle"></i> حدث خطأ:</strong>
    <ul class="mb-0 mt-2">
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

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

<!-- row -->
<div class="row">
    <div class="col-xl-12">
        <div class="card product-data-card shadow-sm border-0 br-7">
            <div class="card-body">
                <form action="{{ url(Mcamara\LaravelLocalization\Facades\LaravelLocalization::getCurrentLocale() . '/product_movement') }}" method="POST" enctype="multipart/form-data" autocomplete="off" id="updateProductForm">
                    @csrf

                    <!-- اختيار الفرع وزر اختيار المنتج -->
                    <div class="row row-sm mb-4 bg-light p-3 br-7 border">
                        <div class="col-lg-6">
                            <label class="font-weight-bold mb-2" style="font-size: 1rem;">
                                <i class="fas fa-store-alt text-primary"></i> {{ __('users.branch') }}
                            </label>
                            <select class="form-control select2" style="width:100%" name="branchs_id" id="branchs_id">
                                <option value="{{ Auth()->user()->branch->id }}">{{ Auth()->user()->branch->name }}</option>
                                @foreach (App\Models\branchs::get() as $section)
                                    @if(Auth()->user()->branch->id != $section->id)
                                        <option value="{{ $section->id }}">{{ $section->name }}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-6 d-flex align-items-end mt-3 mt-lg-0">
                            <button type="button" class="btn btn-primary btn-block py-2 font-weight-bold" id="btnOpenSearchModal" style="background: linear-gradient(135deg, #FF4F1F, #ff7448); border: none; font-size: 1.05rem; box-shadow: 0 4px 12px rgba(255, 79, 31, 0.35);">
                                <i class="las la-search"></i> {{ __('home.chooose product') }} (F9)
                            </button>
                        </div>
                    </div>

                    <!-- البيانات الأساسية للمنتج -->
                    <h6 class="main-content-label mb-3 mt-2 text-primary font-weight-bold">
                        <i class="fas fa-barcode"></i> {{ __('home.basic_product_data') }}
                    </h6>
                    <div class="row row-sm mb-3">
                        <div class="col-lg-4" id="type">
                            <label class="parent-label font-weight-bold">
                                {{ __('home.productNo') }} 
                                <small class="text-muted">(امسح واضغط Enter)</small>
                            </label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-white"><i class="fas fa-barcode text-muted"></i></span>
                                </div>
                                <input type="text" class="form-control" id="productcode" name="productcode" dir="ltr" placeholder="كود المنتج أو الباركود" value="{{ $selectedProduct->Product_Code ?? old('productcode') }}" autofocus>
                            </div>
                            <input type="hidden" name="productname" id="productname" value="{{ $selectedProduct->product_name ?? '' }}">
                        </div>

                        <div class="col-lg-4">
                            <label class="parent-label font-weight-bold">{{ __('home.productname') }} <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="productnameshow" name="productnameshow" required value="{{ $selectedProduct->product_name ?? old('productnameshow') }}" placeholder="اسم المنتج">
                        </div>

                        <div class="col-lg-4">
                            <label class="parent-label font-weight-bold">{{ __('home.refnumber') }}</label>
                            <input type="text" class="form-control" id="refnumber" name="refnumber" value="{{ $selectedProduct->refnumber ?? old('refnumber') }}" placeholder="الرقم المرجعي (إن وجد)">
                        </div>
                    </div>

                    @can('System setting')
                    <!-- الأسعار والتصنيف -->
                    <h6 class="main-content-label mb-3 mt-4 text-primary font-weight-bold">
                        <i class="fas fa-money-bill-wave"></i> {{ __('home.prices_and_category') }}
                    </h6>
                    <div class="row row-sm mb-3">
                        <div class="col-lg-4">
                            <label class="parent-label font-weight-bold">{{ __('home.purachesepice') }}</label>
                            <div class="input-group">
                                <input type="number" step="any" class="form-control" id="purachesepice" name="purachesepice" value="{{ $selectedProduct->purchasingـprice ?? old('purachesepice') }}" placeholder="0.00">
                                <div class="input-group-append">
                                    <span class="input-group-text bg-light text-muted">{{ __('home.SAR') ?? 'ر.س' }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <label class="parent-label font-weight-bold">{{ __('home.Wholesale_price') }}</label>
                            <div class="input-group">
                                <input type="number" step="any" class="form-control" id="Wholesale_price" name="Wholesale_price" value="{{ $selectedProduct->Wholesale_price ?? old('Wholesale_price') }}" placeholder="0.00">
                                <div class="input-group-append">
                                    <span class="input-group-text bg-light text-muted">{{ __('home.SAR') ?? 'ر.س' }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <label class="parent-label font-weight-bold">{{ __('home.sellingproduct without tax') }}</label>
                            <div class="input-group">
                                <input type="number" step="any" class="form-control" id="product_price" name="product_price" value="{{ $selectedProduct->sale_price ?? old('product_price') }}" placeholder="0.00">
                                <div class="input-group-append">
                                    <span class="input-group-text bg-light text-muted">{{ __('home.SAR') ?? 'ر.س' }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endcan

                    <!-- المجموعات والمنتج الرئيسي -->
                    <div class="row row-sm mb-3">
                        <div class="col-lg-6">
                            <label class="parent-label font-weight-bold">{{ __('home.groups') }}</label>
                            <select name="product_group" id="product_group" class="form-control select2" style="width: 100%;">
                                @foreach (App\Models\products_group::get() as $section)
                                    <option value="{{ $section->id }}" {{ (isset($selectedProduct) && $selectedProduct->product_group == $section->id) ? 'selected' : '' }}>
                                        {{ $section->group_ar }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-6">
                            <label class="parent-label font-weight-bold">{{ __('home.MAINproduct') }}</label>
                            <select name="MAINproduct" id="MAINproduct" class="form-control select2" style="width: 100%;">
                                <option value="0">{{ __('home.noreplace') ?? 'لا يوجد بديل' }}</option>
                                @if(isset($selectedProduct) && !empty($selectedProduct->main_product) && $selectedProduct->main_product != '0')
                                    <option value="{{ $selectedProduct->main_product }}" selected>منتج بديل #{{ $selectedProduct->main_product }}</option>
                                @endif
                            </select>
                        </div>
                    </div>

                    <hr>

                    <!-- التخزين والملاحظات -->
                    <h6 class="main-content-label mb-3 mt-4 text-primary font-weight-bold">
                        <i class="fas fa-map-marker-alt"></i> {{ __('home.storage_and_notes') }}
                    </h6>
                    <div class="row row-sm mb-3">
                        <div class="col-lg-4">
                            <label class="parent-label font-weight-bold">{{ __('supprocesses.current_location') }}</label>
                            <input type="text" class="form-control bg-light" id="current_location" name="current_location" readonly value="{{ $selectedProduct->Product_Location ?? '' }}">
                        </div>
                        <div class="col-lg-4">
                            <label class="parent-label font-weight-bold">{{ __('supprocesses.new_location') }}</label>
                            <input type="text" class="form-control" id="new_location" name="new_location" value="{{ $selectedProduct->Product_Location ?? old('new_location') }}" placeholder="موقع الصنف الجديد">
                        </div>
                        <div class="col-lg-4">
                            <label class="parent-label font-weight-bold">{{ __('supprocesses.product_notes') }}</label>
                            <input type="text" class="form-control" id="product_notes" name="product_notes" value="{{ $selectedProduct->notes ?? '-' }}">
                        </div>
                    </div>

                    <!-- صورة المنتج -->
                    <div class="row row-sm mt-4">
                        <div class="col-md-12">
                            <div class="form-group p-3 br-7 border bg-light">
                                <label class="font-weight-bold mb-2"><i class="fas fa-image text-primary"></i> {{ __('home.photo') }}</label>
                                <div class="d-flex align-items-center flex-wrap gap-3">
                                    <div class="mr-3 mb-2">
                                        @php
                                            $initialPhoto = (isset($selectedProduct) && !empty($selectedProduct->photo)) ? $selectedProduct->photo : 'productunKnown.png';
                                        @endphp
                                        <img id="uploadedimg" 
                                             src="{{ asset('assets/admin/uploads/' . $initialPhoto) }}" 
                                             onerror="this.src='{{ asset('assets/admin/uploads/productunKnown.png') }}'" 
                                             style="height: 85px; width: 110px; object-fit: contain; border: 2px solid #dee2e6; border-radius: 8px; background: #fff; padding: 4px;" 
                                             alt="معاينة الصورة">
                                    </div>
                                    <div class="flex-grow-1 mb-2">
                                        <input autocomplete="off" onchange="readURL(this)" type="file" id="Item_img" name="Item_img" class="form-control-file">
                                        <input type="hidden" name="old_photo" id="old_photo" value="{{ $selectedProduct->photo ?? 'productunKnown.png' }}">
                                        <small class="text-muted d-block mt-1">الملفات المسموحة: JPG, PNG, JPEG (أقصى حجم: 2 ميجابايت)</small>
                                    </div>
                                </div>
                                @error('Item_img')
                                    <span class="text-danger font-weight-bold">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- الحقول المخفية -->
                    <input type="hidden" id="product_no" name="product_no" value="{{ $selectedProduct->id ?? old('product_no') }}">
                    <input type="hidden" id="quentity" name="quentity" value="{{ $selectedProduct->numberofpice ?? old('quentity') }}">
                    <input type="hidden" id="user_id" name="user_id" value="{{ Auth()->user()->discount_allow_limit ?? 0 }}">

                    <div class="d-flex justify-content-center mt-4 mb-2">
                        <button type="submit" class="btn btn-success px-5 py-2 font-weight-bold" style="font-size: 1.15rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);">
                            <i class="fas fa-save mr-1"></i> {{ __('roles.update') }}
                        </button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
<!-- row closed -->

<!-- Modal: اختيار المنتج (موضوع خارج الفورم لمنع تداخل العناصر) -->
<div class="modal fade" id="SearchProduct" tabindex="-1" role="dialog" aria-labelledby="SearchProductModalLabel" aria-hidden="true" dir="rtl">
    <div class="modal-dialog modal-xl product-selection" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white d-flex align-items-center justify-content-between">
                <h5 class="modal-title font-weight-bold mb-0" id="SearchProductModalLabel">
                    <i class="fas fa-search mr-2"></i> {{ __('home.chooose product') }}
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close" style="opacity: 0.9;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-4">
                <div class="row mb-3">
                    <div class="col-lg-6">
                        <label for="searchaboutproduct" class="font-weight-bold">
                            {{ __('home.searchaboutproduct') }}
                        </label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-white"><i class="fas fa-search text-muted"></i></span>
                            </div>
                            <input dir="auto" type="text" class="form-control" placeholder="{{ __('home.Search By Name or Product Number') }}" id="searchaboutproduct" name="searchaboutproduct" onkeyup="searchaboutproductfunction()" autocomplete="off">
                        </div>
                    </div>
                </div>

                <input type="hidden" id="token_search" value="{{ csrf_token() }}">

                <div class="table-responsive" id="ajax_responce_serarchDiv">
                    <div class="text-center py-5 text-muted">
                        <i class="fas fa-spinner fa-spin fa-2x mb-2 text-primary"></i>
                        <p>جاري تحميل قائمة المنتجات...</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer bg-light">
                <button type="button" class="btn btn-secondary px-4" data-dismiss="modal">{{ __('home.cancel') }}</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('js')
<script src="{{ URL::asset('assets/plugins/select2/js/select2.min.js') }}"></script>

<script>
    // معاينة الصورة عند اختيار ملف جديد
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#uploadedimg').attr('src', e.target.result).show();
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    // دالة تعبئة بيانات المنتج بالكامل وبدقة من كائن المنتج
    function populateProductData(data) {
        if (!data) return;

        $('#product_no').val(data.id || '');
        if (data.Product_Code) {
            $('#productcode').val(data.Product_Code);
        }
        if (data.product_name) {
            $('#productnameshow').val(data.product_name);
            $('#productname').val(data.product_name);
        }
        $('#refnumber').val(data.refnumber || '');

        if (data.purchasingـprice !== undefined && data.purchasingـprice !== null) {
            $('#purachesepice').val(data.purchasingـprice);
        }
        if (data.Wholesale_price !== undefined && data.Wholesale_price !== null) {
            $('#Wholesale_price').val(data.Wholesale_price);
        }
        if (data.sale_price !== undefined && data.sale_price !== null) {
            $('#product_price').val(data.sale_price);
        }

        if (data.product_group) {
            $('#product_group').val(data.product_group).trigger('change');
        }

        if (data.Product_Location !== undefined && data.Product_Location !== null) {
            $('#current_location').val(data.Product_Location);
            $('#new_location').val(data.Product_Location);
        }

        if (data.notes) {
            $('#product_notes').val(data.notes);
        }

        if (data.numberofpice !== undefined && data.numberofpice !== null) {
            $('#quentity').val(data.numberofpice);
        }

        if (data.photo && data.photo !== 'productunKnown.png') {
            $('#old_photo').val(data.photo);
            var photoUrl = "{{ asset('assets/admin/uploads') }}/" + data.photo;
            $('#uploadedimg').attr('src', photoUrl).show();
        } else {
            $('#old_photo').val('productunKnown.png');
            $('#uploadedimg').attr('src', "{{ asset('assets/admin/uploads/productunKnown.png') }}").show();
        }

        if (data.main_product && data.main_product != '0' && data.main_product != 'no') {
            if ($('#MAINproduct option[value="' + data.main_product + '"]').length === 0) {
                $('#MAINproduct').append(new Option('منتج بديل #' + data.main_product, data.main_product, true, true));
            }
            $('#MAINproduct').val(data.main_product).trigger('change');
        } else {
            $('#MAINproduct').val('0').trigger('change');
        }

        // وميض تأكيد أخضر
        $('.product-data-card').addClass('highlight-flash');
        setTimeout(function() {
            $('.product-data-card').removeClass('highlight-flash');
        }, 1000);
    }

    // دالة اختيار المنتج المستدعاة من المودال
    function chooseProduct(id, code, name, cost, price, location, quantity, currentrow) {
        // إغلاق المودال فوراً وتنظيف الخلفية السوداء
        $('#SearchProduct').modal('hide');
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();

        // تعيين القيم الفورية المباشرة
        if (id) $('#product_no').val(id);
        if (code) $('#productcode').val(code);
        if (name) {
            $('#productnameshow').val(name);
            $('#productname').val(name);
        }
        if (cost !== undefined && cost !== null && cost !== '') $('#purachesepice').val(cost);
        if (price !== undefined && price !== null && price !== '') $('#product_price').val(price);
        if (location !== undefined && location !== null && location !== '') {
            $('#current_location').val(location);
            $('#new_location').val(location);
        }
        if (quantity !== undefined && quantity !== null && quantity !== '') $('#quentity').val(quantity);

        // جلب البيانات الشاملة للمنتج عبر AJAX لضمان دقة 100%
        var lookupId = id || code;
        if (lookupId) {
            $.ajax({
                url: "{{ URL::to('getproduct') }}/" + lookupId,
                type: 'GET',
                cache: false,
                dataType: 'json',
                success: function(data) {
                    if (data && data.id) {
                        populateProductData(data);
                    }
                },
                error: function() {
                    if (code) {
                        $.ajax({
                            url: "{{ URL::to('getByCodenew') }}/" + encodeURIComponent(code),
                            type: 'GET',
                            cache: false,
                            dataType: 'json',
                            success: function(data) {
                                if (data && data.id) {
                                    populateProductData(data);
                                }
                            }
                        });
                    }
                }
            });
        }
    }

    // البحث داخل المودال
    function searchaboutproductfunction() {
        var searchtext = $('#searchaboutproduct').val();
        var branchs_id = $('#branchs_id').val();
        var token_search = $("#token_search").val();

        jQuery.ajax({
            url: "{{ URL::to('ChooseProductpaginatenewupdate') }}",
            type: 'post',
            cache: false,
            dataType: 'html',
            data: {
                "_token": token_search,
                "searchtext": searchtext,
                "locale": "{{ app()->getLocale() }}",
                "branchs_id": branchs_id,
            },
            success: function(data) {
                $("#ajax_responce_serarchDiv").html(data);
            },
            error: function() {
                $("#ajax_responce_serarchDiv").html('<div class="text-center p-4 text-danger">حدث خطأ أثناء تحميل البيانات</div>');
            }
        });
    }

    // ترقيم صفحات المودال
    $(document).on('click', '#ajax_pagination_in_search a', function(e) {
        e.preventDefault();
        var searchtext = $('#searchaboutproduct').val();
        var branchs_id = $('#branchs_id').val();
        var token_search = $("#token_search").val();
        var url = $(this).attr("href");

        jQuery.ajax({
            url: url,
            type: 'post',
            cache: false,
            dataType: 'html',
            data: {
                "_token": token_search,
                "searchtext": searchtext,
                "branchs_id": branchs_id,
            },
            success: function(data) {
                $("#ajax_responce_serarchDiv").html(data);
            }
        });
    });

    $(document).ready(function() {
        // تهيئة select2
        if ($.fn.select2) {
            $('.select2').select2({ width: '100%' });
        }

        // فتح المودال عند الضغط على الزر
        $('#btnOpenSearchModal').on('click', function(e) {
            e.preventDefault();
            $('#SearchProduct').modal('show');
        });

        // عند فتح المودال: تحميل أحدث قائمة بالمنتجات والتركيز على حقل البحث
        $('#SearchProduct').on('show.bs.modal', function() {
            var branchs_id = $('#branchs_id').val();
            var token_search = $("#token_search").val();

            jQuery.ajax({
                url: "{{ URL::to('ChooseProductpaginatenewupdate') }}",
                type: 'post',
                cache: false,
                dataType: 'html',
                data: {
                    "_token": token_search,
                    "searchtext": '',
                    "locale": "{{ app()->getLocale() }}",
                    "branchs_id": branchs_id,
                },
                success: function(data) {
                    $("#ajax_responce_serarchDiv").html(data);
                }
            });
        });

        $('#SearchProduct').on('shown.bs.modal', function() {
            $('#searchaboutproduct').focus().select();
        });

        // تنظيف الخلفية تماماً عند إغلاق المودال
        $('#SearchProduct').on('hidden.bs.modal', function() {
            $('body').removeClass('modal-open');
            $('.modal-backdrop').remove();
        });

        // مسح الباركود المباشر في حقل كود المنتج والضغط على Enter
        $('#productcode').on('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                var barcode = $(this).val().trim();
                if (!barcode) return;

                // البحث الفوري عبر getByCodenew
                $.ajax({
                    url: "{{ URL::to('getByCodenew') }}/" + encodeURIComponent(barcode),
                    type: 'GET',
                    dataType: 'json',
                    success: function(res) {
                        if (res && res != 0 && res.id) {
                            populateProductData(res);
                        } else {
                            // إذا لم يتم العثور عليه، نفتح المودال للبحث
                            $('#searchaboutproduct').val(barcode);
                            $('#SearchProduct').modal('show');
                            searchaboutproductfunction();
                        }
                    },
                    error: function() {
                        $('#searchaboutproduct').val(barcode);
                        $('#SearchProduct').modal('show');
                        searchaboutproductfunction();
                    }
                });
            }
        });

        // اختصار F9 لفتح مودال البحث
        $(document).on('keydown', function(e) {
            if (e.key === "F9") {
                e.preventDefault();
                $('#SearchProduct').modal('show');
            }
        });

        // إخفاء التنبيهات تلقائياً بعد 5 ثوان
        $('.alert:not(.alert-danger)').delay(5000).fadeOut(500);
    });
</script>
@endsection