@extends('admin.layouts.main')

<title>
Add Screen

</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">Add Screen</h2>


<form method="POST"  id="myfrm" action="/insert_screen">

    @csrf

<!-- 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">
    </div>

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

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

</div>

</form>

</div>
    </div>

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

                if("{{ session()->get('Success') }}"){
                    toastr.success("{{ session()->get('Success') }}");
                }
                $("#add_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