@extends('layouts.admin')
@section('title', 'List Members')
@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 p-3">
        <h4 class="d-inline mb-0 ms-3">Data Withdraw Member</h4>
        <div class="card-header pb-2 card-no-border position-relative">
            <form id="filterForm" method="GET">
                <div class="row">
                    <div class="col-md-3">
                        <label for="start_date">Tanggal Start</label>
                        <input type="date" id="start_date" name="start_date" class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label for="end_date">Tanggal End</label>
                        <input type="date" id="end_date" name="end_date" class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label for="status">Status</label>
                        <select id="status" name="status" class="form-control">
                            <option value="all">All</option>
                            <option value="request">Request</option>
                            <option value="pending">Pending</option>
                            <option value="approve">Approve</option>
                            <option value="reject">Reject</option>
                            <option value="cancelled">Cancelled</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="filter_button">&nbsp;</label>
                        <button type="submit" id="filter_button" class="btn btn-primary form-control">Filter</button>
                    </div>
                </div>
            </form>
        </div>

         <div class="card-datatable table-responsive pt-0">
         <table class="table table-bordered" id="withdraw_table">
         <thead>
           <tr>
             <th>Tanggal</th>
             <th>Username</th>
             <th>Nama Rek</th>
             <th>No Rek</th>
             <th>Bank Name</th>
             <th>Jumlah</th>
             <th>Keterangan</th>
             <th>Status</th>
             <th>Action</th>
           </tr>
         </thead>
         <tbody>

         </tbody>
        </table>
     </div>
   </div>
   </div>
    <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">Bukti Transfer</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <iframe id="imageIframe" src="" frameborder="0" width="100%" height="500px"></iframe>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
<script>
    $(document).ready(function() {
        var table = $('#withdraw_table').DataTable({
            responsive: true,
            ajax: {
                url: "{{ route('admin.withdraw') }}",
                type: "GET",
                data: function(d) {
                    d.start_date = $('#start_date').val();
                    d.end_date = $('#end_date').val();
                    d.status = $('#status').val();
                },
                dataType: "json",
            },
            columns: [
                { data: 'tanggal', name: 'tanggal' },
                { data: 'username', name: 'username' },
                { data: 'nama_rekening', name: 'nama_rekening' },
                { data: 'no_rek', name: 'no_rek' },
                { data: 'bank_name', name: 'bank_name' },
                { data: 'jumlah', name: 'jumlah' },
                { data: 'keterangan', name: 'keterangan' },
                { data: 'status', name: 'status' },
                { data: 'action', name: 'action' },
            ],
            language: {
                emptyTable: "No data available in table",
                loadingRecords: "Loading..."
            },
             order: [[9, 'desc']],
        });

        $('#filterForm').on('submit', function(e) {
            e.preventDefault();
            table.ajax.reload();
        });
    });
</script>
<script>
    function showImageModal(imageUrl) {
        document.getElementById('imageIframe').src = imageUrl;
    }
</script>
<script>
    function approveTransaction(id) {
        Swal.fire({
            title: 'Are you sure?',
            text: "You want to approve this transaction?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, approve it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '/app/admin/transactions/' + id + '/approve',
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        Swal.fire({
                            title: 'Approved!',
                            text: response.success,
                            icon: 'success',
                            timer: 1500,
                            showConfirmButton: false
                        }).then(() => {
                            location.reload();
                        });
                    },
                    error: function(xhr) {
                        Swal.fire('Error!', xhr.responseJSON.error, 'error');
                    }
                });
            }
        });
    }
    function rejectTransaction(id) {
        Swal.fire({
            title: 'Are you sure?',
            text: "You want to reject this transaction?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Yes, reject it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '/app/admin/transactions/' + id + '/reject',
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        Swal.fire({
                            title: 'Rejected!',
                            text: response.success,
                            icon: 'success',
                            timer: 1500,
                            showConfirmButton: false
                        }).then(() => {
                            location.reload();
                        });
                    },
                    error: function(xhr) {
                        Swal.fire('Error!', xhr.responseJSON.error, 'error');
                    }
                });
            }
        });
    }
</script>
@endpush