@extends('layouts.app')

@section('title', 'Permohonan '.strtoupper(App\IPR::where('name', $ipr->name)->pluck('name')[0]))
@section('permohonan', 'm-menu__item--active')
@section(App\Cluster::where('id', $ipr->cluster_id)->pluck('name')[0], 'm-menu__item--active')
@section(App\IPR::where('name', $ipr->name)->pluck('name')[0], 'm-menu__item--active')

@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">
<style>
    .range_inputs{
   display:none;
}
</style>
@endsection

@section('content')
@role(['super_admin','principal_admin', 'admin'])
    @if(Auth::user()->hasRole('super_admin') || Auth::user()->hasRole('principal_admin') || (Auth::user()->hasRole('admin') && Auth::user()->ipr_id == App\IPR::where('name', 'danasel')->pluck('id')[0]))
        <div class="row">
            <div class="col-lg-12">
                <div class="m-portlet m-portlet--mobile">
                    <div class="m-portlet__body">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">Permohonan {{ App\IPR::where('name', 'danasel')->pluck('display_name')[0] }}
                            </div>
                        </div>
                        <div class="datatable">
                            <div class="col-md-12">
                                <form class="pull-right" id="search_form" style="margin-top: 15px;">
                                    <div class="input-group">
                                        <!-- @if(Auth::user()->hasRole('super_admin') || Auth::user()->hasRole('principal_admin') || $is_permission_export || $is_permission_own || $is_permission_all)
                                        <div class="" style="margin-right:5px">
                                            <a href="{{ url('admin/permohonan/danasel/add') }}" class="btn btn-info m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill" style="padding:.75rem 1rem">
                                                <span>
                                                    <i class="la la-plus"></i>
                                                    <span>
                                                        Permohonan Baru
                                                    </span>
                                                </span>
                                            </a>
                                        </div>
                                        @endif -->
                                        
                                        @if(Auth::user()->hasRole('super_admin') || Auth::user()->hasRole('principal_admin') || $is_permission_export)
                                        <div class="" style="margin-right:5px">
                                            <a href="#" id="export_file" onclick="exportFile();return false;" class="btn btn-info m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill" style="padding:.75rem 1rem">
                                                <span>
                                                    <i class="la la-file-excel-o"></i>
                                                    <span>
                                                        Export
                                                    </span>
                                                </span>
                                            </a>
                                        </div>
                                        @endif
                                        <div id="permohonan_range" style="background: #fff; cursor: pointer; padding: 10px 10px; border: 1px solid #ebedf2;">
                                            <i class="fa fa-calendar"></i>&nbsp;<span></span> <i class="fa fa-caret-down"></i>
                                        </div>
                                        <input type="hidden" id="status" value="{{$status}}" />
                                        <input type="hidden" id="from_date" value="" />
                                        <input type="hidden" id="to_date" value="" />
                                        <select class="form-control" id="filter_type" style="height:unset;padding:5px 5px;">
                                            <option value="id_permohonan">Id Permohonan</option>
                                            <option value="nama">Nama Pemohon</option>
                                            <option value="harga_rumah">Harga Rumah</option>
                                            <option value="tempoh_penyewaan">Tempoh Penyewaan</option>
                                            <option value="status">Status</option>
                                            <option value="semua" selected="selected">Semua</option>
                                        </select>
                                        <input type="text" class="form-control" id="q" placeholder="Carian..." style="height:unset;padding:5px 5px;">
                                        <button type="button" class="btn btn-default" id="filter"><span class="fa fa-search"></span></button>
                                    </div>
                                </form>
                            </div>
                            <table class="table table-striped" id="permohonan_table" style="overflow-x: auto !important;width: 100% !important;">
                                <thead>
                                    <tr>
                                        <th>Id Permohonan</th>
                                        <th>Nama Pemohon</th>
                                        <th>Harga Rumah (RM)</th>
                                        <th>Tempoh Penyewaan</th>
                                        <th>Tarikh Permohonan</th>
                                        <th>Status</th>
                                        <th width="10%"></th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Modal --}}
        <div class="modal fade" id="maklumat_permohonan" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="background-color: rgba(0, 0, 0,.6)">
            <div class="modal-dialog modal-lg" role="document" style="max-width: 1000px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="exampleModalLabel">
                            Rumusan Permohonan <br>
                            <small>
                                <i>Tarikh Permohonan: <span id="m_tarikh_permohonan"></span></i>
                            </small>
                        </h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">
                                &times;
                            </span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="m-form__section m-form__section--first">
                            <h5 style="color: #f4516c">
                                Maklumat Pemohon:
                            </h5>
                            <br>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                        Nama:
                                    </label>
                                    <input type="text" class="form-control" id="m_nama" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                        No. Identiti:
                                    </label>
                                    <input type="text" class="form-control" id="m_ic" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                        <div class="col-md-6">
                            <label for="recipient-name" class="form-control-label">
                                Tarikh Lahir:
                            </label>
                            <input type="text" class="form-control" id="m_tarikh_lahir" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="recipient-name" class="form-control-label">
                                No. Telefon Bimbit:
                            </label>
                            <input type="text" class="form-control" id="m_tel_bimbit" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label for="recipient-name" class="form-control-label">
                                Status Perkahwinan:
                            </label>
                            <input type="text" class="form-control" id="m_status_perkahwinan" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="recipient-name" class="form-control-label">
                                Pendapatan Bulanan:
                            </label>
                            <div class="input-group m-input-group">
                                <span class="input-group-addon">
                                    RM
                                </span>
                                <input type="text" class="form-control" id="m_pendapatan" readonly>
                            </div>
                        </div>
                    </div>
                    </div>
                    <div class="modal-body">
                        <div class="m-form__section m-form__section--first">
                            <h5 style="color: #f4516c">
                                Maklumat Sewa:
                            </h5>
                            <br>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                        Harga Rumah:
                                    </label>
                                    <input type="text" class="form-control" id="m_harga_rumah" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                        Tempoh penyewaan:
                                    </label>
                                    <input type="text" class="form-control" id="m_tempoh_sewa" readonly>
                                </div>
                            </div> 
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div id="kemaskini_area" style="margin-left: 2rem;left: 0;position: absolute;"></div>
                        <a class="btn btn-primary btn-cetak" target="_blank">
                            Cetak
                        </a>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            Kembali
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="sejarah_kemaskini" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="background-color: rgba(0, 0, 0,.6)">
            <div class="modal-dialog modal-lg" role="document" style="max-width: 1000px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="exampleModalLabel">
                            Sejarah Kemaskini Permohonan <br>
                            <small>
                                <i>ID Permohonan: <span id="m_id_permohonan"></span></i>
                            </small>
                        </h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">
                                &times;
                            </span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="datatable">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th width="10%">Bil</th>
                                        <th width="50%">Maklumat Kemaskini</th>
                                        <th>Tarikh Kemaskini</th>
                                        <th>Dikemaskini Oleh</th>
                                    </tr>
                                </thead>
                                <tbody id="m_sejarah_kemaskini"></tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer" id="b_sejarah_kemaskini">
                    </div>
                </div>
            </div>
        </div>
        {{-- End Modal --}}
    @endif
@endrole
@endsection

@section('js')
@role(['super_admin', 'principal_admin','admin'])
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

    <script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>

    <script>
        var start = moment("2019-01-01");
        var end = moment();

        $(document).ready(function() {
            $('.oleh_admin, maklumat_pasangan, .maklumat_jmb').hide();

            var from_date = start.format('YYYY-MM-DD');
            var to_date = end.format('YYYY-MM-DD');

            $('#permohonan_table').dataTable({
                scrollX: true,
                processing: true,
                paging: true,
                pageLength: 15,
                lengthMenu: [[15, 30, 50, 100], [15, 30, 50, 100]],
                serverSide: true,
                ajax: {
                    url:'{{ url('admin/permohonan/danasel/list?status=') }}{{ $status }}',
                    data:{from_date:from_date, to_date:to_date}
                },
                searching: false,
                language: {
                    emptyTable: "Tiada Data"
                },
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'nama', name: 'nama' },
                    { data: 'harga_rumah', name: 'permohonan_danasel.harga_rumah' },
                    { data: 'tempoh_penyewaan', name: 'permohonan_danasel.tempoh_penyewaan' },
                    { data: 'tarikh_permohonan', name: 'permohonan_danasel.tarikh_permohonan' },
                    { data: 'status', name: 'status' },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ],
            });
        });

        $('#search_form').submit(function (event) {
            event.preventDefault();
            $("#filter").trigger("click");
        });

        $('#filter').click(function(){
            var status = $('#status').val();
            var from_date = $('#from_date').val();
            var to_date = $('#to_date').val();
            var q = $('#q').val();
            var filter_type = $("#filter_type").val();

            $('#permohonan_table').dataTable().fnDestroy();
            $('#permohonan_table').dataTable({});
            $('#permohonan_table').dataTable().fnDestroy();
            $('#permohonan_table').dataTable({
                scrollX: true,
                processing: true,
                paging: true,
                pageLength: 15,
                lengthMenu: [[15, 30, 50, 100], [15, 30, 50, 100]],
                serverSide: true,
                ajax: {
                    url:'{{ url('admin/permohonan/danasel/list') }}',
                    data:{status:status, from_date:from_date, to_date:to_date, q:q, filter_type:filter_type}
                },
                searching: false,
                language: {
                    emptyTable: "Tiada Data"
                },
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'nama', name: 'nama' },
                    { data: 'harga_rumah', name: 'permohonan_danasel.harga_rumah' },
                    { data: 'tempoh_penyewaan', name: 'permohonan_danasel.tempoh_penyewaan' },
                    { data: 'tarikh_permohonan', name: 'permohonan_danasel.tarikh_permohonan' },
                    { data: 'status', name: 'status' },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ],
            });
        });

        $(function() {
            $(window).resize(function() {});
        });

        $(function() {
            function cb(start, end) {
                $('#permohonan_range span').html(start.format('D MMMM YYYY') + ' - ' + end.format('D MMMM YYYY'));
                $('#from_date').val(start.format('YYYY-MM-DD'));
                $('#to_date').val(end.format('YYYY-MM-DD'));
            }

            $('#permohonan_range').daterangepicker({
                showDropdowns: true,
                minYear: 2008,
                maxYear: 2020,
                startDate: start,
                endDate: end,
                ranges: {
                    'Semua': [start, end],
                    'Hari Ini': [moment(), moment()],
                    '7 Hari Terakhir': [moment().subtract(6, 'days'), moment()],
                    'Bulan Ini': [moment().startOf('month'), moment().endOf('month')],
                    'Tahun Ini': [moment().startOf('years'), moment().endOf('years')]
                },
                locale: {
                    format: 'DD/MM/YYYY'
                },
                autoApply: true,
                opens: 'left'
            }, cb);

            cb(start, end);

        });

        function exportFile() {
            var status = $('#status').val();
            var from_date = $('#from_date').val();
            var to_date = $('#to_date').val();
            var q = $('#q').val();
            var filter_type = $('#filter_type').val();

            window.open('{{ url('admin/permohonan/danasel/export?_token=') }}{{csrf_token()}}&status='+status+'&from_date='+from_date+'&to_date='+to_date+'&q='+q+'&filter_type='+filter_type, '_blank');
        }

        function showDetail(x) {
            $('#sejarah_kemaskini').modal('hide');
            var data = {
                _token: '{{ csrf_token() }}',
                id: x
            };

            $.ajax({
                url: '{{ url('admin/permohonan/danasel/show') }}',
                type: 'POST',
                data: data,
                success: function(response) {
                    var permohonan_danasel = response.permohonan,
                        profile = response.profile,
                        url = '{{ url('admin/rumusan') }}/danasel/'+x;
                    // Tarikh Permohonan
                    $('#m_tarikh_permohonan').html(moment(permohonan_danasel.tarikh_permohonan, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY'));

                    // Maklumat Pemohon
                    $('#m_nama').val(profile.nama);
                    $('#m_ic').val(profile.ic);
                    $('#m_tarikh_lahir').val(profile.tarikh_lahir);
                    $('#m_tel_bimbit').val(profile.tel_bimbit);
                    $('#m_status_perkahwinan').val(profile.status_perkahwinan);
                    $('#m_pendapatan').val(parseFloat(profile.pendapatan).toFixed(2));  
                    
                    // Maklumat Sewa
                    $('#m_tempoh_sewa').val(permohonan_danasel.tempoh_penyewaan);
                    $('#m_harga_rumah').val(parseFloat(permohonan_danasel.harga_rumah).toFixed(2));  
                    $('#kemaskini_area').html('<button type="button" onClick="showAudit('+x+')" class="btn btn-primary" id="audit_btn">Sejarah Kemaskini</button>');

                    // Cetak
                    $('.btn-cetak').attr('href', url);

                },
                error: function(response) {
                    $.alert({
                        type: 'red',
                        title: 'Whoops, looks like something went wrong!',
                        content: 'Please check your console.error().',
                        typeAnimated: true,
                        icon: 'fa fa-warning',
                        columnClass: 'col-md-6 col-md-offset-3',
                    });
                }
            });

            $('#maklumat_permohonan').modal('show');
        }

        function showAudit(x) {
            $('#maklumat_permohonan').modal('hide');
            $('#m_sejarah_kemaskini').html('');
            $('#m_id_permohonan').html(x);
            $('#b_sejarah_kemaskini').html('<button type="button" onClick="showDetail('+x+');" class="btn btn-secondary">Kembali</button>');

            var data = {
                _token: '{{ csrf_token() }}',
                id: x
            };

            $('#maklumat_permohonan').modal('hide');
            $.ajax({
                url: '{{ url('admin/permohonan/danasel/audit') }}',
                type: 'POST',
                data: data,
                success: function(response) {
                    var audit = response.audit;

                    if (Array.isArray(audit) && audit.length) {
                        audit.forEach(function(d, i) {
                            var ori_data = JSON.parse(d.ori_data);
                            var new_data = JSON.parse(d.new_data);

                            var changes_maklumat = "";
                            for (var key in ori_data.sewa) {
                                var item = key.replace(/_/g, " ").capitalize();
                                changes_maklumat = changes_maklumat + (changes_maklumat == '' ? '' : "<br/>");
                                if (key == 'harga_rumah') {
                                    changes_maklumat = changes_maklumat + item + ': RM' + (ori_data.sewa[key] ?? '') + ' → ' + (new_data.sewa[key] ?? '');
                                } else if (key == 'tempoh_penyewaan'){
                                    changes_maklumat = changes_maklumat + item + ': ' + (ori_data.sewa[key] ?? '') + ' → ' + (new_data.sewa[key] ?? '');
                                }else {
                                    changes_maklumat = changes_maklumat + item + ': ' + (ori_data.sewa[key] ?? '') + ' → ' + (new_data.sewa[key] ?? '');
                                }
                            }

                            var changes_profil = "";
                            for (var key in ori_data.maklumat) {
                                var item = key.replace(/_/g, " ").capitalize();
                                changes_profil = changes_profil + (changes_profil == '' ? '' : "<br/>");
                                changes_profil = changes_profil + item + ': ' + (ori_data.maklumat[key] ?? '') + ' → ' + (new_data.maklumat[key] ?? '');
                            }


                            var changes = changes_maklumat+(changes_maklumat?'<br/>':'')+changes_profil+(changes_profil?'<br/>':'');

                            html =
                            '<tr>'+
                                '<td>'+(i+1)+'</td>'+
                                '<td>'+changes+'</td>'+
                                '<td>'+ moment(d.created_at, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY hh:mm A')+'</td>'+
                                '<td>'+d.name+'</td>'+
                            '</tr>';

                            $('#m_sejarah_kemaskini').append(html);
                        });
                    } else {
                        html =
                        '<tr>'+
                            '<td colspan=4>'+
                                '<input type="text" class="form-control m-input" value="Tiada Data" disabled style="text-align:center;">'+
                            '</td>'
                        '</tr>';

                        $('#m_sejarah_kemaskini').append(html);
                    }
                },
                error: function(response) {
                    $.alert({
                        type: 'red',
                        title: 'Whoops, looks like something went wrong!',
                        content: 'Please check your console.error().',
                        typeAnimated: true,
                        icon: 'fa fa-warning',
                        columnClass: 'col-md-6 col-md-offset-3',
                    });
                }
            });

            $('#sejarah_kemaskini').modal('show');
        }

        String.prototype.capitalize = function() {
            return this.charAt(0).toUpperCase() + this.slice(1);
        }

        $('.modal').on("hidden.bs.modal", function (e) {
            if($('.modal:visible').length)
            {
                $('.modal-backdrop').first().css('z-index', parseInt($('.modal:visible').last().css('z-index')) - 10);
                $('body').addClass('modal-open');
            }
        }).on("show.bs.modal", function (e) {
            if($('.modal:visible').length)
            {
                $('.modal-backdrop.in').first().css('z-index', parseInt($('.modal:visible').last().css('z-index')) + 10);
                $(this).css('z-index', parseInt($('.modal-backdrop.in').first().css('z-index')) + 10);
            }
        });
    </script>
@endrole
@endsection