@extends('layouts.app')
@section('title', isset($category) ? 'Edit Category' : 'Tambah Category')

@section('content')
<div class="content-wrapper">
  <div class="col-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">{{ isset($category) ? 'Edit Category' : 'Tambah Category' }}</h4>
        <form id="CategoryForm" class="forms-sample" method="POST">
          @csrf
          <div class="row">
            <div class="col-md-12">
              <hr>
              <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                      <label>Nama Category</label>
                      <input type="text" name="name" class="form-control" id="name" placeholder="Nama User"
                        value="{{ $category->name ?? '' }}">
                      <div id="name-error" class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="form-group">
                      <label>Description</label>
                      <textarea name="description" id="description" cols="30" rows="10" class="form-control">{{ $category->description ?? '' }}</textarea>
                      <div id="user_email-error" class="invalid-feedback"></div>
                    </div>
                </div>
              </div>
            </div>

            <br><hr><br>
          </div>

          <div class="form-group mt-4 pt-3" style="border-top: 1px solid #eee;">
            <button type="button" id="btn-save" class="btn btn-primary me-2 px-4" style="font-weight: 500; letter-spacing: 0.5px;">
              <i class="mdi mdi-content-save mr-1"></i> {{ isset($category) ? 'Update' : 'Submit' }}
            </button>
            <a href="{{ route('categories.index') }}" class="btn btn-light px-4" style="font-weight: 500;">
              <i class="mdi mdi-close-circle mr-1"></i> Cancel
            </a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@stop

@section('footer')
<script type="text/javascript">
$(document).ready(function(){
  $.ajaxSetup({
    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
  });

  $('#btn-save').on('click', function(){
    var data = {
      name: $('#name').val(),
      description: $('#description').val(),
      _token: '{{ csrf_token() }}'
    };

    // validasi sederhana
    if (data.name == '') {
      Swal.fire({
        title: "Error!",
        text: "Nama Category wajib diisi!",
        icon: "error"
      });
      return;
    }

    var url = "{{ isset($category) ? route('categories.update', $category->id) : route('categories.store') }}";
    var method = "{{ isset($category) ? 'PATCH' : 'POST' }}";

    $.ajax({
      url: url,
      method: method,
      data: data,
      success: function(response){
        if (response.success) {
          Swal.fire({
            title: "Success!",
            text: "{{ isset($category) ? 'Data Category berhasil diupdate!' : 'Data Category berhasil ditambahkan!' }}",
            icon: "success"
          });
          setTimeout(() => { window.location.href = "{{ route('categories.index') }}"; }, 1000);
        } else {
          Swal.fire({
            title: "Gagal!",
            text: response.message || "Terjadi error saat menyimpan data.",
            icon: "error"
          });
        }
      },
      error: function(){
        Swal.fire({
          title: "Gagal!",
          text: "Terjadi error saat menghubungi server.",
          icon: "error"
        });
      }
    });
  });
});
</script>
@stop