@extends('admin.layouts.app')

@section('title', 'Customers')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12">

            <div class="card">
                <div class="card-header">
                    <div class="card-tools ">
                        <a href="{{route('admin.customers.create')}}" class="btn btn-success">Add Customers</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                    <div class="card-body">
                        {{ $dataTable->table() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="credit-clearance-modal">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Credit Clearance Form</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <div class="float-right">
                <span>Credit Balance: Nrs</span>
                <b id="credit-remaining"></b>
            </div>
            <form method="POST" action="{{ route('admin.snooker.credit-clearance') }}" id="clearance-form">
                @csrf
                <input type="hidden" name="customer_id" value="" id="customer_id">
                <div class="form-group">
                  <label for="clearance_amount">Clearance Amount</label>
                  <input type="number" name="amount" step="any" class="form-control" id="clearance_amount" aria-describedby="emailHelp" placeholder="Enter Amount" required>
              </form>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-outline-success" form="clearance-form">Save</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
@endsection


@push('js')
{{ $dataTable->scripts(attributes: ['type' => 'module']) }}
<script>
    $(() => {
        const credit_remaining = $('#credit-remaining');
        const customer_id_el = $('#customer_id');
        const modal = $('#credit-clearance-modal');
        const clearance_amount = $('#clearance_amount');
        setTimeout(() => {
            $('#customer-table_wrapper').on('click', '.credit-clearance-modal', function(el) {
                const {creditBalance, customerId} =  el.currentTarget.dataset;
                console.log({creditBalance, customerId});
                credit_remaining.html(creditBalance);
                customer_id_el.val(customerId);
                clearance_amount.attr('max',creditBalance);
                modal.modal('show');
            });
            $('#customer-table_wrapper').on('click', '.send-notification', function(el) {
                const btn = el.target;
                Swal.fire({
                    title: `Do you want to send notification to ${btn.dataset.phone}?`,
                    showCancelButton: true,
                    confirmButtonText: "Send",
                    }).then((result) => {
                    if (result.isConfirmed) {
                        btn.closest('form').submit();
                        // Swal.fire("Saved!", "", "success");
                    }
                });
            });
         }, 1000)

    })
            </script>
@endpush