@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.22.1/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: 10px;
   top: 41px;
   }
   .learning {
   width: 100%;
   }
   .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;
   }
   .customer_records_dynamic2 {
   margin-top: 12px;
   }
   a.extra-fields-customer1 {
   position: absolute;
   right: 10px;
   top: 39px;
   }

   a.extra-fields-customer2 {
   position: absolute;
   right: 10px;
   top: 39px;
   }
   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 Category">add</i>
                    </a>
                  </h6>
               </div>
            </div>
            <div class="card-body px-0 pb-2 mx-3 mb-3">
               <form action="{{ route('admin.course.store') }}" method="post" enctype="multipart/form-data">
                  @csrf
                  <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" 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="classes_heading">Classes Heading:</label>
                           <input name="classes_heading" type="text" class="form-control" id="classes_heading" >
                           @if ($errors->has('classes_heading')) <span class="text-danger">{{ $errors->first('classes_heading') }}</span> @endif
                        </div>
                     </div>
                     <div class="col-md-4 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 }}">{{ $category->name }}</option>
                              @endforeach
                           </select>
                           @if ($errors->has('category')) <span class="text-danger">{{ $errors->first('category') }}</span> @endif
                        </div>
                     </div>
                     <!-- <div class="col-md-4 form-fill">
                        <div class="form-group">
                           <label for="duration">Duration:</label>
                           <select name="duration" class="form-control count-list" id="duration" required>
                           </select>
                           @if ($errors->has('duration')) <span class="text-danger">{{ $errors->first('duration') }}</span> @endif
                        </div>
                     </div> -->
                     <!-- <div class="col-md-4 form-fill">
                        <div class="form-group">
                           <label for="duration">Duration Type:</label>
                           @php $durationTypes = durationTypes(); @endphp
                           <select name="duration_type" class="form-control" id="durationtype" required>
                              @foreach ($durationTypes as $dt)
                                 <option value="{{ $dt }}">{{ ucfirst($dt) }}</option>
                              @endforeach

                           </select>
                           @if ($errors->has('duration_type')) <span class="text-danger">{{ $errors->first('duration_type') }}</span> @endif
                        </div>
                     </div> -->
                     <!-- <div class="col-md-4 form-fill">
                        <div class="form-group">
                           <label for="language">Language:</label>
                           <input name="language" type="text" class="form-control" id="language" required>
                           @if ($errors->has('language')) <span class="text-danger">{{ $errors->first('language') }}</span> @endif
                        </div>
                     </div> -->

                     <div class="col-md-3 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 }}">{{ ucfirst($sl) }}</option>
                              @endforeach
                           </select>
                        </div>
                     </div>
                     <div class="col-md-3 form-fill">
                        <div class="form-group">
                           <label for="">Deadline:</label>
                           <input name="deadline" type="text" class="form-control" id="datepicker" readonly 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" checked><span class="certificate-option" onclick="toggleCertificateField(true)">Yes</span>
                           </label>

                           <label class="radio-inline">
                              <input type="radio" name="certificate" class="option1" 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">
                        </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" checked><span class="certificate-option">Yes</span>
                           </label>

                           <label class="radio-inline">
                              <input type="radio" name="bestseller" class="option1" value="No"><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="description">Short Description:</label><br>
                           <textarea name="short_description" class="form-control" rows="17" id="description" required></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">
                           <label for="description">Full Description:</label><br>
                           <textarea name="full_description" class="form-control ckeditor" name="overview" id="overview" rows="5" required></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="long_description">Long Description:</label>
                           <textarea name="long_description" class="form-control" rows="17" id="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 ps-relative">
                           <label for="learning">Learning Point:</label>
                           <div class="customer_records">
                              <input name="learning_point[]" class="form-control learning" type="text" id="learning" required>
                              <a class="extra-fields-customer" href="javascript:"><i class="fa fa-plus-square"></i></a>
                           </div>
                           <div class="customer_records_dynamic"></div>
                           @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>
                           <div class="customer_records1">
                              <input name="required_point[]" class="form-control learning" type="text" id="learning" required>
                              <a class="extra-fields-customer1" href="javascript:"><i class="fa fa-plus-square"></i></a>
                           </div>
                           <div class="customer_records_dynamic1"></div>
                           @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>
                           <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>
                           <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">
                           @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" 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" 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" 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" 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)
                                  <option value="{{ $tf->id }}" > {{ $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)
                                  <option value="{{ $fq->id }}" > {{ $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)
                                  <option value="{{ $c_faq->id }}" > {{ $c_faq->question }} </option>
                              @endforeach -->
                           </select>
                           @if ($errors->has('course_faq')) <span class="text-danger">{{ $errors->first('course_faq') }}</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 }}" >{{ $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>
                  <div class="row">
                     <div class="col-12 text-center mb-3">
                        <input class="btn mb-0 btn-primary" value="Submit" type="submit" >
                     </div>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>
 <script src="https://cdn.ckeditor.com/4.25.0/standard/ckeditor.js"></script>
   <script type="text/javascript">
      CKEDITOR.replace('description');
      CKEDITOR.replace('long_description');

      $( function() {
         $( "#datepicker" ).datepicker();
         $( "#datepicker1" ).datepicker();
         $('.js-example-basic-multiple').select2();

         var contents;
         for (let i = 1; i <= 100; i++) {
            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();
      });

     $("#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