@php
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Customer Withdraw History')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendor/libs/formvalidation/dist/css/formValidation.min.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/sweetalert2/sweetalert2.css')}}" />
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>
<script src="{{asset('assets/vendor/libs/select2/select2.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/FormValidation.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/plugins/Bootstrap5.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/plugins/AutoFocus.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/cleavejs/cleave.js')}}"></script>
<script src="{{asset('assets/vendor/libs/cleavejs/cleave-phone.js')}}"></script>
<script src="{{asset('assets/vendor/libs/sweetalert2/sweetalert2.js')}}"></script>
@endsection

@section('page-script')

<script src="{{asset('js/withdraws-index.js')}}"></script>
@endsection

@section('content')
<h4 class="fw-semibold mb-4">Customer Withdraw History</h4>
<!-- Users List Table -->
<div class="card">
  <div class="card-datatable table-responsive">
    <table class="datatables-withdraws table">
      <thead class="border-top">
        <tr>
          <th>Customer Name</th>
          <th>Customer Number</th>
          <th>Requested Amount</th>
          <th>Balance Before</th>
          <th>Balance After</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
    </table>
  </div>
</div>
<!--/ Role cards -->


<!-- Modal for record 1 -->
<div class="modal" id="modal-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Record Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Content will be populated dynamically -->
            </div>
        </div>
    </div>
</div>
<script>
function logClick(button) {
  var recordId = $(button).data('record-id');
    var modalId = 'modal-' + 1; // Unique modal ID for each record
    // Use AJAX to fetch data specific to the clicked record
    $.ajax({
        url: '/withdraws/view-request/' + recordId,
        method: 'GET',
        success: function(response) {
            // Assuming response contains data specific to the record
            var data = response.data;
               // Determine the name to display based on customer or admin existence
               var name = (data.user.customer) ? data.user.customer.first_name + ' ' + data.user.customer.last_name :
                       (data.user.admin) ? data.user.admin.first_name + ' ' + data.user.admin.last_name :
                       'Unknown';
                       var approvername =(data.user.admin) ? data.user.admin.first_name + ' ' + data.user.admin.last_name :
                       'Pending Approval';
          // Populate modal with data
          $('#' + modalId + ' .modal-body').html(
                '<p>Customer Name: ' + name + '</p>' +
                '<p>Phone Number: ' + (data.user.customer ? data.user.customer.phone_number : data.user.admin.phone_number) + '</p>' +
                '<p>Email: ' + (data.user.customer ? data.user.customer.email : data.user.admin.email) + '</p>' +
                '<p>Requested Amount: ZMW' + data.request_amount + '</p>' +
                '<p>Balance Before Request Approval: ZMW' + data.balance_before+ '</p>' +
                '<p>Balance After Request Approval: ZMW' + data.balance_after+ '</p>' +
                '<p>Withdraw Status: ' + data.status + '</p>' +
                '<p>Created At: ' + new Date(data.created_at).toLocaleString() + '</p>' +
                '<p>Approved By: ' + approvername + '</p>' +
                '<p>Approved Comment: ' + data.approver_comment + '</p>' +
                '<p>Approved At: ' + new Date(data.approved_at).toLocaleString() + '</p>' 
            );
            // Show the modal
            $('#' + modalId).modal('show');
        },
        error: function(xhr, status, error) {
            console.error('Error fetching record details:', error);
        }
    });
}
</script>

@endsection