@extends('dashboard.base')

@section('content')
<div class="container mt-4">
    <h4>Add Standard Sector</h4> 

    {{-- Success message --}}
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    {{-- Add Category Form --}}
    <form action="{{ route('category.store') }}" method="POST" class="mb-4">
        @csrf
        <div class="mb-3">
            <label class="form-label">Sector Name <span class="text-danger">*</span></label>
            <input type="text" name="name" class="form-control" placeholder="Enter sector name" required>
        </div>
        <button type="submit" class="btn btn-primary">Add Sector</button>
    </form>

    {{-- Categories Table --}}
    <div class="card mt-4">
        <div class="card-header bg-light">
            <h5 class="mb-0">Existing Sectors</h5>
        </div>
        <div class="card-body">
            @if($categories->isEmpty())
                <p class="text-muted">No sectors found.</p>
            @else
            <table class="table table-bordered" id="categoriesTable">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Sector Name</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($categories as $index => $category)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>{{ $category->name }}</td>
                            <td>
                                <a href="{{ route('category.edit', $category->id) }}" class="btn btn-sm btn-warning edit-btn" data-id="{{ $category->id }}" data-name="{{ $category->name }}">Edit</a>
                                <form action="{{ route('category.destroy', $category->id) }}" method="POST" style="display:inline;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger"
                                            onclick="return confirm('Are you sure you want to delete this category?')">
                                        Delete
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            {{-- Pagination Controls --}}
            <div class="d-flex justify-content-between align-items-center mt-3" id="pagination-container">
                <button class="btn btn-outline-primary" id="prevPage">Previous</button>
                <span id="pageInfo"></span>
                <button class="btn btn-outline-primary" id="nextPage">Next</button>
            </div>
            @endif
        </div>
    </div>
</div>

{{-- Edit Category Modal --}}
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form id="editForm" method="POST">
        @csrf
        @method('PUT')
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="editModalLabel">Edit Category</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 class="form-label">Sector Name <span class="text-danger">*</span></label>
                <input type="text" name="name" id="editCategoryName" class="form-control" required>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary">Update Category</button>
          </div>
        </div>
    </form>
  </div>
</div>

{{-- JS --}}
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Modal Edit Logic
    const editButtons = document.querySelectorAll('.edit-btn');
    const editForm = document.getElementById('editForm');
    const editName = document.getElementById('editCategoryName');

    editButtons.forEach(btn => {
        btn.addEventListener('click', function () {
            const id = this.getAttribute('data-id');
            const name = this.getAttribute('data-name');
            editName.value = name;
            editForm.action = `/category/${id}`;
        });
    });

    // Pagination Logic
    const table = document.getElementById('categoriesTable');
    if (!table) return;

    const tbody = table.querySelector('tbody');
    const rows = Array.from(tbody.querySelectorAll('tr'));
    const rowsPerPage = 5;
    let currentPage = 1;

    const prevBtn = document.getElementById('prevPage');
    const nextBtn = document.getElementById('nextPage');
    const pageInfo = document.getElementById('pageInfo');

    function renderTable() {
        const totalPages = Math.ceil(rows.length / rowsPerPage);
        tbody.innerHTML = '';

        const startIndex = (currentPage - 1) * rowsPerPage;
        const pageRows = rows.slice(startIndex, startIndex + rowsPerPage);

        pageRows.forEach(row => tbody.appendChild(row));

        pageInfo.textContent = `Page ${currentPage} of ${totalPages}`;
        prevBtn.disabled = currentPage === 1;
        nextBtn.disabled = currentPage === totalPages;
    }

    prevBtn.addEventListener('click', () => {
        if (currentPage > 1) {
            currentPage--;
            renderTable();
        }
    });

    nextBtn.addEventListener('click', () => {
        if (currentPage < Math.ceil(rows.length / rowsPerPage)) {
            currentPage++;
            renderTable();
        }
    });

    renderTable();
});
</script>
@endsection