@extends('layouts.dun')
@section('title', 'Permohonan SBAP')
@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')
        <div class="row">
            <div class="col-lg-12">
                <div class="m-portlet m-portlet--mobile">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    Permohonan {{ $ipr->display_name }}
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <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)
                                        <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="AppNo">Id Permohonan</option>
                                            <option value="FullName">Nama Pemohon</option>
                                            <option value="NRIC">No. Identiti Pemohon</option>
                                            <option value="SpouseName">Nama Pasangan</option>
                                            <option value="SpouseNRIC">No. Identiti Pasangan</option>
                                            <option value="StatusPermohonan">Status Permohonan</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>
                            <div class="table-responsive">
                                <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>No. Identiti Pemohon</th>
                                            <th>Nama Pasangan</th>
                                            <th>No. Identiti Pasangan</th>
                                            <th>Tarikh Permohonan</th>
                                            <th>Status Permohonan</th>
                                            <th width="10%"></th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </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="DateRMSB" ></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-12">
                                    <label for="recipient-name" class="form-control-label">
                                        Nama Pemohon:
                                    </label>
                                    <input type="text" class="form-control" id="FullName" readonly>
                                    <p id="AppNo"></p>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                        No. KP Pemohon:
                                    </label>
                                    <input type="text" class="form-control" id="NRIC" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                        Status Perkahwinan:
                                    </label>
                                    <input type="text" class="form-control" id="MaritalStatus" readonly>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-12">
                                    <label for="recipient-name" class="form-control-label">
                                        Alamat
                                    </label>
                                    <textarea name="" id="FullAddress" class="form-control" cols="80" rows="5"></textarea>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                    No. Tel:
                                    </label>
                                    <input type="text" class="form-control" id="TelNo" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                    Email:
                                    </label>
                                    <input type="text" class="form-control" id="Email" readonly>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                    DUN:
                                    </label>
                                    <input type="text" class="form-control" id="DUN" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                    Status Permohonan:
                                    </label>
                                    <input type="text" class="form-control" id="StatusPermohonan" readonly>
                                </div>
                            </div>

                            <hr>

                            <!-- Maklumat Pasangan -->
                            <h5 style="color: #f4516c">
                            Maklumat Pasangan
                            </h5>
                            <br>
                            <div class="form-group row">
                                <div class="col-md-12">
                                    <label for="recipient-name" class="form-control-label">
                                        Nama Pasangan:
                                    </label>
                                    <input type="text" class="form-control" id="SpouseName" readonly>
                                    <p id="AppNo"></p>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                        No. KP Pasangan:
                                    </label>
                                    <input type="text" class="form-control" id="SpouseNRIC" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label for="recipient-name" class="form-control-label">
                                        No Tel:
                                    </label>
                                    <input type="text" class="form-control" id="SpouseTel" readonly>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-12">
                                    <label for="recipient-name" class="form-control-label">
                                        Email
                                    </label>
                                    <input type="text" class="form-control" id="SpouseEmail" readonly>
                                </div>
                            </div>
                            <hr>

                            <!-- Maklumat Anak -->
                            <h5 style="color: #f4516c">
                                Maklumat Anak
                            </h5>
                            <div class="form-group row">
                                <div class="col-md-12">
                                    <table class="table table-striped " >
                                        <thead class="thead-dark">
                                            <tr>
                                                <th>Bil.</th>
                                                <th>Nama Anak</th>
                                                <th>No MyKid</th>
                                                <th>Status Anak</th>
                                                <th>Tadika</th>
                                                <th>Sesi</th>
                                                <th>Bulan Bayaran</th>
                                                <th>Tarikh Bayaran</th>
                                                <th>Status Pembayaran</th>
                                                <th>Yuran (RM)</th>
                                            </tr>
                                        </thead>
                                        <tbody id="child_table" ></tbody>
                                    </table>
                                </div>
                            </div>
                            <hr>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="d-flex mr-auto">
                            <div id="myidentity-area"></div>
                        </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>
        {{-- End Modal --}}

@endsection

@section('js')
    <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("2008-01-01");
        var end = moment();

       $(document).ready(function() {

        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('dun/permohonan/sbap/list?status=') }}{{ $status }}',
                data:{from_date:from_date, to_date:to_date}
            },
            searching: false,
            language: {
               emptyTable: "Tiada Data"
           },
            columns: [
                { data: 'PemohonID', name: 'PemohonID' },
                { data: 'FullName', name: 'FullName' },
                { data: 'NRIC', name: 'NRIC' },
                { data: 'SpouseName', name: 'SpouseName' },
                { data: 'SpouseNRIC', name: 'SpouseIC' },
                { data: 'DateRMSB', name: 'DateRMSB' },
                { data: 'StatusPermohonan', name: 'StatusPermohonan' },
                { 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('dun/permohonan/sbap/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: 'PemohonID', name: 'PemohonID' },
               { data: 'FullName', name: 'FullName' },
               { data: 'NRIC', name: 'NRIC' },
               { data: 'SpouseName', name: 'SpouseName' },
               { data: 'SpouseNRIC', name: 'SpouseNRIC' },
               { data: 'DateRMSB', name: 'DateRMSB' },
               { data: 'StatusPermohonan', name: 'StatusPermohonan' },
               { 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('dun/permohonan/sbap/export?_token=') }}{{csrf_token()}}&status='+status+'&from_date='+from_date+'&to_date='+to_date+'&q='+q+'&filter_type='+filter_type, '_blank');
    }

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

       $.ajax({
           url: '{{ url('dun/permohonan/sbap/show') }}',
           type: 'POST',
           data: data,
           success: function(response) {
                url = '{{ url('admin/rumusan') }}/sbap/'+x;

                var permohonan_sbap = response.permohonan;

               // Tarikh Permohonan
                $('#DateRMSB').html(moment(permohonan_sbap.DateRMSB, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY'));

               // Maklumat Ahli
                $('#StatusPermohonan').val(permohonan_sbap.StatusPermohonan);
                $('#FullName').val(permohonan_sbap.nama_pemohon);
                $('#NRIC').val(permohonan_sbap.nokp_pemohon);
                $('#TelNo').val(permohonan_sbap.no_tel_pemohon);
                $('#Email').val(permohonan_sbap.email);
                $('#MaritalStatus').val(permohonan_sbap.StatusPerkahwinan);
                $('#FullAddress').val(permohonan_sbap.alamat_pemohon+', '+permohonan_sbap.Bandar+', '+permohonan_sbap.Daerah+', '+permohonan_sbap.Poskod);
                $('#SpouseNRIC').val(permohonan_sbap.NoKpPsgn);
                $('#SpouseName').val(permohonan_sbap.NamaPsgn);
                $('#SpouseTel').val(permohonan_sbap.NoTelPsgn);
                $('#SpouseEmail').val(permohonan_sbap.email_pasangan);
                $('#DUN').val(permohonan_sbap.Dun);

                $('#child_table').html('');
                var mykid = "";
                var count = 1;
                response.anak.forEach(function(d,i) {
                    html =
                    '<tr>'+
                        '<td>'+(mykid != d.NoMyKid ? (count++) : "")+'</td>'+
                        '<td>'+(mykid != d.NoMyKid ? (d.Nama) : "")+'</td>'+
                        '<td>'+(mykid != d.NoMyKid ? (d.NoMyKid) : "")+'</td>'+
                        '<td>'+(mykid != d.NoMyKid ? (d.StatusPermohonan) : "")+'</td>'+
                        '<td>'+(mykid != d.NoMyKid ? (d.nama) : "")+'</td>'+
                        '<td>'+d.TahunSesi+'</td>'+
                        '<td>'+d.BulanBayaran+'</td>'+
                        '<td>'+d.TarikhBayaran+'</td>'+
                        '<td>'+d.StatusBayaran+'</td>'+
                        '<td>'+d.YuranDibayar+'</td>'+
                    '</tr>';
                    $('#child_table').append(html);
                    mykid = d.NoMyKid;
                });

               // 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');
    }

    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>
@endsection