@extends('layouts.app')

@section('title', 'Home')
@section('home', 'm-menu__item--active')

@push('styles')
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <style>
        .header-button:hover {
            opacity: .5 !important;
            text-decoration: none;
        }
        #maklumat_senarai .form-control[disabled] {
            border: 0px;
            background: transparent !important;
        }
    </style>
@endpush

@section('content')
    <section id="dashboardContent">
        <div class="row mb-4" style="margin-bottom: 0px !important;">
            <div class="row-md-12">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">{{ $ipr->display_name }}</h3>
                    </div>
                </div>
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <select class="form-control" id="filter_type" style="height:unset;padding:5px 5px;width:130px;float:right;" onchange="getByYear(this.value)">
                            <!-- <option value="keseluruhan">Keseluruhan</option> -->
                            @php 
                                foreach(range(date('Y'), 2016) as $year) {
                                    $selected = date('Y') == $year ? 'selected' : '';
                                    echo "<option value='$year' $selected>$year</option>";
                                }
                            @endphp
                        </select>
                        <span style="padding:5px;float:right;">Pilihan Mengikut Tahun</span>
                        <span style="padding:5px; float:left;">Dikemaskini pada: {{$last_update}}</span>
                    </div>
                </div>
                <br>
                <div class="m-stack m-stack--ver m-stack--desktop m-stack--demo" style="height:auto">
                    <div class="m-stack__item m-stack__item--center m-stack__item--middle" style="background-color: lightgray;">
                        <h4 style="margin:0px;">FI LESEN PENJAJA & PASAR</h4>
                    </div>
                </div>
                <div class="m-stack m-stack--ver m-stack--desktop m-stack--demo">
                    <a href="{{ url('admin/permohonan/'.$ipr->name) }}" class="m-stack__item m-stack__item--center m-stack__item--middle header-button" style="background-color: #716aca; color: white">
                        <div class="row" style="padding-left: 25px;">
                            <div class="mb-2" style="margin-top: 5px;">
                                <i class="fa fa-group" style="font-size: 50px"></i>
                            </div>
                            <div class="col" style="padding-bottom:0px;align-self:center;">
                                <h4 style="text-align: left;">JUMLAH PEGANGAN</h4>
                                <h3 style="text-align: left;" id="kkr_pegangan">{{ number_format($taksiran_fi_total['kkr_pegangan'], 0, '', ',') }}</h3>
                            </div>
                        </div>
                    </a>
                    <a href="{{ url('admin/permohonan/'.$ipr->name) }}" class="m-stack__item m-stack__item--center m-stack__item--middle header-button" style="background-color: #716aca; color: white">
                        <div class="row" style="padding-left: 25px;">
                            <div class="mb-2">
                                <i class="flaticon-coins" style="font-size: 50px"></i>
                            </div>
                            <div class="col" style="padding-bottom:0px;align-self:center;">
                                <h4 style="text-align: left;">JUMLAH FI LESEN TAHUNAN</h4>
                                <h3 style="text-align: left;" id="kkr_taksiran">RM {{ number_format($taksiran_fi_total['kkr_taksiran'], 2, '.', ',') }}</h3>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col" style="padding:1px;">
                <div class="card card-body" style="padding:1px;">
                    <div id="chart1"></div>
                </div>
            </div>
            <div class="col" style="padding:1px;">
                <div class="card card-body" style="padding:1px;">
                    <div id="chart2"></div>
                </div>
            </div>
        </div>

        <div class="row" style="margin-top: 10px;">
            @php 
                foreach($pbt as $data) {
            @endphp
                    <div class='col text-center' style='padding:1px; background:white;'><a class='btn btn-lg px-3 btn-primary' href='#' role='button' style='background: white;border: .5px solid lightgray;'><img src="{{ asset('img/pbt') }}/logo_.png" alt='...' class='img-responsive' style='height:80px' onclick="showDetail()"></a><br/><h5>{{ strtoupper($data->kod) }}</h5></div>
            @php
                }
            @endphp
        </div>
        {{-- Modal --}}
        <div class="modal fade" id="maklumat_senarai" 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" style="padding-bottom:10px;">
                        <h4 class="modal-title" id="exampleModalLabel">
                            Rumusan PBT {{ App\IPR::where('name', 'fi')->pluck('display_name')[0] }}<br>
                            <div class="row" style="margin-left: 10px;">
                                <img id="pl_pbt" src="" alt="..." class="img-responsive" style="height:50px">
                                <h5 id="pt_pbt" style="align-self:center;padding-left:10px;"></h5>
                            </div>
                        </h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="position:absolute;top:0;right:0;margin:25px;">
                            <span aria-hidden="true">
                                &times;
                            </span>
                        </button>
                    </div>
                    <div class="modal-body">
                    <table class="table table-striped" id="senarai_table" style="display: block !important;overflow-x: auto !important;width: 100% !important;">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th style="text-align:center;text-style:bold;background:lightgrey;" colspan="2">FI LESEN PENJAJA & PASAR</th>
                                </tr>
                                <tr>
                                    <th style="vertical-align:middle;">Tahun</th>
                                    <th style="vertical-align:middle;text-align:center; background: #716aca; color: white;">JUMLAH PEGANGAN</th>
                                    <th style="vertical-align:middle;text-align:center; background: #716aca; color: white;">JUMLAH FI LESEN TAHUNAN</th>
                                </tr>
                            </thead>
                            <tbody id="m_senarai_input"></tbody>
                        </table>
                    </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" style="color:grey;">
                            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" style="padding-bottom:10px;">
                        <h4 class="modal-title" id="exampleModalLabel">
                            Sejarah Kemaskini {{ App\IPR::where('name', 'fi')->pluck('display_name')[0] }} PBT<br>
                            <div class="row" style="margin-left: 10px;">
                                <img id="sl_pbt" src="" alt="..." class="img-responsive" style="height:50px">
                                <h5 id="st_pbt" style="align-self:center;padding-left:10px;"></h5>
                            </div>
                        </h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="position:absolute;top:0;right:0;margin:25px;">
                            <span aria-hidden="true">
                                &times;
                            </span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="datatable">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th style="text-align:center;text-style:bold;background:lightgrey;" colspan="2">FI LESEN PENJAJA & PASAR</th>
                                    </tr>
                                    <tr>
                                        <th style="vertical-align:middle;">BIL</th>
                                        <th style="vertical-align:middle;">TAHUN</th>
                                        <th style="text-align:center;vertical-align:middle;text-align:center; background: #716aca; color: white;">JUMLAH PEGANGAN</th>
                                        <th style="text-align:center;vertical-align:middle;text-align:center; background: #716aca; color: white;">JUMLAH FI LESEN TAHUNAN</th>
                                        <th style="">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>
    </section>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js" integrity="sha256-c9vxcXyAG4paArQG3xk6DjyW/9aHxai2ef9RpMWO44A=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js" integrity="sha256-gJWdmuCRBovJMD9D/TVdo4TIK8u5Sti11764sZT1DhI=" crossorigin="anonymous"></script>
    <script>
        var chart1 = new ApexCharts(document.querySelector("#chart1"), {
            title: { text: 'Jumlah Pegangan' },
            series: null,
            dataLabels: { enabled: false },
            chart: { type: 'bar', height: 280, stacked: true, toolbar: { show: false }, zoom: { enabled: false }},
            plotOptions: { bar: { horizontal: false } },
            xaxis: { type: 'number', categories: {!! $pbt->pluck('kod')->toJson() !!}, labels: { formatter: function(val, index) { return val.toUpperCase(); }, style: { fontSize: '8px' }, rotate: -35, rotateAlways: true} },
            yaxis: { labels: { formatter: function(val, index) { return parseFloat(val).toLocaleString(); } } },
            legend: { position: 'bottom' },
            fill: { opacity: 1 },
        });
        chart1.render();

        var chart2 = new ApexCharts(document.querySelector("#chart2"), {
            title: { text: 'Jumlah Taksiran Tahunan (RM)' },
            series: null,
            dataLabels: { enabled: false },
            chart: { type: 'bar', height: 280, stacked: true, toolbar: { show: false }, zoom: { enabled: false }},
            plotOptions: { bar: { horizontal: false } },
            xaxis: { type: 'number', categories: {!! $pbt->pluck('kod')->toJson() !!}, labels: { formatter: function(val, index) { return val.toUpperCase(); }, style: { fontSize: '8px' }, rotate: -35, rotateAlways: true} },
            yaxis: { labels: { formatter: function(val, index) { return parseFloat(val).toLocaleString(); } } },
            legend: { position: 'bottom' },
            fill: { opacity: 1 },
        });
        chart2.render();

        function getByYear(tahun) {
            $('#kkr_pegangan').html('');
            $('#kkr_taksiran').html('');
      
            chart1.updateSeries([{ data: [] }])
            chart2.updateSeries([{ data: [] }])
            
            var data = {
                _token: '{{ csrf_token() }}',
                tahun
            };

            $.ajax({
                url: '{{ url('admin/permohonan/fi') }}',
                type: 'POST',
                data: data,
                success: function(response) {
                    var amount =parseFloat(response.taksiran_total.kkr_pegangan);
                    var kkr_pegangan = amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

                    var amount =parseFloat(response.taksiran_total.kkr_taksiran).toFixed(2);
                    var kkr_taksiran = amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

                    $('#kkr_pegangan').html(kkr_pegangan);
                    $('#kkr_taksiran').html('RM ' + kkr_taksiran);
                    
                    chart1.updateSeries(response.taksiran_data.kkr_pegangan)
                    chart2.updateSeries(response.taksiran_data.kkr_taksiran)
                },
                error: function(response) {
                    $.alert({
                        type: 'red',
                        title: 'Whoops, looks like something went wrong!',
                        content: 'Please check with system admin.',
                        typeAnimated: true,
                        icon: 'fa fa-warning',
                        columnClass: 'col-md-6 col-md-offset-3',
                    });
                }
            });
        }

        function showDetail(pbt_id) {
            $('#sejarah_kemaskini').modal('hide');
            $('#m_senarai_input').html('');
            $('#pt_pbt').html('');
            $('#pl_pbt').attr("src", '');

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

            $.ajax({
                url: '{{ url('admin/permohonan/fi/show') }}',
                type: 'POST',
                data: data,
                success: function(response) {
                    $('#pt_pbt').html(response.pbt.nama);
                    $('#pl_pbt').attr("src", '{{ asset('img/pbt') }}'+'/logo_'+response.pbt.kod+'.png');

                    url = '{{ url('admin/rumusan') }}/fi/'+pbt_id;
                    response.taksiran.forEach(function(d) {
                        var amount =parseFloat(d.kkr_pegangan).toFixed(2);
                        var kkr_pegangan = amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

                        var amount =parseFloat(d.kkr_taksiran).toFixed(2);
                        var kkr_taksiran = amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");


                        html =
                        '<tr>'+
                            '<td>'+
                                '<input class="form-control" value="'+d.tahun+'" disabled>'+
                            '</td>'+
                            '<td>'+
                                '<input class="form-control" style="text-align:center;" value="'+kkr_pegangan+'" disabled>'+
                            '</td>'+
                            '<td style="display:flex;align-items:center;">'+
                                'RM <input class="form-control" value="'+kkr_taksiran+'" disabled>'+
                            '</td>'+
                        '</tr>';

                        $('#m_senarai_input').append(html);
                        if (d.pendapatan != null) {
                            pendapatan_pasangan = parseFloat(pendapatan_pasangan) + parseFloat(d.pendapatan);
                        }
                    });
                    $('#kemaskini_area').html('<button type="button" onClick="showAudit('+pbt_id+')" 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 with system admin.',
                        typeAnimated: true,
                        icon: 'fa fa-warning',
                        columnClass: 'col-md-6 col-md-offset-3',
                    });
                }
            });

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

        function showAudit(pbt_id) {
            $('#maklumat_senarai').modal('hide');
            $('#m_sejarah_kemaskini').html('');
            $('#st_pbt').html('');
            $('#sl_pbt').attr("src", '');
            $('#b_sejarah_kemaskini').html('<button type="button" onClick="showDetail('+pbt_id+');" class="btn btn-secondary">Kembali</button>');

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

            $.ajax({
                url: '{{ url('admin/permohonan/fi/audit') }}',
                type: 'POST',
                data: data,
                success: function(response) {
                    $('#st_pbt').html(response.pbt.nama);
                    $('#sl_pbt').attr("src", '{{ asset('img/pbt') }}'+'/logo_'+response.pbt.kod+'.png');

                    var audit = response.audit;
                    if (Array.isArray(audit) && audit.length) {
                        audit.forEach(function(d, i) {
                            var amount =parseFloat(d.kkr_pegangan).toFixed(2);
                            var kkr_pegangan = amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

                            var amount =parseFloat(d.kkr_taksiran).toFixed(2);
                            var kkr_taksiran = 'RM '+amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

                            html =
                            '<tr>'+
                                '<td>'+(i+1)+'</td>'+
                                '<td>'+d.tahun+'</td>'+
                                '<td style="text-align:center;">'+kkr_pegangan+'</td>'+
                                '<td style="text-align:center;">'+kkr_taksiran+'</td>'+
                                '<td style="text-align:center;">'+moment(d.updated_at, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY hh:mm A')+'</td>'+
                                '<td style="text-align:center;">'+d.name+'</td>'+
                            '</tr>';

                            $('#m_sejarah_kemaskini').append(html);
                        });
                    } else {
                        html =
                        '<tr>'+
                            '<td colspan=6>'+
                                '<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');
        }
    </script>
@endpush