@extends('layouts.app')

@section('title', 'Pakej Kita Selangor')
@section('kita', 'm-menu__item--active')

@section('css')
@endsection

@section('content')
<div class="row">
    <div class="col-lg-12">
        <div class="m-portlet">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">KEMASKINI PAKEJ KITA SELANGOR</h3>
                    </div>
                </div>
            </div>
            <form id="kita_form" enctype="multipart/form-data" class="m-form m-form--label-align-right" action="{{ url('kita/add') }}" method="POST">
                @csrf
                <input type="hidden" value="" name="minggu">
                <div class="m-portlet__body" id="kissfrmrkyat">
                    <div class="m-form__section m-form__section--middle">
                        <div class="form-group m-form__group row">
                            <div class="row">
                                <div class="col-lg-12">
                                    <select class="form-control" id="minggu" name="minggu" style="height:unset;padding:5px 5px;" onchange="getSenarai(this.value)">
                                        @php 
                                        for ($w = 1; $w <= $weeks + 1; $w++) {
                                            $selected = $w == $weeks ? "selected='selected'" : "";
                                            echo "<option value='$w' $selected>Minggu $w </option>";
                                        }
                                        @endphp
                                    </select>
                                </div>
                            </div>
                            <table class="table table-striped" style="display: block !important;overflow-x: auto !important;width: 100% !important;">
                                <thead>
                                    <tr>
                                        <th style="vertical-align:middle;">BIL</th>
                                        <th style="vertical-align:middle;">PAKEJ</th>
                                        <th style="vertical-align:middle;">IMPAK KEWANGAN</th>
                                        <th style="vertical-align:middle;">SUMBER KEWANGAN</th>
                                        <th style="vertical-align:middle;text-align:center; background: #716aca; color: white;">JUMLAH PERBELANJAAN</th>
                                        <th style="vertical-align:middle;text-align:center; background: #716aca; color: white;">JUMLAH PENERIMA MANFAAT</th>
                                    </tr>
                                </thead>
                                <tbody id="senarai_pakej"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="m-portlet__foot m-portlet__foot--fit">
                    <div class="m-form__actions m-form__actions">
                        <div class="row">
                            <div class="col-lg-5"></div>
                            <div class="col-lg-6">
                                <button type="button" class="btn btn-primary" onclick="submitForm()">
                                    Hantar
                                </button>
                                <button type="reset" class="btn btn-secondary" onclick="window.location='{{ url('kita') }}'">
                                    Kembali
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
    $(document).ready(() => {
        getSenarai(50);
    });

    function getSenarai(minggu) {
        var data = {
            _token: '{{ csrf_token() }}',
            minggu
        };

        $.ajax({
           url: '{{ url('kita/list') }}',
           type: 'POST',
           data: data,
           success: function(response) {
                $('#senarai_pakej').html('');
                if (response.pakej_kita.length > 0) {
                    response.pakej_kita.forEach(function(d,i) {
                        var amount = parseFloat(d.impak_kewangan).toFixed(2);
                        var impak_kewangan = amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                        html =
                            '<tr>'+
                                '<td>'+(i+1)+'<input type="hidden" value="'+d.inisiatif_id+'" name="data['+i+'][inisiatif_id]"></td>'+
                                '<td width="30%">'+d.pakej+'</td>'+
                                '<td width="15%">RM '+impak_kewangan+'</td>'+
                                '<td>'+d.sumber+'</td>'+
                                '<td width="15%"><input type="number" class="form-control" value="'+d.jumlah_perbelanjaan+'" name="data['+i+'][jumlah_perbelanjaan]"></td>'+
                                '<td width="15%"><input type="number" class="form-control" value="'+d.jumlah_penerima+'" name="data['+i+'][jumlah_penerima]"></td>'+
                            '</tr>';
                        $('#senarai_pakej').append(html);
                    });
                } else {
                    if (response.inisiatif.length > 0) {
                        response.inisiatif.forEach(function(d,i) {
                            var amount = parseFloat(d.impak_kewangan).toFixed(2);
                            var impak_kewangan = amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            html =
                                '<tr>'+
                                    '<td>'+(i+1)+'<input type="hidden" value="'+d.inisiatif_id+'" name="data['+i+'][inisiatif_id]"></td>'+
                                    '<td width="30%">'+d.pakej+'</td>'+
                                    '<td width="15%">RM '+impak_kewangan+'</td>'+
                                    '<td>'+d.sumber+'</td>'+
                                    '<td width="15%"><input type="number" class="form-control" value="0" name="data['+i+'][jumlah_perbelanjaan]"></td>'+
                                    '<td width="15%"><input type="number" class="form-control" value="0" name="data['+i+'][jumlah_penerima]"></td>'+
                                '</tr>';
                            $('#senarai_pakej').append(html);
                        });
                    } else {
                        html =
                            '<tr>'+
                                '<td colspan="6" style="text-align:center">-- Tiada Rekod --</td>'+
                            '</tr>';
                        $('#senarai_pakej').append(html);
                    }
                }
           },
           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 submitForm() {
        function error() {
            $.confirm({
                title: 'Maklumat tidak lengkap?',
                content: 'Sila semak maklumat yang telah diisi.',
                icon: 'fa fa-warning',
                type: 'red',
                buttons: { ok: { btnClass: 'btn-red' } }
            });
        }

        var minggu = document.getElementById("minggu").value;
        document.getElementById('minggu').value = minggu;

        $.confirm({
            title: 'Kemaskini Pakej Kita Selangor',
            content: 'Anda pasti untuk teruskan?',
            icon: 'fa fa-spinner fa-spin',
            type: 'green',
            buttons: {
                hantar: {
                    btnClass: 'btn-green',
                    action: function() { $('#kita_form').submit();}
                },
                kembali: {
                    btnClass: 'btn-red',
                    action: function() {}
                }
            }
        });
    }
</script>
@endsection