@include('links.header')

<b>Edit 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.update',$state->id) }}"  enctype="multipart/form-data"    >

    @csrf

    @method('PATCH')

    <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" value="{{$state->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"> {{$state->points}} </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">Blurb </label>

            <div class="form-group form-float">

                <div class="form-line">

                    <textarea name="blurb" id="blurb" class="form-control" rows="10"> {{$state->blurb}} </textarea>

                </div>

            </div>

            @error('blurb')

                <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-Cord for Title </label>

            <div class="form-group form-float">

                <div class="form-line">

                    <input type="text" name="x_cord_title" id="x_cord_title" class="form-control" rows="10" value="{{$state->x_cord_title}}"> 

                </div>

            </div>

            @error('x_cord_title')

                <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-Cord for Title </label>

            <div class="form-group form-float">

                <div class="form-line">

                <input type="text" name="y_cord_title" id="y_cord_title" class="form-control" rows="10" value="{{$state->y_cord_title}}">

                </div>

            </div>

            @error('y_cord_title')

                <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>

        @if(!empty($state->image))

            <div class="col-md-6 col-sm-6" id="image_div">

                <img src="{{ url('storage/upload/states_images/'.$state->image) }}" width="100" />

                <br/><br/>

                <div><input type="button" class="btn btn-defualt" onclick="removeImage({{$state->id}})"  value="Remove"> </div>

            </div>

        @endif

      

    </div>

              



    

</div>

<div class="row clearfix cform"></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 removeImage(product_id){

    $.ajaxSetup({



        headers: {



            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')



        }



    });

    $.ajax({



        type:'POST',



        url:'/seedmagic/removeImage/states',



        data:{id:product_id},



        success:function(result){



          

            if(result.status==true){

                $("#image_div").hide();

            }

            

           



        }



    });

   

}



function resetFile(){

    $("#fle-input").val('');

    $(".file-input .label").html("");

    $('.rm-btn').hide();



}



</script>

@endsection

@include('links.footer')