@extends('admin.layouts.index')

@push('style')
<style>

.btn:not(.btn-link):not(.btn-circle) i {
    font-size: 20px;
    position: relative;
    top: 0;
}
</style>
@endpush

@section('content')
<section class="content home">
     <div class="block-header">
          <!-- Start Content-->
          <div class="container-fluid">
               <div class="body">

                    <div class="row">
                         <div class="col-lg-12 mt-3 mb-3">
                              <h2 class="text-center">{{!empty($subcribeDetails) ? 'EDIT' : 'ADD'}} SUBSCRIPTION PLAN</h2>
                         </div>
                    </div>

                    <div class="row">
                         <div class="col-12">
                              <div class="card">
                              <div class="header mb-3">
                                        <a class="btn btn-white float-left ml-2 mt-2" onclick="history.go(-1)">
                                             <i class="material-icons text-muted">arrow_back</i>
                                        </a>
                                   </div>
                                   <div class="card-body">


                                        @if(empty($subcribeDetails))
                                        <form class="form" name="addsubcribe" id="addsubcribe" method="post" action="{{route('admin.add_subcribe_plan_post')}}" enctype="multipart/form-data">
                                             @else
                                             <form class="form" name="updatesubcribe" id="updatesubcribe" method="post" action="{{route('admin.update_subcribe_plan',$subcribeDetails->id)}}" enctype="multipart/form-data">
                                                  @method('PUT')
                                                  @endif
                                                  @csrf

                                                  <input type="hidden" name="cafe_id" id="cafe_id" value="{{ $subcribeDetails->id ?? ''}}">

                                                  <div class="form-group form-float">
                                                       <div class="form-line">
                                                            <input type="text" id="name" name="name" class="form-control" value="{{ $subcribeDetails->name ?? ''}}">
                                                            <label class="form-label">Name</label>
                                                       </div>
                                                  </div>

                                                  <!-- <div class="form-group form-float">
                                                       <div class="form-line">
                                                            <input type="text" id="image" name="image" class="form-control" value="{{ $subcribeDetails->image ?? ''}}">
                                                            <label class="form-label">Image</label>
                                                       </div>
                                                  </div> -->


                                                  <!-- <div class="mb-2">
                                                       <label class="form-label">Image</label>
                                                       <div class="input-group input-group-merge">
                                                            <input type="file" id="image" class="form-control" name="image"/>
                                                       </div>
                                                  </div> -->

                                                  <div class="form-group form-float">
                                                       <div class="form-line">
                                                            <input type="text" id="description" name="description" class="form-control" value="{{ $subcribeDetails->description ?? ''}}">
                                                            <label class="form-label">Description</label>
                                                       </div>
                                                  </div>

                                                  <div class="form-group form-float">
                                                       <div class="form-line">
                                                            <input type="text" id="validity" name="validity" class="form-control" value="{{ $subcribeDetails->validity ?? ''}}">
                                                            <label class="form-label">Validity</label>
                                                       </div>
                                                  </div>

                                                  <div class="form-group form-float">
                                                       <div class="form-line">
                                                            <input type="text" id="free_matches" name="free_matches" class="form-control" value="{{ $subcribeDetails->free_matches ?? ''}}">
                                                            <label class="form-label">Free Matches</label>
                                                       </div>
                                                  </div>

                                                  <div class="form-group form-float">
                                                       <div class="form-line">
                                                            <input type="text" id="golden_likes" name="golden_likes" class="form-control" value="{{ $subcribeDetails->golden_likes ?? ''}}">
                                                            <label class="form-label">Golden Likes</label>
                                                       </div>
                                                  </div>

                                                  <div class="form-group form-float">
                                                       <div class="form-line">
                                                            <input type="text" id="price" name="price" class="form-control" value="{{ $subcribeDetails->price ?? ''}}">
                                                            <label class="form-label">Price</label>
                                                       </div>
                                                  </div>

                                                  <div>
                                                       @if(empty($subcribeDetails))
                                                       <input type="submit" class="btn btn-success" class="add_plan" value="Add">
                                                       @else
                                                       <input type="submit" class="btn btn-success" class="update_plan" value="Update">
                                                       @endif

                                                  </div>
                                             </form>

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

               </div>
          </div>
     </div>
</section>

@endsection

@push('script')
<script src="{{asset('assets/plugins/jquery-validation/jquery.validate.js')}}"></script> <!-- Jquery Validation Plugin Css -->
<script src="{{asset('assets/plugins/jquery-steps/jquery.steps.js')}}"></script> <!-- JQuery Steps Plugin Js -->

<script src="{{asset('assets/js/pages/forms/form-validation.js')}}"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>






<script>
     $('#addsubcribe, #updatesubcribe').validate({
          rules: {
               'name': {
                    'required': true
               },

               'image': {
                    'required': true
               },
               'description': {
                    'required': true
               },
               'validity': {
                    'required': true
               },
               'free_matches': {
                    'required': true
               },
               'golden_likes': {
                    'required': true
               },
               'price': {
                    'required': true
               },
          },
          messages: {
               'name': {
                    'required': 'Please enter name.'
               },
               'image': {
                    'required': 'Please upload image.'
               },
               'description': {
                    'required': 'Please enter description.'
               },
               'validity': {
                    'required': 'Please enter validity.'
               },
               'free_matches': {
                    'required': 'Please enter free_matches.'
               },
               'golden_likes': {
                    'required': 'Please enter golden_likes.'
               },
               'price': {
                    'required': 'Please enter price.'
               },

          },

          highlight: function(input) {
               $(input).parents('.form-line').addClass('error');
          },
          unhighlight: function(input) {
               $(input).parents('.form-line').removeClass('error');
          },
          errorPlacement: function(error, element) {
               $(element).parents('.form-group').append(error);
          }
     });
</script>

<script>
     //WHEN EDIT FORM WILL OPEN

     document.addEventListener('DOMContentLoaded', function() {
          // Get all the form inputs
          const formInputs = document.querySelectorAll('.form-control');

          // Iterate over each input
          formInputs.forEach(function(input) {
               // Check if the input has a predefined value
               if (input.value !== '') {
                    // Add a class to the parent form-group to show the label
                    input.parentElement.classList.add('focused');
               }

               // Add event listener for input focus
               input.addEventListener('focus', function() {
                    // Add a class to the parent form-group to show the label
                    this.parentElement.classList.add('focused');
               });

               // Add event listener for input blur
               input.addEventListener('blur', function() {
                    // Check if the input value is empty
                    if (this.value === '') {
                         // Remove the class from the parent form-group to hide the label
                         this.parentElement.classList.remove('focused');
                    }
               });
          });
     });
</script>



<script>
     function previewImage(event) {
          var input = event.target;
          if (input.files && input.files[0]) {
               var reader = new FileReader();
               reader.onload = function(e) {
                    var imgElement = document.getElementById("preview");
                    imgElement.setAttribute("src", e.target.result);
               };
               reader.readAsDataURL(input.files[0]);
          }
     }
</script>
@endpush