@extends('layouts.template')

@section('title')
Tambah Master Unit | SIMRS
@endsection

@section('pagetitle')
Tambah Master Unit
@endsection

@section('breadcumb')
<nav aria-label="breadcrumb" role="navigation" class="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Beranda</a></li>
        <li class="breadcrumb-item"><a href="#">Data Master</a></li>
        <li class="breadcrumb-item active" aria-current="page">Tambah Data Master Unit</li>
    </ol>
</nav>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="card">
                <form action="{{ route('master.unit.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                @if (count($errors) > 0)
                    <div class="alert alert-danger">
                        <strong>Whoops!</strong> There were some problems with your input.
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                    <div class="card-header">
                        <h4 class="card-title">
                            <strong>Form Tambah Unit</strong>
                        </h4>
                    </div>
                    <br>
                    <div class="card-content">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-6">
                                    <label>Logo Rumah Sakit <star>*</star></label>
                                    <input name="image1" type="file" class="dropify" data-height="150" data-allowed-file-extensions="png" />
                                    @error('image1')
                                        <div class="alert alert-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label>Logo Partner</label>
                                    <input name="file1" type="file" class="dropify" data-height="150" data-allowed-file-extensions="png" />
                                </div>

                            </div>
                        </div>
                        <div class="form-group">
                            <label>Kode <star>*</star></label>
                            <input type="text" class="form-control" name="unit_kode">
                            <span class="help-block" style="color:red; font-size:12px;">5 Karakter (Ex: AA001, BB001,AB001)</span>
                            <!--  -->
                            <label>Nama Unit <star>*</star></label>
                            <input type="text" class="form-control" name="unit_nama">
                        </div>

                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-6">
                                    <label>Telepon</label>
                                    <input type="text" class="form-control" name="unit_telp" maxlength="20">
                                </div>
                                <div class="col-md-6">
                                    <label>Email</label>
                                    <input type="text" class="form-control" name="unit_email" maxlength="100">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="control-label"> Provinsi </label>
                                    <div class="">
                                        <select class="form-control select2" data-width="100%" id="provinsi" name="unit_provinsi">
                                        <option hidden>-Pilih Provinsi</option>
                                        @foreach ($provinsi as $item)
                                        <option value="{{ $item->provinsi_id }}">{{ $item->provinsi_nama }}</option>
                                        @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="control-label"> Kabupaten/Kota </label>
                                    <div class="x">
                                        <select class="select2 form-control" id="city" name="unit_kabupaten"></select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="control-label"> Kecamatan </label>
                                    <div class="selectpicker">
                                        <select class="select2 form-control" id="kecamatan" name="unit_kecamatan"></select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="control-label"> Kelurahan/Desa </label>
                                    <!--  -->
                                    <div class="selectpicker">
                                        <select class="select2 form-control" id="kelurahan" name="unit_kelurahan"></select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Alamat Lengkap <star>*</star></label>
                            <input type="text" class="form-control" name="unit_alamat">
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-4">
                                    <label>Kode POS</label>
                                    <input type="text" class="form-control" name="unit_kodepos">
                                </div>
                                <div class="col-md-4">
                                    <label>Longitude</label>
                                    <input type="text" class="form-control" name="unit_lat">
                                </div>
                                <div class="col-md-4">
                                    <label>Latitude</label>
                                    <input type="text" class="form-control" name="unit_long">
                                </div>
                            </div>
                        </div>
                        <div style="display: flex; justify-content: flex-end">
                            <button type="cancel" class="btn btn-fill btn-danger">Cancel</button>
                            <button type="submit" class="btn btn-fill btn-info">Submit</button>
                        </div>
                    </div>
                </form>
            </div> <!-- end card -->
        </div> <!--  end col-md-6  -->
    </div>
</div>
<script>
   // $('.dropify').dropify();
</script>


@endsection
@section('script')
<link href="{{asset('assets/vendor/select2/select2.min.css')}}" rel="stylesheet" />
<script src="{{asset('assets/vendor/select2/select2.min.js')}}"></script>
<script type="text/javascript">

  $(document).ready(function() {
    $('.select2').select2();
    $('.cari').select2({
    placeholder: 'Cari...',
    ajax: {
      url: '/loadDataProvinsi',
      dataType: 'json',
      delay: 250,
      processResults: function (data) {
        return {
          results:  $.map(data, function (item) {
            return {
              text: item.provinsi_nama,
              id: item.provinsi_id
            }
          })
        };
      },
      cache: true
    }
  });


  $('#provinsi').on('change', function() {
    var provinsiID = $(this).val();
        if(provinsiID) {
            $.ajax({
                url: '/getDataKabupaten/'+provinsiID,
                type: "GET",
                data : {"_token":"{{ csrf_token() }}"},
                dataType: "json",
                success:function(data)
                {
                    if(data){
                    $('#city').empty();
                    $('#city').append('<option hidden>Pilih</option>');
                    $.each(data, function(key, row){
                        $('#city').append('<option value="'+ row.kabupaten_id +'">' + row.kabupaten_name+ '</option>');
                    });
                }else{
                    $('#city').empty();
                }
                }
            });
        }else{
            $('#city').empty();
        }
    });

    $('#city').on('change', function() {
        var cityID = $(this).val();
        if(cityID) {
            $.ajax({
                url: '/getDataKecamatan/'+cityID,
                type: "GET",
                data : {"_token":"{{ csrf_token() }}"},
                dataType: "json",
                success:function(data)
                {
                    if(data){
                    $('#kecamatan').empty();
                    $('#kecamatan').append('<option hidden>Pilih</option>');
                    $.each(data, function(key, row){
                        $('#kecamatan').append('<option value="'+ row.kecamatan_kode +'">' + row.kecamatan_nama+ '</option>');
                    });
                }else{
                    $('#kecamatan').empty();
                }
                }
            });
        }else{
            $('#kecamatan').empty();
        }
    });

    $('#kecamatan').on('change', function() {
        var kecamatanID = $(this).val();
        if(kecamatanID) {
            $.ajax({
                url: '/getDataKelurahan/'+kecamatanID,
                type: "GET",
                data : {"_token":"{{ csrf_token() }}"},
                dataType: "json",
                success:function(data)
                {
                    if(data){
                    $('#kelurahan').empty();
                    $('#kelurahan').append('<option hidden>Pilih</option>');
                    $.each(data, function(key, row){
                        $('#kelurahan').append('<option value="'+ row.kelurahan_id +'">' + row.kelurahan_nama+ '</option>');
                    });
                }else{
                    $('#kelurahan').empty();
                }
                }
            });
        }else{
            $('#kelurahan').empty();
        }
    });

});
</script>

@endsection