@extends('Layouts_admin.index')
@section('content')
    <!-- widget -->
    <div class="container pt-6 px-md-7 px-2">
        <div class="row">
            <div class="col-lg-12">
                <div class="col-lg-12">
                    <div class="card rounded pt-0 pb-0">
                        <div class="card-body px-4 pt-2 pb-0">
                            <h2 class="text-secondary fw-semibold fs-22 mb-0">Report Pembayaran</h2>
                        </div>
                        @if(session('success'))
                            <div class="alert alert-success mx-2">
                                {{ session('success') }}
                            </div>
                        @endif
                        @if(session('error'))
                            <div class="alert alert-danger mx-2">
                                {{ session('error') }}
                            </div>
                        @endif
                        <div class="card-body px-4 pt-2 pb-4">
                            <nav class="d-flex justify-content-between mb-4">
                                <div class="opendown-wrapper">
                                    <button class="btn btn-sm btn-primary fs-14 fw-normal" onclick="openDown(this)">
                                        <span class="d-none d-md-block me-2">Filter</span><span><i
                                                class="fa-solid fa-filter"></i></span>
                                    </button>
                                    <div class="opendown-menu">
                                        <form id="filters-form">
                                            <div class="opendown-item">
                                                <div class="form-group mb-0">
                                                    <select name="status"
                                                        class="filters form-select form-select-md fs-13 p-2 text-dark"
                                                        aria-label="Default select example"
                                                        style="width: 155px; height: 40px;">
                                                        <option value="">Status Peserta</option>
                                                        @foreach ($status_filters as $status_filter)
                                                            <option value="{{ $status_filter->id_status }}"
                                                                {{ request()->input('status') == $status_filter->id_status ? 'selected' : '' }}>
                                                                {{ $status_filter->status }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="opendown-item">
                                                <div class="form-group mb-0">
                                                    <select class="form-select form-select-md fs-13 p-2 text-dark"
                                                        aria-label="Default select example"
                                                        style="width: 155px; height: 40px;" name="status_pembayaran">
                                                        <option value="">Status Pembayaran</option>
                                                        <option value="Berhasil">Berhasil</option>
                                                        <option value="Gagal">Gagal</option>
                                                        <option value="Menunggu">Menunggu</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="opendown-item">
                                                <select name="reportRange" id="reportrange2"
                                                    class="filters form-select form-select-md fs-13 p-2 text-dark shadow-none">
                                                    <option class="mt-1 d-none shadow-none p-0" value=""
                                                        style="border: 0;" data-toggle="tooltip"
                                                        title="Saat berwarna abu, maka menampilkan semua tanggal.">Pilih
                                                        Tanggal</option>
                                                    {{-- <input type="text" id="tanggal" class="form-control" disabled style="width: 170px; font-size: 0.65rem; display: inline;"> --}}
                                                    <input type="hidden" name="tanggal-start" id="filter-tanggal-start"
                                                        value="{{ request()->input('tanggal-start') != '' ? request()->input('tanggal-start') : '' }}">
                                                    <input type="hidden" name="tanggal-end" id="filter-tanggal-end"
                                                        value="{{ request()->input('tanggal-end') != '' ? request()->input('tanggal-end') : '' }}">
                                                </select>
                                            </div>
                                            <div class="opendown-item">
                                                <div class="form-group mb-0">
                                                    <button class="btn btn-outline-primary fs-13 w-100"
                                                        onclick="srcBtn(this)" style="height: 40px;">Cari</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="d-flex">
                                    <div class="nav-item dropdown">
                                        <button type="button" class="btn btn-sm btn-warning fw-normal fs-15 dropdown" data-bs-toggle="modal" data-bs-target="#settingPayment">
                                            <span class="d-none d-md-block">Setting Payment </span><span class="ms-0 ms-md-2"><i
                                                    class="fa-solid fa-gear"></i></span>
                                        </button>
                                        <a href="#" class="btn btn-sm btn-primary fw-normal fs-15 dropdown"
                                            data-bs-toggle="dropdown">
                                            <span class="d-none d-md-block">Download </span><span class="ms-0 ms-md-2"><i
                                                    class="fa-solid fa-download"></i></span>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end py-0 border-0">
                                            <a class="dropdown-item fw-normal" href="#">
                                                <a href="#"
                                                    onclick="exportData2('ExcelReportPembayaran', 0, null, dttable)"
                                                    class="btn btn-primary border-0 w-100 fw-normal fs-12">Download
                                                    Excel<span class="ms-2"><i class="fa-solid fa-up-long"></i></span></a>
                                            </a>
                                            <!-- <a class="dropdown-item fw-normal" href="#">
                                                            <a href="#" class="btn btn-primary border-0 w-100 fw-normal fs-12">Download PDF<span class="ms-2"><i class="fa-solid fa-plus"></i></span></a>
                                                        </a>
                                                        <a class="dropdown-item fw-normal" href="#">
                                                            <a href="#" class="btn btn-primary border-0 w-100 fw-normal fs-12">Download CSV<span class="ms-2"><i class="fa-solid fa-plus"></i></span></a>
                                                        </a> -->
                                        </div>
                                    </div>
                                </div>
                            </nav>
                            <div class="tab-content mt-0" id="nav-tabContent">
                                <div class="tab-pane fade show active p-0 pt-0" id="nav-home" role="tabpanel"
                                    aria-labelledby="nav-home-tab">

                                    <div class="table-responsive">
                                        <div class="text"><small id="datedata"></small></div>

                                        <table class="table table-bordered" id="table-data" width="100%" cellspacing="0">
                                            <thead>
                                                <tr>
                                                    <th>ID Order</th>
                                                    <th class="text-center">Nama Pelatihan</th>
                                                    <th class="text-center">Nama Peserta</th>
                                                    <th class="text-center">NIK Peserta</th>
                                                    <th class="text-center">Email Peserta</th>
                                                    <th class="text-center">No HP Peserta</th>
                                                    <th class="text-center">SIM ID</th>
                                                    <th class="text-center">Job</th>
                                                    <th class="text-center">Status Peserta</th>
                                                    <th class="text-center">Tanggal Pembayaran</th>
                                                    <th class="text-center">Jenis Pembayaran</th>
                                                    <th class="text-center">Status Pembayaran</th>
                                                    {{-- <th><span><i class="fa-solid fa-pen-to-square"></i></span></th> --}}
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- widgetend -->

    <div class="modal fade" id="settingPayment" tabindex="1" aria-labelledby="settingPaymentLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form action="{{ url('/midtrans/payment-setting') }}" method="POST">
                @csrf
                <!-- Setting Name Hidden -->
                <input type="hidden" name="setting_name" id="default_expiry" value="default_expiry">
                <input type="hidden" name="setting_type" id="page_expiry" value="page_expiry">
    
                <div class="modal-content">
                    <div class="modal-header d-flex justify-content-center py-1">
                        <h1 class="modal-title fs-22 fw-semibold mt-3" id="settingPaymentLabel">Setting Payment Page</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body pb-2">
                        <div class="row">
                            <div class="col-6">
                                <h5 class="fs-15 fw-semibold">Satuan :</h5>
                                <select name="expiry_unit" id="expiry_unit" class="form-control text-dark"
                                    aria-label="Default select example" style="width: 155px; height: 40px;">
                                    <option hidden>Pilih Satuan</option>
                                    <option value="day" {{ $payment_setting && $payment_setting->expiry_unit == 'day' ? 'selected' : '' }}>Hari</option>
                                    <option value="hour" {{ $payment_setting && $payment_setting->expiry_unit == 'hour' ? 'selected' : '' }}>Jam</option>
                                    <option value="minute" {{ $payment_setting && $payment_setting->expiry_unit == 'minute' ? 'selected' : '' }}>Menit</option>
                                </select>
                            </div>
                            <div class="col-6">
                                <h5 class="fs-15 fw-semibold">Durasi :</h5>
                                <input type="number" class="form-control" min="5" name="expiry_duration" 
                                    value="{{ $payment_setting ? $payment_setting->expiry_duration : '' }}">
                            </div>
                        </div>
    
                        <p></p>
                        <small class="text-decoration-none">
                            Klik <a href="https://dashboard.midtrans.com/settings/snap_preference" class="text-primary" target="_blank"><i>disini</i></a>
                            untuk mengatur durasi pada channel pembayaran.
                        </small>
                    </div>
                    <div class="modal-footer py-2 mt-2">
                        <button type="button" class="fs-15 fw-semibold py-1 px-2 btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="fs-15 fw-semibold py-1 px-2 btn btn-primary">Kirim</button>
                    </div>
                </div>
            </form>
        </div>
    </div>    
    
    <script type="text/javascript">
        function openDown(button) {
            let parent = button.closest('.opendown-wrapper');
            let choseChild = parent.children;
            let dMenu = choseChild[1];
            dMenu.classList.toggle('opened');
        };

        function srcBtn(button) {
            let parent = button.closest('.opendown-wrapper');
            let choseChild = parent.children;
            let dMenu = choseChild[1];
            dMenu.classList.toggle('opened');
        };
    </script>
@endsection
@section('script')
    <script>
        $('#filters-form').submit(function(e) {
            e.preventDefault();
            dttable.ajax.reload();
        });
        var dttable = $('#table-data').DataTable({
            "aLengthMenu": [
                [10, 30, 50, -1],
                [10, 30, 50, "All"]
            ],
            "language": {
                "paginate": {
                    "first": "Awal",
                    "previous": "Sebelumnya",
                    "next": "Selanjutnya",
                    "last": "Akhir"
                },
                "search": "Pencarian",
                "info": "Tampilan data _START_ sampai _END_ dari _TOTAL_ data",
                "lengthMenu": "Tampil <select>" +
                    "<option value='10'>10</option>" +
                    "<option value='30'>30</option>" +
                    "<option value='50'>50</option>" +
                    "<option value='10000000000'>All</option>" +
                    "</select> Data"
            },
            serverSide: false,
            processing: true,
            ajax: {
                url: '{{ url('getNewPembayaranManual') }}',
                type: 'POST',
                data: function(d) {
                    d.status = $('[name="status"]').val();
                    d.status_pembayaran = $('[name="status_pembayaran"]').val();
                    d.tanggalStart = $('[name="tanggal-start"]').val();
                    d.tanggalEnd = $('[name="tanggal-end"]').val();
                },
                dataSrc: function(json) {
                    $('#datedata').text('Pencarian data rating dari tanggal: ' + json.date.startdate + ' s/d ' +
                        json.date.enddate);
                    return json.data;
                },
                beforeSend: function() {
                    $('#datedata').text('Loading...');
                },
            },
            columns: [{
                    data: 'id_order',
                    render: function(data, type, row, meta) {
                        return data ? `<span class="badge bg-primary">${data}</span>` : '-';
                    },
                    className: 'text-center'
                },
                {
                    data: 'nama_course',
                    render: function(data, type, row, meta) {
                        return data ? data : '-';
                    },
                    className: 'text-center'
                },
                {
                    data: 'nama',
                    render: function(data, type, row, meta) {
                        return data ? data : '-';
                    },
                    className: 'text-center'
                },
                {
                    data: 'nik',
                    render: function(data, type, row, meta) {
                        return data ? data : '-';
                    },
                    className: 'text-center'
                },
                {
                    data: 'email',
                    render: function(data, type, row, meta) {
                        return data ? data : '-';
                    },
                    className: 'text-center'
                },
                {
                    data: 'telp',
                    render: function(data, type, row, meta) {
                        return data ? data : '-';
                    },
                    className: 'text-center'
                },
                {
                    data: 'sim_id',
                    render: function(data, type, row, meta) {
                        return data ? data : '-';
                    },
                    className: 'text-center'
                },
                {
                    data: 'job_user',
                    render: function(data, type, row, meta) {
                        return data ? data : '-';
                    },
                    className: 'text-center'
                },
                {
                    data: 'status_peserta',
                    render: function(data, type, row, meta) {
                        return data ? `<span class="badge bg-info">${data}</span>` : '-';
                    },
                    className: 'text-center'
                },
                {
                    data: 'created_date',
                    render: function(data, type, row, meta) {
                        if (data) {
                            var date = new Date(data);
                            var year = date.getFullYear();
                            var month = date.getMonth() + 1;
                            var dt = date.getDate();
                            var hours = date.getHours();
                            var minutes = date.getMinutes();

                            if (dt < 10) {
                                dt = '0' + dt;
                            }
                            if (month < 10) {
                                month = '0' + month;
                            }
                            if (hours < 10) {
                                hours = '0' + hours;
                            }
                            if (minutes < 10) {
                                minutes = '0' + minutes;
                            }

                            return year + '-' + month + '-' + dt + ' ' + hours + ':' + minutes;
                        }
                        return '-';
                    },
                    className: 'text-center'
                },
                {
                    data: 'jenis_pembayaran',
                    render: function(data, type, row, meta) {
                        return data ? `<span class="badge bg-info">${data}</span>` :
                            `<span class="badge bg-secondary">Belum Memilih Pembayaran</span>`;
                    },
                    className: 'text-center'
                },
                {
                    data: 'status_pembayaran',
                    render: function(data, type, row, meta) {
                        if (data) {
                            let badgeClass = '';
                            if (data === 'success' || data === 'settlement') {
                                badgeClass = 'bg-success';
                                data = 'Berhasil';
                            } else if (data === 'deny' || data === 'cancel' || data === 'failure' ||
                                data === 'expire') {
                                badgeClass = 'bg-danger';
                                data = 'Gagal';
                            } else if (data === 'canceled' || data === 'cancel') {
                                badgeClass = 'bg-danger';
                                data = 'Dibatalkan';
                            } else if (data === 'pending' || data === 'prepared') {
                                badgeClass = 'bg-warning';
                                data = 'Menunggu';
                            } else {
                                badgeClass = 'bg-secondary';
                                data = 'Terjadi Kesalahan';
                            }
                            return `<span class="badge ${badgeClass}">${data}</span>`;
                        }
                        return '-';
                    },
                    className: 'text-center'
                },
            ]

        });

        dttable
            .order([8, 'desc'])
            .draw();
    </script>
@endsection
<style>
    .daterangepicker .drp-calendar {
        display: block !important;
        max-width: 270px;
    }

    .daterangepicker.show-calendar .drp-buttons {
        display: block !important;
    }
</style>