@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.customers.create') }}"><button class="btn btn-sm btn-primary "><em class="fa fa-plus-circle"></em> {{__('app.add')}} {{__('app.customers.customer')}}</button></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="customers-list">
          <thead>
            <tr>
              <th scope="col">{{__('app.customers.name')}}</th>
              <th scope="col">{{__('app.customers.contact_person')}} ({{__('app.customers.accounts')}})</th>
              <th scope="col">{{__('app.customers.email')}} ({{__('app.customers.accounts')}})</th>
              <th scope="col">{{__('app.customers.phone')}} ({{__('app.customers.accounts')}})</th>
              <th scope="col">{{__('app.type')}}</th>
              <th scope="col">{{__('app.status')}}</th>
              <th scope="col" class="action">{{__('app.action')}}</th>
            </tr>
          </thead>
          <tbody>
            @foreach ($customers as $customer)
                <tr>
                    <td data-type='text'><a href="{{ route('superadmin.customers.show', ['customer' => $customer->id]) }}">{{$customer->name}}</a></td>
                    <td data-type='text'>{{$customer->contact_person_accounts ?? null}}</td>
                    <td data-type='text'>{{$customer->email ?? null}}</td>
                    <td data-type='text'>{{$customer->phone_accounts ?? null}}</td>
                    
                    <td data-type='none'>{{$customer->customerTypeName ?? null}}</td>
                    <td data-type='none'>
                      <div class="form-check form-switch">
                        <input class="form-check-input status-toggle" 
                               type="checkbox" 
                               role="switch" 
                               id="status_{{ $customer->id ?? null }}" 
                               data-customer-id="{{ $customer->id ?? null }}"
                               {{ $customer->status_label == 'active' ? 'checked' : '' }}
                               aria-checked="{{ $customer->status_label == 'active' ? 'true' : 'false' }}">
                               <span class="d-none">{{ $customer->status_label }}</span>
                      </div>
                    </td>
                    <td data-type='none'>
                    <a href="{{ route('superadmin.customers.edit', $customer->id) }}" class="me-3">
                      <em class="iconsax icon-292D32 fs-20" icon-name="edit-1"></em>
                    </a>
                    <a href="javascript:void(0)" class="delete-customer" data-customer-id="{{ $customer->id }}">
                      <em class="iconsax icon-292D32 fs-20" icon-name="trash"></em>
                    </a>
                  </td>
                </tr>
            @endforeach
          </tbody>
        </table>
      
    </div>
  </div>
  <!-- /.box -->

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

<!-- Missing Documents Modal -->
<div class="modal fade" id="missingDocumentsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="missingDocumentsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="missingDocumentsModalLabel">{{__('app.missing_required_documents')}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">  
        <h5 class="mb-3">{{__('app.please_upload_all_the_mandatory_documents_before_activating_this_customer')}}</h5>
        <ul id="missingDocumentsList" class="list-unstyled">
          <!-- Documents will be populated dynamically -->
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">{{__('app.ok')}}</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    var table = $('#tbl-users').DataTable({
      info: true,
      searching: true,
      pageLength: 10,
      pagingType: "full_numbers",
      dom: 'frt<"bottom"ipl><"clear">',
      processing: true,
      order: [], // Disable initial sorting to maintain server-side order
      language: {
        processing: '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>',
        emptyTable: "No data available",
        zeroRecords: "No matching records found"
      },
      columnDefs: [
        { targets: ['action'], orderable: false }
      ],
      initComplete: function() {
        console.log('DataTable initialized');
      }
    });

    $('#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="inactive">{{__('app.inactive')}}</option>
      </select>
    `);

    $('.search-cancel-button').on('click', function(){
      alert('sdsd')
    });
    // Filter on change
    $('#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
        $.fn.dataTable.ext.search.push(
          function(settings, data, dataIndex) {
            var row = table.row(dataIndex).node();
            var checkbox = $(row).find('.status-toggle');
            var isChecked = checkbox.prop('checked');
            var rowStatus = isChecked ? 'active' : 'inactive';
            return rowStatus === selected;
          }
        );
      }
      
      table.draw();
    });

    // Status update
    $(document).on('change', '.status-toggle', function() {
      const customerId = $(this).data('customer-id');
      const status = $(this).prop('checked') ? '1' : '0';
      const $switch = $(this);
      const $statusText = $switch.closest('td').find('.status-text');
      const $statusDisplay = $switch.closest('td').find('.status-display');
      
      // If switching to active, check documents first
      if (status === '1') {
        checkDocumentsBeforeActivation(customerId, $switch, $statusText, $statusDisplay);
      } else {
        // If switching to inactive, proceed directly
        updateCustomerStatus(customerId, status, $switch, $statusText, $statusDisplay);
      }
    });

    // Function to check documents before activation
    function checkDocumentsBeforeActivation(customerId, $switch, $statusText, $statusDisplay) {
      $.ajax({
        url: "{{ route('superadmin.customer.check-documents-and-send-credentials') }}",
        type: 'POST',
        data: {
          customer_id: customerId,
          _token: "{{ csrf_token() }}"
        },
        success: function(response) {
          if (response.success) {
            // All documents uploaded, proceed with activation
            updateCustomerStatus(customerId, '1', $switch, $statusText, $statusDisplay);
          } else if (response.hasMissingDocuments) {
            // Show modal with missing documents and revert toggle
            showMissingDocumentsModal(response.missingDocuments, customerId);
            $switch.prop('checked', false); // Revert the toggle
          } else {
            $switch.prop('checked', false); // Revert the toggle
            toastr.error(response.message || 'Failed to check documents');
          }
        },
        error: function(xhr) {
          $switch.prop('checked', false); // Revert the toggle
          let errorMessage = 'An error occurred while checking documents';
          if (xhr.responseJSON && xhr.responseJSON.message) {
            errorMessage = xhr.responseJSON.message;
          }
          toastr.error(errorMessage);
        }
      });
    }

    // Function to update customer status
    function updateCustomerStatus(customerId, status, $switch, $statusText, $statusDisplay) {
      $.ajax({
        url: "{{ route('superadmin.update.userstatus') }}",
        type: "POST",
        data: {
          user_id: customerId,
          status: status,
          _token: "{{ csrf_token() }}"
        },
        success: function(response) {
          if(response.success) {
            $statusText.text(status);
            $statusDisplay.text(status.charAt(0).toUpperCase() + status.slice(1));
            toastr.success('{{__('messages.customer_updated_successfully')}}');
            setTimeout(function() {
                location.reload();
            }, 1500);
          } 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')}}');
        }
      });
    }

    // Function to show missing documents modal
    function showMissingDocumentsModal(missingDocuments, customerId) {
      let documentsList = '';
      missingDocuments.forEach(function(doc) {
        documentsList += '<li>• ' + doc + '</li>';
      });
      
      $('#missingDocumentsList').html(documentsList);
      
      $('#missingDocumentsModal').modal('show');
    }

    // Handle customer deletion
    $('#tbl-users').on('click', '.delete-customer', function() {
        const customerId = $(this).data('customer-id');
        const row = $(this).closest('tr');
        var url = "{{ route('superadmin.customers.destroy', ':id') }}";
        url = url.replace(':id', customerId);
        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('Failed to delete customer');
                    }
                });
            }
        });
    });
  });
</script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection