@extends('admin.layout.index')

@section('title')
ایجاد محصول
@endsection


@section('style')
 <link
   rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" />
  <style>
   .choices__list--multiple .choices__item {
    background-color: rgb(27, 49, 93);
    color: #fff;
    font-size: 12px;
   }
   .choices__list--multiple .choices__item {
    direction: ltr;
   }
  </style>
@endsection

@section('script')
     <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
    <script>
  const multiselect = new Choices('#label-multiselect', {
   removeItemButton: true,
   placeholder: true,
   placeholderValue: 'جست و جو برچسب',
  });
  let selectedValues = [];
  document
   .querySelector('#label-multiselect')
   .addEventListener('addItem', function (event) {
    const value = event.detail.value;
    if (!selectedValues.includes(value)) {
     selectedValues.push(value);
     console.log(selectedValues);
    }
   });
  document
   .querySelector('#label-multiselect')
   .addEventListener('removeItem', function (event) {
    const value = event.detail.value;
    const index = selectedValues.indexOf(value);
    if (index > -1) {
     selectedValues.splice(index, 1);
     console.log(selectedValues);
    }
   });
     async function loadOptionsFromServer() {
    try {
      const response = await fetch('https://your-api.com/labels');
      const data = await response.json();

      multiselect.clearChoices();

      multiselect.setChoices(
        data.map(item => ({
          value: item.value,
          label: item.label,
          selected: false,
          disabled: false
        })),
        'value',
        'label',
        false
      );
    } catch (error) {
      console.error('Error loading options:', error);
    }
  }

  loadOptionsFromServer();
 </script>
    <script>

        $('#saveClose').click(function () {
            console.log('ok');
            $('#close').val('saveClose');
            $('form').submit();
        });

        $('#save').click(function () {
            $('#close').val('save');
            $('form').submit();
        });
        $('#brandSelect').selectpicker({
            'title': 'انتخاب برند'
        });
        $('#tags').selectpicker({
            'title': 'انتخاب تگ'
        });

                $('#label').selectpicker({
            'title': 'انتخاب لیبل'
        });

        $('#BrandSelect').selectpicker({
            'title': 'برند های مرتبط'
        });

        // Show File Name
        $('#primary_image').change(function () {
            //get the file name
            var fileName = $(this).val();
            //replace the "Choose a file" label
            $(this).next('.custom-file-label').html(fileName);
        });

        $('#images').change(function () {
            //get the file name
            var fileName = $(this).val();
            //replace the "Choose a file" label
            $(this).next('.custom-file-label').html(fileName);
        });

        $('#categorySelect').selectpicker({
            'title': 'انتخاب دسته بندی'
        });
        $('#functionalTypesSelect').selectpicker({
            'title': 'انتخاب براساس عملکرد'
        });




    </script>
    {{--    //ckEditor--}}
    <script src="{{ asset('ckeditor/ckeditor.js') }}"></script>
    <script>
        CKEDITOR.replace('description', {
            language: 'fa',
            filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
            filebrowserUploadMethod: 'form'
        });
        //remove style in text copied to editor
        CKEDITOR.on('instanceReady', function (ev) {
            ev.editor.on('paste', function (evt) {
                if (evt.data.type == 'html') {
                    evt.data.dataValue = evt.data.dataValue.replace(/ style=".*?"/g, '');
                }
            }, null, null, 9);
        });
    </script>
    <script src="{{ asset('admin/tinymce/js/tinymce/tinymce.min.js') }}"></script>
    <script type="text/javascript">
        tinymce.init({
            language: 'fa',
            selector: '#shortDescription'
        });
    </script>
@endsection

@section('style')
    <style>
        @media (min-width: 1400px) {
            .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
                max-width: 1635px !important;
            }
        }
    </style>
@endsection
@section('content')

    <div class="col-xl-12 col-md-12 mb-4 p-4 bg-white">
        <div class="mb-4 text-center text-md-right d-flex justify-content-between">
            <h5 class="font-weight-bold">ایجاد محصول</h5>
            <div>
                <button id="save" class="btn btn-sm btn-success">save</button>
                <button type="button" id="saveClose" class="btn btn-sm btn-success">save and close</button>
                <a href="{{ url()->previous() }}" class="btn btn-sm btn-dark">بازگشت</a>
            </div>
        </div>
        <hr>


        @include('admin.sections.errors')

        <form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="form-row">
                <div class="form-group col-md-3">
                    <label for="name">نام *</label>
                    <input class="form-control" id="name" name="name" type="text" value="{{ old('name') }}">
                </div>

                <div class="form-group col-md-3">
                    <label for="name">alias</label>
                    <input class="form-control" id="alias" name="alias" type="text" value="{{ old('alias') }}">
                </div>

                <div class="form-group col-md-3">
                    <label for="name">کلمات مشابه</label>
                    <input class="form-control" id="similarWords" name="similarWords" type="text" value="{{ old('similarWords') }}">
                </div>
                <div class="form-group col-md-3">
                    <label for="name">کد کالا</label>
                    <input class="form-control" id="product_code" name="product_code" type="text" value="{{ old('product_code') }}">
                </div>
                <div class="form-group col-md-3">
                    <label for="category_id">دسته بندی</label>
                    <select id="categorySelect" name="category_id[]" class="form-control" data-live-search="true" multiple>
                        @foreach ($categories as $category)
                            <option
                                {{ old('category_id')==$category->id ? 'selected' : ' ' }} value="{{ $category->id }}">
                                {{ isset($category->parent->name) ? $category->parent->name : $category->name }}
                                {{ isset($category->parent->name) ? '/'.$category->name : '' }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group col-md-3">
                    <label for="category_id">انتخاب بر اساس عملکرد</label>
                    <select id="functionalTypesSelect" name="functional_type_id[]" class="form-control" data-live-search="true" multiple>
                        @foreach ($functionalTypes as $functionalType)
                            <option
                                {{ old('functional_type_id')==$functionalType->id ? 'selected' : ' ' }} value="{{ $functionalType->id }}">
                                {{ $functionalType->title }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group col-md-3">
                    <label for="is_active">وضعیت نمایش</label>
                    <select class="form-control" id="is_active" name="is_active">
                        <option value="1" selected>فعال</option>
                        <option value="0">غیرفعال</option>
                    </select>
                </div>

                <div class="form-group col-md-3">
                    <label for="is_percent_show"> نمایش درصد تخفیف در باکس محصول</label>
                    <select class="form-control" id="is_percent_show" name="is_percent_show">
                        <option value="1" selected>فعال</option>
                        <option value="0">غیرفعال</option>
                    </select>
                </div>

                        <div class="form-group col-md-3">
                    <label for="is_installment">فروش اقساطی برای این محصول </label>
                    <select class="form-control" id="is_installment" name="is_installment">
                        <option value="1" selected>فعال</option>
                        <option value="0">غیرفعال</option>
                    </select>
                </div>
                <div class="form-group col-md-3">
                    <label for="name">موجودی انبار</label>
                    <input class="form-control" id="quantity" name="quantity" type="text"
                           value="1000000">
                </div>
                <!--<div class="form-group col-md-3">-->
                <!--    <label for="is_active">برچسب</label>-->
                <!--    <select multiple class="form-control" id="tags" name="tags[]">-->

                <!--        @foreach($tags as $tag)-->
                <!--            <option-->
                <!--                {{ old('tag')==$tag->id ? 'selected' : ' ' }} value="{{ $tag->id }}">{{ $tag->name }}</option>-->
                <!--        @endforeach-->
                <!--    </select>-->
                <!--</div>-->


                <div class="form-group col-md-3">
                    <label for="is_active">لیبل</label>
                    <select  class="form-control" id="label" name="label">

                        @foreach($labels as $label)
                            <option
                                {{ old('label')==$label->id ? 'selected' : ' ' }} value="{{ $label->id }}">{{ $label->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group col-md-3">
                    <label for="brand_ids">برند های مرتبط:</label>
                    <select id="BrandSelect" name="brand_id[]" class="form-control" data-live-search="true"
                            multiple>
                        @foreach ($brands as $brand)
                            <option value="{{ $brand->id }}">
                                {{ $brand->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group col-md-3">
                    <label for="name">حداکثر کمیت قابل سفارش</label>
                    <input  class="form-control" id="minimum_measure_to_order" name="minimum_measure_to_order" type="number" min="1" step="1"
                            value="1">
                </div>
                <div class="form-group col-md-3">
                    <label for="price">قیمت (تومان)</label>
                    <input onkeyup="NumberFormat(this)" class="form-control" id="price" name="price" type="text"
                           value="{{ old('price') }}">
                </div>
                <div class="form-group col-md-3">
                    <label for="header_image">برچسب ها </label>
                    <select id="label-multiselect" name="tags[]" multiple dir="rtl">
                        @foreach($tags as $tag)
                      <option value="{{$tag->id}}">{{$tag->name}}</option>
                      @endforeach

                    </select>
                </div>
                <div class="col-lg-5 col-md-12 ">
                    <div class="alert alert-info d-flex justify-content-between">
                        <label for="sale_for_legal" class="m-0">امکان فروش برای اعضای حقوقی</label>
                        <input type="checkbox" id="sale_for_legal" name="sale_for_legal">

                    </div>
                </div>
                <div class="col-lg-5 col-md-12 mx-2">
                    <div class="alert alert-dark d-flex justify-content-between">
                        <label for="tax" class="m-0">اضافه کردن 9 % مالیات بر قیمت نهایی محصول</label>
                        <input type="checkbox" id="tax" name="tax">
                    </div>
                </div>

                <div class="form-group col-md-12">
                    <label for="shortDescription">توضیحات مختصر</label>
                    <textarea class="form-control" id="shortDescription"
                              name="shortDescription">{{ old('shortDescription') }}</textarea>
                </div>



                <div class="form-group col-md-12">
                    <label for="description">توضیحات</label>
                    <textarea class="form-control" id="description"
                              name="description">{{ old('description') }}</textarea>
                </div>


                <div class="form-group col-md-3">
                    <label for="name">Meta Description</label>
                    <input class="form-control" id="meta_des" name="meta_des" type="text" value="{{ old('meta_des') }}">
                </div>

                <div class="form-group col-md-3">
                    <label for="name">Meta Keyword</label>
                    <input class="form-control" id="meta_key" name="meta_key" type="text" value="{{ old('meta_key') }}">
                </div>


                <div class="form-group col-md-12">
                    <label for="description">ویدئو(لینک آپارات)</label>
                    <textarea class="form-control" id="video" name="video"
                              rows="4"></textarea>
                </div>


                                   <div class="form-group col-md-3">
                        <label for="name">لینک ویدئو خارجی </label>
                        <input class="form-control" id="video_src" name="video_src" type="text" value="{{ old('video_src') }}">
                    </div>
                {{-- Product Image Section --}}
                <div class="col-md-12">
                    <hr>
                    <p>تصاویر محصول : </p>
                </div>

                <div class="form-group col-md-3">
                    <label for="primary_image"> انتخاب تصویر اصلی </label>
                    <div class="custom-file">
                        <input type="file" name="primary_image" class="custom-file-input" id="primary_image">
                        <label class="custom-file-label" for="primary_image"> انتخاب فایل </label>
                    </div>
                </div>

                <div class="form-group col-md-3">
                    <label for="images"> انتخاب تصاویر </label>
                    <div class="custom-file">
                        <input type="file" name="images[]" multiple class="custom-file-input" id="images">
                        <label class="custom-file-label" for="images"> انتخاب فایل ها </label>
                    </div>
                </div>

            </div>
            <input type="hidden" name="close" id="close" value="">
        </form>
    </div>

@endsection