@extends('layouts.master')
@section('title','Avatar List')

@section('content')

   <div class="container">


        <h4>Add Avatar</h4>

        <form action="#" method="post" id="submitAvatar">

               <div class="form-group col-md-6" >

                     <label>Avatar Name<span style="color:red">*</span></label>
                     <input name="name" class="form-control" value="{{ old('name') }}" id="name" >
                     <span style="color:red" id="name_error"></span>

                     <br>


               </div>

               <div class="form-group col-md-6" >

                     <label>Sub Category<span style="color:red">*</span></label>
                  <select name="sub_category" class="form-control" id="sub_category">

                           <option value="">Choose Sub Category</option>

                           @foreach($sub_categories as $sub_category)
                                 <option value="{{ $sub_category->UniqueID }}">{{ $sub_category->subcategory_name }}</option>
                           @endforeach
                  </select>

                  <span style="color:red" id="sub_category_error"></span>


                  <br>


                  </div>

                  <div class="form-group col-md-6">

                     <label>Image<span style="color:red">*</span></label>
                     <input type="file" name="image" class="dropify" id="image">

                     <span style="color:red" id="image_error"></span>

                     <span>NB:Only jpg and png supported.Maximum upload size is 2MB</span>


                     <br>

                  </div>

                  <div class="form-group col-md-6">

                        <button type="submit" class="btn btn-success btn-sm">Submit</button>
                        <button type="reset" class="btn btn-default btn-sm">Cancel</button>
                  </div>

        </form>


   </div>


@endsection

@push('script')


   <script>

      $(document).ready(function()
      {

         $(".dropify").dropify();

         $(document).on("keyup","#name",function()
         {

            var name=$("#name").val();

            if(name=="")
            {
               $("#name_error").html("Name is required");
            }

            else{

               $("#name_error").html("");
            }
            
         });

         $(document).on("change","#sub_category",function()
         {

            var sub_category=$("#sub_category").val();

            if(sub_category=="")
            {
               $("#sub_category_error").html("Sub Category is required");
            }

            else{

               $("#sub_category_error").html("");
            }
            
         });

         $(document).on("change","#image",function()
         {


            var image=$("#image").val();

            if(image=="")
            {
               $("#image_error").html("Image is required");
            }

            else{

               $("#image_error").html("");
            }
            
         });

         $(document).on("submit","#submitAvatar",function(e)
         {
            e.preventDefault();

            var name=$("#name").val();

            var sub_category=$("#sub_category").val();

            var image=$("#image").val();

            if(name=="")
            {
               $("#name_error").html("Name is required");
            }

            else{

               $("#name_error").html("");
            }

            if(sub_category=="")
            {
               $("#sub_category_error").html("Sub Category is required");
            }

            else{

               $("#sub_category_error").html("");
            }

            if(image=="")
            {
               $("#image_error").html("Image is required");
            }

            else{

               $("#image_error").html("");
            }

            if(name!="" && image!="" && sub_category!="")
            {

               $.LoadingOverlay('show');

               var form_data=new FormData($(this)[0]);

                  fetch("{{ route('submitAvatar') }}",{

                     method:"POST",
                     body:form_data,
                     headers:{'X-CSRF-TOKEN':"{{ csrf_token() }}"}

                  }).then((result)=>result.json())
                  .then((response)=>{

                     $.LoadingOverlay('hide');

                     if(response.status=="success")
                     {
                        swal.fire({
                           title:"Avatar added",
                           text:response.message,
                           icon:"success"
                        }).then((result)=>{

                           window.location.href=response.redirect_url;
                        });
                     }

                     else if(response.status=="error")
                     {
                        swal.fire({
                           title:"Failed",
                           text:response.message,
                           icon:"error"
                        });
                     }


                  })
                  .catch((response)=>{

                     $.LoadingOverlay('hide');

                     swal.fire({
                        title:"Failed",
                        text:response.message,
                        icon:"error"
                     });
                  });

            }



            
         });


         
      });


    </script>


@endpush