@extends('admin.layouts.main')

<title>

Screen Update

</title>

 @section('content')
 <section id="content-wrapper">
 <div class="container">
  <div class="row justify-content-center">
    <div class="col-xl-6 col-lg-6 col-md-10 col-sm-12 col-12">
    <div id="content-wrapper" class="screen-form">
    <h2 class="form-heading">Update Screen</h2>


    <form method="POST" action="/update_screen_details" id="myfrm">
      @csrf
        @foreach($get_screen as $gc)
        <input type="hidden" name="screen_id" id="screen_id" value="{{$gc->id}}">

<!-- Screen id:<input type="text" name="screen_id"> -->
<div class="row justify-content-center">
    <div class="col-md-12">
    <label> Screen name:</label>
    <input type="text"  id="screen_name" name="screen_name" class="form-control" value="{{$gc->screen_name}}">
    </div>

    <div class="col-md-12">
    <label> Sheet id: </label>
    <input type="text" id="sheet_id" name="sheet_id" class="form-control" value="{{$gc->sheet_id}}">
    </div>
    <div class="col-md-12">
    <label> Sheet name:</label>
    <input type="text" id="sheet_name" name="sheet_name" class="form-control"  value="{{$gc->sheet_name}}">
    </div>

<div class="col-lg-8 mt-3">
<button type="submit"  class="btn custom-btn" id="update_screen">Update Screen</button>
</div>

</div>
@endforeach

</form>

</div>
    </div>

</div></div>
</section>
         <div class="overlapbg"></div>
           <script>
        $(document).ready(function() {

                if("{{ session()->get('Success') }}"){
                    toastr.success("{{ session()->get('Success') }}");
                }
                $("#update_screen").click(function(event){
            event.preventDefault();

            var screen_name=$("#screen_name").val();
            var sheet_name=$("#sheet_name").val();
            var sheet_id=$("#sheet_id").val();

            if (screen_name.trim() === "") {
               toastr.error("Please enter name for your screen");  
                 $("#screen_name").css("border", "1px solid red");  
    $("#screen_name").focus();  
               return;
            }
            if (sheet_name.trim() === "") {
               toastr.error("Please enter sheet name of Google spreatsheet");  
                 $("#sheet_name").css("border", "1px solid red");  
    $("#sheet_name").focus();  
               return;
            }  if (sheet_id.trim() === "") {
               toastr.error("Please enter Googlesheet spreadsheet id");  
                 $("#sheet_id").css("border", "1px solid red");  
    $("#sheet_id").focus();  
               return;
            }
            $("#myfrm").submit();
               
        // // show when page load
            // toastr.success("hello");
        });  });
      
        $("#screen_name").keyup(function(event){
              $("#screen_name").css("border-color", "#ccc");

}); 
$("#sheet_name").keyup(function(event){
              $("#sheet_name").css("border-color", "#ccc");

});
 $("#sheet_id").keyup(function(event){
              $("#sheet_id").css("border-color", "#ccc");

});
    
  
    </script>

       @endsection