@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" />
    <link href="{{ asset('assets2/plugins/select2/select2.min.css') }}" rel="stylesheet" />
@endpush
@section('title', __('dashboard.Add a new service'))
@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('services.all') }}" class="d-flex align-items-center gap-1
            hover-text-primary">
            {{ __('dashboard.installation') }}
          </a>
        </li>
        <li>-</li>
        <li class="fw-medium">{{ __('dashboard.Add a new service') }}</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 service') }}</h5>
          </div>
          <div class="card-body">
              <form  action="{{ route('services.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.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="row col-md-6 col-sm-12" style="margin-top:20px;">
                    <label class="form-label">{{ __('dashboard.products') }} </label>
                    <div class="col-12 ">
                        <select id="products" name="products[]" class="js-example-basic-multiple form-select" 
                            multiple="multiple" data-width="100%" width="100%" style="width:100%">
                            @foreach($products as $product)
                                <option value="{{$product->id}}">{{ session()->get('lang') == 'en' ? $product->name_en : $product->name }}</option>
                            @endforeach
                      </select>
                    </div>
                  </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-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="col-12" style="margin-top:20px;">
                    <button type="submit" class="btn btn-primary-600">{{ __('dashboard.add') }}</button>
                  </div>
                
                </div>
            </form>
          </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>
        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();
            

        });
    </script>
@endpush