@include('links.header')
<b>Add New State</b>
<a href="{{url('seedmagic/states')}}" class="btn btn-primary pull-right" >Back</a>
<br><br>
@if (Session::has('msg'))
<div class="alert bg-green alert-dismissible" role="alert"><strong>Success! </strong>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    {!! session('msg') !!}
</div>
  @endif
  @if (Session::has('msg_e'))
  <div class="alert bg-red alert-dismissible" role="alert"><strong>Danger! </strong>
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      {!! session('msg_e') !!}
  </div>
    @endif
<form method="POST" action="{{ route('states.store') }}" enctype="multipart/form-data" >
    @csrf
    <div class="row clearfix">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

    <div class="row clearfix cform">
        <div class="col-md-6 col-sm-6">
          <label class="form-label">Name </label>
            <div class="form-group form-float">
                <div class="form-line">
                    <input type="text" name="name" id="name" class="form-control" required >
                </div>
            </div>
            @error('name')
                <span class="invalid-feedback" role="alert">
                    <i style='color:red'>{{ $message }}</i>
                </span>
            @enderror
        </div>   
        <div class="col-md-6 col-sm-6">
          <label class="form-label">Points </label>
            <div class="form-group form-float">
                <div class="form-line">
                    <textarea name="points" id="points" class="form-control" rows="10"> </textarea>
                </div>
            </div>
            @error('points')
                <span class="invalid-feedback" role="alert">
                    <i style='color:red'>{{ $message }}</i>
                </span>
            @enderror
        </div>   
        <div class="col-md-6 col-sm-6">
          <label class="form-label">X-Points </label>
            <div class="form-group form-float">
                <div class="form-line">
                    <input type="text" name="x_points" id="x_points" class="form-control" rows="10">
                </div>
            </div>
            @error('x_points')
                <span class="invalid-feedback" role="alert">
                    <i style='color:red'>{{ $message }}</i>
                </span>
            @enderror
        </div>   
        <div class="col-md-6 col-sm-6">
          <label class="form-label">Y-Points </label>
            <div class="form-group form-float">
                <div class="form-line">
                <input  type="text" name="y_points" id="y_points" class="form-control" rows="10"> 
                </div>
            </div>
            @error('y_points')
                <span class="invalid-feedback" role="alert">
                    <i style='color:red'>{{ $message }}</i>
                </span>
            @enderror
        </div>   
        <div class="col-md-6 col-sm-6">
                        
            <div class='file-input'>
                <input type='file' name="image" id="file-input">
                <span class='button'>Choose</span>
                <span class='label' data-js-label>No file selected</label>
            </div>
            <span class='button rm-btn' onclick="resetFile()"> Remove </span>

        </div>
</div>

<div class="row clearfix cform">
    <div class="button-demo" style="text-align:center;">
        <button type="submit" id="submitUser" class="btn btn-primary waves-effect">Submit</button>
    </div>
</div>
</div>
</div>
</form>
<style> 
.file-input {
  display: inline-block;
  text-align: left;
  background: #fff;
  padding: 16px;
 position: relative;
  border-radius: 3px;
}

.file-input > [type='file'] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
  cursor: pointer;
}

.file-input > .button {
  display: inline-block;
  cursor: pointer;
  background: #eee;
  padding: 8px 16px;
  border-radius: 2px;
  margin-right: 8px;
}

.file-input:hover > .button {
  background: dodgerblue;
  color: white;
}

.file-input > .label {
  color: #333;
  white-space: nowrap;
  opacity: .3;
}

.file-input.-chosen > .label {
  opacity: 1;
}
</style>  
@section('extra-script')
<script>

 // Also see: https://www.quirksmode.org/dom/inputfile.html

var inputs = document.querySelectorAll('.file-input')
$('.rm-btn').hide();
for (var i = 0, len = inputs.length; i < len; i++) {
  customInput(inputs[i])
}

function customInput (el) {
  const fileInput = el.querySelector('[type="file"]')
  const label = el.querySelector('[data-js-label]')
  
  fileInput.onchange =
  fileInput.onmouseout = function () {
    if (!fileInput.value) return
    
    var value = fileInput.value.replace(/^.*[\\\/]/, '')
    el.className += ' -chosen'
    label.innerText = value;
    extension = fileInput.value.split('.')[1];
    $('.rm-btn').show();
    var file_size = $("#file-input")[0].files[0].size/1024/1024;
    if((extension != 'jpg' && extension != 'jpeg' && extension != 'png') || file_size.toFixed(2)>5){
        $("#file-input").val("");
        $('.rm-btn').hide();

        label.innerText="No File Selected";
        swal({
            title: "Invalid File.Please Uplod Valid File with jpeg,jpg and png less than 5MB.",
            text: "",
            type: "warning",
            showCancelButton: false,
            closeOnConfirm: false
        }, function () {
            swal("Please Uplod Valid File wiht jpeg,jpg and png.", "success");
        });
      
    
    }

  }
}



function resetFile(){
    $("#fle-input").val('');
    $(".file-input .label").html("");
    $('.rm-btn').hide();

}
</script>
@endsection
@include('links.footer')