@extends('admin.layouts.app')

@section('title', 'Edit Province')
@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Province</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{route('admin.home')}}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{route('admin.province.index')}}">Province</a></li>
                    <li class="breadcrumb-item active">Edit Province</li>
                </ol>
            </div>

        </div>
    </div>
</div>
<div class="row">
    <div class="overlay d-none">
        <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
        </div>
    </div>
    <div class="col-lg-8">
      <div class="card">
          <!-- <div class="card-header align-items-center d-flex">
              <h4 class="card-title mb-0 flex-grow-1">Tambah Provinsi</h4>

              <div class="flex-shrink-0">
                  <button form="form" type="submit"  class="btn btn-primary btn-icon waves-effect waves-light"><i class="ri-save-line"></i></button>
              </div>
          </div> -->
          <div class="card-body">
            <form id="form" action="{{route('admin.province.update',['id'=>$province->id])}}" method="post" autocomplete="off">
                  {{ csrf_field() }}
                  <input type="hidden" name="_method" value="put">
                  <div class="form-group">
                    <label for="name" class="col-form-label">Name <b class="text-danger">*</b></label>
                    <input type="text" class="form-control" id="name" name="name" placeholder="Name" required  value="{{$province->name}}">
                  </div>
            </form>
          </div>
          
        </div>
        <div class="text-end mb-4">
              <button form="form" type="submit" class="btn btn-success w-sm">Submit</button>
          </div>
      </div>
</div>
@endsection

@push('scripts')
<script src="{{asset('creative/component/validate/jquery.validate.min.js')}}"></script>
<script>
  $(document).ready(function(){
      $("#form").validate({
        errorElement: 'div',
        errorClass: 'invalid-feedback',
        focusInvalid: false,
        highlight: function (e) {
          $(e).closest('.form-group').removeClass('has-success').addClass('was-validated has-error');
        },

        success: function (e) {
          $(e).closest('.form-group').removeClass('has-error').addClass('has-success');
          $(e).remove();
        },
        errorPlacement: function (error, element) {
          if(element.is(':file')) {
            error.insertAfter(element.parent().parent().parent());
          }else
          if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
          }
          else
          if (element.attr('type') == 'checkbox') {
            error.insertAfter(element.parent());
          }
          else{
            error.insertAfter(element);
          }
        },
        submitHandler: function() {
          $.ajax({
            url:$('#form').attr('action'),
            method:'post',
            data: new FormData($('#form')[0]),
            processData: false,
            contentType: false,
            dataType: 'json',
            beforeSend:function(){
               $('.overlay').removeClass('d-none');
            }
          }).done(function(response){
                $('.overlay').addClass('d-none');
                if(response.status){
                  document.location = response.results;
                }
                else{
                  Swal.fire({ title: "Error!", text: response.message, icon: "error", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
                }
                return;
          }).fail(function(response){
              $('.overlay').addClass('d-none');
              var response = response.responseJSON;
              Swal.fire({ title: "Error!", text: response.message, icon: "error", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
          })
        }
      });
  });
</script>
@endpush