@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 class="active">{{$title}}</li>
  </ol>
  <div class="d-flex justify-content-between align-items-center flex-wrap">
    <h1>{{$title}}</h1>
    <a href="{{ route('superadmin.licenses.create') }}" class="btn btn-sm btn-primary"><em class="fa fa-plus-circle"></em> Add License</a>
  </div>
  
</section>
<!-- Main content -->
<section class="content">
  @include('backend.layouts.alert')
  <!-- Default box -->
  <div class="box shadow-none">
    <div class="box-body pt-0">
      
        <table class="table table-bordered table-hover" id="tbl-users" aria-describedby="licenses-list">
          <thead>
            <th scope="col">{{__('app.customers.name')}}</th>
            <th scope="col">{{__('app.licenses.license_number')}}</th>
            <th scope="col">{{__('app.licenses.issue_date')}}</th>
            <th scope="col">{{__('app.licenses.expiry_date')}}</th>
            
            <th scope="col">{{__('app.licenses.license_status')}}</th>
            <th scope="col">{{__('app.status')}}</th>
            <th scope="col" class="action">{{__('app.action')}}</th>
          </thead>
          <tbody>
            @foreach ($licenses as $license)
            
              @if(isset($license->customer))
              <tr>
                <td data-type='text'><a href="{{ route('superadmin.customers.show', $license->customer->id) }}">{{$license->customer->name}}</a></td>
                <td data-type='text'>{{$license->license_number}}</td>
                <td data-type='text'>{{$license->issue_date->format('d/m/Y')}}</td>
                <td data-type='text'>{{$license->expiry_date->format('d/m/Y')}}</td>
                @php
                  $isExpired = \Carbon\Carbon::parse($license->expiry_date)->lt(\Carbon\Carbon::today());
                  $isActive = !$isExpired;
                @endphp
                <td data-type='text' data-status="{{ $isActive ? 'active' : 'expired' }}">
                  @if($isActive)
                    <span class="px-3 py-2 rounded-5 text-success fs-12 fw-medium tag-active custom-width-90 text-center d-inline-block">Active</span>
                  @else
                    <span class="px-3 py-2 rounded-5 text-danger fs-12 fw-medium tag-expired custom-width-90 text-center d-inline-block">Expired</span>
                  @endif
                </td>
                <td data-type='none' data-status="{{ $license->status_label }}" data-search="{{ $license->status_label }}">
                  <div class="form-check form-switch">
                    <input class="form-check-input status-toggle" type="checkbox" role="switch"
                           id="status_{{ $license->id }}"
                           data-license-id="{{ $license->id }}"
                           aria-checked="{{ $license->status_label == 'active' ? 'true' : 'false' }}"
                           {{ $license->status_label == 'active' ? 'checked' : '' }}>
                    <span class="d-none">{{ $license->status_label }}</span>
                  </div>
                </td>
                <td data-type='none'>
                  <a href="{{ route('superadmin.licenses.edit', $license->id) }}" class="me-3">
                    <em class="iconsax icon-292D32 fs-20" icon-name="edit-1"></em>
                  </a>
                  <a href="javascript:void(0)" class="delete-license" data-license-id="{{ $license->id }}">
                    <em class="iconsax icon-292D32 fs-20" icon-name="trash"></em>
                  </a>
                </td>
              </tr>
              @endif
            
            @endforeach
          </tbody>
        </table>
      
    </div>
  </div>
  <!-- /.box -->

</section>




<script type="text/javascript">
  $(document).ready(function() {
    // Custom date sorting for dd/mm/yyyy format
    $.fn.dataTable.ext.type.order['date-euro-pre'] = function (data) {
      if (data === null || data === '') {
        return 0;
      }
      
      var parts = data.split('/');
      if (parts.length !== 3) {
        return 0;
      }
      
      // Convert dd/mm/yyyy to yyyy-mm-dd for proper sorting
      var day = parseInt(parts[0], 10);
      var month = parseInt(parts[1], 10);
      var year = parseInt(parts[2], 10);
      
      if (isNaN(day) || isNaN(month) || isNaN(year)) {
        return 0;
      }
      
      return year * 10000 + month * 100 + day;
    };
    $.fn.dataTable.ext.errMode = () => alert('An error occurred while loading the table data.');
    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">',
      order: [], // Disable initial sorting to maintain server-side order
      columnDefs: [
        { targets: ['action'], orderable: false },
        { 
          targets: [2, 3], // Issue Date and Expiry Date columns (0-indexed)
          type: 'date-euro' // Use European date format (dd/mm/yyyy)
        }
      ],
    });
    $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');

    $('#tbl-users_filter').append(`
    <select id="statusFilter" class="form-control max-w-200">
      <option value="">{{__('app.status')}}</option>
      <option value="active">{{__('app.active')}}</option>
      <option value="expired">{{__('app.expired')}}</option>
    </select>
  `);

  $('#statusFilter').on('change', function () {
    let selected = $(this).val();
    
    // Clear any existing custom search
    $.fn.dataTable.ext.search.pop();
    
    if (selected) {
      // Add custom search function for Status column (column 5) - the toggle switch column
      $.fn.dataTable.ext.search.push(function(settings, rowData, rowIndex) {
        const row = table.row(rowIndex).node();
        const status = $(row).find('td:eq(5)').data('status'); // Status column (toggle switch)
        return status === selected;
      });
    }
    
    table.draw();
  });

// After adding this plugin, make sure to redraw table


    $('.status-toggle').on('change', function() {
      const licenseId = $(this).data('license-id');
      const status = $(this).prop('checked') ? '1' : '0';
      const $switch = $(this);
      
      $.ajax({
        url: "{{ route('superadmin.licenses.updateStatus') }}",
        type: "POST",
        data: {
          license_id: licenseId,
          status: status,
          _token: "{{ csrf_token() }}"
        },
        success: function(response) {
          if(response.success) {
            toastr.success('{{__('messages.license_updated_successfully')}}');
            // Reload the page to get fresh data
            location.reload();
          } else {
            $switch.prop('checked', !$switch.prop('checked'));
            toastr.error(response.message || '{{__('messages.failed_to_update_status')}}');
          }
        },
        error: function(xhr) {
          $switch.prop('checked', !$switch.prop('checked'));
          toastr.error('{{__('messages.failed_to_update_status')}}');
        }
      });
    });
      $('#tbl-users').on('click', '.delete-license', function() {
        const licenseId = $(this).data('license-id');
        const row = $(this).closest('tr');
        var url = "{{ route('superadmin.licenses.destroy', ':id') }}";
        url = url.replace(':id', licenseId);
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: url,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.status === 'success') {
                            // Remove the row from the table
                            $('#tbl-users').DataTable().row(row).remove().draw();
                            // Show success message
                            toastr.success(response.message);
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr) {
                        toastr.error('{{__('messages.failed_to_delete_license')}}');
                    }
                });
            }
        });
    });
  });

</script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection