@extends('backend.layouts.app')

@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
      <ol class="breadcrumb">
        <li>
          <a href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_664_24080)">
              <path d="M7.5 13.5L10.5 13.5" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M1.76354 9.91009C1.49878 8.18718 1.3664 7.32573 1.69212 6.56203C2.01785 5.79834 2.74052 5.27582 4.18585 4.2308L5.26574 3.45C7.06372 2.15 7.96271 1.5 9 1.5C10.0373 1.5 10.9363 2.15 12.7343 3.45L13.8141 4.2308C15.2595 5.27582 15.9821 5.79834 16.3079 6.56203C16.6336 7.32573 16.5012 8.18718 16.2365 9.91009L16.0107 11.3793C15.6353 13.8217 15.4477 15.0429 14.5717 15.7714C13.6958 16.5 12.4152 16.5 9.85411 16.5H8.14589C5.58475 16.5 4.30418 16.5 3.42825 15.7714C2.55232 15.0429 2.36465 13.8217 1.98932 11.3793L1.76354 9.91009Z" stroke="#007AFF" stroke-width="1.5" stroke-linejoin="round"/>
              </g>
              <defs>
              <clipPath id="clip0_664_24080">
              <rect width="18" height="18" fill="white"/>
              </clipPath>
              </defs>
            </svg>
          </a>
        </li>
        <li>
          <a href="{{ route('superadmin.licenses.index') }}">{{__('app.licenses.title')}}</a>
        </li>
        <li class="active">{{$title}}</li>
      </ol>
      <div class="d-flex justify-content-between align-items-center flex-wrap">
        <h1>{{$title}}</h1>
      </div>
  
    </section>
    <!-- Main content -->
    <section class="content pb-0">
    @include('backend.layouts.alert')
      <!-- Default box -->
      <div class="row">
      <div class="col-md-12">

        <div class="border-top">
            
            <div class="" id="customer-step-1">
              <form action="{{ $save }}" method="POST" class="form-horizontal form-validate" enctype="multipart/form-data">
                  @csrf
                  @if(isset($license))
                    @method('PUT')
                  @endif
                  <input type="hidden" name="id" value="{{ old('id', $license['id'] ?? '') }}" id="scret_id">
                  
                      <div class="box-body px-0 form-box-scroll">
                        <div class="row">
                          <div class="col-md-4">
                            <div class="form-group">
                                <label for="title" class="control-label">{{__('app.customers.title')}}</label>
                                <div class="col-field-wrapper">
                                     <select id="roleFilter" class="form-control {{ isset($license) ? 'text-muted' : '' }}" name="customer" {{ isset($license) ? 'disabled' : '' }}>
                                      <option value="">Select</option>
                                      @foreach ($customers as $customer)
                                        <option value="{{$customer->id}}" {{ (old('customer', $license->customer_id ?? '') == $customer->id) ? 'selected' : '' }}>{{$customer->name}}</option>
                                      @endforeach
                                    </select>
                                    @if ($errors->has('customer'))
                                    <span class="help-block">{{ $errors->first('customer') }}</span>
                                    @endif
                                </div>
                            </div>
                          </div>
                          <div class="col-md-4">
                          
                            <div class="form-group">
                                <label for="description" class="control-label">{{__('app.licenses.license')}} #</label>
                                <div class="col-field-wrapper">
                                    <input type="text" name="license" class="form-control text-muted" id="license" placeholder="Enter license number" readonly value="{{ old('license', isset($license) ? ($license->license_number ?? '') : ($generatedLicense ?? '') ) }}">
                                    @if ($errors->has('license'))
                                    <span class="help-block">{{ $errors->first('license') }}</span>
                                    @endif
                                </div>
                            </div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                                <label for="description" class="control-label">{{__('app.licenses.issue_date')}}</label>
                                <div class="col-field-wrapper position-relative">
                                    <input type="text" name="issue_date" class="form-control date-picker calendar {{ isset($license) ? 'text-muted' : '' }}"  placeholder="Select" {{ isset($license) ? 'disabled' : '' }} value="{{ old('issue_date', isset($license->issue_date) ? $license->issue_date->format('d/m/Y ') : '') }}">
                                    <span class="position-absolute date-picker-icon">
                                      <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>
                                    </span>
                                    @if ($errors->has('issue_date'))
                                    <span class="help-block">{{ $errors->first('issue_date') }}</span>
                                    @endif
                                </div>
                            </div>
                          
                            
                          </div>
                          <div class="col-md-4">
                          
                            <div class="form-group">
                                <label for="description" class="control-label">{{__('app.licenses.expiry_date')}}</label>
                                <div class="col-field-wrapper position-relative">
                                    <input type="text" name="expiry_date" class="form-control date-picker calendar"  placeholder="Select" value="{{ old('expiry_date', isset($license->expiry_date) ? $license->expiry_date->format('d/m/Y ') : '') }}">
                                    <span class="position-absolute date-picker-icon">
                                      <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>
                                    </span>
                                    @if ($errors->has('expiry_date'))
                                    <span class="help-block">{{ $errors->first('expiry_date') }}</span>
                                    @endif
                                </div>
                            </div>
                          </div>
                          
                          
                          
                        </div>
                      </div>
                      <!-- /.box-body -->
                      <div class="box-footer px-0">
                          <div class="col-sm-12 text-end">
                              <a href="{{ $backBtnLink }}" class="btn btn-outline-secondary me-3">{{__('app.cancel')}}</a>
                              <button type="submit" class="btn btn-primary">{{ isset($license) ? __('app.update') : __('app.submit') }}</button>
                              
                          </div>
                          
                      </div>
                    
                  <!-- /.box-footer -->
              </form>
            </div>

            
        </div>
      </div>
      <!-- /.box -->

    </section>
    <!-- /.content -->

<script type="text/javascript">
$(document).ready(function () {
  // Custom validator for date not before today
  $.validator.addMethod('notBeforeToday', function(value, element) {
    if (!value) return true;
    
    // Trim any extra spaces
    value = value.trim();
    
    // Only validate if the date is complete (has all parts)
    var parts = value.split('/');
    if (parts.length !== 3) return true; // Don't validate incomplete dates
    
    // Ensure all parts are valid numbers
    var day = parseInt(parts[0]);    // First part is day (dd/mm/yyyy)
    var month = parseInt(parts[1]);  // Second part is month (dd/mm/yyyy)
    var year = parseInt(parts[2]);   // Third part is year (dd/mm/yyyy)
    
    if (isNaN(day) || isNaN(month) || isNaN(year)) return true; // Don't validate invalid dates
    
    // Validate date ranges
    if (day < 1 || day > 31 || month < 1 || month > 12 || year < 1900 || year > 2100) {
      return true; // Don't validate obviously invalid dates
    }
    
    var today = new Date();
    today.setHours(0,0,0,0);
    
    var inputDate = new Date(year, month - 1, day); // month is 0-indexed
    
    // Check if the date is valid (handles leap years, etc.)
    if (inputDate.getDate() !== day || inputDate.getMonth() !== (month - 1) || inputDate.getFullYear() !== year) {
      return true; // Invalid date (like 31/02/2024)
    }
    

    
    return inputDate >= today;
  }, 'Date cannot be before today.');

  // Custom validator for expiry after issue
  $.validator.addMethod('afterIssueDate', function(value, element) {
    var issueDate = $("input[name='issue_date']").val();
    if (!value || !issueDate) return true;
    
    // Parse issue date in dd/mm/yyyy format
    var issueParts = issueDate.split('/');
    if (issueParts.length !== 3) return false;
    var issue = new Date(parseInt(issueParts[2]), parseInt(issueParts[1]) - 1, parseInt(issueParts[0]));
    
    // Parse expiry date in dd/mm/yyyy format
    var expiryParts = value.split('/');
    if (expiryParts.length !== 3) return false;
    var expiry = new Date(parseInt(expiryParts[2]), parseInt(expiryParts[1]) - 1, parseInt(expiryParts[0]));
    
    return expiry > issue;
  }, 'Expiry date must be after issue date.');

  // Define validation rules based on mode (create vs edit)
  var validationRules = {
    license: { required: true, maxlength: 255 },
    expiry_date: { required: true, afterIssueDate: true }
  };

  // Add customer and issue_date validation only in create mode
  @if(!isset($license))
    validationRules.customer = { required: true, maxlength: 255 };
    validationRules.issue_date = { required: true };
    validationRules.expiry_date.notBeforeToday = true;
  @endif

  $('.form-validate').validate({
    debug: false,
    ignore: [],
    errorClass: 'help-block',
    errorElement: 'span',
    rules: validationRules,
    messages: {
      license: "Please enter License Number",
      expiry_date: {
        required: "Please select Expiry Date",
        afterIssueDate: "Expiry date must be after issue date."
        @if(!isset($license))
        ,notBeforeToday: "Expiry date cannot be before today."
        @endif
      }
      @if(!isset($license))
      ,customer: "Please select a Customer"
      ,issue_date: {
        required: "Please select Issue Date"
      }
      @endif
    },
    highlight: function(el) {
      $(el).closest('.col-field-wrapper').addClass('has-error');
    },
    unhighlight: function(el) {
      $(el).closest('.col-field-wrapper').removeClass('has-error');
    },
    invalidHandler: function(evt, validator) {
      if (!validator.numberOfInvalids()) return;
      $('html, body').animate({ scrollTop: $(validator.errorList[0].element).offset().top - 100 }, 500);
    },
    submitHandler: function(form) {
      $.ajax({
        url: $(form).attr('action'),
        method: $(form).attr('method'),
        data: $(form).serialize(),
        dataType: 'json',
        success: function(res) {
          if (res.success) {
            toastr.success(res.message || '{{__('messages.license_added_successfully')}}');
            setTimeout(function() {
              window.location.href = res.redirect;
            }, 1500);
          } else {
            toastr.error(res.message || '{{__('messages.failed_to_save_license')}}');
          }
        },
        error: function(xhr) {
          if (xhr.status === 422) {
            $(form).validate().showErrors(xhr.responseJSON.errors);
            // toastr.error(xhr.responseJSON.errors);
          } else {
            toastr.error('{{__('messages.server_error')}}');
          }
        }
      });
      return false;
    }
  });
});

$(document).ready(function() {
    $.fn.dataTable.ext.errMode = () => alert('{{__("messages.datatable_error_message")}}');
    var table = $('#tbl-users').DataTable({
      info: true,
      searching: true,
      //ajax: '../server_side/scripts/server_processing.php',
      pageLength: 10,
      pagingType: "full_numbers",
      dom: 'frt<"bottom"ipl><"clear">'
    });
    $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');

    $('#tbl-users_filter').append(`
    <div class="position-relative">
      <input type="text" class="form-control date-picker" id="calendar">
      <span class="position-absolute date-picker-icon">
        <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>

      </span>
    </div>
  `);

  $('.form-validate .date-picker').datepicker({
    format: 'dd/mm/yyyy',   // day/month/four-digit-year
    autoclose: true,
    todayHighlight: true,
    startDate: new Date()
  }).on('changeDate', function() {
    // Trigger validation after date is selected
    setTimeout(function() {
      $(this).valid();
    }.bind(this), 100);
  });

  // Update expiry date picker when issue date is selected
  $('input[name="issue_date"]').on('changeDate', function() {
    var issueDate = $(this).val();
    if (issueDate) {
      // Parse the issue date in dd/mm/yyyy format
      var parts = issueDate.split('/');
      if (parts.length === 3) {
        var day = parseInt(parts[0]);     // First part is day (dd/mm/yyyy)
        var month = parseInt(parts[1]);   // Second part is month (dd/mm/yyyy)
        var year = parseInt(parts[2]);    // Third part is year (dd/mm/yyyy)
        
        // Validate the parsed values
        if (!isNaN(day) && !isNaN(month) && !isNaN(year)) {
          var startDate = new Date(year, month - 1, day); // month is 0-indexed
          
          // Set the expiry date picker to start from the day after issue date
          startDate.setDate(startDate.getDate() + 1);
          
          $('input[name="expiry_date"]').datepicker('setStartDate', startDate);
        }
      }
    }
  });

  // Filter on change
  $('#roleFilter').on('change', function () {
    let selected = $(this).val();
    table.column(1).search(selected).draw(); // column index 1 = "Role"
  });
});
</script>
@endsection