@extends('admin.layouts.main')
@php
  $page_name = 'Category';
@endphp
@section('content')
  <div class="card">
    <div class="card-body">
      <div id="add_edit_box" style="{{ $edit ? '' : 'display: none;' }}">
        <h4 class="mb-4">{{ $edit ? 'Edit' : 'Add' }} {{ $page_name }}</h4>
        <div class="mb-3">
          <form id="category_form" method="POST" action="{{ route('admin.savecategory') }}">
            @csrf
            @if ($edit)
              <input type="hidden" value="{{ enc($category['id'] ?? '') }}" name="edit_id" id="edit_id" required>
            @endif
            <div class="row m-0">
              <div class="col-md-6">
                <div class="mb-3">
                  <label class="form-label" for="category">Category</label>
                  <input type="text" value="{{ $category['name'] ?? '' }}" name="category" id="category"
                    placeholder="Category" class="form-control" required>
                </div>
              </div>
              <div class="col-12"></div>
              <div class="col-md-6">
                <button class="btn btn-sm btn-primary" type="submit">{{ $edit ? 'Save' : 'Submit' }}</button>
                @if ($edit)
                <a href="{{ route('admin.addcategory') }}" class="btn btn-sm btn-danger">Cancel</a>
                @endif
              </div>
            </div>
          </form>
        </div>
      </div>

      <div class="mb-3">
        <div class="d-flex justify-content-between">
          <h4>{{ $page_name }} List</h4>
          <div>
            @if (!$edit)
              <button id="add_category" class="btn btn-sm btn-primary">Add Category</button>
            @endif
          </div>
        </div>
        <div class="table-responsive" id="category_table">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>#</th>
                <th>Category Name</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($categories as $key => $category)
                <tr>
                  <td>{{ $key + 1 }}</td>
                  <td>{{ $category->name }}</td>
                  <td>
                    <a href="{{ route('admin.editcategory', enc($category->id)) }}"
                      class="btn btn-sm btn-warning">Edit</a>
                    <button type="submit" class="btn btn-sm btn-danger" id="delete_button"
                      value="{{ enc($category->id) }}">Delete</button>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
          <div class="mt-3">
            {{ $categories->links() }}
          </div>
        </div>
      </div>
    </div>
  </div>

  @include('components.alertmodal', [
      'modal_id' => 'deleteCategoryModal',
      'form_id' => 'deleteCategoryForm',
      'action' => route('admin.deletecategory'),
      'modal_title' => 'Alert!',
      'input_id' => 'deleteCategoryId',
      'modal_mess' => 'Are you sure you want to delete this category?',
      'button_type' => 'submit',
      'button_id' => 'confirmDeleteCategoryButton',
  ])
@endsection

@section('script')
  <script>
    $(document).on("click", "#delete_button", function() {
      let val = $(this).attr("value");
      $("#deleteCategoryId").val(val);
      $("#deleteCategoryModal").modal("show");
    });
    $(document).on("click", "#add_category", function() {
      $("#add_edit_box").show();
    });
  </script>
@endsection