@extends('layouts.master')

@section('title', 'Jamaah')

@section('content-header','Manajemen Jamaah')

@section('plugin-styles')
<!-- DataTables -->
<link rel="stylesheet" href="{{asset('plugins/datatables-bs4/css/dataTables.bootstrap4.css')}}">
<!-- Select2 -->
<link rel="stylesheet" href="{{asset('plugins/select2/css/select2.min.css')}}">
{{-- <link rel="stylesheet" href="{{asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css')}}"> --}}
  <!-- iCheck for checkboxes and radio inputs -->
  <link rel="stylesheet" href="{{asset('plugins/icheck-bootstrap/icheck-bootstrap.min.css')}}">
<!-- DateRange Picker -->
<link rel="stylesheet" href="{{asset('plugins/daterangepicker/daterangepicker.css')}}">
@endsection

@section('content')
<div class="col-md-8 col-sm-12">
    <div class="card card-orange">
        <div class="card-header">
            <h3 class="card-title"><i class="fas fa-user-plus"></i> Tambah Jamaah</h3>
            <!-- /.card-tools -->
        </div>
        <!-- /.card-header -->
        <form role="form" id="form-jamaah" method="POST" action="{{ url('jamaah/pendaftaran') }}">
        {{ csrf_field() }}
        <div class="card-body">
        	@if (Auth::user()->hasRole('admin|staff-kanim'))
        		<div class="form-group">
	                <label>Group Kota :</label>
	                <select id="kota" name="kota" class="form-control select2bs4" data-placeholder="Group Kota" data-dropdown-css-class="select2-danger" style="width: 100%;">
	                    <option></option>
	                    @foreach(Haji\Model\Kota::where('id','<>','1')->get() as $kota)
	                    <option value="{{$kota->id}}">{{$kota->keterangan}}</option>
	                    @endforeach
	                </select>
	            </div>
	        @else
	        	<input type="hidden" name="kota" value="{{Auth::user()->kota_id}}">
        	@endif
            <div class="form-group">
                <label for="inputNoPorsi">No. Porsi :</label>
                <input type="text" class="form-control" id="inputNoPorsi" name="noporsi" placeholder="No. Porsi">
            </div>
            <div class="form-group">
                <label for="inputNama">Nama :</label>
                <input type="text" class="form-control" id="inputNama" name="nama" placeholder="Nama">
            </div>
            <div class="form-group">
                <label for="inputPOB">Tempat Lahir :</label>
                <input type="text" class="form-control" id="inputPOB" name="pob" placeholder="Tempat Lahir">
            </div>
            <div class="form-group">
                <label for="inputDOB">Tanggal Lahir :</label>
				<div class="input-group" id="pilihTanggal">
					<div class="input-group-prepend">
						<span class="input-group-text">
							<i class="far fa-calendar-alt"></i>
						</span>
					</div>
	                <input type="text" class="form-control" id="inputDOB" name="dob" placeholder="Tanggal Lahir">
				</div>
            </div>
            <div class="form-group">
                <label for="inputAlamat">Alamat :</label>
                <input type="text" class="form-control" id="inputAlamat" name="alamat" placeholder="Alamat">
            </div>
            <div class="form-group">
                <label>J. Kelamin :</label>
                <div class="form-group">
                    <div class="icheck-success d-inline">
                        <input type="radio" id="RadioL" value="L" name="sex">
                        <label for="RadioL">
                            Laki - Laki
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="icheck-success d-inline">
                        <input type="radio" id="RadioP" value="P" name="sex">
                        <label for="RadioP">
                            Perempuan
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.card-body -->
        <div class="card-footer">
            <a href="{{ url('jamaah') }}" class="btn btn-default"><i class="far fa-hand-point-left"></i> Batal</a>
            <button type="submit" class="btn btn-info float-right"><i class="fas fa-download"></i> Simpan</button>
        </div>
        <!-- /.card-footer-->
        </form>
    </div>
    <!-- /.card -->
</div>
@endsection

@section('plugin-scripts')
<!-- DataTables -->
<script src="{{asset('plugins/datatables/jquery.dataTables.js')}}"></script>
<script src="{{asset('plugins/datatables-bs4/js/dataTables.bootstrap4.js')}}"></script>
<!-- Select2 -->
<script src="{{asset('plugins/select2/js/select2.full.min.js')}}"></script>
<!-- Input Mask -->
<script src="{{asset('plugins/inputmask/min/jquery.inputmask.bundle.min.js')}}"></script>
<!-- DateRange Picker -->
<script src="{{asset('plugins/daterangepicker/moment.min.js')}}"></script>
<script src="{{asset('plugins/daterangepicker/daterangepicker.js')}}"></script>
<!-- JQuery Validate -->
<script src="{{ asset('plugins/jquery-validation/jquery.validate.min.js') }}"></script>
<script src="{{ asset('plugins/jquery-validation/localization/messages_id.min.js') }}"></script>
@endsection

@section('custom-script')
<script type="text/javascript">
    $(function() {
        'use strict';
        $("#premission-group").hide();
        $('.select2bs4').select2();
        $('#role').on('select2:select', function (e) {
            var data = e.params.data;
            if (data.id == 2) {
                $("#premission-group").show();
            } else {
                $("#premission-group").hide();
            }
        });

        $('#form-jamaah').validate({
            ignore: [],
            rules: {
                'noporsi': {
                    required: true,
                    digits: true,
                    minlength: 10,
                    remote: {
                        url: "{{ url('jamaah/ajax/validasi-noporsi') }}",
                        type: "post"
                    }
                },
                'nama': {
                    required: true,
                },
                'kota': {
                    required: true,
                }
            },
            messages: {
                'noporsi': {
                    remote: jQuery.validator.format("No. Porsi \"{0}\" sudah terdaftar!")
                }
            },
            highlight: function (input) {
                $(input).addClass('is-invalid').removeClass('is-valid');
            },
            unhighlight: function (input) {
                $(input).addClass('is-valid').removeClass('is-invalid');
            },
            errorPlacement: function (error, element) {
                $(element).parents('.form-group').append(error);
            },
            errorClass : "error text-danger font-weight-light",
        });

        $(document).on("change", ".select2bs4", function() {
            $('#form-jamaah').valid();
        });

        $('#pilihTanggal').daterangepicker({
            "showDropdowns": true,
            "singleDatePicker": true,
            "locale": {
                "format": "DD-MM-YYYY"
            },
            "maxDate": moment().subtract(1, 'days'),
        }, function(start, end, label){
            $("#inputDOB").val(start.format('DD-MM-YYYY'));
        });
    });
</script>
@endsection