@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 settings'))
@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('cleans.all') }}" class="d-flex align-items-center gap-1
            hover-text-primary">
            {{ __('dashboard.clean') }}
          </a>
        </li>
        <li>-</li>
        <li class="fw-medium">{{ __('dashboard.Add a new settings') }}</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 settings') }}</h5>
          </div>
          <div class="card-body">
              <form  action="{{ route('cleans.store_general') }}" 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.size_from') }}  <span class="text-danger">*</span></label>
                    <input type="number" name="size_from" class="form-control" autocomplete="off" min="0"
                      placeholder="{{ __('dashboard.size_from') }} " required>
                  </div>
                  <div class="col-md-6 col-sm-12" style="margin-top:20px;">
                    <label class="form-label">{{ __('dashboard.size_to') }} <span class="text-danger">*</span></label>
                    <input type="number" name="size_to" class="form-control" autocomplete="off" min="0"
                      placeholder="{{ __('dashboard.size_to') }} " required>
                  </div>
                  
                  <div class="col-md-6 col-sm-12" style="margin-top:20px;">
                    <label class="form-label">{{ __('dashboard.price_size') }} <span class="text-danger">*</span></label>
                    <input type="number" name="price_size" class="form-control" autocomplete="off" min="0"
                      placeholder="{{ __('dashboard.price_size') }}" required min="0">
                  </div>
                  
                  <div class="col-md-6 col-sm-12" style="margin-top:20px;">
                    <label class="form-label">{{ __('dashboard.price_distance') }} <span class="text-danger">*</span></label>
                    <input type="number" name="price_distance" class="form-control" autocomplete="off" min="0"
                      placeholder="{{ __('dashboard.price_distance') }}" required min="0">
                  </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="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