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

<section class="section profile">
  <div class="col-xl-12">
    <form id="translations_form">
      @csrf
      <input type="hidden" name="page" value="{{ $page }}">
      <div class="card">
        <div class="card-body pt-4">
          @forelse($fields as $field)
          @php
            $label = ucwords(str_replace('_', ' ', $field->trans_key));
          @endphp
          <div class="row mb-3">
            <div class="col-md-12">
              <label class="lblprofile">{{ $label }}</label>
            </div>
            <div class="col-md-12">
              <input type="text" class="form-control" name="translations[{{$field->trans_key}}]" value="{{ $field->trans_value ?? '' }}" placeholder="English">
            </div>
          </div>
          @empty
          <div class="row mb-3">
            <div class="col-md-12">
              <p class="text-muted">No <code>{{ $page }}</code> keys found in the language file. Add keys under "{{ $page }}" in your JSON file (e.g. <code>en.json</code>) to edit them here.</p>
            </div>
          </div>
          @endforelse
          <div class="text-end">
            <button type="button" id="save_translations" class="btn btn-primary">Save</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</section>
@endsection

@section('footer_scripts')
<script>
  $(document).ready(function () {
    $(document).on('click', '#save_translations', function () {
      $('#save_translations').attr('disabled', true);
      $.ajax({
        url: APP_URL + '/save-translations',
        method: 'post',
        data: $('#translations_form').serialize(),
        success: function (res) {
          if (res.status) {
            $('#alertMsg .pagemsgcontent').html('<div class="alert alert-success">Translations updated successfully.</div>');
            $('#alertMsg').modal('show');
            $('#save_translations').attr('disabled', false);
          }
        },
        error: function (res) {
          ajax_error(res);
        }
      });
    });
  });
</script>
@endsection