@extends('layouts.admin.app')
@section('content')
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
{{-- <script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>  --}}
<script src="https://cdn.ckeditor.com/4.17.2/standard/ckeditor.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<style type="text/css">
   .form-control {
   background: none;
   border: 1px solid #d2d6da;
   border-radius: 0.375rem;
   border-top-left-radius: 0.375rem !important;
   border-bottom-left-radius: 0.375rem !important;
   padding: 0.625rem 0.75rem !important;
   line-height: 1.3 !important;
   }
   .form-control:focus {
   color: #495057;
   background-color: transparent;
   border-color: #d2d6da;
   outline: 0;
   box-shadow: none;
   }
   .form-fill {
   margin-top: 10px;
   }
   input.option1 {
   margin-left: 20px;
   }
   span.certificate-option {
   margin-left: 6px;
   }
   .ps-relative {
   position: relative;
   }
   a.extra-fields-customer {
   position: absolute;
   right: 0;
   top: 36px;
   }
   .learning {
   width: 92%;
   }
   .remove{
   	position: relative;
   	margin-top: 11px;
   }
   a.remove-field.btn-remove-customer {
    position: absolute;
    right: 0;
    top: 10px;
    /* margin-top: 5px; */
}
   .customer_records_dynamic {
   margin-top: 12px;
   }
   i.fa.fa-times-circle {
   position: relative;
   top: -11px;
   }
   .customer_records_dynamic1 {
   margin-top: 12px;
   }
   a.extra-fields-customer1 {
   position: absolute;
   right: 0;
   top: 39px;
   }
   .customer_records_dynamic2 {
   margin-top: 12px;
   }
   a.extra-fields-customer2 {
   position: absolute;
   right: 0;
   top: 40px;
   }
   span.select2-selection.select2-selection{
   min-height: 42px;
   overflow: auto;
   position: relative;
   border: 1px solid #d2d6da;

   }
   .select2-container--default .select2-selection--multiple .select2-selection__choice {
   background-color: #1772b4;
   color: #fff;
   border: 1px solid #1772b4;
   }
   button.select2-selection__choice__remove {
   color: #fff!important;
   }
   .select2-selection__choice__remove:hover{
   color: #333!important;
   }
</style>
<div class="container-fluid py-4">
   <div class="row">
      <div class="col-12">
         <div class="card my-4">
            <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
               <div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
                  <h6 class="text-white text-capitalize ps-3">Course Add
                     <a href="{{route('admin.course.create')}}">
                     <i class="material-icons ms-auto text-white cursor-pointer catModal" data-type="Add" style="float: right; margin: 0 25px;" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Add Course">add</i>
                  </a>
                  </h6>
               </div>
            </div>
            <div class="card-body px-0 pb-2 mx-3 mb-5">
               <form action="{{ route('admin.course.update',$data->id) }}" method="post" enctype="multipart/form-data">
                  @csrf
                  @method('PATCH')
                  <div class="row" style="margin-bottom:40px">
                     <h4> Add Course</h4>
                     @if(Session::has('success'))
                        <div class="alert alert-success text-white">
                              {{ Session::get('success') }}
                        </div>
                     @endif
                     @if(Session::has('error'))
                     <div class="alert alert-danger text-white">
                        {{ Session::get('error') }}
                     </div>
                     @endif
                     <div class="col-md-4 form-fill">
                        <div class="form-group">
                           <label for="name">Name:</label>
                           <input name="name" class="form-control" type="text" id="name" value="{{ $data->name }}" required>
                           @if ($errors->has('name')) <span class="text-danger">{{ $errors->first('name') }}</span> @endif
                        </div>
                     </div>
                     <div class="col-md-4 form-fill">
                        <div class="form-group">
                           <label for="name">Slug:</label>
                           <input name="slug" class="form-control" type="text" id="slug" value="{{ $data->slug }}" required>
                           @if ($errors->has('slug')) <span class="text-danger">{{ $errors->first('slug') }}</span> @endif
                        </div>
                     </div>
                     <div class="col-md-4 form-fill">
                        <div class="form-group">
                           <label for="classes_heading">Classes Heading:</label>
                           <input name="classes_heading" type="text" class="form-control" id="classes_heading" value="{{ $data->classes_heading }}" >
                           @if ($errors->has('classes_heading')) <span class="text-danger">{{ $errors->first('classes_heading') }}</span> @endif
                        </div>
                     </div>
                     <div class="col-md-2 form-fill">
                        <div class="form-group">
                           <label for="category">Category:</label>
                           <select name="category" class="js-example-basic-multiple form-control" id="category" required>
                              @foreach ($categories as $category)
                                 <option value="{{ $category->id }}" @if($category->id==$data->category_id) selected @endif>{{ $category->name }}</option>
                              @endforeach
                           </select>
                           @if ($errors->has('category')) <span class="text-danger">{{ $errors->first('category') }}</span> @endif
                        </div>
                     </div>

                     <div class="col-md-2 form-fill">
                        <div class="form-group">
                           <label for="duration">Level:</label>
                           @php $skill_level = skill_level(); @endphp
                           <select name="skill_level" class="form-control" id="duration" required>
                              @foreach ($skill_level as $sl)
                                 <option value="{{ $sl }}" @if($sl==$data->skill_level) selected @endif>{{ ucfirst($sl) }}</option>
                              @endforeach
                           </select>
                        </div>
                     </div>
                     <div class="col-md-2 form-fill">
                        <div class="form-group">
                           <label for="">Deadline:</label>
                           <input name="deadline" type="text" class="form-control" id="datepicker" readonly value="{{ date('m/d/Y',strtotime($data->deadline)) }}" required>
                           @if ($errors->has('deadline')) <span class="text-danger">{{ $errors->first('deadline') }}</span> @endif
                        </div>
                     </div>
                     <div class="col-md-2 form-fill">
                        <div class="form-group">
                           <label for="">Certificate:</label>
                           <br>
                           <label class="radio-inline">
                              <input type="radio" name="certificate" value="Yes" @if($data->certification=='Yes') checked @endif><span class="certificate-option" onclick="toggleCertificateField(true)">Yes</span>
                           </label>

                           <label class="radio-inline">
                              <input type="radio" name="certificate" class="option1" @if($data->certification=='No') checked @endif value="No"><span class="certificate-option" onclick="toggleCertificateField(false)">No</span>
                           </label>
                           <br>
                           @if ($errors->has('certificate')) <span class="text-danger">{{ $errors->first('certificate') }}</span> @endif
                        </div>
                     </div>
                     <div class="col-md-2 form-fill" id="certificate_upload">
                        <div class="form-group">
                           <label for="image">Upload Certificate:</label>
                           <input name="certificate_file" type="file" class="form-control" id="certificate_file" loading="lazy">
                           <img src="{{ url('uploads/course/certificatefile/'.$data->certificate_file) }}" width="70" height="50">
                        </div>
                     </div>
                     <div class="col-md-2 form-fill">
                        <div class="form-group">
                           <label for="">Mark Bestseller:</label>
                           <br>
                           <label class="radio-inline">
                              <input type="radio" name="bestseller" value="Yes" @if($data->mark_bestseller=='Yes') checked @endif><span class="certificate-option">Yes</span>
                           </label>

                           <label class="radio-inline">
                              <input type="radio" name="bestseller" class="option1" value="No" @if($data->mark_bestseller=='No') checked @endif><span class="certificate-option">No</span>
                           </label>
                           <br>
                           @if ($errors->has('bestseller')) <span class="text-danger">{{ $errors->first('bestseller') }}</span> @endif
                        </div>
                     </div>
                     <div class="col-md-6 form-fill">
                        <div class="form-group">
                           <label for="short_description">Short Description:</label><br>
                           <textarea name="short_description" class="form-control" rows="17" id="short_description" required>{{ $data->short_description }}</textarea>
                           @if ($errors->has('short_description')) <span class="text-danger">{{ $errors->first('short_description') }}</span> @endif
                        </div>
                     </div>
                     <div class="col-md-6 form-fill">
                        <div class="form-group ps-relative">
                           <label for="long_description">Long Description:</label>
                           <textarea name="long_description" class="form-control" rows="17" id="long_description">{{ $data->long_description }}</textarea>
                           @if ($errors->has('long_description')) <span class="text-danger">{{ $errors->first('long_description') }}</span> @endif
                     </div>
                  </div>
                     <!-- <div class="col-md-6 form-fill">
                        <div class="form-group">
                           <label for="description">Full Description:</label><br>
                           <textarea name="full_description" class="form-control ckeditor" name="overview" id="overview" rows="5" required>{{ $data->description }}</textarea>
                           @if ($errors->has('full_description')) <span class="text-danger">{{ $errors->first('full_description') }}</span> @endif
                        </div>
                     </div> -->
                     <div class="col-md-6 form-fill">
                        <div class="form-group ps-relative">
                           <label for="learning">Learning Point:</label>
                           @php $learning_point = $data->learning_points; $lp_arr = json_decode($learning_point); @endphp
                           @foreach ($lp_arr as $key => $lp)
                              @if($key==0)
                              <div class="customer_records">
                                 <input name="learning_point[]" class="form-control learning" type="text" id="learning" value="{{$lp}}" required>
                                 <a class="extra-fields-customer" href="javascript:"><i class="fa fa-plus-square"></i></a>
                              </div>
                              <div class="customer_records_dynamic"></div>
                              @else
                              <div class="customer_records_dynamic">
                                 <div class="remove">
                                    <input type="text" name="learning_point[]" class="form-control learning" id="learning" value="{{$lp}}" required>
                                    <a href="#" class="remove-field btn-remove-customer">
                                       <i class="fa fa-times-circle" aria-hidden="true"></i>
                                    </a>
                                 </div>
                              </div>
                              @endif
                           @endforeach
                           @if ($errors->has('learning_point')) <span class="text-danger">{{ $errors->first('learning_point') }}</span> @endif
                        </div>
                     </div>
                     <div class="col-md-6 form-fill">
                        <div class="form-group ps-relative">
                           <label for="learning">Required Point:</label>
                           @php $required_point = $data->required_points; $rp_arr = json_decode($required_point); @endphp
                           @foreach ($rp_arr as $key => $rp)
                              @if($key==0)
                              <div class="customer_records1">
                                 <input name="required_point[]" class="form-control learning" type="text" id="learning" value="{{ $rp }}" required>
                                 <a class="extra-fields-customer1" href="javascript:"><i class="fa fa-plus-square"></i></a>
                              </div>
                              <div class="customer_records_dynamic1"></div>
                              @else
                              <div class="customer_records_dynamic1">
                                 <div class="remove"> <input type="text" name="required_point[]" class="form-control learning" id="learning" value="{{ $rp }}" required>
                                    <a href="#" class="remove-field btn-remove-customer">
                                       <i class="fa fa-times-circle" aria-hidden="true"></i>
                                    </a>
                                 </div>
                              </div>
                              @endif
                           @endforeach
                           @if ($errors->has('required_point')) <span class="text-danger">{{ $errors->first('required_point') }}</span> @endif
                        </div>
                     </div>

                     <div class="col-md-6 form-fill">
                        <div class="form-group ps-relative">
                           <label for="description">Description:</label>
                            @php $required_point = $data->description; $rp_arr = json_decode($required_point);@endphp
                            @if($rp_arr!=null)
                            @foreach($rp_arr as $key => $rp)
                            @if($key==0)
                           <div class="customer_records1">
                              <input name="description_details[]" class="form-control description" style="width:93%;" type="text" id="description" value="{{$rp[0]}}" required>
                              <a class="extra-fields-customer2" href="javascript:"><i class="fa fa-plus-square"></i></a>
                           </div><br>
                           @else
                           <div class="customer_records1">
                              <input name="description_details[]" class="form-control description" style="width:93%;" type="text" id="description" value="{{$rp[0]}}" required>
                              <a href="#" class="remove-field btn-remove-customer remove-description" style="top:unset;"><i class="fa fa-times-circle" aria-hidden="true"></i></a>
                           </div><br>
                           @endif
                           <div class="customer_records1">
                              <input name="description_data[]" class="form-control description" style="width:93%;" type="text" id="description" value="{{$rp[1]}}" required>
                              <a href="#" class="remove-field btn-remove-customer remove-description" style="top:unset;"><i class="fa fa-times-circle" aria-hidden="true"></i></a>
                           </div><br>
                           @endforeach
                           @else
                           <div class="customer_records1">
                              <input name="description_details[]" class="form-control description" type="text" id="description" required>
                              <a class="extra-fields-customer2" href="javascript:"><i class="fa fa-plus-square"></i></a>
                           </div><br>
                           <div class="customer_records1">
                              <input name="description_data[]" class="form-control description" type="text" id="description" required>
                              <a class="extra-fields-customer2" href="javascript:"><i class="fa fa-plus-square"></i></a>
                           </div>
                           @endif
                           <div class="customer_records_dynamic2"></div>
                           @if ($errors->has('description_details')) <span class="text-danger">{{ $errors->first('description_details') }}</span> @endif
                        </div>
                     </div>
                     <div class="col-md-6 form-fill">
                        <div class="form-group">
                           <label for="image">Image:</label>
                           <input name="image" type="file" class="form-control" id="image" loading="lazy">
                           <img src="{{ url('uploads/course/'.$data->image) }}" width="150" height="100">
                           @if ($errors->has('image')) <span class="text-danger">{{ $errors->first('image') }}</span> @endif
                        </div>
                     </div>
                     <div class="col-md-6 form-fill">
                        <div class="form-group">
                           <label for="price">Price:</label>
                           <input name="cost" class="form-control" type="text" id="price" value={{$data->cost}} required>
                           @if ($errors->has('cost')) <span class="text-danger">{{ $errors->first('cost') }}</span> @endif
                        </div>
                     </div>
                     <div class="col-md-6 form-fill">
                        <div class="form-group">
                           <label for="sprice">Selling Price:</label>
                           <input name="price" class="form-control" type="text" id="sprice" value={{$data->price}} required>
                           @if ($errors->has('price')) <span class="text-danger">{{ $errors->first('price') }}</span> @endif
                        </div>
                     </div>
                     <div class="col-md-6 form-fill">
                        <div class="form-group">
                           <label for="sprice">Price Difference:</label>
                           <input name="pricediff" class="form-control" type="text" id="pricediff" value="{{$data->price_diff}}" readonly>
                           @if ($errors->has('pricediff')) <span class="text-danger">{{ $errors->first('pricediff') }}</span> @endif
                        </div>
                     </div>
                     <div class="col-md-6 form-fill">
                        <div class="form-group">
                           <label for="">Price Deadline:</label>
                           <input name="price_deadline" class="form-control" type="text" id="datepicker1" value="{{ date('m/d/Y',strtotime($data->price_deadline)) }}" readonly required>
                           @if ($errors->has('price_deadline')) <span class="text-danger">{{ $errors->first('price_deadline') }}</span> @endif
                        </div>
                     </div>
                     <div class="col-md-6 form-fill">
                        <div class="form-group">
                           <label for="">Training Feature</label>
                           <select class="js-example-basic-multiple form-control" name="training_feature[]" multiple="multiple" required>
                              @foreach ($traning_feature as $tf)
                                 @php $trf_arr = json_decode($data->training_feature_ids);  @endphp
                                 <option value="{{ $tf->id }}" @if(in_array($tf->id, $trf_arr)) selected @endif> {{ $tf->name }} </option>
                              @endforeach
                           </select>
                           @if ($errors->has('training_feature')) <span class="text-danger">{{ $errors->first('training_feature') }}</span> @endif
                        </div>
                     </div>


                     <div class="col-md-6 form-fill">
                                                 <div class="form-group">
                           <label for="">Certification FAQ</label>
                           <select class="js-example-basic-multiple form-control" name="fnq[]" multiple="multiple">

                              @foreach ($fnq as $fq)
                                 @php $fnq_arr = json_decode($fnq_id); @endphp
                                 <option value="{{ $fq->id }}" @if(in_array($fq->id, $fnq_arr)) selected @endif> {{ $fq->question }} </option>
                              @endforeach
                           </select>
                           @if ($errors->has('fnq')) <span class="text-danger">{{ $errors->first('fnq') }}</span> @endif
                        </div>
                     </div>

                     <div class="col-md-6 form-fill">
                        <div class="form-group">
                           <label for="">Course FAQ</label>
                           <select class="js-example-basic-multiple form-control" name="course_faq[]" multiple="multiple">
                              @foreach ($course_faq as $c_faq)
                                 @php $course_faq_arr = json_decode($data->course_faq_id);

                                 @endphp
                                 <option value="{{ $c_faq->id }}" @if((($c_faq->id !=0) && in_array($c_faq->id, $course_faq_arr ?? []))) selected @endif> {{ $c_faq->question }} </option>
                              @endforeach
                           </select>
                           @if ($errors->has('fnq')) <span class="text-danger">{{ $errors->first('fnq') }}</span> @endif
                        </div>
                     </div>

                     <div class="col-md-6 form-fill">
                        <div class="form-group">
                           <label for="">Select Top Product</label>
                           <select class="form-control" name="mark_trending">
                           <option value="" >--Select Top Product--</option>
                            @foreach(range(1, 25) as $number)
                           <option value="{{$number}}" selected >{{ $number }}</option>
                           @endforeach
                           </select>
                        </div>
                     </div>
                     <div class="col-md-6 form-fill">
                        <div class="form-group">
                           <label for="">Status</label>
                           <select class="form-control" name="status" required>
                           <option value="" >--Select Status--</option>
                           <option value="0" >Inactive</option>
                           <option value="1" >Active</option>
                           </select>
                           @if ($errors->has('status')) <span class="text-danger">{{ $errors->first('status') }}</span> @endif
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-12 text-center">
                        <input class="btn mb-0 btn-primary" value="Submit" type="submit" >
                     </div>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>

<script src="//cdn.ckeditor.com/4.25.0-lts/standard/ckeditor.js"></script>
<script type="text/javascript">
   CKEDITOR.replace('short_description');
   CKEDITOR.replace('long_description');
</script>
   <script type="text/javascript">
      $( function() {
         $( "#datepicker" ).datepicker();
         $( "#datepicker1" ).datepicker();
         $('.js-example-basic-multiple').select2();
         var previous_i = {{ $data->id }}
         var contents;
         for (let i = 1; i <= 100; i++) {
            if(previous_i == i)
            {
               contents += "<option value="+i+" selected>" + i + "</option>";
            }
            else{
               contents += "<option value="+i+">" + i + "</option>";
            }

         }
         $('.count-list').html(contents);
      });

      $('.extra-fields-customer').click(function() {
         $('.customer_records_dynamic').append('<div class="remove"><input type="text" name="learning_point[]" class="form-control learning" id="learning" onfocus="focused(this)" onfocusout="defocused(this)" required><a href="#" class="remove-field btn-remove-customer"><i class="fa fa-times-circle" aria-hidden="true"></i></a></div>');
      });

      $('.extra-fields-customer1').click(function() {
         $('.customer_records_dynamic1').append('<div class="remove"><input type="text" name="required_point[]" class="form-control learning" id="learning" onfocus="focused(this)" onfocusout="defocused(this)" required><a href="#" class="remove-field btn-remove-customer"><i class="fa fa-times-circle" aria-hidden="true"></i></a></div>');
      });

      $('.extra-fields-customer2').click(function() {
         $('.customer_records_dynamic2').append('<div class="remove"> <input type="text" name="description_details[]" class="form-control description" id="description" onfocus="focused(this)" onfocusout="defocused(this)" required><br><input type="text" name="description_data[]" class="form-control description" id="description" onfocus="focused(this)" onfocusout="defocused(this)" required> <a href="#" class="remove-field btn-remove-customer"></a> <a href="#" class="remove-field btn-remove-customer"><i class="fa fa-times-circle" aria-hidden="true"></i></a></div>');
      });

      $(document).on('click', '.remove-field', function(e) {
         $(this).parent('.remove').remove();
         e.preventDefault();
      });

      $(document).on('click', '.remove-description', function(e) {
         $("#description").remove();
         $(this).remove();
         e.preventDefault();
      });
      $("#sprice").on("input", function(){
          var sellprice = parseFloat($("#sprice").val()) || 0;
          var price = parseFloat($("#price").val()) || 0;

          if(price > sellprice) {
              var pricedifference = price - sellprice;
              $("#pricediff").val(pricedifference); // Round to 2 decimal places if needed
          } else {
              $("#sprice").val('');
              $("#pricediff").val('');
          }
      });



    document.addEventListener("DOMContentLoaded", function () {
        // Function to toggle certificate upload field
        function toggleCertificateField(show) {
            const certificateField = document.getElementById("certificate_upload");
            if (certificateField) {
                certificateField.style.display = show ? "block" : "none";
            }
        }

        // Get all radio buttons
        const radioButtons = document.querySelectorAll('input[name="certificate"]');

        // Add event listener to each radio button
        radioButtons.forEach(radio => {
            radio.addEventListener("click", function () {
                toggleCertificateField(this.value === "Yes");
            });
        });

        // Page load par check karne ke liye
        const selectedValue = document.querySelector('input[name="certificate"]:checked');
        if (selectedValue) {
            toggleCertificateField(selectedValue.value === "Yes");
        }
    });
</script>
   @include('layouts.admin.footer')
</div>
@endsection