@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>
                        <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="Check">Check</option>
                                                        <option value="Diterima">Diterima</option>
                                                        <option value="Ditolak">Ditolak</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">
                                        <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', 1, 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</th>
                                                    <th class="text-center">Nama Peserta</th>
                                                    <th class="text-center">Status Peserta</th>
                                                    <th class="text-center">Tanggal 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>
                                                <!-- @foreach($pembayaran as $pmb)
                                                    <tr>
                                                        <td>{{ $pmb->id_pembayaran }}</td>
                                                        <td>{{ $pmb->nama }}</td>
                                                        <td>{{ date('d M Y h:i:s',strtotime($pmb->created_date)) }}</td>
                                                        <td>{{ $pmb->status_pembayaran }}</td>
                                                        <td>
                                                            <ul class="list-unstyled float-end p-0">
                                                                <li class="nav-item dropdown p-0 pe-2">
                                                                    <a href="#" class="dropdown nav-link px-0" data-bs-toggle="dropdown">
                                                                        <i class="fa-solid fa-ellipsis-vertical"></i>
                                                                    </a>
                                                                    <div class="dropdown-menu dropdown-menu-end p-0">
                                                                        <a class="dropdown-item fw-normal" href="{{ url('/EditPembayaran') }}/{{ $pmb->id_pembayaran }}">Edit</a>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </td>
                                                    </tr>
                                                @endforeach -->
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- widgetend -->
    <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("getPembayaranManual") }}',
            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...');
            },
            // processData: false,
        },
        columns: [
            { data: 'id_pembayaran' },
            { data: 'nama' },
            { data: 'status_peserta' },
            {
                data: 'created_date',
                "render": function(data, type, row, meta) {
                    var date = new Date(data);
                    var year = date.getFullYear();
                    var month = date.getMonth() + 1;
                    var dt = date.getDate();

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

                    var datenow = dt + '-' + month + '-' + year;
                    // console.log(datenow);

                    return datenow;
                } 
            },
            { data: 'status_pembayaran' },
            { 
                data: 'id_pembayaran',
                render: function(data,type,row,meta){
                    var html = 
                            '<ul class="list-unstyled float-end p-0">' +
                                '<li class="nav-item dropdown p-0 pe-2">' +
                                    '<a href="#" class="dropdown nav-link px-0" data-bs-toggle="dropdown">' +
                                        '<i class="fa-solid fa-ellipsis-vertical"></i>' +
                                    '</a>' +
                                    '<div class="dropdown-menu dropdown-menu-end p-0">' +
                                        '<a class="dropdown-item fw-normal" href="{{ url('/EditPembayaran') }}/' + row.id_pembayaran + '">Edit</a>' +
                                    '</div>' +
                                '</li>' +
                            '</ul>';
                    
                    return html;
                }
            }
        ]
    });

    dttable
      .order([0, 'desc'])
      .draw();
</script>

@endsection
<style>
    .daterangepicker .drp-calendar{
    display: block !important;
    max-width: 270px;
    }
    .daterangepicker.show-calendar .drp-buttons{
    display: block !important;
    }
</style>