@extends('layouts.admin')
@section('title', 'Data List Bank')
@section('scss')
<style>
/* Your custom CSS styles */
.xray-badges {
    display: flex;
    flex-wrap: wrap;
}

.xray-badge {
    margin: 3px;
}

@media (max-width: 576px) {
    .xray-badge:nth-child(-n+3) {
        flex: 1 0 calc(33.3333% - 4px)
    }
}
</style>
@endsection
@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="card">
        <div class="card-header pb-0 card-no-border position-relative">
            <h4 class="d-inline">List Data Bank</h4>
            <button type="button" class="btn btn-primary btn-sm position-absolute top-50 end-0 translate-middle-y" data-bs-toggle="modal" data-bs-target="#addBank" style="margin-top: 10px; margin-right: 15px;">
                <i class="ri-add-line ri-16px me-sm-2"></i> Add Bank
            </button>
        </div>
         <div class="card-datatable table-responsive pt-0">
         <table class="table table-bordered" id="bank_table">
         <thead>
           <tr>
             <th>Account Holder</th>
             <th>Account Number</th>
             <th>Bank Name</th>
             <th>Bank Type</th>
             <th>Status Bank</th>
             <th>Create At</th>
             <th>Action</th>
           </tr>
         </thead>
         <tbody>
         </tbody>
        </table>
     </div>
   </div>
   </div>

   <div class="modal fade" id="addBank" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add Bank</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addBankForm" action="{{ route('admin.bankstore') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label for="account_holder" class="form-label">Account Holder</label>
                        <input type="text" name="account_holder" class="form-control" id="account_holder" required>
                    </div>

                    <div class="mb-3">
                        <label for="account_number" class="form-label">Account Number</label>
                        <input type="number" name="account_number" class="form-control" id="account_number" required>
                    </div>

                    <div class="mb-3">
                        <label for="bank_name" class="form-label">Bank Name</label>
                        <input type="text" name="bank_name" class="form-control" id="bank_name" required>
                    </div>

                    <div class="mb-3">
                        <label for="bank_id" class="form-label">Bank Type</label>
                        <select name="bank_id" id="bank_id" class="form-control" required>
                            <option value="">-- Pilih Type --</option>
                            <option value="bank">Bank</option>
                            <option value="bankva">Virtual Account</option>
                            <option value="epayment">Ewallet</option>
                            <option value="phonecredit">Pulsa</option>
                            <option value="ewallet">Qris Instan API Only</option>
                        </select>
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" name="submit" class="btn btn-primary">Save</button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="editBankModal" tabindex="-1" aria-labelledby="editBankModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editBankModalLabel">Edit Bank</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editBankForm" action="{{ route('admin.bankupdate', ':id') }}" method="PUT">
                    @csrf
                    @method('PUT')
                    <div class="mb-3">
                        <label for="edit_account_holder" class="form-label">Account Holder</label>
                        <input type="text" name="account_holder" class="form-control" id="edit_account_holder" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit_account_number" class="form-label">Account Number</label>
                        <input type="number" name="account_number" class="form-control" id="edit_account_number" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit_bank_name" class="form-label">Bank Name</label>
                        <input type="text" name="bank_name" class="form-control" id="edit_bank_name" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit_bank_type" class="form-label">Bank Type</label>
                        <select name="bank_type" id="edit_bank_type" class="form-control" required>
                            <option value="">-- Select Type --</option>
                            <option value="bank">Bank</option>
                            <option value="bankva">Virtual Account</option>
                            <option value="epayment">Ewallet</option>
                            <option value="phonecredit">Pulsa</option>
                            <option value="ewallet">Qris Instan API Only</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary" id="updateBankButton">Update</button>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
    $(document).ready(function() {
        $('#bank_table').DataTable({
            responsive: true,
            ajax: {
                url: "{{ route('admin.bank') }}",
                type: "GET",
                dataType: "json",
            },
            columns: [
            { data: 'account_holder', name: 'account_holder' },
            { data: 'account_number', name: 'account_number' },
            { data: 'bank_name', name: 'bank_name' },
            { data: 'bank_type', name: 'bank_type' },
            { data: 'status', name: 'status' },
            { data: 'date', name: 'date' },
            { data: 'action', name: 'action' },
            ],
            language: {
                emptyTable: "No data available in table",
                loadingRecords: "Loading..."
            }
        });
    });
</script>
<script>
    $(document).ready(function() {
        $('#addBankForm').on('submit', function(e) {
            e.preventDefault();
            let form = $(this);
            let formData = form.serialize();
            $.ajax({
                url: form.attr('action'),
                type: form.attr('method'),
                data: formData,
                success: function(response) {
                    if (response.status === 'success') {
                        $('#addBank').modal('hide');
                        Swal.fire({
                            title: 'Success!',
                            text: response.message,
                            icon: 'success',
                            confirmButtonText: 'Ok',
                            customClass: {
                                confirmButton: 'btn btn-primary waves-effect waves-light'
                            },
                            buttonsStyling: false
                        }).then((result) => {
                            if (result.isConfirmed) {
                                $('#bank_table').DataTable().ajax.reload();
                                form[0].reset();
                            }
                        });
                    } else {
                        Swal.fire({
                            title: 'Error!',
                            text: response.message,
                            icon: 'error',
                            confirmButtonText: 'Ok',
                            customClass: {
                                confirmButton: 'btn btn-primary waves-effect waves-light'
                            },
                            buttonsStyling: false
                        });
                    }
                },
                error: function(xhr) {
                    let errorMessage = 'An unexpected error occurred.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    $('#addBank').modal('hide');
                    Swal.fire({
                        title: 'Error!',
                        text: errorMessage,
                        icon: 'error',
                        confirmButtonText: 'Ok',
                        customClass: {
                            confirmButton: 'btn btn-primary waves-effect waves-light'
                        },
                        buttonsStyling: false
                    });
                }
            });
        });
    });
</script>
<script>
    $(document).ready(function() {
        $('#updateBankButton').on('click', function(e) {
            e.preventDefault();

            var form = $('#editBankForm');
            var formData = form.serialize();

            $.ajax({
                url: form.attr('action'),
                type: 'PUT',
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.status === 'success') {
                        $('#bank_table').DataTable().ajax.reload();
                        $('#editBankModal').modal('hide');
                        Swal.fire('Success!', response.message, 'success');
                    } else {
                        $('#editBankModal').modal('hide');
                        $('#bank_table').DataTable().ajax.reload();
                        Swal.fire('Error!', response.message, 'error');
                    }
                },
                error: function(xhr) {
                    $('#editBankModal').modal('hide');
                    Swal.fire('Error!', 'Failed to update bank data.', 'error');
                }
            });
        });
    });
</script>
<script>
function editBank(bankId) {
        $.ajax({
            url: '{{ route('admin.bankedit', ':id') }}'.replace(':id', bankId),
            type: 'GET',
            success: function(response) {
                if (response.status === 'success') {
                    let bank = response.bank;

                    $('#edit_account_holder').val(bank.account_holder);
                    $('#edit_account_number').val(bank.account_number);
                    $('#edit_bank_name').val(bank.bank_name);
                    $('#edit_bank_type').val(bank.bank_type);
                    $('#editBankForm').attr('action', '{{ route('admin.bankupdate', ':id') }}'.replace(':id', bankId));
                    $('#editBankModal').modal('show');
                } else {
                    $('#editBankModal').modal('hide');
                    Swal.fire('Error!', response.message, 'error');
                }
            },
            error: function(xhr) {
                $('#editBankModal').modal('hide');
                Swal.fire('Error!', 'Failed to fetch bank data.', 'error');
            }
        });
 }
function delBank(bankId) {
    Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'No, keep it'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: '{{ route('admin.delBank', ':id') }}'.replace(':id', bankId),
                method: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    Swal.fire(
                        'Deleted!',
                        'Your filter has been deleted.',
                        'success'
                    ).then(() => {
                        location.reload();
                    });
                },
                error: function() {
                    Swal.fire(
                        'Error!',
                        'There was an issue deleting the filter.',
                        'error'
                    );
                }
            });
        }
    });
}
</script>
@endpush