@extends('cms.layouts.authorized')
@inject('constant', '\App\Util\Constant')
@section('title', 'Daftar Aplikasi')

@section('headerCustom')
    @php
        $title = 'Daftar Aplikasi';
    @endphp
@endsection

@section('cssCustom')
    <style>
        .reject-reason-template {
            font-size: 12px;
            padding-left: 20px;
            text-align: left;
        }

        span.select2-selection__rendered {
            display: flex !important;
            flex-direction: row-reverse;
            justify-content: space-between !important;
            width: 100%;
        }

        span.select2-selection__clear {
            margin-left: auto !important;
        }
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col-xs-12">
            <ul id="listOrderStatus" class="nav nav-tabs">
                <li @if(empty($status) && empty($flag)) class="active" @endif>
                    <a href="{{ route('admin.creditapplications') }}">
                        Semua
                    </a>
                </li>
                @foreach($constant::CREDIT_APPLICATION_STATUS_LABELS as $key => $label)
                    @continue(in_array($key, [$constant::CREDIT_APPLICATION_STATUS_VERIFICATION_CMO, $constant::CREDIT_APPLICATION_STATUS_VERIFICATION_SCF]))
                    <li @if($status === $key) class="active" @endif>
                        <a href="{{ route('admin.creditapplications', ['status' => $key]) }}">
                            {{ $label }}
                        </a>
                    </li>
                @endforeach
                @foreach($constant::CREDIT_APPLICATION_FLAG_LABELS as $key => $label)
                    <li @if($flag === $key) class="active" @endif>
                        <a href="{{ route('admin.creditapplications', ['flag' => $key]) }}">
                            {{ $label }}
                        </a>
                    </li>
                @endforeach
            </ul>
            <div class="card">
                <div class="card-header card-header-add ">
                    <span>{{ $title }}</span>
                    @if (checkPermission(\App\Util\AclConstant::CREDIT_APPLICATION_CREATE))
                        <a type="button" class="btn btn-success btn-xs pull-right"
                           href="{{ route('admin.custom.registrationUploadCsv', ['type' => $constant::CREDIT_APPLICATION_TYPE_TRAVEL]) }}">
                            <i class="fa fa-plus"></i>
                            <span class="help-text">Upload CSV Travel</span>
                        </a>
                        <a type="button" class="btn btn-success btn-xs pull-right"
                           href="{{ route('admin.custom.registrationUploadCsv', ['type' => $constant::CREDIT_APPLICATION_TYPE_SHOPPING]) }}">
                            <i class="fa fa-plus"></i>
                            <span class="help-text">Upload CSV Konsumtif</span>
                        </a>
                        @if ($status === $constant::CREDIT_APPLICATION_STATUS_VERIFICATION)
                            <div class="row">
                                <div class="col-12 mt-5">
                                    <a class="btn btn-danger btn-xs pull-right" href="javascript:;" onclick="rejectModal()" role="button"><span><i class="fa fa-times" aria-hidden="true"></i> Tolak</span></a>
                                </div>
                            </div>
                        @endif
                    @endif
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                            <label for="city">Periode Pengajuan</label>
                            <div class="input-group input-date-range">
                                <input name="dateFrom" type="text"
                                       class="datepickerinput custom-date-range form-control" id="dateFrom" 
                                       value="{{  Carbon::now()->subMonths(1)->format('d M Y') }}" onselect="refreshDataTable()">
                                <span class="input-group-addon">To</span>
                                <input name="dateTo" type="text" 
                                       class="datepickerinput custom-date-range form-control" id="dateTo" 
                                       value="{{ Carbon::now()->format('d M Y') }}" onselect="refreshDataTable()">
                            </div>
                        </div>
                        <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                            <label for="city">Kota</label>
                            <select name="city" class="form-control" style="width: 100%" onchange="refreshDataTable()">
                                <option value="">Semua Kota</option>
                                @foreach($cityList as $key => $value)
                                    <option value="{{ $value->city }}">{{ $value->city }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                            <label for="companyId">Perusahaan</label>
                            <select name="companyId" class="form-control" style="width: 100%"
                                    onchange="refreshDataTable()">
                                <option value="">Semua Perusahaan</option>
                                <option value="0">Tanpa Perusahaan</option>
                                @foreach($companyList as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                        {{-- <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                            <label for="merchantCode">Kode Merchant</label>
                            <select name="merchantCode" class="form-control" style="width: 100%"
                                    onchange="refreshDataTable()">
                                <option value="">Semua Kode Merchant</option>
                                @foreach($merchantCodeList as $key => $value)
                                    <option value="{{ $value->merchantCode }}">{{ $value->merchantCode }}</option>
                                @endforeach
                            </select>
                        </div> --}}
                    </div>
                </div>
                <div class="row" style="padding-inline: 15px;">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="idCardNumber">No. Identitas / NIK</label>
                            <select id="idCardNumberSelect" class="form-control" name="idCardNumber"></select>
                        </div>
                    </div>
                </div>
                @tableconfig
                <div class="card-body no-padding table-responsive">
                    @tableajax(route('admin.creditapplicationsData', ['status' => $status, 'flag' => $flag]))
                    <thead>
                    <tr>
                        <th data-column-name="id">No.</th>
                        <th data-column-name="createdAt">Tgl. Pengajuan</th>
                        <th data-column-name="idCardNumber">NIK</th>
                        <th data-column-name="fullName">Nama Lengkap</th>
                        <th data-column-name="merchantCode">Kode Merchant</th>
                        <th data-column-name="mobilePhone">No. HP</th>
                        <th data-column-name="vaDanamon">VA Danamon</th>
                        <th data-column-name="type">Tipe</th>
                        <th data-column-name="status">Status</th>
                        <th data-column-name="applicationScore" data-sortable="false">Skor Aplikasi</th>
                        <th data-column-name="id" data-sortable="false">
                            Aksi
                            <br>
                            <input type="checkbox" style="scale:1.3;" id="checkAll" name="checkAll">
                        </th>
                    </tr>
                    </thead>
                    @endtableajax
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="reject-modal" tabindex="-1" role="dialog" aria-labelledby="reject-modal" aria-hidden="true">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <form method="POST" id="reject-modal-form" action="javascript:;">
                    <div class="modal-header">
                        <h4>Tolak Aplikasi?</h4>
                    </div>
                    <div class="modal-body p-15 text-center">
                        <i class="fa fa-exclamation-circle mb-20 fa-4x"></i>
                        <p class="mb-25"><b>Anda akan menolak aplikasi ini?</b></p>
                        <div class="reject-reason-template">
                            <div class="row">
                                <input type="radio" name="rejectReason"
                                       value="Pengajuan pembiayaan Anda belum dapat disetujui saat ini. Persetujuan pembiayaan memperhatikan hasil verifikasi, kelengkapan dokumen, dan analisa terhadap aspek capacity Pemohon">
                                Pengajuan pembiayaan Anda belum dapat disetujui saat ini. Persetujuan pembiayaan
                                memperhatikan hasil verifikasi, kelengkapan dokumen, dan analisa terhadap aspek
                                capacity Pemohon
                            </div>
                            <div class="row">
                                <input type="radio" name="rejectReason"
                                       value="Mohon maaf, saat ini lokasi anda berada di luar jangkauan wilayah layanan Duha Syariah">
                                Mohon maaf, saat ini lokasi anda berada di luar jangkauan wilayah layanan Duha
                                Syariah
                            </div>
                            <div class="row">
                                <input type="radio" name="rejectReason"
                                       value="Pengajuan pembiayaan Anda belum dapat disetujui saat ini karena dokumen Anda tidak dapat diverifikasi">
                                Pengajuan pembiayaan Anda belum dapat disetujui saat ini karena dokumen Anda tidak
                                dapat diverifikasi
                            </div>
                            <div class="row">
                                <input type="radio" name="rejectReason"
                                       value="Pengajuan pembiayaan Anda belum dapat disetujui saat ini karena layanan kami hanya dapat memberikan pembiayaan kepada pegawai yang berpenghasilan tetap. Kami akan mengupayakan agar kedepannya dapat memberikan layanan pembiayaan kepada Wirausahawan">
                                Pengajuan pembiayaan Anda belum dapat disetujui saat ini karena layanan kami hanya
                                dapat memberikan pembiayaan kepada pegawai yang berpenghasilan tetap. Kami akan
                                mengupayakan agar kedepannya dapat memberikan layanan pembiayaan kepada
                                Wirausahawan
                            </div>
                            <div class="row">
                                <input type="radio" name="rejectReason"
                                       value="Pengajuan pembiayaan Anda belum dapat disetujui saat ini. Persetujuan pembiayaan memperhatikan Riwayat pinjaman di tempat lain dan analisa terhadap aspek capacity Pemohon">
                                Pengajuan pembiayaan Anda belum dapat disetujui saat ini. Persetujuan pembiayaan memperhatikan Riwayat pinjaman di tempat lain dan analisa terhadap aspek capacity Pemohon
                            </div>
                            <div class="row">
                                <input type="radio" name="rejectReason"
                                       value="Pengajuan pembiayaan Anda belum dapat disetujui saat ini, layanan kami hanya dapat memberikan pembiayaan dengan skema Potong Gaji dengan perusahaan yg telah bekerja sama dengan Duha Syariah.">
                                Pengajuan pembiayaan Anda belum dapat disetujui saat ini, layanan kami hanya dapat memberikan pembiayaan dengan skema Potong Gaji dengan perusahaan yg telah bekerja sama dengan Duha Syariah.
                            </div>
                            <div class="row">
                                <input type="radio" name="rejectReason" value="" checked>Lainnya
                            </div>
                        </div>
                        <p>Alasan penolakan</p>
                        <textarea name="remarks" id="" cols="30" rows="3" class="form-control"></textarea>
                        
                        <div class="row">
                            <input type="hidden" name="rejectId">
                            Yakin untuk melakukan penolakan aplikasi?
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a class="btn btn-default" data-dismiss="modal" aria-label="Close">Kembali</a>
                        <button class="btn btn-primary submitButton" type="button" onclick="rejectSubmit()">Ya</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('jsCustom')
    <script>
        var detailUrl = '{!! route('admin.creditapplication',['id' => '']) !!}';
        var queryParamsUrl = new URLSearchParams(window.location.search);
        var status = '';

        if(queryParamsUrl.has('status') === true) {
            status = queryParamsUrl.get('status');
        }

        function customColumns() {
            return {
                10: function (data, type, row, meta) {
                    var html = '';
                    html += '<a href="' + detailUrl + '/' + data + '">';
                    html += '    <button type="button" class="btn btn-default btn-xs"> Detail</button>';
                    html += '</a>&nbsp;';
                    @if($status == $constant::CREDIT_APPLICATION_STATUS_REJECTED)
                        html += '<button type="button" class="btn btn-default btn-xs delete-button-modal" data-toggle="modal" data-target="#modal-delete-alert" data-url="{{ route('admin.creditapplication.delete', ['id' => '']) }}' + '/' + data + '"> Hapus</button>';
                    @endif
                    @if($status == $constant::CREDIT_APPLICATION_STATUS_VERIFICATION)
                        html += '<br><input type="checkbox" value="'+ data +'" name="rejectCheckbox[]" class="rejectCheckbox">';
                    @endif
                        return html;
                }
            }
        }

        $(function() {
            $('.custom-date-range').on('dp.change', function () {
                refreshDataTable();
            });
        });

        function customFilter(filter) {
            filter.city = $('[name=city]').val();
            filter.companyId = $('[name=companyId]').val();
            filter.merchantCode = $('[name=merchantCode]').val();
            filter.idCardNumber = $('[name=idCardNumber]').val();
            filter.dateFrom = $('[name=dateFrom]').val();
            filter.dateTo = $('[name=dateTo]').val();
            return filter;
        }

        function refreshDataTable() {
            dataTableList[0].clear().draw();
        }

        $(document).ready(function () {
            $('[name=rejectReason]').on('change', function () {
                populateRejectReason($(this).val());
            });

            $('#idCardNumberSelect').select2({
                placeholder: '',
                minimumInputLength: 16,
                allowClear: true,
                delay: 300,
                ajax: {
                    url: `${window.location.origin}/admin/searchIdCardNumber/creditapplication`,
                    dataType: 'json',
                    data: function (params) {    
                        var city = $('[name=city]').val();
                        var companyId = $('[name=companyId]').val();
                        var merchantCode = $('[name=merchantCode]').val();
                        var dateFrom = $('[name=dateFrom]').val();
                        var dateTo = $('[name=dateTo]').val();                    
                        return {
                            q: params.term, // Search term
                            status: status,
                            city: city,
                            companyId: companyId,
                            merchantCode: merchantCode,
                            dateFrom: dateFrom,
                            dateTo: dateTo,
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: data
                        };
                    },
                    cache: false
                },
            });

            $('#idCardNumberSelect').on('change', function() {
                refreshDataTable();
            })
        });

        function populateRejectReason(value) {
            let textareaRemarks = $('#reject-modal').find('textarea[name=remarks]').first();
            if (value === '') {
                textareaRemarks.removeAttr('readonly');
            } else {
                textareaRemarks.attr('readonly', true);
            }
            textareaRemarks.val(value);
        }

        $("#checkAll").click(function (e) { 
            $('input:checkbox').not(this).prop('checked', this.checked);
        });
    </script>

    <script>
        var id = [];
        var successMessage = '{!! session('success') !!}';
        if (successMessage) swal('SUCCESS',successMessage,'success');
        var errorMessage = '{!! session('error') !!}'; 
        if (errorMessage) swal('Error',errorMessage,'error');
        
        function rejectModal() {
            var rejectUrl = '{!! route('admin.creditapplication.multiRejectStatus') !!}';
            $('#reject-modal').modal('show');
            $('#reject-modal-form').attr('action', rejectUrl);

            id = [];
            $(':checkbox:checked').not("#checkAll").each(function(i){
                id[i] = $(this).val();
            });
            $('[name=rejectId]').val(JSON.stringify(id));
        }

        function rejectSubmit(){
            var btn = $('.submitButton').ladda();
            btn.ladda('start');
            if(id.length == 0){
                $('#reject-modal').modal('hide');
                return swal('Penolakan Gagal','Minimal satu aplikasi untuk di tolak','error');
                btn.ladda('stop');
            }
            $('#reject-modal-form').submit();
        }
    </script>
@endsection