@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 Movement Modern UI
           ========================================================== */
        body {
            background-color: #f1f5f9;
            font-family: 'Segoe UI', Tahoma, 'Inter', sans-serif;
        }

        /* كروت الصفحة */
        .invoices-main-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
            margin-bottom: 24px;
            overflow: visible !important;
        }

        .invoices-main-card .card-header {
            background-color: #ffffff;
            border-bottom: 1px solid #f1f5f9;
            padding: 16px 20px;
            font-size: 15px;
            font-weight: 800;
            color: #0f172a;
            border-top-left-radius: 14px;
            border-top-right-radius: 14px;
        }

        /* عناوين الأقسام الداخلية */
        .section-sub-title {
            font-size: 14px;
            font-weight: 800;
            color: #1e293b;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 2px solid #f1f5f9;
            padding-bottom: 8px;
        }

        /* عناوين وتنسيقات الحقول */
        .filter-title-label {
            font-size: 13px;
            font-weight: 700;
            color: #334155;
            margin-bottom: 7px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .form-control-filter {
            border: 1.5px solid #cbd5e1 !important;
            border-radius: 9px !important;
            font-size: 13.5px !important;
            font-weight: 700 !important;
            padding: 8px 12px !important;
            color: #0f172a !important;
            height: 42px !important;
            transition: all 0.2s ease;
        }

        .form-control-filter:focus {
            border-color: #3b82f6 !important;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
            background: #ffffff !important;
        }

        /* تظبيط Select2 */
        .select2-container .select2-selection--single {
            border: 1.5px solid #cbd5e1 !important;
            border-radius: 9px !important;
            height: 42px !important;
            padding-top: 5px !important;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            font-size: 13.5px !important;
            font-weight: 700 !important;
            color: #0f172a !important;
            line-height: 28px !important;
        }

        .select2-container .select2-selection--single .select2-selection__arrow {
            top: 8px !important;
        }

        /* زر اختيار المنتج الكبير */
        .btn-choose-product {
            background: linear-gradient(135deg, #f59e0b, #d97706) !important;
            color: #ffffff !important;
            border: none;
            border-radius: 9px;
            padding: 10px 20px;
            font-weight: 700;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            height: 42px;
            box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
            transition: all 0.2s ease;
        }

        .btn-choose-product:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
            color: #ffffff !important;
        }

        /* منطقة رفع ومعاينة الصور */
        .image-upload-box {
            border: 2px dashed #cbd5e1;
            border-radius: 12px;
            padding: 20px;
            background-color: #f8fafc;
            text-align: center;
            transition: border-color 0.2s;
        }

        .image-upload-box:hover {
            border-color: #3b82f6;
        }

        .preview-product-img {
            max-width: 120px;
            max-height: 120px;
            border-radius: 10px;
            object-fit: contain;
            border: 1px solid #e2e8f0;
            background: #fff;
            padding: 4px;
        }
    </style>
@endsection

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

@section('page-header')
<div class="main-parent">
    <div class="breadcrumb-header justify-content-between mb-3">
        <div class="my-auto">
            <div class="d-flex align-items-center">
                <div class="bg-primary text-white rounded d-flex align-items-center justify-content-center mr-2" style="width: 38px; height: 38px; border-radius: 10px !important;">
                    <i class="las la-dolly" style="font-size: 20px;"></i>
                </div>
                <div>
                    <h4 class="content-title mb-0 font-weight-bold" style="color: #0f172a;">{{ __('supprocesses.product_movement') }}</h4>
                    <span class="text-muted tx-13 font-weight-bold">تعديل موقع تخزين المنتج، الأسعار، وتفاصيل الصنف</span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')

@if (count($errors) > 0)
    <div class="alert alert-danger font-weight-bold shadow-sm" style="border-radius: 10px;">
        <button aria-label="Close" class="close" data-dismiss="alert" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
        <strong>خطأ</strong>
        <ul class="mb-0 mt-1">
            @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 font-weight-bold shadow-sm" style="border-radius: 10px;" role="alert">
        <strong><i class="fa fa-check-circle ml-1"></i> تم بنجاح:</strong> {{ session()->get('productupdatedlocation') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

<!-- row -->
<div class="row">
    <div class="col-xl-12">
        <form action="{{ url(Mcamara\LaravelLocalization\Facades\LaravelLocalization::getCurrentLocale() . '/' . ($page = 'product_movement')) }}"
              method="POST"
              enctype="multipart/form-data"
              role="search"
              autocomplete="off">
            {{ csrf_field() }}

            <!-- 1. كارت اختيار الفرع واختيار الصنف السريع -->
            <div class="invoices-main-card mb-4 p-4">
                <div class="row align-items-end">
                    <div class="col-lg-6 col-md-6 mb-3 mb-lg-0">
                        <label class="filter-title-label" for="branchs_id">
                            <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="all">كل الفروع</option>
                            <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 col-md-6">
                        <a class="modal-effect btn-choose-product" data-effect="effect-scale" data-toggle="modal" href="#SearchProduct">
                            <i class="las la-search" style="font-size: 18px;"></i>
                            <span>{{ __('home.chooose product') }}</span>
                            <span class="badge badge-light text-dark font-weight-bold mr-1" style="font-size: 11px; border-radius: 4px;">F9</span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- 2. كارت تفاصيل المنتج والتعديل -->
            <div class="invoices-main-card mb-4 p-4">

                <!-- أ. بيانات المنتج الأساسية -->
                <div class="section-sub-title text-primary">
                    <i class="fas fa-barcode"></i> بيانات المنتج الأساسية
                </div>
                <div class="row mb-4">
                    <div class="col-lg-4 mb-3 mb-lg-0" id="type">
                        <label class="filter-title-label">{{ __('home.productNo') }} <small class="text-muted">(Enter للبحث)</small></label>
                        <input type="text" class="form-control form-control-filter" id="productcode" name="productcode" dir="ltr">
                        <input hidden name="productname" id="productname">
                    </div>
                    <div class="col-lg-4 mb-3 mb-lg-0">
                        <label class="filter-title-label">{{ __('home.productname') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control form-control-filter font-weight-bold" id="productnameshow" name="productnameshow" required>
                    </div>
                    <div class="col-lg-4">
                        <label class="filter-title-label">{{ __('home.refnumber') }}</label>
                        <input type="text" class="form-control form-control-filter" id="refnumber" name="refnumber">
                    </div>
                </div>

                <!-- ب. الأسعار والتصنيف -->
                @can('System setting')
                <div class="section-sub-title text-success">
                    <i class="fas fa-money-bill-wave"></i> الأسعار
                </div>
                <div class="row mb-4">
                    <div class="col-lg-3 col-md-6 mb-3">
                        <label class="filter-title-label">{{ __('home.purachesepice') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control form-control-filter" id="purachesepice" name="purachesepice" required>
                    </div>
                    <div class="col-lg-3 col-md-6 mb-3">
                        <label class="filter-title-label">{{ __('home.Wholesale_price') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control form-control-filter" id="Wholesale_price" name="Wholesale_price" required>
                    </div>
                    <div class="col-lg-3 col-md-6 mb-3">
                        <label class="filter-title-label">{{ __('home.sellingproduct without tax') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control form-control-filter font-weight-bold" id="product_price" name="product_price" required>
                    </div>
                    <div class="col-lg-3 col-md-6 mb-3">
                        <label class="filter-title-label">الحد الأدنى للسعر <span class="text-danger">*</span></label>
                        <input type="text" class="form-control form-control-filter text-danger font-weight-bold" id="min_price" name="min_price" required>
                    </div>
                </div>
                @endcan

                <!-- ج. المجموعات والوحدات -->
                <div class="section-sub-title text-info">
                    <i class="fas fa-tags"></i> التصنيف والمجموعة والوحدة
                </div>
                <div class="row mb-4">
                    <div class="col-lg-4 mb-3 mb-lg-0">
                        <label class="filter-title-label">{{ __('home.groups') }}</label>
                        <select name="product_group" id="product_group" class="form-control select2" style="width: 100% !important;">
                            @foreach (App\Models\products_group::get() as $section)
                                <option value="{{ $section->id }}">{{ $section->group_ar }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-4 mb-3 mb-lg-0">
                        <label class="filter-title-label">{{ __('home.MAINproduct') }}</label>
                        <select name="MAINproduct" id="MAINproduct" class="form-control select2" style="width: 100% !important;">
                            <option value="no">-</option>
                        </select>
                    </div>
                    <div class="col-lg-4">
                        <label class="filter-title-label">الوحدة</label>
                        <select name="unit" id="unit" class="form-control select2" style="width: 100% !important;">
                            <option value="" disabled selected>اختر الوحدة</option>
                            <option value="piece">حبة (قطعة)</option>
                            <option value="meter">متر</option>
                        </select>
                    </div>
                </div>

                <!-- د. التخزين والموقع -->
                <div class="section-sub-title text-warning">
                    <i class="fas fa-map-marker-alt"></i> التخزين ونقل الموقع
                </div>
                <div class="row mb-4">
                    <div class="col-lg-4 mb-3 mb-lg-0">
                        <label class="filter-title-label">{{ __('supprocesses.current_location') }}</label>
                        <input type="text" class="form-control form-control-filter bg-light text-muted font-weight-bold" id="current_location" name="current_location" readonly>
                    </div>
                    <div class="col-lg-4 mb-3 mb-lg-0">
                        <label class="filter-title-label text-primary">
                            <i class="fa fa-arrow-circle-left text-primary"></i> {{ __('supprocesses.new_location') }} <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control form-control-filter font-weight-bold" style="border-color: #3b82f6 !important;" id="new_location" name="new_location" required>
                    </div>
                    <div class="col-lg-4">
                        <label class="filter-title-label">{{ __('supprocesses.product_notes') }}</label>
                        <input type="text" class="form-control form-control-filter" id="product_notes" name="product_notes" required value='-'>
                    </div>
                </div>

                <!-- هـ. صورة الصنف -->
                <div class="section-sub-title text-secondary">
                    <i class="fas fa-image"></i> صورة الصنف
                </div>
                <div class="row mb-3">
                    <div class="col-md-12">
                        <div class="image-upload-box d-flex flex-column flex-md-row align-items-center justify-content-between">
                            <div class="text-right mb-3 mb-md-0">
                                <label class="filter-title-label mb-2"><i class="fas fa-upload text-primary"></i> تغيير صورة الصنف</label>
                                <input autocomplete="off" onchange="readURL(this)" type="file" id="Item_img" name="Item_img" class="form-control-file">
                                @error('active')
                                    <span class="text-danger font-weight-bold tx-12 mt-1 d-block">{{ $message }}</span>
                                @enderror
                            </div>
                            <div>
                                <img id="uploadedimg" src="{{ asset('assets/img/brand/logo.png') }}" onerror="this.src='{{ asset('assets/img/brand/logo.png') }}'" class="preview-product-img" alt="Product Image">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- الحقول المخفية -->
                <input type="number" id="product_no" name="product_no" hidden>
                <input type="hidden" id="quentity" name="quentity">
                <input hidden id="user_id" name="user_id" value="{{ Auth()->user()->discount_allow_limit }}">
            </div>

            <!-- زر الحفظ والتحديث -->
            <div class="d-flex justify-content-center mb-5">
                <button type="submit" class="btn btn-primary px-5 py-2 font-weight-bold shadow-sm" style="border-radius: 9px; font-size: 15px; background: linear-gradient(135deg, #0284c7, #0369a1) !important; border: none;">
                    <i class="fa fa-check-circle ml-1"></i> {{ __('roles.update') }}
                </button>
            </div>

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

<!-- Modal البحث عن المنتجات -->
<div class="modal fade" id="SearchProduct" name="SearchProduct" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" dir='rtl' aria-hidden="true">
    <div class="modal-dialog modal-xl product-selection" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-header bg-primary-transparent">
                <h6 class="modal-title font-weight-bold text-primary">
                    <i class="las la-search ml-1"></i> {{ __('home.chooose product') }}
                </h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-4">
                <div class="row mb-3">
                    <div class="col-lg-6 col-md-8">
                        <label class="filter-title-label">
                            <i class="fa fa-barcode text-primary"></i> {{ __('home.searchaboutproduct') }}
                        </label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-light text-muted" style="border: 1.5px solid #cbd5e1; border-left: none; border-radius: 0 9px 9px 0;">
                                    <i class="fa fa-search"></i>
                                </span>
                            </div>
                            <input dir="ltr" type="text" class="form-control form-control-filter"
                                   placeholder="{{ __('home.Search By Name or Product Number') }}"
                                   id="searchaboutproduct" name="searchaboutproduct"
                                   onkeyup="searchaboutproductfunction()"
                                   style="border-radius: 9px 0 0 9px !important; border-right: none;">
                        </div>
                    </div>
                </div>

                <div class="table-responsive" id="ajax_responce_serarchDiv">
                    <table class="table text-md-nowrap text-center our-table" id="SearchProductTable" width="100%">
                        <thead>
                            <tr style="background: #1e293b; color: #fff;">
                                <th>#</th>
                                <th>{{ __('home.productNo') }}</th>
                                <th>{{ __('home.product') }}</th>
                                <th>{{ __('home.branch') }}</th>
                                <th>{{ __('home.productlocation') }}</th>
                                <th>{{ __('home.quantity') }}</th>
                                <th>{{ __('home.purchaseproductwithouttax') }}</th>
                                <th>{{ __('home.sellingproduct without tax') }}</th>
                                <th>{{ __('home.Add') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="9" class="py-4 text-center text-muted font-weight-bold">
                                    <i class="fa fa-spinner fa-spin fa-2x d-block mb-2 text-primary"></i>
                                    جاري تحميل المنتجات...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <input type="hidden" id="token_search" value="{{ csrf_token() }}">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary px-4" data-dismiss="modal">{{ __('home.cancel') }}</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('js')
<!-- Internal Data tables -->
<script src="{{ URL::asset('assets/js/table-data.js') }}"></script>

<!--Internal Datepicker js -->
<script src="{{ URL::asset('assets/plugins/jquery-ui/ui/widgets/datepicker.js') }}"></script>
<!--Internal jquery.maskedinput js -->
<script src="{{ URL::asset('assets/plugins/jquery.maskedinput/jquery.maskedinput.js') }}"></script>
<!--Internal spectrum-colorpicker js -->
<script src="{{ URL::asset('assets/plugins/spectrum-colorpicker/spectrum.js') }}"></script>
<!-- Internal Select2.min js -->
<script src="{{ URL::asset('assets/plugins/select2/js/select2.min.js') }}"></script>
<!--Internal Ion.rangeSlider.min js -->
<script src="{{ URL::asset('assets/plugins/ion-rangeslider/js/ion.rangeSlider.min.js') }}"></script>
<!--Internal jquery-simple-datetimepicker js -->
<script src="{{ URL::asset('assets/plugins/amazeui-datetimepicker/js/amazeui.datetimepicker.min.js') }}"></script>
<!-- Ionicons js -->
<script src="{{ URL::asset('assets/plugins/jquery-simple-datetimepicker/jquery.simple-dtpicker.js') }}"></script>
<!--Internal pickerjs js -->
<script src="{{ URL::asset('assets/plugins/pickerjs/picker.min.js') }}"></script>
<!-- Internal form-elements js -->
<script src="{{ URL::asset('assets/js/form-elements.js') }}"></script>

<script>
    var date = $('.fc-datepicker').datepicker({
        dateFormat: 'yy-mm-dd'
    }).val();

    // اختصار F9 لفتح مودال المنتجات
    document.addEventListener('keydown', (e) => {
        if (e.key === "F9") {
            $('#SearchProduct').modal('show');
        }
    });

    // اختصار Enter في حقل الكود للبحث الفوري
    document.addEventListener('keydown', (e) => {
        if (e.key === "Enter" && $('#productcode').is(':focus')) {
            var searchtext = $('#productcode').val();
            $('#searchaboutproduct').val(searchtext);
            $('#SearchProduct').modal('show');
        }
    });

    $('#SearchProduct').on('shown.bs.modal', function () {
        $('#searchaboutproduct').focus();
        if ($('#productcode').val()) {
            $('#searchaboutproduct').val($('#productcode').val());
            searchaboutproductfunction();
        }
    });

    function getproduct() {}

    // دالة البحث التلقائي عن المنتجات
    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,
                "branchs_id": branchs_id,
            },
            success: function(data) {
                $("#ajax_responce_serarchDiv").html(data);
            }
        });
    }

    // التصفح في نتائج البحث
    $(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");

        if (searchtext && searchtext.trim() !== '') {
            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);
                }
            });
        } else {
            jQuery.ajax({
                url: url,
                type: 'get',
                cache: false,
                dataType: 'html',
                success: function(data) {
                    $("#ajax_responce_serarchDiv").html(data);
                }
            });
        }
    });

    // فتح المودال وتحميل القائمة
    $('#SearchProduct').on('show.bs.modal', function(event) {
        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": '',
                "branchs_id": branchs_id,
            },
            success: function(data) {
                $("#ajax_responce_serarchDiv").html(data);
            }
        });
    });

    // دالة اختيار المنتج وتعبئة الحقول تلقائياً
    function chooseProduct(code, name, price, sale_price, product_location, availablequantity, productcode, MAINproductname, maincode, min_price) {
        $('#SearchProduct').modal('hide');

        $('#MAINproduct').empty().append($('<option selected>', { value: productcode }).text(MAINproductname)).trigger('change');

        jQuery.ajax({
            url: "{{ URL::to('getproduct') }}/" + code,
            type: 'get',
            cache: false,
            dataType: "json",
            success: function(data) {
                if (data['product_group']) {
                    $('#product_group').val(data['product_group']).trigger('change');
                }
                if (data['photo']) {
                    $('#uploadedimg').attr('src', 'https://demoo.ebdeaclients.online/assets/admin/uploads/' + data['photo']);
                }
                if (data['unit']) {
                    $('#unit').val(data['unit']).trigger('change');
                } else {
                    $('#unit').val('').trigger('change');
                }

                $('#refnumber').val(data['refnumber'] || '');
                $('#quentity').val(data['numberofpice'] || 0);
                $('#Wholesale_price').val(data['Wholesale_price'] || '');
                $('#product_notes').val(data['notes'] || '-');

                if (data['min_price']) {
                    $('#min_price').val(data['min_price']);
                }
            }
        });

        $('#productnameshow').val(name);
        $('#current_location').val(availablequantity);
        $('#new_location').val(availablequantity).focus();
        $('#product_price').val(sale_price);

        $('#product_no').val(code);
        $('#productcode').val(product_location);
        $('#purachesepice').val(price);

        if (min_price !== undefined) {
            $('#min_price').val(min_price);
        }
    }

    $(document).ready(function() {
        if ($.fn.select2) {
            $('.select2').select2();
        }

        setTimeout(function() {
            $('.alert').fadeOut(500);
        }, 4000);
    });
</script>
@endsection