@extends('layouts.app')

@section('title', 'Profile')
@section('profile', 'm-menu__item--active')

@section('css')

<style>
    .red_input_box {
        border:1px solid red !important;
    }
</style>

@endsection

@section('content')


<div class="row">
    <div class="col-lg-10">
        <div class="m-portlet">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon m--hide">
                            <i class="la la-gear"></i>
                        </span>
                        <h3 class="m-portlet__head-text">
                            SSIPR TUNAS - SKIM BANTUAN TADIKA SELANGOR

                        </h3>
                    </div>
                </div>
            </div>
            <form id="permohonan_form" class="m-form m-form--label-align-right" action=" {{ Request::fullUrl() }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="m-portlet__body">
                    <input type="hidden" name="id" value="{{$tunas_id}}"/>
                    @include('rakyat.tunas.permohonan.pemohon')
                    <div id="pasangan_pane">
                    <div class="m-form__seperator m-form__seperator--dashed"></div>
                    @include('rakyat.tunas.permohonan.pasangan') 
                    </div>
                    <div class="m-form__seperator m-form__seperator--dashed"></div>
                    @include('rakyat.tunas.permohonan.anak') 
                    <div class="m-form__seperator m-form__seperator--dashed"></div>
                    @include('rakyat.tunas.permohonan.upload') 
                </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" id="goTunas">
                                    Simpan
                                </button>
                                <button type="reset" class="btn btn-secondary">
                                    Kembali
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="rumusan_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: {{ date('d/m/Y') }}</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 Peribadi:
                    </h5>
                    <br>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label for="m_pemohon_nama" class="form-control-label">
                                Nama:
                            </label>
                            <input type="text" class="form-control" id="m_pemohon_nama" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_pemohon_kp" class="form-control-label">
                                No. Kad Pengenalan:
                            </label>
                            <input type="text" class="form-control" id="m_pemohon_kp" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label for="m_pemohon_jantina_id" class="form-control-label">
                                Jantina:
                            </label>
                            <input type="text" class="form-control" id="m_pemohon_jantina_id" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_pemohon_kaum_id" class="form-control-label">
                                Kaum:
                            </label>
                            <input type="text" class="form-control" id="m_pemohon_kaum_id" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label for="m_pemohon_agama_id" class="form-control-label">
                                Agama:
                            </label>
                            <input type="text" class="form-control" id="m_pemohon_agama_id" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_pemohon_telefon" class="form-control-label">
                                No. Telefon Bimbit:
                            </label>
                            <input type="text" class="form-control" id="m_pemohon_telefon" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label for="m_pemohon_email" class="form-control-label">
                                Email:
                            </label>
                            <input type="text" class="form-control" id="m_pemohon_email" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_pemohon_perkahwinan_id" class="form-control-label">
                                Perkahwinan:
                            </label>
                            <input type="text" class="form-control" id="m_pemohon_perkahwinan_id" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label for="m_pemohon_tanggungan" class="form-control-label">
                                Tanggungan:
                            </label>
                            <input type="text" class="form-control" id="m_pemohon_tanggungan" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_pemohon_alamat" class="form-control-label">
                                Alamat:
                            </label>
                            <textarea type="text" class="form-control" id="m_pemohon_alamat" readonly></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label for="m_pemohon_daerah_id" class="form-control-label">
                                Daerah:
                            </label>
                            <input type="text" class="form-control" id="m_pemohon_daerah_id" readonly>
                        </div>
                        <div class="col-md-6 no_akaun_air">
                            <label for="m_pemohon_dun_id" class="form-control-label">
                                DUN:
                            </label>
                            <input type="text" class="form-control" id="m_pemohon_dun_id" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label for="m_pemohon_majikan_alamat" class="form-control-label">
                                Alamat Majikan:
                            </label>
                            <textarea type="text" class="form-control" id="m_pemohon_majikan_alamat" readonly></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label for="m_pemohon_pekerjaan" class="form-control-label">
                                Pekerjaan:
                            </label>
                            <input type="text" class="form-control" id="m_pemohon_pekerjaan" readonly>
                        </div>
                        <div class="col-md-6 no_akaun_air">
                            <label for="m_pemohon_pendapatan" class="form-control-label">
                                Pendapatan (RM):
                            </label>
                            <input type="text" class="form-control" id="m_pemohon_pendapatan" readonly>
                        </div>
                    </div>
                </div>
                <div id="m_pasangan_pane">
                <hr class="modal-hr">
                <div class="m-form__section m-form__section--middle">
                    <h5 style="color: #f4516c">
                        Maklumat Pasangan:
                    </h5>
                    <br>
                    <div class="form-group row">
                        <div class="col-md-6 no_akaun_air">
                            <label for="pasangan_nama" class="form-control-label">
                                Nama:
                            </label>
                            <input type="text" class="form-control" id="m_pasangan_nama" readonly>
                        </div>
                        <div class="col-md-6 no_akaun_air">
                            <label for="m_pasangan_kp" class="form-control-label">
                                IC No:
                            </label>
                            <input type="text" class="form-control" id="m_pasangan_kp" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6 no_akaun_air">
                            <label for="m_pasangan_jantina_id" class="form-control-label">
                                Jantina:
                            </label>
                            <input type="text" class="form-control" id="m_pasangan_jantina_id" readonly>
                        </div>
                        <div class="col-md-6 no_akaun_air">
                            <label for="m_pasangan_tel_pejabat" class="form-control-label">
                                No Telefon Bimbit:
                            </label>
                            <input type="text" class="form-control" id="m_pasangan_telefon_bimbit" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6 no_akaun_air">
                            <label for="m_pasangan_email" class="form-control-label">
                                Email:
                            </label>
                            <input type="text" class="form-control" id="m_pasangan_email" readonly>
                        </div>
                        <div class="col-md-6 no_akaun_air">
                            <label for="m_pasangan_alamat" class="form-control-label">
                                Alamat:
                            </label>
                            <textarea type="text" class="form-control" id="m_pasangan_alamat" readonly></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6 no_akaun_air">
                            <label for="m_pasangan_pekerjaan" class="form-control-label">
                                Pekerjaan:
                            </label>
                            <input type="text" class="form-control" id="m_pasangan_pekerjaan" readonly>
                        </div>
                        <div class="col-md-6 no_akaun_air">
                            <label for="m_pasangan_pendapatan" class="form-control-label">
                                Pendapatan (RM):
                            </label>
                            <input type="text" class="form-control" id="m_pasangan_pendapatan" readonly>
                        </div>
                    </div>
                </div>
                </div>
                <hr class="modal-hr">
                <div class="m-form__section m-form__section--middle">
                    <h5 style="color: #f4516c">
                        Anak:
                    </h5>
                    <br>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label for="m_anak_nama" class="form-control-label">
                                Nama
                            </label>
                            <input type="text" class="form-control" id="m_anak_nama" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_anak_mykid" class="form-control-label">
                                No Mykid:
                            </label>
                            <input type="text" class="form-control" id="m_anak_mykid" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label for="m_tadika" class="form-control-label">
                                Tadika
                            </label>
                            <textarea type="text" class="form-control" id="m_anak_tadika_id" readonly></textarea>
                        </div>
                        <div class="col-md-6">
                            <label for="m_anak_yuran_bantuan" class="form-control-label">
                                Yuran Bantuan (RM):
                            </label>
                            <input type="text" class="form-control" id="m_anak_yuran_bantuan" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label for="m_sesi_mula" class="form-control-label">
                                Sesi Mula
                            </label>
                            <input type="text" class="form-control" id="m_sesi_mula" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="m_sesi_akhir" class="form-control-label">
                                Sesi Tamat:
                            </label>
                            <input type="text" class="form-control" id="m_sesi_akhir" readonly>
                        </div>
                    </div>
                </div>
                
                <hr class="modal-hr">
                <div class="m-form__section m-form__section--end">
                    <h5 style="color: #f4516c">
                        Perakuan Pemohon:
                    </h5>
                    <br>
                    <div class="form-group m-form__group">
                        <div class="col-md-12">
                            <div class="alert m-alert m-alert--default" role="alert">
                                Saya dengan ini mengakui bahawa segala maklumat yang dinyatakan di dalam Borang Permohonan ini adala BENAR dan memberikan kebenaran kepada Kerajaan Negeri Selangor dan Pihak Agensi Pengendali IPR untuk membuat semakan data butir-butir peribadi saya bagi memproses permohonan ini.
                            </div>
                            <label class="m-checkbox m-checkbox--success">
                                <input type="checkbox" id="m_akuan_2" name="m_akuan_2" value="true">
                                Setuju
                                <span></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="submitForm()">
                    Hantar
                </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    Kemaskini
                </button>
            </div>
        </div>
    </div>
</div>
{{-- End Modal --}}
@endsection

@section('js')
<script>
$(document).ready(function(){
    $("#goTunas").on("click", function(){
        var errors_found=false;
        var field_text1 = [
            "pemohon_nama", "pemohon_kp", "pemohon_telefon", "pemohon_telefon", "pemohon_email", "pemohon_tanggungan", "pemohon_alamat_1",
            "pemohon_poskod", "pemohon_bandar", "pemohon_pekerjaan", 
            "pemohon_pendapatan","pemohon_jantina_id","pemohon_kaum_id","pemohon_agama_id","pemohon_perkahwinan_id","pemohon_tanggungan",
            "pemohon_dun_id","pemohon_daerah_id","pemohon_negeri_id"
        ];
        var field_text2 = [
            "pasangan_nama", "pasangan_kp", "pasangan_jantina_id", "pasangan_telefon_bimbit", "pasangan_email", "pasangan_alamat_1",
            "pasangan_poskod", "pasangan_bandar", "pasangan_pekerjaan", "pasangan_pendapatan","pasangan_jantina_id","pasangan_negeri_id"
        ];
        var field_text3 = [
            "anak_nama", "anak_mykid", "anak_tadika_id", "sesi_mula", "sesi_akhir"
        ];
        if (($("#pemohon_perkahwinan_id").val() == 2) || ($("#pemohon_perkahwinan_id").val() == 3)) {
            var field_text = field_text1.concat(field_text3);
        }
        else {
            var field_text = field_text1.concat(field_text2,field_text3);
        }
        for (i = 0; i < field_text.length; i++) {
            var1='#'+field_text[i];
            $(var1).removeClass('red_input_box');
            if ($(var1).val() == '') {
                $(var1).addClass('red_input_box');
                errors_found=true;
            }
        }
        if (errors_found) {
            error();
        }
        else {
            showRumusan();
        }
    });
});
var tadika = {};
    tadika['0']="None";
    @foreach ($listbox_tadika as $listbox)
    tadika['{{ $listbox->id }}']='{{$listbox->nama}},{{$listbox->alamat}},{{$listbox->poskod}} {{$listbox->bandar}}';
    @endforeach

function getSelectedTextInListbox(hashtag) {
    var1 = '#'+hashtag;
    return $(var1).find(':selected').text();
}
function error() {
    $.confirm({
        title: 'Maklumat tidak lengkap?',
        content: 'Sila semak permohonan anda dahulu.',
        icon: 'fa fa-warning',
        type: 'red',
        buttons: {
            ok: {
                btnClass: 'btn-red',
                action: function() {
                    
                }
            }
        }
    });
}

$("#copycheckbox").click(function () {
    if($(this).prop("checked") == true){
        $('#pasangan_alamat_1').val($('#pemohon_alamat_1').val());
        $('#pasangan_alamat_2').val($('#pemohon_alamat_2').val());
        $('#pasangan_alamat_3').val($('#pemohon_alamat_3').val());
        $('#pasangan_bandar').val($('#pemohon_bandar').val());
        $('#pasangan_poskod').val($('#pemohon_poskod').val());
        $('#pasangan_negeri_id').val($('#pemohon_negeri_id').val()); 
    }
    else {
        $('#pasangan_alamat_1').val();
        $('#pasangan_alamat_2').val();
        $('#pasangan_alamat_3').val();
        $('#pasangan_poskod').val();
        $('#pasangan_bandar').val();
        $('#pasangan_negeri_id').val(); 
    }
       
});


function showRumusan() {

        $('#m_pemohon_nama').val($('input[name="pemohon_nama"]').val());
        $('#m_pemohon_kp').val($('input[name="pemohon_kp"]').val());
        $('#m_pemohon_jantina_id').val(getSelectedTextInListbox('pemohon_jantina_id'));
        $('#m_pemohon_kaum_id').val(getSelectedTextInListbox('pemohon_kaum_id'));
        $('#m_pemohon_agama_id').val(getSelectedTextInListbox('pemohon_agama_id'));
        $('#m_pemohon_telefon').val($('input[name="pemohon_telefon"]').val());
        $('#m_pemohon_email').val($('input[name="pemohon_email"]').val());
        $('#m_pemohon_perkahwinan_id').val(getSelectedTextInListbox('pemohon_perkahwinan_id'));
        $('#m_pemohon_tanggungan').val($('input[name="pemohon_tanggungan"]').val());
        $('#m_pemohon_dun_id').val(getSelectedTextInListbox('pemohon_dun_id'));
        $('#m_pemohon_daerah_id').val(getSelectedTextInListbox('pemohon_daerah_id'));
        $('#m_pemohon_pekerjaan').val($('input[name="pemohon_pekerjaan"]').val());
        $('#m_pemohon_pendapatan').val($('input[name="pemohon_pendapatan"]').val());
        $('#m_pemohon_tel_pejabat').val($('input[name="pemohon_tel_pejabat"]').val());

        $('#m_pasangan_nama').val($('input[name="pasangan_nama"]').val());
        $('#m_pasangan_kp').val($('input[name="pasangan_kp"]').val());
        $('#m_pasangan_jantina_id').val(getSelectedTextInListbox('pasangan_jantina_id'));
        $('#m_pasangan_telefon_bimbit').val($('input[name="pasangan_telefon_bimbit"]').val());
        $('#m_pasangan_email').val($('input[name="pasangan_email"]').val());
        $('#m_pasangan_pekerjaan').val($('input[name="pasangan_pekerjaan"]').val());
        $('#m_pasangan_pendapatan').val($('input[name="pasangan_pendapatan"]').val());
        $('#m_pasangan_pekerjaan').val($('input[name="pasangan_pekerjaan"]').val());
        $('#m_anak_nama').val($('input[name="anak_nama"]').val());
        $('#m_anak_mykid').val($('input[name="anak_mykid"]').val());
        $('#m_anak_yuran_bantuan').val($('input[name="anak_yuran_bantuan"]').val());
        $('#m_sesi_mula').val($('input[name="sesi_mula"]').val());
        $('#m_sesi_akhir').val($('input[name="sesi_akhir"]').val());
        tadika_text=tadika[$('#anak_tadika_id option:selected').val()];
        $('#m_anak_tadika_id').val(tadika_text);



        if ($('#pemohon_majikan_alamat_1').val() != "") {
            $('#m_pemohon_majikan_alamat').html([
                $('input[name="pemohon_majikan_alamat_1"]').val()+', ',
                $('input[name="pemohon_majikan_alamat_2"]').val() ? $('input[name="pemohon_majikan_alamat_2"]').val()+', ' : '',
                $('input[name="pemohon_majikan_alamat_3"]').val() ? $('input[name="pemohon_majikan_alamat_3"]').val()+', ' : '',
                $('input[name="pemohon_majikan_poskod"]').val()+', ',
                $('input[name="pemohon_majikan_bandar"]').val()+', ',
                $('#pemohon_majikan_negeri_id').find(':selected').text()
            ]);
        }
        $('#m_pemohon_alamat').html([
            $('input[name="pemohon_alamat_1"]').val()+', ',
            $('input[name="pemohon_alamat_2"]').val() ? $('input[name="pemohon_alamat_2"]').val()+', ' : '',
            $('input[name="pemohon_alamat_3"]').val() ? $('input[name="pemohon_alamat_3"]').val()+', ' : '',
            $('input[name="pemohon_poskod"]').val()+', ',
            $('input[name="pemohon_bandar"]').val()+', ',
            $('#pemohon_negeri_id').find(':selected').text()
        ]);
        
        $('#m_pasangan_alamat').html([
            $('input[name="pasangan_alamat_1"]').val()+', ',
            $('input[name="pasangan_alamat_2"]').val() ? $('input[name="pasangan_alamat_2"]').val()+', ' : '',
            $('input[name="pasangan_alamat_3"]').val() ? $('input[name="pasangan_alamat_3"]').val()+', ' : '',
            $('input[name="pasangan_poskod"]').val()+', ',
            $('input[name="pasangan_bandar"]').val()+', ',
            $('#pasangan_negeri_id').find(':selected').text()
        ]);
        $('#rumusan_permohonan').modal('show');
}

    
var id;
$("#anak_tadika_id").change(function () {
    id = $(this).val();
    $('#tadika_info_pane').html(tadika[id]);
});

if ($("#pemohon_jantina_id").val() == 1) {
    $("#pasangan_jantina_id").val(2);
}
if ($("#pemohon_jantina_id").val() == 2) {
    $("#pasangan_jantina_id").val(1);
}

$("#pemohon_jantina_id").change(function () {
    if ($("#pemohon_jantina_id").val() == 1) {
        $("#pasangan_jantina_id").val(2);
    }
    if ($("#pemohon_jantina_id").val() == 2) {
        $("#pasangan_jantina_id").val(1);
    }
});


$("#pemohon_perkahwinan_id").change(function () {
    id = $(this).val();
    if ((id == 2) || (id == 3)) {
        $('#pasangan_pane').hide(1000);
        $('#m_pasangan_pane').hide();
        
    }
    else {
        $('#pasangan_pane').show();
        $('#m_pasangan_pane').show();
    }
});

@if ($profile->anak_tadika_id != NULL)
$('#tadika_info_pane').html(tadika[{{$profile->anak_tadika_id}}]);
@endif

@if (($profile->pemohon_perkahwinan_id == 2 ) || ($profile->pemohon_perkahwinan_id == 3))
$('#pasangan_pane').hide();
@endif

function submitForm() {

    if($('#m_akuan_2:checked').val() != 'true') {
        error();
    } 
    else {

        $('input[name="akuan_2"]').val($('#m_akuan_2:checked').val());

        $.confirm({
            title: 'Hantar Permohonan?',
            content: 'Anda pasti untuk teruskan?',
            icon: 'fa fa-spinner fa-spin',
            type: 'green',
            buttons: {
                hantar: {
                    btnClass: 'btn-green',
                    action: function() {
                        $('#permohonan_form').submit();
                    }
                },
                kembali: {
                    btnClass: 'btn-red',
                    action: function() {

                    }
                }
            }
        });
    }
}

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

$("#sesi_mula").datepicker({
    todayHighlight: !0,
    orientation: "bottom left",
    format: 'yyyy-mm-dd',
    templates: {
        leftArrow: '<i class="la la-angle-left"></i>',
        rightArrow: '<i class="la la-angle-right"></i>'
    },
});
$("#sesi_akhir").datepicker({
    todayHighlight: !0,
    orientation: "bottom left",
    format: 'yyyy-mm-dd',
    templates: {
        leftArrow: '<i class="la la-angle-left"></i>',
        rightArrow: '<i class="la la-angle-right"></i>'
    },
});

</script>
@endsection