@extends('backend.layouts.admin.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">Purchase Orders</li>
  </ol>
  <div class="d-flex justify-content-between align-items-center flex-wrap">
    <h1>{{$title}}</h1>
    <a href="{{ route('admin.purchase-orders.create') }}"><button class="btn btn-sm btn-primary "><em class="fa fa-plus-circle"></em> Add Purchase Order</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="index-purchase-order-list">
          <thead>
            <th scope="col">PO Number</th>
            <th scope="col">Contact Person</th>
            <th scope="col">Email</th>
            <th scope="col">Phone</th>
            <th scope="col">Jobs</th>
            <th scope="col" class="text-end">Creation Date</th>
            <th scope="col" class="action">Action</th>
          </thead>
          <tbody></tbody>
        </table>
      
    </div>
  </div>
  <!-- /.box -->

</section>
<!-- /.content -->
<!-- Modal start here -->
<div class="modal fade" id="autologin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-xl">
    <div class="modal-content model-content-autologin">

    </div>
  </div>
</div>
<!-- Modal end here -->



<script type="text/javascript">
  $(document).ready(function() {
      $.fn.dataTable.ext.errMode = () => alert('{{__("messages.datatable_error_message")}}');
      // Use global loader functions
      const showLoader = window.showLoader || function(){ try { window.AppLoader && window.AppLoader.show(); } catch(_) {} };
      const hideLoader = window.hideLoader || function(){ try { window.AppLoader && window.AppLoader.hide(); } catch(_) {} };

      var loaderTimer = null;
      var table = $('#tbl-users').DataTable({
        processing: false,
        serverSide: true,
        deferRender: true,
        searchDelay: 300,
        ajax: {
          url: '{{ route('admin.purchase-orders.datatable') }}',
          type: 'GET',
          beforeSend: function(){
            try { if (loaderTimer) { clearTimeout(loaderTimer); } } catch(_) {}
            loaderTimer = setTimeout(function(){ showLoader(); }, 200);
          },
          complete: function(){
            try { if (loaderTimer) { clearTimeout(loaderTimer); loaderTimer = null; } } catch(_) {}
            hideLoader();
          },
          error: function(){
            try { if (loaderTimer) { clearTimeout(loaderTimer); loaderTimer = null; } } catch(_) {}
            hideLoader();
          }
        },
        columns: [
          { data: 'po_number', name: 'po_number' },
          { data: 'contact_person', name: 'contact_person' },
          { data: 'email', name: 'email' },
          { data: 'phone', name: 'phone' },
          { data: 'jobs', name: 'jobs_count', searchable: false },
          { data: 'created_at', name: 'created_at' },
          { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
        info: true,
        searching: true,
        pageLength: 10,
        pagingType: "full_numbers",
        dom: 'frt<"bottom"ipl><"clear">',
        order: [[0, 'desc']],
        columnDefs: [
          { targets: ['action'], orderable: false },
          { targets: 5, className: 'text-end' } // Creation Date column
        ]
      });
      $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');

      // Add loader to pagination and other events
      function queueLoader(){
        try { if (loaderTimer) { clearTimeout(loaderTimer); } } catch(_) {}
        loaderTimer = setTimeout(function(){ showLoader(); }, 200);
      }
      table.on('page.dt', queueLoader);
      table.on('length.dt', queueLoader);
      table.on('order.dt', queueLoader);
      table.on('draw.dt', function(){
        try { if (loaderTimer) { clearTimeout(loaderTimer); loaderTimer = null; } } catch(_) {}
        hideLoader();
      });


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

  
  

    // function to show auto login popup with update link
    $(document).on('click', '.auto-login-link', function() {

      let id = $(this).attr('data-id');

      $.ajax({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        type: 'POST',
        
        dataType: "html",
        data: {
          id: id
        },
        success: function(response) {
          $('#autologin').modal('show');
          $(".model-content-autologin").html(response);
        },
        beforeSend: function() {}
      });
    });

    $(document).on('click', '.copy-to-clipboard', function() {
      var copyText = document.getElementById("autologin_url_field");
      $("#autologin_url_field").focus();
      copyText.select();
      copyText.setSelectionRange(0, 99999);
      document.execCommand("copy");
    });

    $('#tbl-users').on('click', '.delete-po', function() {
          const poId = $(this).data('po-id');
          const row = $(this).closest('tr');
          var url = "{{ route('admin.purchase-orders.destroy', ':id') }}";
          url = url.replace(':id', poId);
          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);
                              setTimeout(function() {
                                location.reload();
                            }, 1500);
                          } 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