@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>
        /* ==========================================================
           Add Product 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;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* عناوين الأقسام الداخلية */
        .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-create-group {
            background: linear-gradient(135deg, #1e293b, #0f172a) !important;
            color: #ffffff !important;
            border: none;
            border-radius: 9px;
            padding: 9px 20px;
            font-weight: 700;
            font-size: 13.5px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
            transition: all 0.2s ease;
        }

        .btn-create-group:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
            color: #ffffff !important;
        }

        /* منطقة رفع الصورة */
        .image-upload-container {
            border: 2px dashed #cbd5e1;
            border-radius: 10px;
            padding: 12px 18px;
            background-color: #f8fafc;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    </style>
@endsection

@section('title')
{{ __('supprocesses.addproduct') }}
@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-box-open" style="font-size: 22px;"></i>
                </div>
                <div>
                    <h4 class="content-title mb-0 font-weight-bold" style="color: #0f172a;">{{ __('supprocesses.addproduct') }}</h4>
                    <span class="text-muted tx-13 font-weight-bold">إضافة صنف جديد إلى دليل المنتجات وتحديد خصائص المخزون</span>
                </div>
            </div>
        </div>
        <div class="d-flex my-xl-auto right-content">
            <button class="modal-effect btn-create-group" data-effect="effect-scale" data-toggle="modal" href="#creategroup">
                <i class="fa fa-plus-circle"></i>
                <span>{{ __('home.create_group') }}</span>
            </button>
        </div>
    </div>
</div>
@endsection

@section('content')

@if (session()->has('addProduct'))
    <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('addProduct') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

@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

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

            <div class="invoices-main-card mb-4 p-4">

                <!-- 1. بيانات المنتج الأساسية -->
                <div class="section-sub-title text-primary">
                    <i class="fas fa-barcode"></i> بيانات المنتج الأساسية
                </div>
                <div class="row mb-4">
                    <div class="col-lg-3 col-md-6 mb-3">
                        <label class="filter-title-label">
                            <i class="fa fa-font text-primary"></i> {{ __('supprocesses.product_name_ar') }} <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control form-control-filter" id="product_name_ar" name="product_name_ar" onkeyup="translateNameToEnglish()" required>
                    </div>

                    <div class="col-lg-3 col-md-6 mb-3">
                        <label class="filter-title-label">
                            <i class="fa fa-language text-info"></i> {{ __('supprocesses.product_name_en') }}
                        </label>
                        <input type="text" class="form-control form-control-filter" id="product_name_en" name="product_name_en" onkeyup="translateNameToArbic()">
                    </div>

                    <div class="col-lg-2 col-md-4 mb-3">
                        <label class="filter-title-label">
                            <i class="fa fa-hashtag text-warning"></i> {{ __('supprocesses.product_code') }}
                        </label>
                        <input type="text" class="form-control form-control-filter font-weight-bold" id="product_code" name="product_code" dir="ltr" onkeyup="convertToNumber()">
                    </div>

                    <div class="col-lg-2 col-md-4 mb-3">
                        <label class="filter-title-label">
                            <i class="fa fa-cubes text-secondary"></i> {{ __('supprocesses.stock_type') }}
                        </label>
                        <select class="form-control form-control-filter" id="stock_type" name="stock_type">
                            <option value="">{{ __('supprocesses.choose_type') }}</option>
                            <option value="internal">{{ __('supprocesses.internal_stock') }}</option>
                            <option value="external">{{ __('supprocesses.external_stock') }}</option>
                        </select>
                    </div>

                    <div class="col-lg-2 col-md-4 mb-3">
                        <label class="filter-title-label">
                            <i class="fa fa-tag text-success"></i> {{ __('home.product_type') }}
                        </label>
                        <select name="product_type" id="product_type" class="form-control form-control-filter">
                            <option value="">{{ __('home.product_type') }}</option>
                            <option value="fabric">{{ __('home.fabric') }}</option>
                            <option value="ready">{{ __('home.ready') }}</option>
                        </select>
                    </div>
                </div>

                <!-- 2. التصنيف والمجموعات والوحدات -->
                <div class="section-sub-title text-info">
                    <i class="fas fa-tags"></i> التصنيف والمجموعة والوحدة
                </div>
                <div class="row mb-4">
                    <!-- فرع الصنف (مخفي برمجياً كما في الأصل) -->
                    <select name="Section" class="form-control" style="display: none;">
                        @foreach (App\Models\branchs::where('id', Auth()->user()->branchs_id)->get() as $section)
                            <option value="{{ $section->id }}">{{ $section->name }}</option>
                        @endforeach
                    </select>

                    <div class="col-lg-3 col-md-6 mb-3">
                        <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-3 col-md-6 mb-3">
                        <label class="filter-title-label">{{ __('home.MAINproduct') }}</label>
                        <select name="MAINproduct" id="MAINproduct" class="form-control select2" style="width: 100% !important;">
                            <option value="0">{{ __('home.noreplace') }}</option>
                        </select>
                    </div>

                    <div class="col-lg-3 col-md-6 mb-3">
                        <label class="filter-title-label">{{ __('home.refnumber') }}</label>
                        <input type="text" class="form-control form-control-filter" id="refnumber" name="refnumber">
                    </div>

                    <div class="col-lg-3 col-md-6 mb-3">
                        <label class="filter-title-label">وحدة القياس</label>
                        <select name="unit" class="form-control select2" style="width: 100% !important;">
                            <option value="" selected disabled>اختر الوحدة</option>
                            <option value="piece">حبة (قطعة)</option>
                            <option value="meter">متر</option>
                            <option value="box">{{ __('home.unit_box') }}</option>
                        </select>
                    </div>
                </div>

                <!-- 3. التخزين وتنبيهات المخزون -->
                <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-3 col-md-6 mb-3">
                        <label class="filter-title-label">
                            <i class="fa fa-map-pin text-danger"></i> {{ __('supprocesses.product_location') }} <span class="text-danger">*</span>
                        </label>
                        <input dir="ltr" type="text" class="form-control form-control-filter" style="direction: LTR !important; text-align: start !important;" id="product_location" name="product_location" required>
                    </div>

                    <div class="col-lg-3 col-md-6 mb-3">
                        <label class="filter-title-label">
                            <i class="fa fa-bell text-warning"></i> {{ __('supprocesses.minmum_quantity_stock_alart') }} <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control form-control-filter text-center font-weight-bold" id="minmum_quantity_stock_alart" name="minmum_quantity_stock_alart" onkeyup="minmum_quantity_stock_alartConvert()" value="2" required>
                    </div>

                    <div class="col-lg-6 col-md-12 mb-3">
                        <label class="filter-title-label">{{ __('supprocesses.product_notes') }}</label>
                        <input type="text" class="form-control form-control-filter" id="product_notes" name="product_notes">
                    </div>
                </div>

                <!-- 4. صورة المنتج -->
                <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-container">
                            <div>
                                <label class="filter-title-label mb-1"><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>
                    </div>
                </div>

            </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> {{ __('supprocesses.save_data') }}
                </button>
            </div>

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

<!-- Modal إضافة مجموعة جديدة -->
<div class="modal fade" id="creategroup" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" 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="fa fa-folder-plus ml-1"></i> {{ __('home.create_group') }}
                </h6>
                <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-4">
                <input type="hidden" id="token_search" value="{{ csrf_token() }}">
                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label class="filter-title-label">{{ __('home.groub_ar') }} <span class="text-danger">*</span></label>
                        <input autocomplete="off" type="text" class="form-control form-control-filter" id="groub_ar" name="product_name_ar" onkeyup="groub_translateNameToEnglish()" required>
                    </div>
                    <div class="col-md-12">
                        <label class="filter-title-label">{{ __('home.group_en') }} <span class="text-danger">*</span></label>
                        <input autocomplete="off" type="text" class="form-control form-control-filter" id="groub_en" name="product_name_en" onkeyup="groub_translateNameToArbic()" required>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary px-4" data-dismiss="modal">{{ __('home.cancel') }}</button>
                <button type="button" class="btn btn-primary px-4 font-weight-bold" onclick="createnewgroupajax()">
                    <i class="fa fa-check-circle ml-1"></i> {{ __('supprocesses.save_data') }}
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal رسالة نجاح الإضافة -->
<div class="modal fade" id="massagesave" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content border-0 shadow-lg text-center p-4" style="border-radius: 16px;">
            <div class="modal-body p-0">
                <img style="width: 120px; height: 120px; object-fit: contain;" class="mb-3" src="{{ asset('assets/admin/uploads/done.png') }}" onerror="this.src='{{ asset('assets/img/brand/logo.png') }}'" alt="Success">
                <h6 class="font-weight-bold text-success mb-0">تم حفظ المجموعة بنجاح</h6>
            </div>
        </div>
    </div>
</div>

@endsection

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

<!--Internal Datepicker js -->
<script src="{{ URL::asset('assets/plugins/jquery-ui/ui/widgets/datepicker.js') }}"></script>

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

        // إعداد Select2 للصنف البديل عبر AJAX
        $('#MAINproduct').select2({
            placeholder: 'ابحث عن المنتج...',
            allowClear: true,
            minimumInputLength: 2,
            ajax: {
                url: "{{ route('itemcards.search') }}",
                dataType: 'json',
                delay: 300,
                data: function (params) {
                    return { q: params.term };
                },
                processResults: function (data) {
                    return {
                        results: data.map(item => ({
                            id: item.id,
                            text: item.product_name
                        }))
                    };
                }
            }
        });

        setTimeout(function() {
            $('.alert').fadeOut(500);
        }, 4000);
    });

    // ترجمة اسم المجموعة
    function groub_translateNameToArbic() {
        var wordEnglish = $('#groub_en').val();
        if (wordEnglish) {
            jQuery.ajax({
                url: "https://translate.googleapis.com/translate_a/single?client=gtx&dt=t&sl=en&tl=ar&q=" + encodeURIComponent(wordEnglish),
                type: 'get',
                cache: false,
                success: function(request_result) {
                    if (request_result && request_result[0] && request_result[0][0]) {
                        $('#groub_ar').val(request_result[0][0][0]);
                    }
                }
            });
        }
    }

    function groub_translateNameToEnglish() {
        var wordarbic = $('#groub_ar').val();
        if (wordarbic) {
            jQuery.ajax({
                url: "https://translate.googleapis.com/translate_a/single?client=gtx&dt=t&sl=ar&tl=en&q=" + encodeURIComponent(wordarbic),
                type: 'get',
                cache: false,
                success: function(request_result) {
                    if (request_result && request_result[0] && request_result[0][0]) {
                        $('#groub_en').val(request_result[0][0][0]);
                    }
                }
            });
        }
    }

    function translateNameToArbic() {}
    function translateNameToEnglish() {}

    // إنشاء مجموعة أصناف جديدة عبر AJAX
    function createnewgroupajax() {
        var url = "{{ URL::to('create_products_group') }}";
        var token_search = $("#token_search").val();

        if ($('#groub_ar').val() == '') {
            alert("{{ __('home.groub_ar') }}");
            return;
        }
        if ($('#groub_en').val() == '') {
            alert("{{ __('home.group_en') }}");
            return;
        }

        $.ajax({
            url: url,
            type: 'post',
            cache: false,
            data: {
                _token: token_search,
                groub_ar: $('#groub_ar').val(),
                groub_en: $('#groub_en').val(),
            },
            success: function(data) {
                $('#creategroup').modal('hide');
                $('#groub_ar').val('');
                $('#groub_en').val('');

                $('#massagesave').modal('show');
                setTimeout(() => {
                    $('#massagesave').modal('hide');
                }, 1200);
            },
            error: function(response) {
                alert("حدث خطأ أثناء حفظ المجموعة");
            }
        });
    }

    function minmum_quantity_stock_alartConvert() {
        var input = document.getElementById("minmum_quantity_stock_alart");
        if (input) {
            input.value = toEnglishNumber(input.value);
        }
    }

    function convertToNumber() {
        var input = document.getElementById("product_code");
        if (input) {
            input.value = toEnglishNumber(input.value);
        }
    }

    function toEnglishNumber(strNum) {
        var ar = '٠١٢٣٤٥٦٧٨٩'.split('');
        var en = '0123456789'.split('');
        strNum = strNum.replace(/[٠١٢٣٤٥٦٧٨٩]/g, x => en[ar.indexOf(x)]);
        return strNum;
    }
</script>
@endsection