@extends('layouts.app')

@section('css')
<link rel="stylesheet" href="{{ secure_asset('assets/plugins/datatables-bs4/css/dataTables.bootstrap4.css') }}">
<link rel="stylesheet" href="{{ secure_asset('assets/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">
@endsection
@section('content')
<div class="container-fluid">
    <div class="row">
        @if ($message = Session::get('success'))
        <div class="col-md-12">
            <div class="alert alert-success alert-dismissible">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                {{ $message }}
            </div>
        </div>
        @endif
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header" style="background-color:#632b8d; color:white;">
                    <div style="display: flex; justify-content: space-between; align-items: center;">

                        <span id="card_title">
                            {{ __('Pembayaran') }}
                        </span>
                        <div class="float-right">
                            <a class="btn btn-sm  " data-toggle="modal" style="background-color: #a9ce37; color:#632b8d;"
                                data-target="#modal-exel">
                                Excel
                            </a>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-md-3">
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table id="list-data" class="table table-striped table-hover">
                            <thead class="thead">
                                <tr>
                                    <th>No</th>
                                    <th>Customer</th>
                                    <th>Nomor Member</th>
                                    <th>Tanggal Bayar</th>
                                    <th>Nomor Transaksi</th>
                                    <th>Nominal</th>
                                    <th>Nota Hilang</th>
                                    <th>Tipe Pembayaran</th>
                                    <th>Metode Pembayaran</th>
                                    <th class="text-center">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-exel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Anda Ingin Export Excel?</h4>
                </div>

                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Tidak</button>
                    <button id="unduh" onclick="location.href='/payments/excel_all'" type="button" class="btn btn-success">Unduh</button>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection

@section('js')
<script src="{{ secure_asset('assets/plugins/datatables/jquery.dataTables.js') }}"></script>
<script src="{{ secure_asset('assets/plugins/datatables-bs4/js/dataTables.bootstrap4.js') }}"></script>
<script src="{{ secure_asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const btnSimpan = document.getElementById("unduh");
        btnSimpan.addEventListener("click", function(event) {
            event.preventDefault();
            $('#modal-exel').modal('hide');
            $.ajax({
                url: '/payments/excel_all',
                method: 'GET',
                success: function(response) {

                    alert('Data berhasil di unduh')

                },
            })
        })
    })

    $(function() {
        var table = $('#list-data').DataTable({
            processing: true,
            serverSide: true,
            language: {
                url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json'
            },
            order: [
                [0, "desc"]
            ],
            ajax: {
                url: '/list-payment',
                error: function(xhr, errorType, exception) {
                    if (xhr.status === 500) {
                        // Reload the DataTable after an interval
                        setTimeout(function() {
                            table.ajax.reload();
                        }, 100); // Reload after 3 seconds
                    } else {
                        // Handle other errors as needed
                        console.error('Error:', xhr.responseText);
                    }
                }
            },
            columns: [{
                    data: 'id',
                    name: 'payment.id',
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                {
                    data: 'nama_customer',
                    name: 'customer.nama_customer'
                },
                {
                    data: 'nomor_member',
                    name: 'customer.nomor_member'
                },
                {
                    data: 'tgl_bayar',
                    name: 'payment.tgl_bayar',
                    render: function(data) {
                        var dateParts = data.split('-');
                        return dateParts[2] + '-' + dateParts[1] + '-' + dateParts[0];
                    }
                },
                {
                    data: 'nomor_transaksi',
                    name: 'payment.nomor_transaksi'
                },
                {
                    data: 'nominal',
                    name: 'payment.nominal',
                    render: function(data) {
                        return 'Rp ' + parseFloat(data).toLocaleString('id-ID');
                    }
                },
                {
                    data: 'nota_hilang',
                    name: 'payment.nota_hilang',
                    render: function(data) {
                        return 'Rp ' + parseFloat(data).toLocaleString('id-ID');
                    }
                },
                {
                    data: 'tipe_pembayaran',
                    name: 'payment.tipe_pembayaran'
                },
                {
                    data: 'metode_pembayaran',
                    name: 'payment.metode_pembayaran'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false,
                    className: 'text-center'
                }
            ],
            pageLength: 10,
            lengthMenu: [
                [5, 10, 20],
                [5, 10, 20]
            ]
        });
    });
</script>
@endsection