@extends('layouts.admin')
@section('content')

<div class="main-content-wrap sidenav-open d-flex flex-column">
   <!-- ============ Body content start ============= -->
   <div class="main-content">
      <div class="row">
         <!-- ============Breadcrumb Pagination ============= -->
         <div class="col-sm-11">
            <ul class="breadcrumb">
               <li><a href="{{ url('/admin/links') }}">Links</a></li>
               <li>Edit Links</li>
            </ul>
         </div>
         <!-- ============Back Button ============= -->
         <div class="col-sm-1 back-arrow">
            <div class="text-center">
               <a href="javascript:history.back()"><i class="fas fa-arrow-circle-left fa-2x"></i></a>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col-md-12 text-center pb-3">
            <h3 class="text-blue fw-700">Edit Links</h3>
         </div>
      </div>
      <!-- ============New User Forms============= -->
      <form  method="post" action="{{route('admin.links/updateLinks')}}" id="createLinksForm" >
         @csrf
         <input type="hidden" name="link_id" value="{{ $links->id }}">
         <div class="col-md-8 offset-md-2 pb-4 mt-4">
            <!-- Account Information Form Start-->
            <div class="col" >
               <h3 class="text-blue fw-700 py-3">Edit Links</h3>
               <div class="row">
                  <div class="col-md-12">
                     <div class="form-group">
                        <label for="make" class="form-label">Name<span class="text-danger">*</span></label>
                        <input type="text" class="form-control onlyIgnoreFirstSpace" id="name" name="name" placeholder="Name" value="{{$links->name}}">
                        <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-name"></p>
                     </div>
                  </div>
                  <div class="col-md-12">
                     <div class="form-group">
                        <label  class="form-label"> Url <span class="text-danger">*</span></label>
                        <input type="text" class="form-control onlyIgnoreFirstSpace" id="url" name="url" placeholder="Url" value="{{$links->url}}">
                        <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-url"></p>
                     </div>
                  </div>
                  <div class="col-md-12">
                     <div class="form-group">
                        <label for="make" class="form-label">Status<span class="text-danger">*</span></label>
                        <select class="form-control" name="status">
                           <option value="1" @if($links->status == 1) selected @endif>Active</option>
                           <option value="0" @if($links->status == 0) selected @endif>Inactive</option>
                        </select>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-md-6 mt-4 ">
               <button type="submit" class="btn bg-blue text-white linkBtn">Update</button>
            </div>
         </div>
      </form>
   </div>
</div>
<script>
   $(function(){
     //
     $('.linkBtn').on('click', function() {
       var $this = $(this);
       var loadingText = '<i class="fa fa-circle-o-notch fa-spin"></i> loading...';
       if ($(this).html() !== loadingText) {
         $this.data('original-text', $(this).html());
         $this.html(loadingText);
       }
    });

   //
    $(document).on('submit', 'form#createLinksForm', function (event) {
    event.preventDefault();
    //clearing the error msg
    $('p.error_container').html("");
    $('.error-control').removeClass('border-danger');
         $('.linkBtn').attr('disabled',true);

    var form = $(this);
    var data = new FormData($(this)[0]);
    var url = form.attr("action");

     $.ajax({
         type: form.attr('method'),
         url: url,
         data: data,
         cache: false,
         contentType: false,
         processData: false,
         success: function (response) {

             console.log(response);
             if(response.success==true  ) {

                var user_id = response.user_id;

                 //notify
                toastr.success("Link updated successfully");
                 // redirect to google after 5 seconds
                 window.setTimeout(function() {
                     window.location.reload();
                 }, 2000);

             }
             //show the form validates error
             if(response.success==false ) {
               $('.linkBtn').attr('disabled',false);
                 var loadingText = 'Update';
                 $('.linkBtn').html(loadingText);
                 for (control in response.errors) {
                     $('#error-' + control).html(response.errors[control]);
                 }

                if( response.error_type == 'something_wrong' )
                {
                    toastr.error("Sorry, something went wrong. Please try again later.");
                     window.setTimeout(function() {
                    window.location.reload();
                    $("#createLinksForm").trigger('reset');
                    }, 4000);
                }
             }
         },
         error: function (xhr, textStatus, errorThrown) {
             alert("Error: " + errorThrown);
         }
     });
     return false;
    });
   });

</script>
@endsection