@extends('backend.layouts.app')

@section('title', 'Create Geosite')

@push('styles')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
@endpush


@section('content')

<style type="text/css">
.cc-selector input{

    margin:0;
    padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

.style1{background-image:url(http://geoparc-mgoun.ma/image_geoparc/1.png);}
.style2{background-image:url(http://geoparc-mgoun.ma/image_geoparc/2.png);}
.style3{background-image:url(http://geoparc-mgoun.ma/image_geoparc/3.png);}
.style4{background-image:url(http://geoparc-mgoun.ma/image_geoparc/4.png);}

.cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector input:checked +.drinkcard-cc{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:100px;height:70px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

.img{
      -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}
/*------------------------*/
    .mrg{margin-left:4px}
    .pointer {cursor: pointer;}
</style>


    <div class="block-header">
        <ol class="breadcrumb breadcrumb-col-pink">
                                <li><a href="/admin"><i class="material-icons">home</i> Home</a></li>
                                <li><a href="{{route('admin.product.index')}}"><i class="material-icons">pin_drop</i> product </a></li>
                                <li class="active"><i class="material-icons">add</i>Add product</li>
                            </ol>
    </div>


<form method="POST" action="{{route('admin.product.store')}}" enctype="multipart/form-data"  id="form_validation"  novalidate="novalidate">
    @csrf
    <div class="row clearfix">



        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="card">
               <div class="body">                

                    <!--row clearfix -->
                   <div class="row clearfix">
                  <div class="col-sm-8">
                       <div class="form-group form-float">
                        <div class="form-line">
                            <input type="text" name="title" id="tag_name1" class="form-control" value="{{ old('title') }}" required="">
                            <label class="form-label"> <strong style="color:black"> Title  </strong> <span style="color:red">*</span> :</label>
                            </div>
                    </div>  
                     </div>

                    <div class="col-md-4">
                    <label><strong style="color:black"> Status</strong></label>
                         <div class="form-group">
                       <div class="demo-switch">
                           <div class="switch">
                           <label><input type="checkbox" checked="" id="status" name="status" 
                                      {{old('status') == true ? 'checked' : ''}}  ><span class="lever"></span></label>
                                </div>
                            </div>
                            </div>
                    </div> 
                 </div>


                           <div class="col-md-12" >
                              <div class="form-group form-float">
                               <div class="form-line">

                                  <label>Select Style for descriptions and galleries :</label> 
                              <div class="cc-selector">
                                <br>
                                    <input id="style1" type="radio" name="style" checked=""  value="1" placeholder="style1" required="" {{old('style') ==1 ? "checked" : ""}} />
                                    <label class="drinkcard-cc style1" for="style1" title="style1" style="height:200px;width:200px"></label>
                                   
                                    <input id="style2" type="radio" name="style" value="2" placeholder="style2" required="" {{old('style') ==2 ? "checked" : ""}} />
                                    <label class="drinkcard-cc style2"for="style2" title="style2" style="height:200px;width:200px"></label>
                                   
                                    <input id="style3" type="radio" name="style" value="3" placeholder="style3" required="" {{old('style') ==3 ? "checked" : ""}} />
                                    <label class="drinkcard-cc style3"for="style3" title="style3" style="height:200px;width:200px"></label>
                                   
                                    <input id="style4" type="radio" name="style" value="4" placeholder="style4" required="" {{old('style') ==4 ? "checked" : ""}} />
                                    <label class="drinkcard-cc style4"for="style4" title="style4" style="height:200px;width:200px"></label>
                                   
                                </div>
                                 </div>
                               </div> 
                            </div> 

                             <div class="col-sm-6">
                                        <div class="col-sm-6">
                                   <label class="col-form-label"> <strong style="color:black"> Image  </strong> :</label>               
                                                <div class="form-group form-float">
                                                    <input type="file" name="image" id="profile-image-input" style="display:none;" accept="image/*">
                                                    <button type="button" class="btn bg-white btn-sm waves-effect m-t-15" id="profile-image-btn">
                                                        <i class="material-icons" style="color:black">image</i>
                                                        <span style="color:black">UPLOAD IMAGE</span>
                                                    </button><br><br>
                                                   
                                               </div>
                                           </div>
                                           <div class="col-sm-6">
                                             <img src="" id="profile-imgsrc" class="img-responsive" style="width:130px;height:130px;display: none;">
                                           </div>
                                </div>



                     <button type="submit" class="btn btn-primary btn-block m-t-15 waves-effect"><i class="material-icons">save </i> Add</button>

                    
                </div><!-- end body -->
            </div><!-- end card -->
        </div>




    </div><!-- end row clearfix -->


</form>




@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/fileinput.min.js"></script>
    <script src="{{asset('backend/plugins/tinymce/tinymce.js')}}"></script>
            <!-- validation -->
      <script src="{{ asset('backend/plugins/jquery-validation/jquery.validate.js')}}"></script>
        <!-- Custom Js -->
       <script src="{{ asset('backend/js/pages/forms/form-validation.js')}}"></script>


      <script>

        $(function () {
            tinymce.init({
                selector: "textarea#tinymce",
                theme: "modern",
                height: 300,
                plugins: [
                    'advlist autolink lists link image charmap print preview hr anchor pagebreak',
                    'searchreplace wordcount visualblocks visualchars code fullscreen',
                    'insertdatetime media nonbreaking save table contextmenu directionality',
                    'emoticons template paste textcolor colorpicker textpattern imagetools'
                ],
                toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
                toolbar2: 'print preview media | forecolor backcolor emoticons',
                image_advtab: true
            });
            tinymce.suffix = ".min";
            tinyMCE.baseURL = '{{asset('backend/plugins/tinymce')}}';
        });




            $(function(){
        function showImage(fileInput,imgID){
            if (fileInput.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e){
                    $(imgID).attr('src',e.target.result);
                    $(imgID).attr('alt',fileInput.files[0].name);
                }
                reader.readAsDataURL(fileInput.files[0]);
            }}
        //image
        $('#profile-image-btn').on('click', function(){
            $('#profile-image-input').click();      });

        $('#profile-image-input').on('change', function(){
            showImage(this, '#profile-imgsrc');
   
       var img = document.getElementById('profile-imgsrc');
       img.style.display = 'block';  });
  })



    </script>


@endpush