@extends('layout.app')

@section('content')
<div class="container">
  <div class="page-inner">
    
    <div class="page-header">
      <!-- Add Brand Button -->
      <h3 class="fw-bold mb-3">
        <a href="#" class="btn btn-primary px-4 py-2 shadow" data-bs-toggle="modal" data-bs-target="#addBrandModal" onclick="event.preventDefault();">+ Add Category</a>
      </h3>

      @include('pages.Brand.add') <!-- Assuming this includes the "Add Brand" modal -->

      <ul class="breadcrumbs mb-3">
        <li class="nav-home"><a href="#"><i class="icon-home"></i></a></li>
        <li class="separator"><i class="icon-arrow-right"></i></li>
        <li class="nav-item"><a href="#">Tables</a></li>
        <li class="separator"><i class="icon-arrow-right"></i></li>
        <li class="nav-item"><a href="#">Datatables</a></li>
      </ul>
    </div>

    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <div class="table-responsive">
              <table id="basic-datatables" class="text-nowrap">
                <thead>
                  <tr>
                    <th>Id</th>
                    <th>Category Name</th>
                    <th>Created_at</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ($brands->sortByDesc('id')->take(7) as $b)
                    <tr>
                      <td>{{ $b->id }}</td>
                      <td>{{ $b->name }}</td>
                      <td>{{ $b->created_at }}</td>
                      <td>
                        <button class="btn btn-sm btn-primary me-1" data-bs-toggle="modal" data-bs-target="#editBrandModal{{ $b->id }}">Edit</button>
                        <a href="{{ route('brand.delete', $b->id) }}" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this category?')">Delete</a>
                      </td>
                    </tr>

                    <!-- Edit Modal -->
                    <div class="modal fade" id="editBrandModal{{ $b->id }}" tabindex="-1" aria-labelledby="editBrandLabel{{ $b->id }}" aria-hidden="true">
                      <div class="modal-dialog">
                        <form action="{{ route('update.brand', $b->id) }}" method="POST">
                          @csrf
                          <div class="modal-content">
                            <div class="modal-header">
                              <h5 class="modal-title" id="editBrandLabel{{ $b->id }}">Edit Brand</h5>
                              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                              <div class="mb-3">
                                <label for="brandName{{ $b->id }}" class="form-label">Category Name</label>
                                <input type="text" class="form-control" name="name" id="brandName{{ $b->id }}" value="{{ $b->name }}" required>
                              </div>
                            </div>
                            <div class="modal-footer">
                              <button type="submit" class="btn btn-success">Update</button>
                              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            </div>
                          </div>
                        </form>
                      </div>
                    </div>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection