@extends('layouts.dashboard')
<style>
  .deprt-seach {
    width: 300px !important;
  }
</style>
@section('content')

<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Merchant Api Detail List</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">Merchant Api Detail</li>
        </ol>
      </div>
    </div>
  </div><!-- /.container-fluid -->
</section>
<section class="content">
  <div class="container-fluid">
    @if (Session::has('message'))
    <div class="col-sm-12">
      <div id="alert" class="alert {{ Session::get('alert-class', 'alert-info') }} alert-dismissible fade show" role="alert">
        {{ Session::get('message') }}
      </div>
    </div>
    @endif

    <!-- /.row -->
    <div class="row">
      <div class="col-12 d-flex justify-content-end">
          <button type="button" class="btn uniqbtn-btn btn-sm ">
                  <a href="{{ route('merchant-api-detail.add') }}" class="text-white"> <i class="fa fa-plus"></i>&nbsp; Add </a></button>
      </div>
      <div class="col-12">
        <div class="card mt-3">
          <div class="card-body  p-2">
            <div class="table-responsive">
              <table id="department-table" class="table table-head-fixed table-striped table-bordered text-nowrap text-center">
                <thead>
                  <tr>
                    <th class="w-28-p-12">Sr No.</th>
                    <th>Name</th>
                    <th>Merchant Name</th>
                    <th>Merchant Secret Key</th>
                    <th>Merchant Id</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
          <!-- /.card-body -->
        </div>
        <!-- /.card -->
      </div>
    </div>
    <!-- /.row -->

  </div><!-- /.container-fluid -->
</section>

@endsection



@push('scripts')
<script>
  $('.chkToggle').change(function() {
    var id = $(this).data('id');
    var checked = $(this).prop('checked');

    Swal.fire({
      title: "Are you sure to change the status?",
      showDenyButton: true,
      denyButtonText: "No",
      confirmButtonText: "Yes",
    }).then((result) => {
      if (result.isConfirmed) {

        $.ajax({
          type: "POST",
          url: "{{ route('department.change-status') }}",
          data: {
            "_token": "{{ csrf_token() }}",
            'id': id
          },
          success: function(data) {
            if (data.status == "success") {
              Swal.fire("Status changed successfully!", "", "success")
            } else {
              Swal.fire("Not able to change status!", "", "info");
            } // End if-else
          },
          error: function(data) {
            console.log('error data = ', data)
            Swal.fire("Not able to change status!", "", "info");
          },

        });

      } else if (result.isDenied) {
        Swal.fire("Denied", "", "info");
        location.reload();
      }
    });
  });

  $('#department-table').DataTable({
    processing: true,
    serverSide: true,
    bLengthChange: false,
    order: [
      [0, "desc"]
    ],
    pageLength: 15,
    searching: true,
    ajax: {
      url: '{{ route("merchant-api-detail.index") }}', // Backend route
    },
    columnDefs: [{
        targets: '_all',
        className: 'text-center'
      } // Align text properly
    ],
    columns: [{
        data: 'DT_RowIndex',
        name: 'DT_RowIndex',
        orderable: false,
        searchable: false
      }, // Auto index
      {
        data: 'name',
        name: 'name',
      },
      {
        data: 'merchant_name',
        name: 'merchant_name',
      },
      {
        data: 'merchant_secret_key',
        name: 'merchant_secret_key',
      },
      {
        data: 'merchant_id',
        name: 'merchant_id',
      },
      {
        data: 'action',
        name: 'action',
        orderable: false,
        searchable: false
      },
    ]
  });
</script>

@endpush