@include('Admin.layouts.app')
@include('Admin.layouts.sidebar')
@section('title', 'Promo Code')
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

         <!-- Begin Page Content -->
         <div class="container-fluid">

<!-- Page Heading -->
<h1 class="h3 mb-2 text-gray-800">Add Promo Code</h1>
<!-- DataTales Example -->
<div class="innerpagedetails card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary"><a href="{{route('admin.promocodes')}}"><i class="fa fa-chevron-left"></i></a>Add Promo Code</h6>
    </div>
  
    <div class="card-body">
    <!--  @if(Session::has('error'))-->
    <!--<div class="alert alert-danger">-->
    <!--  Banner image is required!-->
    <!--</div>-->
    <!--@endif-->
    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
       <form method="post" action="{{route('admin.promo.add')}}" >@csrf 
       <div class="row">
       <div class="col-sm-6">
       <div class="form-group">
    <label for="exampleFormControlInput1">Code</label>
    <input type="text" class="form-control" name="code" id="exampleFormControlInput1" placeholder="Promo Code" required>
  </div>
</div>
<div class="col-sm-6">
       <div class="form-group">
    <label for="exampleFormControlInput1">Discount In Percentage</label>
    <input type="number" class="form-control" name="discount" id="exampleFormControlInput1" placeholder="%" required>
  </div>
</div>     
<div class="col-sm-6">
       <div class="form-group">
    <label for="exampleFormControlInput1">Started At</label>
    <input type="date" class="form-control" name="started_at" id="started_at" placeholder="Promo Code Started Date" required>
  </div>
  <div id="startDateError" style='color:red;'></div>
</div>     
<div class="col-sm-6">
       <div class="form-group">
    <label for="exampleFormControlInput1">Expired At</label>
    <input type="date" class="form-control" name="expired_at" id="expired_at" placeholder="Promo Code Expired Date" required>
  </div>
  <div id="endDateError" style='color:red;'></div>
</div>


    <!-- Radio button for selecting multiple users -->
    
<div class="col-sm-6">
       <div class="form-group">
       <input type="checkbox" id="checkbox" name="all" value="1">
    <label for="multipleUsers">Assign To All Users</label><br>
    <label for="exampleFormControlInput1">Assign To One User</label>
    <select class="searchable-select" name="user_id" id="dropdown" required>
    @foreach($users as $user)    
    <option value="{{$user->id}}">{{$user->phone}}</option>
    @endforeach
 
</select>
  </div>
</div>

     

<div class="col-lg-12">
       <div class="form-group">
        <button  class="btn-gazna" style="height:50px;font-size:14px;" type="submit">Add Promo Code</button>
</div>
</div>
</div>
</form>
    </div>
</div>

</div>
<!-- /.container-fluid -->
    </div>
    <!-- End of Main Content -->

    <script>
      $(function(){
        $('#startDateError').hide();
           $('#endDateError').hide();
      });
      // Get references to your start and end date input fields
const startDateInput = document.getElementById('started_at');
const endDateInput = document.getElementById('expired_at');

// Add an event listener to perform validation when the start date or end date changes
startDateInput.addEventListener('change', validateDates);
endDateInput.addEventListener('change', validateDates);

// Function to validate the start and end dates
function validateDates() {
  $('#startDateError').text('');
  $('#endDateError').text('');
  const today = new Date();
  const startDate = new Date(startDateInput.value);
  const endDate = new Date(endDateInput.value);

  // Check if the start date is before today
  if (startDate < today) {
      alert(today+'->'+startDate;
    $('#startDateError').text('Start date must be today or after today.');
    $('#startDateError').show();

    // You can also clear the start date input or take other actions
    startDateInput.value = '';
  }
if (startDate.getTime() > endDate.getTime()) {
    $('#startDateError').text('Start date must be same as or before the end date.');
    $('#startDateError').show();

    // You can also clear the start date input or take other actions
    startDateInput.value = '';
  }
  // Check if the end date is before the start date
  if (endDate < startDate) {
    $('#endDateError').text('End date must be the same as or after the start date.');
    $('#endDateError').show();
    // You can also clear the end date input or take other actions
    endDateInput.value = '';
  }
}

// You may also want to perform initial validation when the page loads
validateDates();

      </script>
 @if(Session::has('success'))
<script>
   Swal.fire({
  title: 'Promo Code Added Successfully',
  showClass: {
    popup: 'animate__animated animate__fadeInDown'
  },
  hideClass: {
    popup: 'animate__animated animate__fadeOutUp'
  }
}).then(function(){
  window.location.href = '{{ route("admin.promocodes") }}';
});
</script>
@endif
<script>
        // Get references to the checkbox and dropdown elements
        const checkbox = document.getElementById("checkbox");
        const dropdown = document.getElementById("dropdown");

        // Add an event listener to the checkbox
        checkbox.addEventListener("change", function() {
            // If the checkbox is checked, disable the dropdown; otherwise, enable it
            dropdown.disabled = checkbox.checked;
        });
    </script>


@include('Admin.layouts.footer')
@include('Admin.layouts.modal')