@extends('layout.master')
@push('plugin-styles')
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/css/intlTelInput.css">
    <link href="{{ asset('assets2/plugins/dropify/css/dropify.min.css') }}" rel="stylesheet" />
    <!--@if(session()->get('lang') == 'ar')-->
    <!--<link href="{{ asset('assets2/plugins/jquery-tags-input/jquery.tagsinput.min.rtl.css') }}" rel="stylesheet" />-->
    <!--@else-->
    <!--<link href="{{ asset('assets2/plugins/jquery-tags-input/jquery.tagsinput.min.css') }}" rel="stylesheet" />-->
    <!--@endif-->
    <link href="{{ asset('assets2/plugins/select2/select2.min.css') }}" rel="stylesheet" />
@endpush
@section('title', __('dashboard.Add a new product'))
@section('content')
    <div class="d-flex flex-wrap align-items-center justify-content-between
      gap-3 mb-24">
      <!--<h6 class="fw-semibold mb-0">{{ __('dashboard.Add a new product') }}</h6>-->
      <ul class="d-flex align-items-center gap-2">
        <li class="fw-medium">
          <a href="{{ route('home') }}" class="d-flex align-items-center gap-1
            hover-text-primary">
            <iconify-icon icon="solar:home-smile-angle-outline" class="icon
              text-lg"></iconify-icon>
            {{ __('dashboard.main menu') }}
          </a>
        </li>
        <li>-</li>
        <li class="fw-medium">
          <a href="{{ route('products.all') }}" class="d-flex align-items-center gap-1
            hover-text-primary">
            {{ __('dashboard.products') }}
          </a>
        </li>
        <li>-</li>
        <li class="fw-medium">{{ __('dashboard.Add a new product') }}</li>
      </ul>
    </div>

    <div class="row gy-4">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header">
            <h5 class="card-title mb-0">{{ __('dashboard.Add a new product') }}</h5>
          </div>
          <div class="card-body">
              <form  action="{{ route('products.store') }}" method="POST" class="needs-validation" novalidate enctype="multipart/form-data">
                <div class="row gy-3">
                
                                @csrf
                  <div class="col-md-6 col-sm-12" style="margin-top:20px;">
                    <label class="form-label">{{ __('dashboard.name') }}  <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control" autocomplete="off"
                      placeholder="{{ __('dashboard.name') }} " required>
                  </div>
                  <div class="col-md-6 col-sm-12" style="margin-top:20px;">
                    <label class="form-label">{{ __('dashboard.name') }} En <span class="text-danger">*</span></label>
                    <input type="text" name="name_en" class="form-control" autocomplete="off"
                      placeholder="{{ __('dashboard.name') }} En" required>
                  </div>
                  
                  <div class="col-md-6 col-sm-12" style="margin-top:20px;">
                    <label class="form-label">{{ __('dashboard.description') }}  <span class="text-danger">*</span></label>
                    <textarea name="description" required class="form-control" rows="4" cols="50" placeholder="{{ __('dashboard.name') }} "></textarea>
                  </div>
                  <div class="col-md-6 col-sm-12" style="margin-top:20px;">
                    <label class="form-label">{{ __('dashboard.description') }} En <span class="text-danger">*</span></label>
                    <textarea name="description_en" required class="form-control" rows="4" cols="50" placeholder="{{ __('dashboard.name') }} En"></textarea>
                  </div>
                  
                  <div class="col-md-6 col-sm-12" style="margin-top:20px;">
                    <label class="form-label">{{ __('dashboard.category') }} <span class="text-danger">*</span></label>
                    <select onchange="category_change()" name="category_id" class="form-select  bg-base border text-secondary-light" required>
                        <option value=""></option>
                        @foreach($categories as $category)
                        <option value="{{$category->id}}">{{$category->name}}</option>
                        @endforeach
                    </select>
                  </div>
                  
                  <div class="col-md-6 col-sm-12" style="margin-top:20px;">
                    <label class="form-label">{{ __('dashboard.group') }} <span class="text-danger">*</span></label>
                    <select name="group_id" class="form-select  bg-base border text-secondary-light" required>
                        <option value=""></option>
                        
                    </select>
                  </div>
                  
                  <div class="col-md-6 col-sm-12" style="margin-top:20px;">
                    <label class="form-label">{{ __('dashboard.price') }} <span class="text-danger">*</span></label>
                    <input type="number" name="price" class="form-control" autocomplete="off"
                      placeholder="{{ __('dashboard.price') }}" required min="0">
                  </div>
                  
                  <div class="col-md-6 col-sm-12" style="margin-top:65px;">
                      <div class="form-switch switch-primary d-flex align-items-center gap-3">
                            <input class="form-check-input" type="checkbox" role="switch" id="switch11" name="is_sub">
                            <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch11">{{ __('dashboard.sub product') }}</label>
                      </div>
                  </div>
                    
                  <div id="parent_div" class="col-md-6 col-sm-12" style="margin-top:20px; visibility:none;" >
                    <label class="form-label">{{ __('dashboard.parent product') }} </label>
                    <select name="product_id" id="product_id" class="form-select  bg-base border text-secondary-light">
                        <option></option>
                        @foreach($products as $product)
                        <option value="{{$product->id}}">{{$product->name}}</option>
                        @endforeach
                    </select>
                  </div>
                  
                  <div class="col-md-6 col-sm-12" style="margin-top:45px;">
                      <div class="form-switch switch-primary d-flex align-items-center gap-3">
                            <input class="form-check-input" type="checkbox" role="switch" id="switch12" name="status">
                            <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch11">{{ __('dashboard.status') }}</label>
                      </div>
                  </div>
                  
                  <div class="row col-md-6 col-sm-12" style="margin-top:20px;">
                    <label class="form-label">{{ __('dashboard.tags') }} </label>
                    <div class="col-10 ">
                        <select id="tags" name="tags[]" class="js-example-basic-multiple form-select" 
                            multiple="multiple" data-width="100%" width="100%" style="width:100%">
                            @foreach($tags as $tag)
                                <option value="{{$tag->id}}">{{ session()->get('lang') == 'en' ? $tag->name_en : $tag->name }}</option>
                            @endforeach
                      </select>
                    </div>
                    <div class="col-2 ">
                        <button type="button" class="btn btn-success btn-icon edit-category"
                                data-bs-toggle="modal" data-bs-target="#createModal" onclick="tag_modal()">
                            <iconify-icon icon="mingcute:square-arrow-up-line" class="text-xl"></iconify-icon> 
                        </button>
                    </div>
                    <!--<input name="tags" id="tags" class="form-control" value="" style="min-height:55%; height:55%;" onchange="tag_input()"/>-->
                    <!--<input name="tags_en" id="tags_en" class="form-control" value="" style="min-height:55%; height:55%;"/>-->
                  </div>
                  
                  
                  <div class="col-md-12 col-sm-12" style="margin-top:0px;">
                      <h5 class=" card-title mb-0" style="margin-top:20px; ">{{ __('dashboard.images') }}</h5>
                      <div class="row" id="images_div">
                          <div class="col-md-6 col-sm-12" style="margin-top:20px;">
                            <input type="file" class="myDropify" name="images" onchange="file_change(this)" accept="image/*">
                          </div>
                      </div>
                  </div>
                  <input name="images_count" id="images_count" hidden>
                  
                  <div class="col-12" style="margin-top:20px;">
                    <button type="submit" class="btn btn-primary-600">{{ __('dashboard.add') }}</button>
                  </div>
                
                </div>
            </form>
          </div>
        </div>
      </div>
      
    </div>
    
    <div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalLabel">{{ __('dashboard.Add a new tag') }}</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12 ">
                            <div class="form-group">
                                <label for="degree2">{{ __('dashboard.name') }}
                                    <span class="text-danger">*</span></label>
                                <input type="text" name="tag_name" id="tag_name" class="form-control mb-2" required>
                            </div>
                        </div>
                        
                        <div class="col-md-12 ">
                            <div class="form-group">
                                <label for="degree2">{{ __('dashboard.name') }} En
                                    <span class="text-danger">*</span></label>
                                <input type="text" name="tag_name_en" id="tag_name_en" class="form-control mb-2" required>
                            </div>
                        </div>
                        
                    </div>
                </div>
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        {{ __('dashboard.close') }}
                    </button>
                    <button onclick="tag_add()" type="button" class="btn btn-success">
                        {{ __('dashboard.add') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
   
@endsection

@push('plugin-scripts')
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/js/intlTelInput.js">
    </script>
    
    <script src="{{ asset('assets2/plugins/inputmask/jquery.inputmask.min.js') }}"></script>
    <script src="{{ asset('assets2/js/inputmask.js') }}"></script>
    <!-- <script src="{{ asset('assets/js/contacts/create.js') }}"></script> -->
    <script src="{{ asset('assets2/plugins/dropify/js/dropify.min.js') }}"></script>
    <!--<script src="{{ asset('assets2/plugins/jquery-tags-input/jquery.tagsinput.min.js') }}"></script>-->
    <script src="{{ asset('assets2/plugins/select2/select2.min.js') }}"></script>
    
@endpush
@push('custom-scripts')
    
    <script>
        function tag_modal(){
            $('#tag_name').val('');
            $('#tag_name_en').val('');
        }
        function tag_add(){
            var url = "{{ route('tags.store_ajax') }}";
            // alert(url);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: 'POST',
                url: url,
                // cache: false,
                // contentType: false,
                // processData: false,
                data: {'name' : $('#tag_name').val() , 'name_en' : $('#tag_name_en').val()},
                success: (data) => {
                    console.log(data);
                    $('#createModal').modal('hide');
                    var  options = `<option value="${data.data.id}" selected>${data.data.name}</option>`;
                    $('#tags').append(options);
                }
            });
        }
        
        var images = 0;
        function file_change(ele){
            if($(ele).attr('name') == 'images'){
                $(ele).attr('name', 'image_' + images);
                images = images + 1;
                $('#images_count').val(images);
                $('#images_div').append('<div class="col-md-6 col-sm-12" style="margin-top:20px;">\
                                            <input type="file" class="myDropify" name="images" onchange="file_change(this)" accept="image/*">\
                                          </div>');
                $('.myDropify').dropify();
            }
            
        }
        
    
        $(function() {
            'use strict';
            if ($(".js-example-basic-multiple").length) {
                $(".js-example-basic-multiple").select2();
                $('.selection').css('display', 'initial');
            }
            $('.myDropify').dropify();
            
            // $('#tags').tagsInput({
            //     'width': '100%',
            //     'height': '75%',
            //     'interactive': true,
            //     'defaultText': "{{__('dashboard.add more')}}",
            //     'removeWithBackspace': true,
            //     'minChars': 0,
            //     'maxChars': 20,
            //     'placeholderColor': '#666666'
            // });
            // $('#tags_en').tagsInput({
            //     'width': '100%',
            //     'height': '75%',
            //     'interactive': true,
            //     'defaultText': "{{__('dashboard.add more')}}",
            //     'removeWithBackspace': true,
            //     'minChars': 0,
            //     'maxChars': 20,
            //     'placeholderColor': '#666666',
            //     'autocomplete': "{option: value, option: value}"
            // });
        });
        
        function tag_input(ele){
            alert('sdfsd');
        }
        
        function category_change(){
            $('#addgroup').prop('disabled', true);
            var val = $('[name="category_id"]').val();
            // alert(val);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: 'GET',
                url: '{{ url("categories/groups/get_groups_by_category") }}' + '/' + val,
                cache: false,
                contentType: false,
                processData: false,
                success: (data) => {
                    // console.log(data);
                    $('[name="group_id"]').html("<option value=''></option>");
                    var options = `<option value=""></option>`;
                    data.forEach(element => {
                        options += `<option value="${element.id}">${element.name}</option>`;
                    });
                    $('[name="group_id"]').html(options);
                    $('#addgroup').prop('disabled', false);
                },
                error: function(data) {
                    console.log(data);
                }
            });
        }
        $(document).on('change', '[name="is_sub"]', function() {
            if (this.checked) {
                $('#parent_div').show();
                $("#product_id").prop('required',true);
            } else {
                $('#parent_div').hide();
                $("#product_id").prop('required',false);
            }
        });
    </script>
@endpush