@extends('layouts.admin')

@section('title', trans('admin.Payments'))
@section('page-title', trans('admin.Payments'))

@section('content')

<style>
  #dpage-payments .filters-bar{ display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:16px;box-shadow:var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04)); }
  #dpage-payments .filters-break{ flex-basis:100%;height:0;margin-top:-12px; }
  #dpage-payments .filters-label{ display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);padding-inline-end:12px;border-inline-end:1px solid var(--border); }
  #dpage-payments .filters-label svg{ width:15px;height:15px; }
  #dpage-payments .filter-field{ position:relative;display:flex;align-items:center; }
  #dpage-payments .filter-field.grow{ flex:1 1 260px;min-width:200px; }
  #dpage-payments .filter-field.select{ flex:0 1 220px;min-width:170px; }
  #dpage-payments .filter-field > svg{ position:absolute;inset-inline-start:12px;width:16px;height:16px;color:var(--text-faint);pointer-events:none; }
  #dpage-payments .filter-field input[type=search],
  #dpage-payments .filter-field input[type=date]{ width:100%;height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg-alt);color:var(--text);font-size:13px;outline:none; }
  #dpage-payments .filter-field input[type=search]{ padding-inline-start:38px; }
  #dpage-payments .filter-field.date{ flex:0 1 190px;min-width:150px;gap:8px; }
  #dpage-payments .filter-field.date span{ font-size:12px;color:var(--text-faint);white-space:nowrap; }
  #dpage-payments .filter-field.date.active input{ border-color:var(--primary); }
  #dpage-payments .filter-field select{ width:100%;height:40px;padding:0 14px;padding-inline-start:38px;border-radius:10px;border:1px solid var(--border);background:var(--bg-alt);color:var(--text);font-size:13px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s; }
  #dpage-payments .filter-field select{ appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:34px; }
  #dpage-payments .filter-field .chev{ position:absolute;inset-inline-end:12px;inset-inline-start:auto;width:14px;height:14px; }
  #dpage-payments .filter-field input:hover,
  #dpage-payments .filter-field select:hover{ border-color:var(--border-strong, var(--text-faint)); }
  #dpage-payments .filter-field input:focus,
  #dpage-payments .filter-field select:focus{ border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
  #dpage-payments .filter-field.active select{ border-color:var(--primary);background:color-mix(in srgb, var(--primary) 7%, var(--surface));color:var(--primary);font-weight:600; }
  #dpage-payments .filters-reset{ display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:10px;border:1px dashed var(--border);background:transparent;color:var(--text-muted);font-size:13px;cursor:pointer;transition:all .2s; }
  #dpage-payments .filters-reset svg{ width:14px;height:14px; }
  #dpage-payments .filters-reset:hover{ color:var(--red);border-color:var(--red);background:var(--red-soft); }
  #dpage-payments .filters-reset[hidden]{ display:none; }
  @media (max-width:640px){ #dpage-payments .filters-label{ display:none; } #dpage-payments .filter-field.select,#dpage-payments .filter-field.grow{ flex:1 1 100%; } }
  #dpage-payments .filter-field.open .chev{ transform:rotate(180deg); }
  #dpage-payments .filter-field .chev{ transition:transform .2s; }
</style>

<style>
  /* Note: #addPaymentModal is a sibling of #dpage-payments (not nested inside
     it), so these rules must NOT be scoped under #dpage-payments or they
     silently never match anything inside the modal. */
  .switch-field{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:16px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-alt); margin-bottom:16px; }
  .switch-field .switch-copy b{ font-size:14px; }
  .switch-field .switch-copy .hint{ display:block; margin-top:3px; }
  .switch{ position:relative; width:42px; height:24px; flex-shrink:0; }
  .switch input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1; }
  .switch-slider{ position:absolute; inset:0; background:var(--border-strong,var(--border)); border-radius:100px; transition:background .18s ease; }
  .switch-slider::before{ content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .18s ease; box-shadow:0 1px 3px rgba(0,0,0,.25); }
  .switch input:checked + .switch-slider{ background:var(--primary); }
  .switch input:checked + .switch-slider::before{ transform:translateX(18px); }

  .searchable-select{ position:relative; }
  .searchable-select-list{
    display:none; position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20;
    max-height:220px; overflow-y:auto; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-sm); box-shadow:var(--shadow-md); padding:6px;
  }
  .searchable-select.open .searchable-select-list{ display:block; }
  .searchable-select-option{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:8px 10px; border-radius:7px; cursor:pointer; font-size:13px;
  }
  .searchable-select-option:hover,
  .searchable-select-option.active{ background:var(--bg-alt); }
  .searchable-select-option b{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .searchable-select-option span{ color:var(--text-faint); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .searchable-select-empty{ padding:10px; text-align:center; color:var(--text-faint); font-size:12.5px; display:none; }
</style>

<section class="dpage active" id="dpage-payments">
  <div class="page-head">
    <div><h2>{{ trans('admin.Payments') }}</h2><p>{{ trans('admin.payments subtitle') }}</p></div>
    <div class="page-head-actions">
      @if(auth('user')->user()->has_permission('create-payments'))
        <button class="btn btn-primary btn-sm" onclick="openAddPaymentModal()">＋ {{ trans('admin.Add manual payment') }}</button>
      @endif
    </div>
  </div>

  <div class="stat-grid" style="grid-template-columns:repeat(auto-fit,minmax(240px,1fr));">
    <div class="stat-card">
      <div class="stat-top">
        <div class="stat-ic" style="background:var(--green-soft);color:var(--green);">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M8 12.5l3 3 5-6"/></svg>
        </div>
        <span class="stat-trend up" id="paymentsSuccessCount">0</span>
      </div>
      <div class="stat-val"><span id="paymentsSuccessTotal">—</span> <small>{{ trans('admin.currency') }}</small></div>
      <div class="stat-label">{{ trans('admin.Total successful payments') }}</div>
    </div>
  </div>

  <div class="filters-bar">
    <span class="filters-label">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h18l-7 8v6l-4 2v-8z"/></svg>
      {{ trans('admin.Filters') }}
    </span>
    <div class="filter-field grow">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>
      <input type="search" id="paymentSearch" placeholder="{{ trans('admin.search') }} {{ trans('admin.Payments') }}…">
    </div>
    <div class="filters-break"></div>
    <div class="filter-field select" id="paymentStatusField">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M8 12.5l3 3 5-6"/></svg>
      <select id="paymentStatusFilter">
        <option value="">{{ trans('admin.All statuses') }}</option>
        <option value="pending">{{ trans('admin.Pending') }}</option>
        <option value="success">{{ trans('admin.Success') }}</option>
        <option value="failed">{{ trans('admin.Payment failed') }}</option>
      </select>
      <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
    </div>
    <div class="filter-field select" id="paymentTypeField">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2.5"/><path d="M2 10h20"/></svg>
      <select id="paymentTypeFilter">
        <option value="">{{ trans('admin.All types') }}</option>
        <option value="paytabs">{{ trans('admin.Paytabs') }}</option>
        <option value="cash">{{ trans('admin.Cash') }}</option>
      </select>
      <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
    </div>
    <div class="filter-field date" id="paymentDateFromField">
      <span>{{ trans('admin.From') }}</span>
      <input type="date" id="paymentDateFrom">
    </div>
    <div class="filter-field date" id="paymentDateToField">
      <span>{{ trans('admin.To') }}</span>
      <input type="date" id="paymentDateTo">
    </div>
    <button type="button" class="filters-reset" id="paymentFiltersReset" hidden>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
      {{ trans('admin.Reset filters') }}
    </button>
  </div>

  <div class="card">
    <div class="table-wrap">
      <table class="table" id="paymentsTable" style="width:100%">
        <thead>
          <tr>
            <th>{{ trans('admin.ID') }}</th>
            <th>{{ trans('admin.Name') }}</th>
            <th>{{ trans('admin.Email') }}</th>
            <th>{{ trans('admin.Course') }}</th>
            <th>{{ trans('admin.Amount') }}</th>
            <th>{{ trans('admin.Type') }}</th>
            <th>{{ trans('admin.Status') }}</th>
            <th>{{ trans('admin.Created at') }}</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
</section>

@if(auth('user')->user()->has_permission('create-payments'))
<!-- ============ MODAL: Add manual payment ============ -->
<div class="modal-backdrop" id="addPaymentModal">
  <div class="modal-box wide">
    <div class="modal-head">
      <h3>{{ trans('admin.Record a manual payment') }}</h3>
      <button class="modal-close" onclick="closeModal('addPaymentModal')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
    </div>
    <form id="addPaymentForm">
      @csrf
      <div class="modal-body">
        <p class="hint" style="margin-bottom:16px;">{{ trans('admin.Record a manual payment hint') }}</p>

        <div class="form-grid">
          <div class="field full">
            <label>{{ trans('admin.User') }}</label>
            <div class="searchable-select" id="paymentUserPicker">
              <input type="text" id="paymentUserSearch" placeholder="{{ trans('admin.search') }} {{ trans('admin.Students') }}…" autocomplete="off">
              <input type="hidden" name="user_id" id="paymentUserSelect">
              <div class="searchable-select-list" id="paymentUserList">
                @foreach($students as $student)
                  <div class="searchable-select-option" data-id="{{ $student->id }}" data-search="{{ strtolower($student->name . ' ' . $student->email) }}">
                    <b>{{ $student->name }}</b><span>{{ $student->email }}</span>
                  </div>
                @endforeach
                <div class="searchable-select-empty" id="paymentUserEmpty">{{ trans('admin.no_result') }}</div>
              </div>
            </div>
          </div>

          <div class="field full">
            <label>{{ trans('admin.Grant access to') }}</label>
            <select name="grant_type" id="paymentGrantType">
              <option value="course">{{ trans('admin.Single course') }}</option>
              <option value="subscription">{{ trans('admin.Site subscription') }}</option>
            </select>
          </div>

          <div class="field full" id="paymentCourseField">
            <label>{{ trans('admin.Course') }}</label>
            <div class="searchable-select" id="paymentCoursePicker">
              <input type="text" id="paymentCourseSearch" placeholder="{{ trans('admin.search') }} {{ trans('admin.Course') }}…" autocomplete="off">
              <select name="course_id" id="paymentCourseSelect" style="display:none;">
                <option value="">—</option>
                @foreach($courses as $course)
                  <option value="{{ $course->id }}" data-price="{{ $course->price }}">{{ $course->title }} — {{ trans('admin.currency') }} {{ number_format($course->price) }}</option>
                @endforeach
              </select>
              <div class="searchable-select-list" id="paymentCourseList">
                @foreach($courses as $course)
                  <div class="searchable-select-option" data-id="{{ $course->id }}" data-search="{{ strtolower($course->title) }}">
                    <b>{{ $course->title }}</b><span>{{ trans('admin.currency') }} {{ number_format($course->price) }}</span>
                  </div>
                @endforeach
                <div class="searchable-select-empty" id="paymentCourseEmpty">{{ trans('admin.no_result') }}</div>
              </div>
            </div>
          </div>

          <div class="field full" id="paymentPlanField" style="display:none;">
            <label>{{ trans('admin.Plan') }}</label>
            <select name="plan" id="paymentPlanSelect">
              <option value="monthly" data-price="{{ $settings->subscription_price_monthly ?? 0 }}">{{ trans('admin.Monthly') }} — {{ trans('admin.currency') }} {{ number_format($settings->subscription_price_monthly ?? 0) }}</option>
              <option value="quarterly" data-price="{{ $settings->subscription_price_quarterly ?? 0 }}">{{ trans('admin.Quarterly') }} — {{ trans('admin.currency') }} {{ number_format($settings->subscription_price_quarterly ?? 0) }}</option>
              <option value="half_yearly" data-price="{{ $settings->subscription_price_half_yearly ?? 0 }}">{{ trans('admin.Half-yearly') }} — {{ trans('admin.currency') }} {{ number_format($settings->subscription_price_half_yearly ?? 0) }}</option>
              <option value="yearly" data-price="{{ $settings->subscription_price_yearly ?? 0 }}">{{ trans('admin.Yearly') }} — {{ trans('admin.currency') }} {{ number_format($settings->subscription_price_yearly ?? 0) }}</option>
            </select>
          </div>
        </div>

        <div class="switch-field">
          <div class="switch-copy">
            <b>{{ trans('admin.Did you take money for this') }}</b>
            <span class="hint">{{ trans('admin.Did you take money for this hint') }}</span>
          </div>
          <span class="switch">
            <input type="checkbox" id="paymentTookMoney" name="took_money" value="1" checked>
            <span class="switch-slider"></span>
          </span>
        </div>

        <div class="field" id="paymentAmountField">
          <label>{{ trans('admin.Amount collected') }}</label>
          <input type="number" name="amount" id="paymentAmountInput" step="0.01" min="0">
        </div>

        <div class="hint" id="addPaymentErrors" style="color:var(--red); margin-top:6px;"></div>
      </div>
      <div class="modal-foot">
        <button type="button" class="btn btn-ghost" onclick="closeModal('addPaymentModal')">{{ trans('admin.Close') }}</button>
        <button type="submit" class="btn btn-primary" id="addPaymentSubmitBtn">{{ trans('admin.Save') }}</button>
      </div>
    </form>
  </div>
</div>
@endif

@endsection

@section('script')
@if(auth('user')->user()->has_permission('export-payments'))
<script src="{{ asset('theme/dashboard/plugins/datatables-buttons/js/buttons.colVis.js') }}"></script>
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
@endif
<script type="text/javascript">
    var paymentsTable = $('#paymentsTable').DataTable({
        processing: true,
        serverSide: true,
        dom: '{{ auth('user')->user()->has_permission('export-payments') ? 'Blrtip' : 'lrtip' }}',
        order: [[0, 'desc']],
        pageLength: 10,
        lengthMenu: [10, 25, 50, 100],
        ajax: {
          "url": "{{ route('dashboard.payments.index') }}",
          "data": function(d){
            d.search_term = $('#paymentSearch').val();
            d.status = $('#paymentStatusFilter').val();
            d.type = $('#paymentTypeFilter').val();
            d.date_from = $('#paymentDateFrom').val();
            d.date_to = $('#paymentDateTo').val();
          }
        },
        columns: [
            {data: 'id', name: 'payments.id'},
            {data: 'user_name', name: 'users.name'},
            {data: 'user_email', name: 'users.email'},
            {data: 'course_title', name: 'courses.title'},
            {data: 'amount_formatted', name: 'payments.amount'},
            {data: 'type_badge', name: 'payments.type', orderable: false, searchable: false},
            {data: 'status_badge', name: 'payments.status', orderable: false, searchable: false},
            {data: 'created_at', name: 'payments.created_at'},
        ],
        @if(auth('user')->user()->has_permission('export-payments'))
        buttons: [
            { extend: 'colvis', text: '{{ __('admin.column_visibility') }}' },
            { extend: 'postExcelVisibleColumns', text: '{{ __('admin.excel') }}' },
            { extend: 'postCsvVisibleColumns', text: '{{ __('admin.csv') }}' },
            { extend: 'postPdfVisibleColumns', text: '{{ __('admin.pdf') }}' },
        ],
        @endif
        language: {
            search: "{{ __('admin.search') }}: ",
            loadingRecords: "{{ __('admin.loading') }}",
            emptyTable: "{{ __('admin.no_result') }}",
            zeroRecords: "{{ __('admin.no_result') }}",
            lengthMenu: "{{ __('admin.Show') }} _MENU_ {{ __('admin.entries') }}",
            paginate: {
                previous: "{{ __('admin.previous') }}",
                next: "{{ __('admin.next') }}",
            }
        },
    });

    paymentsTable.on('xhr.dt', function(e, settings, json){
        if (!json) return;
        $('#paymentsSuccessTotal').text(json.success_total);
        $('#paymentsSuccessCount').text(json.success_count);
    });

    function syncPaymentFilterUi(){
        var hasStatus = !!$('#paymentStatusFilter').val();
        var hasType = !!$('#paymentTypeFilter').val();
        var hasSearch = !!$('#paymentSearch').val();
        $('#paymentStatusField').toggleClass('active', hasStatus);
        $('#paymentTypeField').toggleClass('active', hasType);
        var hasFrom = !!$('#paymentDateFrom').val();
        var hasTo = !!$('#paymentDateTo').val();
        $('#paymentDateFromField').toggleClass('active', hasFrom);
        $('#paymentDateToField').toggleClass('active', hasTo);
        $('#paymentFiltersReset').prop('hidden', !(hasStatus || hasType || hasSearch || hasFrom || hasTo));
    }

    $('#paymentSearch').on('keyup', function(){ syncPaymentFilterUi(); paymentsTable.ajax.reload(); });
    $('#paymentStatusFilter, #paymentTypeFilter, #paymentDateFrom, #paymentDateTo').on('change', function(){ syncPaymentFilterUi(); paymentsTable.ajax.reload(); });
    $('#paymentFiltersReset').on('click', function(){
        $('#paymentSearch').val('');
        $('#paymentStatusFilter, #paymentTypeFilter, #paymentDateFrom, #paymentDateTo').val('');
        syncPaymentFilterUi();
        paymentsTable.ajax.reload();
    });

    function syncGrantType(){
        var isCourse = $('#paymentGrantType').val() === 'course';
        $('#paymentCourseField').toggle(isCourse);
        $('#paymentPlanField').toggle(!isCourse);
        syncAmountDefault();
    }

    function syncAmountDefault(){
        var $selected = $('#paymentGrantType').val() === 'course'
            ? $('#paymentCourseSelect option:selected')
            : $('#paymentPlanSelect option:selected');
        var price = parseFloat($selected.data('price'));
        if (!isNaN(price)) $('#paymentAmountInput').val(price);
    }

    function syncTookMoney(){
        $('#paymentAmountField').toggle($('#paymentTookMoney').is(':checked'));
    }

    $('#paymentGrantType').on('change', syncGrantType);
    $('#paymentCourseSelect, #paymentPlanSelect').on('change', syncAmountDefault);
    $('#paymentTookMoney').on('change', syncTookMoney);

    function resetUserPicker(){
        $('#paymentUserSearch').val('');
        $('#paymentUserSelect').val('');
        $('#paymentUserPicker').removeClass('open');
        $('#paymentUserList .searchable-select-option').show();
        $('#paymentUserEmpty').hide();
    }

    $('#paymentUserSearch').on('focus', function(){
        $('#paymentUserPicker').addClass('open');
    });

    $('#paymentUserSearch').on('input', function(){
        $('#paymentUserSelect').val('');
        var term = $(this).val().trim().toLowerCase();
        var visible = 0;
        $('#paymentUserList .searchable-select-option').each(function(){
            var match = $(this).data('search').toString().indexOf(term) !== -1;
            $(this).toggle(match);
            if (match) visible++;
        });
        $('#paymentUserEmpty').toggle(visible === 0);
    });

    $(document).on('click', '#paymentUserList .searchable-select-option', function(){
        $('#paymentUserSelect').val($(this).data('id'));
        $('#paymentUserSearch').val($(this).find('b').text());
        $('#paymentUserPicker').removeClass('open');
    });

    $(document).on('click', function(e){
        if (!$(e.target).closest('#paymentUserPicker').length) {
            $('#paymentUserPicker').removeClass('open');
        }
    });

    function resetCoursePicker(){
        $('#paymentCoursePicker').removeClass('open');
        $('#paymentCourseSearch').val('');
        $('#paymentCourseList .searchable-select-option').show();
        $('#paymentCourseEmpty').hide();
    }

    $('#paymentCourseSearch').on('focus', function(){
        $('#paymentCoursePicker').addClass('open');
    });

    $('#paymentCourseSearch').on('input', function(){
        $('#paymentCourseSelect').val('').trigger('change');
        $('#paymentCoursePicker').addClass('open');
        var term = $(this).val().trim().toLowerCase();
        var visible = 0;
        $('#paymentCourseList .searchable-select-option').each(function(){
            var match = $(this).data('search').toString().indexOf(term) !== -1;
            $(this).toggle(match);
            if (match) visible++;
        });
        $('#paymentCourseEmpty').toggle(visible === 0);
    });

    $('#paymentCourseSearch').on('keydown', function(e){
        if (e.key === 'Escape') { e.stopPropagation(); $('#paymentCoursePicker').removeClass('open'); }
        if (e.key === 'Enter') {
            e.preventDefault();
            $('#paymentCourseList .searchable-select-option:visible').first().trigger('click');
        }
    });

    $(document).on('click', '#paymentCourseList .searchable-select-option', function(){
        $('#paymentCourseSelect').val($(this).data('id')).trigger('change');
        $('#paymentCourseSearch').val($(this).find('b').text());
        $('#paymentCoursePicker').removeClass('open');
    });

    $(document).on('click', function(e){
        if (!$(e.target).closest('#paymentCoursePicker').length) {
            $('#paymentCoursePicker').removeClass('open');
        }
    });

    function openAddPaymentModal(){
        $('#addPaymentForm')[0].reset();
        $('#addPaymentErrors').html('');
        $('#paymentGrantType').val('course');
        resetUserPicker();
        resetCoursePicker();
        syncGrantType();
        syncTookMoney();
        openModal('addPaymentModal');
    }

    $('#addPaymentForm').on('submit', function(e){
        e.preventDefault();
        var $btn = $('#addPaymentSubmitBtn');
        $('#addPaymentErrors').html('');

        if (!$('#paymentUserSelect').val()) {
            $('#addPaymentErrors').text("{{ trans('admin.Required') }}: {{ trans('admin.User') }}");
            $('#paymentUserSearch').trigger('focus');
            return;
        }

        $btn.prop('disabled', true);

        $.ajax({
            url: "{{ route('dashboard.payments.store') }}",
            method: 'POST',
            data: $(this).serialize(),
            success: function(){
                closeModal('addPaymentModal');
                paymentsTable.ajax.reload(null, false);
                dashToast('✓', "{{ trans('admin.success') }}");
            },
            error: function(xhr){
                if (xhr.status === 422) {
                    var errors = xhr.responseJSON.errors;
                    var html = '';
                    $.each(errors, function(key, val){ html += val[0] + '<br>'; });
                    $('#addPaymentErrors').html(html);
                } else {
                    dashToast('✕', (xhr.responseJSON && xhr.responseJSON.message) || "{{ trans('admin.faild') }}");
                }
            },
            complete: function(){
                $btn.prop('disabled', false);
            }
        });
    });
</script>
@endsection