@extends('layouts.app')
@section('title', 'Permohonan')
@section('permohonan', 'm-menu__item--active')
@section('css')
<style>
    .modal-hr {
        margin-top: 2rem;
        margin-bottom: 2rem;
        border-top: 1px dashed rgba(0, 0, 0, .3);
    }
</style>
@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">
                        <span class="m-portlet__head-icon m--hide">
                            <i class="la la-gear"></i>
                        </span>
                        <h3 class="m-portlet__head-text">
                            {{ $ipr->display_name }}
                        </h3>
                    </div>
                </div>
            </div>
            <form id="permohonan_form" class="m-form m-form--label-align-right" enctype="multipart/form-data" action="{{ route('sml.store') }}" method="POST">
                @csrf
                <input type="hidden" name="akuan_1" value="">
                <input type="hidden" name="akuan_2" value="">
                <div class="m-portlet__body">
                <div class="m-form__section m-form__section--first">
                        <div class="m-form__heading">
                            <h3 class="m-form__heading-title">
                                Maklumat Program
                            </h3>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                            <span style="color: red">* </span>
                                Nama Pemohon:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" name="nama_pemohon" placeholder="Sila masukan nama" value="{{ Auth::user()->name }}"  >
                            </div>
                            <label class="col-lg-2 col-form-label">
                            <span style="color: red">* </span>
                                Nama Program:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" name="nama_program" placeholder="Sila masukan nama program " >
                            </div>
                        </div>

                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                            <span style="color: red">* </span>
                                No Telefon:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" id = "no_telefon"  name="no_telefon" placeholder="Sila masukan no telefon " >
                            </div>
                            <label class="col-lg-2 col-form-label">
                            <span style="color: red">* </span>
                                Tarikh Mula Program:
                            </label>
                            <div class="col-lg-4">
                                <input type="date" class="form-control m-input"  id = "tarikh_mula_program" name="tarikh_mula_program" placeholder="Sila masukan tarikh mula program" >
                            </div>
                        </div> 

                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                            <span style="color: red">* </span>
                                Emel:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input"  id = "emel" name="emel" placeholder="Sila masukan emel" >
                            </div>
                            <label class="col-lg-2 col-form-label">
                            <span style="color: red">* </span>
                                Tarikh Akhir Program:
                            </label>
                            <div class="col-lg-4">
                                <input type="date" class="form-control m-input"  id = "tarikh_akhir_program" name="tarikh_akhir_program" placeholder="Sila masukan tarikh akhir program" >
                            </div>
                        </div>

                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                            <span style="color: red">* </span>
                                Ulasan:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" name="ulasan" placeholder="Sila masukan ulasan" >
                            </div>
                        </div> <br>

                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                            <span style="color: red">* </span>
                                Alamat program:
                            </label>
                            <div class="col-lg-10">
                                <input type="textarea" class="form-control m-input" name="alamat_program" placeholder="Sila masukan alamat program" >
                            </div>
                        </div> 
                         
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                            <span style="color: red">* </span>
                                Penerangan program:
                            </label>
                            <div class="col-lg-10">
                                <input type="textarea" class="form-control m-input" name="penerangan" placeholder="Sila masukan penerangan program" >
                            </div>
                        </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="validate()">
                                    Hantar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{{-- Modal --}}
<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 Program :
                    </h5>
                    <br>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label for="recipient-name" class="form-control-label">
                                Nama Pemohon:
                            </label>
                            <input type="text" class="form-control" id="m_nama_pemohon" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="recipient-name" class="form-control-label">
                                Nama program:
                            </label>
                            <input type="text" class="form-control" id="m_nama_program" readonly>
                        </div>                        
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label for="recipient-name" class="form-control-label">
                                No telefon:
                            </label>
                            <input type="text" class="form-control" id="m_no_telefon" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="recipient-name" class="form-control-label">
                                Tarikh Mula Program:
                            </label>
                            <input type="text" class="form-control" id="m_tarikh_mula_program" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label for="recipient-name" class="form-control-label">
                                Emel:
                            </label>
                            <input type="text" class="form-control" id="m_emel" readonly>
                        </div>

                         <div class="col-md-6">
                            <label for="recipient-name" class="form-control-label">
                                Tarikh Akhir Program:
                            </label>
                            <input type="text" class="form-control" id="m_tarikh_akhir_program" readonly>
                        </div> 
                    </div>

                    <div class="form-group row">
                        <div class="col-md-6">
                            <label for="recipient-name" class="form-control-label">
                                Ulasan:
                            </label>
                            <input type="text" class="form-control" id="m_ulasan" readonly>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-12">
                            <label for="recipient-name" class="form-control-label">
                                Alamat Program:
                            </label>
                            <input type="textarea" class="form-control" id="m_alamat_program" readonly>
                        </div> 
                    </div>

                    <div class="form-group row">
                        <div class="col-md-12">
                            <label for="recipient-name" class="form-control-label">
                                Penerangan:
                            </label>
                            <input type="textarea" class="form-control" id="m_penerangan" 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">
                                Sila ambil perhatian bahawa Akta Perlindungan Data Peribadi 2010 memberi anda hak tertentu ke atas penggunaan
                                data peribadi anda oleh pihak kami. Kerajaan Negeri Selangor memberi
                                keutamaan dalam hal melindungi data peribadi anda dan memastikan ianya terpelihara dengan mengambil langkah
                                tertentu seperti yang termaktub di dalam akta tersebut. Dengan mengemukakan dan menyediakan maklumat anda kepada
                                kami di dalam borang pendaftaran ini, anda membenarkan penggunaan maklumat peribadi yang dikumpulkan untuk memberikan
                                perkhidmatan kami, mengikut cara dan tujuan yang dinyatakan dalam nota privasi kami. 
                            </div>
                            <label class="m-checkbox m-checkbox--success">
                                <input type="checkbox" id="m_akuan_1" name="m_akuan_1" value="true">
                                Setuju
                                <span></span>
                            </label>
                        </div>
                    </div>
                    <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 adalah BENAR
                                dan memberikan kebenaran kepada Kerajaan Negeri Selangor 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(() => {


    });
   
    $("#ic").inputmask({
      mask: "999999999999",
      placeholder: ""
   });

   $("#no_akaun").inputmask({
      mask: "9999999999999999",
      placeholder: ""
   });

   $('#no_telefon').inputmask('Regex', {
      regex: "^(01)[0-9]{8,9}$"
   });



    function validate() {
        if($('input[name="nama_program"]').val() == ''
            || $('input[name="emel"]').val() == ''
            || $('input[name="ulasan"]').val() == ''
            || $('input[name="no_telefon"]').val() == ''
            || $('input[name="nama_pemohon"]').val() == ''
            || $('input[name="tarikh_mula_program"]').val() == ''
            || $('input[name="tarikh_akhir_program"]').val() == ''
            || $('input[name="alamat_program"]').val() == ''
            || $('input[name="penerangan"]').val() == ''
        
            )
            
            {
            error();
            return;
        } else {
            // check duplicate
            if ($(".success_ic").is(":hidden")) {
                $.confirm({
                    title: 'Maklumat semakan belum selesai',
                    content: 'Sila pastikan semakan No Identiti telah OK dan cuba lagi.',
                    icon: 'fa fa-warning',
                    type: 'red',
                buttons: { ok: { btnClass: 'btn-red' } }
                });
                return;
            }
            showRumusan();
        }
        function error() {
            $.confirm({
                title: 'Maklumat tidak lengkap?',
                content: 'Sila semak permohonan anda terlebih dahulu.',
                icon: 'fa fa-warning',
                type: 'red',
                buttons: { ok: { btnClass: 'btn-red' } }
            });
        }
    }


    // function validate() {

    //     // check duplicate
    //     if ($('input[name="emel"]').val() != '' && $(".success_email").is(":hidden")) {
    //         $.confirm({
    //             title: 'Maklumat semakan belum selesai',
    //             content: 'Sila pastikan semakan Email telah OK dan cuba lagi.',
    //             icon: 'fa fa-warning',
    //             type: 'red',
    //             buttons: {
    //                 ok: {
    //                     btnClass: 'btn-red'
    //                 }
    //             }
    //         });
    //         return;
    //     } else if ($('input[name="tel_bimbit"]').val() != '' && $(".success_tel_bimbit").is(":hidden")) {
    //         $.confirm({
    //             title: 'Maklumat semakan belum selesai',
    //             content: 'Sila pastikan semakan No Telefon Bimbit telah OK dan cuba lagi.',
    //             icon: 'fa fa-warning',
    //             type: 'red',
    //             buttons: {
    //                 ok: {
    //                     btnClass: 'btn-red'
    //                 }
    //             }
    //         });
    //         return;
    //     } else {
    //         showRumusan();
    //     }

    //     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() {

    //                     }
    //                 }
    //             }
    //         });
    //     }

    // }

    function showRumusan() {
        
        // Maklumat Program
        $('#m_nama_program').val($('input[name="nama_program"]').val());
        $('#m_nama_pemohon').val($('input[name="nama_pemohon"]').val());
        $('#m_emel').val($('input[name="emel"]').val());
        $('#m_no_telefon').val($('input[name="no_telefon"]').val());
        $('#m_tarikh_akhir_program').val($('input[name="tarikh_akhir_program"]').val());
        $('#m_tarikh_mula_program').val($('input[name="tarikh_mula_program"]').val());
        $('#m_alamat_program').val($('input[name="alamat_program"]').val());
        $('#m_ulasan').val($('input[name="ulasan"]').val());
        $('#m_penerangan').val($('input[name="penerangan"]').val());

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

    function submitForm() {

            $.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 error() {
            $.confirm({
                title: 'Maklumat tidak lengkap?',
                content: 'Sila tanda perakuan pemohon sebelum hantar pemohonan.',
                icon: 'fa fa-warning',
                type: 'red',
                buttons: {
                    ok: {
                        btnClass: 'btn-red',
                        action: function() {

                        }
                    }
                }
            });
        }
    }
</script>
@endsection