@extends('layouts.dashboard')

@section('content')

<x-dashboard.header
    title="Resource Categories"
    url=""
    shortDesc='' />
<div class="row justify-content-between">
    <div class="col-lg-8">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>
                            #
                        </th>
                        <th>
                            <h6 class="m-0">{{'Name'}}</h6>
                        </th>
                        <th>
                            <h6 class="m-0">{{'Description'}}</h6>
                        </th>
                        <th>
                            <h6 class="m-0">{{'Count'}}</h6>
                        </th>
                        <th>
                            <h6 class="m-0">{{'Package'}}</h6>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @php
                    function renderCategories($categories, $parent = null, $level = 0)
                    {
                    foreach ($categories->where('parent', $parent) as $key=>$category) {
                    echo view('components.ui.category-row', [
                    'category' => $category,
                    'level' => $level,
                    'key' => $key
                    ])->render();

                    renderCategories($categories, $category->id, $level + 1);
                    }
                    }
                    @endphp

                    @php
                    renderCategories($categories);
                    @endphp
                </tbody>
            </table>
        </div>
    </div>
    <div class="col-lg-4">
        <form class="p-4" action="{{route('Category.Store')}}" method="post" style="background-color:#fff">
            @csrf
            <h6>Add a new category</h6>
            <div class="d-flex flex-column gap-4">
                <div>
                    <label for="formGroupExampleInput" class="form-label">Category Name</label>
                    <input type="text" class="form-control" name="title">
                </div>
                <div>
                    <label for="formGroupExampleInput" class="form-label">Description</label>
                    <textarea name="desc" class="form-control"></textarea>
                </div>
                <div>
                    <label class="form-label">Parent Category</label>
                    <select name="parent" id="" class="form-select">
                        <option value="" selected>None</option>
                        @if(isset($categories))
                        @foreach($categories as $category)
                        <option value="{{$category->id}}">{{$category->name}}</option>
                        @endforeach
                        @else
                        @endif
                    </select>
                    <small>Assign a parent term to create a hierarchy. The term Jazz, for example, would be the parent of Bebop and Big Band.</small>
                </div>
                <button class="w-100 btn-cta fill">Add New Category</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const buttons = document.querySelectorAll('.delete-cat-btn');
        buttons.forEach(function(btn) {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                if (confirm('Are you sure you want to delete this category? This action cannot be undone.')) {
                    let form = btn.closest('form');
                    if (!form) {
                        const actions = btn.closest('ul');
                        if (actions && actions.nextElementSibling && actions.nextElementSibling.tagName === 'FORM') {
                            form = actions.nextElementSibling;
                        }
                    }
                    if (form) {
                        form.submit();
                    }
                }
            });
        });
    });
</script>
@endpush
@endsection