@extends('layouts.contentLayoutMaster')

@section('title','Tambah SKDU')

@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/plugins/forms/validation/form-validation.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/forms/select/select2.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/pickers/pickadate/pickadate.css')}}">
@endsection

@section('page-styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/page-users.css')}}">
@endsection

@section('content')
<!-- users edit start -->
<section class="users-edit">
<form method="post" action="{{ route('skdu.store') }}" autocomplete="off" class="form" enctype="multipart/form-data">
    @csrf
    @method('post')
    <div class="card">
        <div class="card-content">
        <div class="card-body">
            <div class="row">
                <div class="col-12 col-sm-6">
                    <div class="form-group">
                        <div class="controls">
                            <label>NIK</label>
                            <input id="nik" type="number" class="form-control @error('nik') is-invalid @enderror" class="form-control" name="nik" 
                                value="{{ auth()->user()->nik, old('nik') }}" readonly 
                                autocomplete="nik" autofocus placeholder="Nomor KTP">
                                @if ($errors->has('nik'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('nik') }}</strong>
                                </span>
                                @endif
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6">
                    <div class="form-group">
                        <div class="controls">
                            <label>Nama</label>
                            <input type="text" name="name" minlength="3" id="name" class="form-control" placeholder="Nama"
                                value="{{ auth()->user()->name, old('name') }}" readonly>
                                @if ($errors->has('name'))
                                <div class="help-block text-danger">
                                    <ul role="alert">
                                        <li>{{ $errors->first('name') }}</li>
                                    </ul>
                                </div>
                                @endif
                        </div>
                    </div>
                </div>
            </div> 
        </div>
        </div>
    </div>
    <div class="card">
        <div class="card-content">
        <div class="card-body">
            <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <div class="controls">
                            <label>Bidang Usaha</label>
                            <input type="text" name="bidang_usaha" minlength="3" id="bidang_usaha" class="form-control @error('bidang_usaha') is-invalid @enderror" placeholder="Bidang Usaha"
                                    value="{{ old('bidang_usaha') }}" required
                                    data-validation-required-message="Bidang Usaha wajib diisi."
                                    data-validation-minlength-message="Harus terdiri dari minimal 3 karakter.">
                                @if ($errors->has('bidang_usaha'))
                                <div class="help-block text-danger">
                                    <ul role="alert">
                                        <li>{{ $errors->first('bidang_usaha') }}</li>
                                    </ul>
                                </div>
                                @endif
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="controls">
                            <label>Alamat Usaha</label>
                            <input type="text" name="alamat_usaha" minlength="3" id="alamat_usaha" class="form-control @error('alamat_usaha') is-invalid @enderror" placeholder="Alamat Usaha"
                                    value="{{ old('alamat_usaha') }}" required
                                    data-validation-required-message="Alamat Usaha wajib diisi."
                                    data-validation-minlength-message="Harus terdiri dari minimal 3 karakter.">
                                @if ($errors->has('alamat_usaha'))
                                <div class="help-block text-danger">
                                    <ul role="alert">
                                        <li>{{ $errors->first('alamat_usaha') }}</li>
                                    </ul>
                                </div>
                                @endif
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="controls">
                            <label>RT</label>
                            <input type="text" id="rt_usaha" minlength="1" maxlength="4" class="form-control @error('rt_usaha') is-invalid @enderror" name="rt_usaha" placeholder="RT" 
                                value="{{ old('rt_usaha') }}" required
                                data-validation-required-message="RT wajib diisi."
                                data-validation-containsnumber-regex="(\d)+"
                                data-validation-containsnumber-message="Masukkan RT yang valid."
                                data-validation-minlength-message="Harus terdiri dari minimal 1 karakter."
                                data-validation-maxlength-message="Harus terdiri dari maksimal 4 karakter.">
                                @if ($errors->has('rt_usaha'))
                                <div class="help-block text-danger">
                                    <ul role="alert">
                                        <li>{{ $errors->first('rt_usaha') }}</li>
                                    </ul>
                                </div>
                                @endif
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="controls">
                            <label>RW</label>
                            <input type="text" id="rw_usaha" minlength="1" maxlength="4" class="form-control @error('rw_usaha') is-invalid @enderror" name="rw_usaha" placeholder="RW" 
                                value="{{ old('rw_usaha') }}" required
                                data-validation-required-message="RW wajib diisi."
                                data-validation-containsnumber-regex="(\d)+"
                                data-validation-containsnumber-message="Masukkan RW yang valid."
                                data-validation-minlength-message="Harus terdiri dari minimal 1 karakter."
                                data-validation-maxlength-message="Harus terdiri dari maksimal 4 karakter.">
                                @if ($errors->has('rw_usaha'))
                                <div class="help-block text-danger">
                                    <ul role="alert">
                                        <li>{{ $errors->first('rw_usaha') }}</li>
                                    </ul>
                                </div>
                                @endif
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="controls">
                            <label>Provinsi</label>
                            <select class="select2 form-control @error('provinsi_usaha') is-invalid @enderror" id="provinsi_usaha" name="provinsi_usaha" required>
                                <option value="" selected disabled>Pilih Provinsi</option>
                                @foreach ($provinces as $item)
                                    <option value="{{ $item->id ?? '' }}">{{ $item->name ?? '' }}</option>
                                @endforeach
                            </select>
                            @if ($errors->has('provinsi_usaha'))
                                <div class="help-block text-danger">
                                    <ul role="alert">
                                        <li>{{ $errors->first('provinsi_usaha') }}</li>
                                    </ul>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="controls">
                            <label>Kabupaten / Kota</label>
                            <select class="select2 form-control @error('kabupaten_kota_usaha') is-invalid @enderror" id="kabupaten_kota_usaha" name="kabupaten_kota_usaha" required>
                                <option value="" selected disabled>Pilih Kabupaten / Kota</option>
                            </select>
                            @if ($errors->has('kabupaten_kota_usaha'))
                                <div class="help-block text-danger">
                                    <ul role="alert">
                                        <li>{{ $errors->first('kabupaten_kota_usaha') }}</li>
                                    </ul>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="controls">
                            <label>Kecamatan</label>
                            <select class="select2 form-control @error('kecamatan_usaha') is-invalid @enderror" id="kecamatan_usaha" name="kecamatan_usaha" required>
                                <option value="" selected disabled>Pilih Kecamatan</option>
                            </select>
                            @if ($errors->has('kecamatan_usaha'))
                                <div class="help-block text-danger">
                                    <ul role="alert">
                                        <li>{{ $errors->first('kecamatan_usaha') }}</li>
                                    </ul>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="controls">
                            <label>Desa / Kelurahan</label>
                            <select class="select2 form-control @error('desa_kelurahan_usaha') is-invalid @enderror" id="desa_kelurahan_usaha" name="desa_kelurahan_usaha" required>
                                <option value="" selected disabled>Pilih Desa / Kelurahan</option>
                            </select>
                            @if ($errors->has('desa_kelurahan_usaha'))
                                <div class="help-block text-danger">
                                    <ul role="alert">
                                        <li>{{ $errors->first('desa_kelurahan_usaha') }}</li>
                                    </ul>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="controls">
                            <label>Kode Pos</label>
                            <input type="text" id="kode_pos_usaha" minlength="4" maxlength="6" class="form-control @error('kode_pos_usaha') is-invalid @enderror" name="kode_pos_usaha" placeholder="Kode Pos" 
                                value="{{ old('kode_pos_usaha') }}" required
                                data-validation-required-message="Kode Pos wajib diisi."
                                data-validation-containsnumber-regex="(\d)+"
                                data-validation-containsnumber-message="Masukkan Kode Pos yang valid."
                                data-validation-minlength-message="Harus terdiri dari minimal 4 karakter."
                                data-validation-maxlength-message="Harus terdiri dari maksimal 6 karakter.">
                                @if ($errors->has('kode_pos_usaha'))
                                <div class="help-block text-danger">
                                    <ul role="alert">
                                        <li>{{ $errors->first('kode_pos_usaha') }}</li>
                                    </ul>
                                </div>
                                @endif
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Foto Tempat Usaha</label>
                        <div class="form-group">
                            <div class="controls">
                                <div class="custom-file">
                                    <input type="file" class="form-control @error('foto_usaha') is-invalid @enderror custom-file-input" id="foto_usaha" name="foto_usaha">
                                    <label class="custom-file-label" for="foto_usaha">Pilih foto</label>
                                    <small class="text-warning">Foto tempat usaha diusakan jelas dan tidak terpotong.</small>
                                </div>
                                @if ($errors->has('foto_usaha'))
                                <div class="help-block text-danger">
                                    <ul role="alert">
                                        <li>{{ $errors->first('foto_usaha') }}</li>
                                    </ul>
                                </div>
                                @endif
                            </div>
                        </div>    
                    </div>
                    <div class="form-group">
                        <label>Scan KTP</label>
                        <div class="form-group">
                            <div class="controls">
                                <div class="custom-file">
                                    <input type="file" class="form-controll @error('scan_ktp') is-invalid @enderror custom-file-input" id="scan_ktp" name="scan_ktp">
                                    <label class="custom-file-label" for="scan_ktp">Pilih foto</label>
                                    <small class="text-warning">Foto KTP diusakan jelas dan tidak terpotong.</small>
                                </div>
                                @if ($errors->has('scan_ktp'))
                                <div class="help-block text-danger">
                                    <ul role="alert">
                                        <li>{{ $errors->first('scan_ktp') }}</li>
                                    </ul>
                                </div>
                                @endif
                            </div>
                        </div>    
                    </div>
                    <div class="form-group">
                        <label>Scan KK</label>
                        <div class="form-group">
                            <div class="controls">
                                <div class="custom-file">
                                    <input type="file" class="form control @error('scan_kk') is-invalid @enderror custom-file-input" id="scan_kk" name="scan_kk">
                                    <label class="custom-file-label" for="scan_kk">Pilih foto</label>
                                    <small class="text-warning">Foto KK diusakan jelas dan tidak terpotong.</small>
                                </div>
                                @if ($errors->has('scan_kk'))
                                <div class="help-block text-danger">
                                    <ul role="alert">
                                        <li>{{ $errors->first('scan_kk') }}</li>
                                    </ul>
                                </div>
                                @endif
                            </div>
                        </div>    
                    </div>
                </div>
                <div class="col-12 d-flex flex-sm-row flex-column justify-content-start mt-1">
                    <button type="submit" class="btn btn-danger glow mb-1 mb-sm-0 mr-0 mr-sm-1">Simpan</button>
                    <button type="reset" class="btn btn-light">Cancel</button>
                </div>
            </div> 
        </div>
        </div>
    </div>
</form>
</section>
<!-- users edit ends -->
@endsection

{{-- vendor scripts --}}
@section('vendor-scripts')
<script>
    function onChangeSelect(url, id, name) {
        // send ajax request to get the cities of the selected province and append to the select tag
        $.ajax({
            url: url,
            type: 'GET',
            data: {
                id: id
            },
            success: function (data) {
                $('#' + name).empty();
                $('#' + name).append('<option>Pilih Salah Satu</option>');

                $.each(data, function (key, value) {
                    $('#' + name).append('<option value="' + key + '">' + value + '</option>');
                });
            }
        });
    }
    $(function () {
        $('#provinsi_usaha').on('change', function () {
            onChangeSelect('{{ route("cities") }}', $(this).val(), 'kabupaten_kota_usaha');
        });
        $('#kabupaten_kota_usaha').on('change', function () {
            onChangeSelect('{{ route("districts") }}', $(this).val(), 'kecamatan_usaha');
        })
        $('#kecamatan_usaha').on('change', function () {
            onChangeSelect('{{ route("villages") }}', $(this).val(), 'desa_kelurahan_usaha');
        })
    });
</script>
<script src="{{asset('vendors/js/forms/select/select2.full.min.js')}}"></script>
<script src="{{asset('vendors/js/forms/validation/jqBootstrapValidation.js')}}"></script>
<script src="{{asset('vendors/js/pickers/pickadate/picker.js')}}"></script>
<script src="{{asset('vendors/js/pickers/pickadate/picker.date.js')}}"></script>
@endsection

{{-- page scripts --}}
@section('page-scripts')
<script src="{{asset('js/scripts/pages/page-users.js')}}"></script>
<script src="{{asset('js/scripts/navs/navs.js')}}"></script>
<script src="{{asset('js/scripts/forms/validation/form-validation.js')}}"></script>
@endsection