@extends('layouts.sidebar')
@section('title', 'Nomadic-CMS')
@section('content')
<div class="pagetitle">
  <h1>{{$page}} Page</h1>
</div>

<section class="section profile">
  <div class="col-xl-12">
    @if(session('success'))
    <div class="alert alert-success p-2">{{session('success')}}</div>
    @endif

    <!-- Add New Terms & Services Form -->
    <div class="card">
      <div class="card-header">Add New Terms &amp; Services</div>
      <div class="card-body">
        <form method="POST" action="">
          @csrf
          <div class="mb-3">
            <label for="version" class="form-label">Version</label>
            <input type="text" class="form-control" id="version" name="version" placeholder="e.g., 1.0, 2.0" required>
          </div>
          <div class="mb-3">
            <label for="content" class="form-label">Content</label>
            <textarea class="form-control" id="content" name="content" rows="6" required></textarea>
          </div>
          <button type="button" class="btn btn-success" id="btn_terms">Add Terms</button>
        </form>
      </div>
    </div>

    <!-- Terms & Services Grid -->
    <div class="card mb-4">
      <div class="card-header">Terms &amp; Services</div>
      <div class="card-body p-0">
        <table class="table table-bordered table-striped mb-0">
          <thead>
            <tr>
              <th>ID</th>
              <th>Version</th>
              <th>Content</th>
              <th>Created Date</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            @php $latestId = $files->first() ? $files->first()->id : null; @endphp
            @foreach($files as $terms)
              <tr>
                <td>{{ $terms->id }}</td>
                <td>{{ $terms->version ?? '-' }}</td>
                <td>{{ \Illuminate\Support\Str::limit(strip_tags($terms->content), 80) }}</td>
                <td>{{ $terms->created_at ? date('Y-m-d H:i', strtotime($terms->created_at)) : '-' }}</td>
                <td>
                  @if($terms->id === $latestId)
                  <button type="button" class="btn btn-success btn-edit" data-id="{{ $terms->id }}">Edit</button>
                  @else
                    <span class="text-muted">Locked</span>
                  @endif
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>
@endsection
@section('footer_scripts')
<script src="https://cdn.tiny.cloud/1/7oxmjjhuf38181ubsazv0hcwhi602g0gw8bbalyo8kvqttzl/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
  tinyMCE.init({
    selector: 'textarea#content',
    plugins: 'anchor autolink link code',
    menubar: '',
    toolbar: 'bold italic underline link bullist code',
  });
  $(document).ready(function () {
    $(document).on('click','#btn_terms',function(){
      $('#btn_terms').prop('disabled', true);
      let version = $('#version').val();
      let content = tinyMCE.get('content').getContent();
      $.ajax({
        type: 'POST',
        dataType: 'json',
        data: {_token:_token, version:version, content:content},
        url: APP_URL+"/save-terms-services",
        success: function(res) {
          if(res.status){
            window.location.reload();
          }
        },
        error: function(res) {                    
          ajax_error(res);
          $('#btn_terms').prop('disabled', false);
        }
      });
    });

    $(document).on('click','.btn-edit',function(){
      let termsid = $(this).data('id');
      $.ajax({
        type: 'POST',
        dataType: 'json',
        data: {_token:_token, termsid:termsid},
        url: APP_URL+"/get-terms-services",
        success: function(res) {
          if(res.status){
            $('#version').val(res.data.version);
            tinyMCE.get('content').setContent(res.data.content);
            $('html, body').animate({ scrollTop: 0 }, 'fast');
          }
        },
        error: function(res) {                    
          ajax_error(res);
        }
      });
    });
  });
</script>
@endsection