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

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

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

    @if (checkUserPermission(App\Util\AclConstant::VIEW_MASKED_DATA))
        <style>
            .toast-container {
                position: fixed;
                bottom: 20px;
                right: 20px;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                z-index: 9999;
            }

            .toast-message {
                background-color: #333;
                color: #fff;
                padding: 10px 20px;
                margin-top: 10px;
                border-radius: 5px;
                opacity: 0;
                transform: translateY(20px);
                transition: opacity 0.4s ease, transform 0.4s ease;
            }

            .toast-message.show {
                opacity: 1;
                transform: translateY(0);
            }
        </style>
    @endif
@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('userAnchor.employer.historycreditapplications') }}">
                        Semua
                    </a>
                </li>
                {{-- @foreach ($constant::CREDIT_APPLICATION_STATUS_LABELS as $key => $label)
                    @continue($key != $constant::CREDIT_APPLICATION_STATUS_VERIFICATION_EMPLOYER)
                    <li @if ($status === $key) class="active" @endif>
                        <a href="{{ route('userAnchor.employer.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('userAnchor.employer.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('userAnchor.employer.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('userAnchor.employer.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>
                </div>
                @tableconfig
                <div class="card-body no-padding table-responsive">
                    @tableajax(route('userAnchor.employer.historycreditapplicationsData', ['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" style="min-width: 250px !important;">NIK</th>
                                <th data-column-name="fullName">Nama Lengkap</th>
                                <th data-column-name="registrationMethod">Metode Pendaftaran</th>
                                <th data-column-name="mobilePhone" style="min-width: 250px !important;">No. HP</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')
    @if (checkUserPermission(App\Util\AclConstant::VIEW_MASKED_DATA))
        <script>
            var copyButtonHtml =
                "<button type='button' style='display: flex; align-items: center; justify-content: center; padding: 5px !important; height: 30px !important; width: 30px !important; border-radius: 50%;' class='btn copy-data-btn' style='margin-left: 5px;'><i class='fa fa-clone' style='font-size: 8pt;'></i></button>";

            function handleUnmaskButtonClick(buttonClass, fieldName, maskedSpanClass) {
                $(document).on('click', buttonClass, function() {
                    var id = $(this).data('id');
                    var url =
                        '{{ route('employer.unmask-data', ['creditApplicationId' => ':id', 'fieldName' => ':fieldName']) }}';
                    url = url.replace(':id', id).replace(':fieldName', fieldName);

                    var $span = $(this).siblings(maskedSpanClass);
                    var maskedValue = $span.data('maskedValue');
                    var isMasked = $span.data('isMasked');

                    if (isMasked) {
                        $.ajax({
                            type: "GET",
                            url: url,
                            dataType: "json",
                            success: function(response) {
                                $span.text(`${response}`);
                            },
                            error: function(xhr, status, error) {
                                $span.text(`${xhr.responseText}`);
                                console.log(xhr.responseText);
                            },
                            complete: function() {
                                $span.data('isMasked', false);
                                $(copyButtonHtml).insertAfter($span);
                            }
                        });
                    } else {
                        $span.text(maskedValue);
                        $span.data('isMasked', true);
                        $(this).siblings('.copy-data-btn').remove();
                    }
                });
            }

            function showToast(message) {
                var $toastContainer = $('.toast-container');

                if ($toastContainer.length === 0) {
                    $toastContainer = $('<div class="toast-container"></div>');
                    $('body').append($toastContainer);
                }

                var $toastMessage = $('<div class="toast-message"></div>').text(message);
                $toastContainer.append($toastMessage);

                setTimeout(function() {
                    $toastMessage.addClass('show');
                }, 100);

                setTimeout(function() {
                    $toastMessage.removeClass('show');
                    setTimeout(function() {
                        $toastMessage.remove();
                    }, 400);
                }, 3000);
            }

            $(function() {
                handleUnmaskButtonClick('.unmask-mobilePhone-btn', 'mobilePhone', '.masked-mobilePhone');
                handleUnmaskButtonClick('.unmask-idCardNumber-btn', 'idCardNumber', '.masked-idCardNumber');

                $(document).on('click', '.copy-data-btn', function() {
                    var textToCopy = $(this).siblings('span').text();

                    var $tempInput = $('<input>');
                    $('body').append($tempInput);
                    $tempInput.val(textToCopy).select();
                    document.execCommand('copy');
                    $tempInput.remove();

                    showToast('Copied to clipboard: ' + textToCopy);
                });
            })
        </script>
    @endif

    <script>
        // var detailUrl = '{!! route('userAnchor.employer.creditapplication', ['id' => '']) !!}';

        // function customColumns() {
        //     return {
        //         9: 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('userAnchor.employer.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.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());
            });
        });

        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('userAnchor.employer.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