@extends('home')

@section('pagesection')


<div class="container">
    <div class="subheader">
        <h1 class="subheader-title">
            <i class='subheader-icon fal fa-table'></i> Manage Sub Categories
        </h1>
        <a href="{{ route('subCategory.create') }}"  class="btn btn-primary waves-effect waves-themed text-white"><i
                class="fal fa-plus-circle"></i> Create
        </a>
    </div>
    <div class="row">
        <div class="col-xl-12">
            <div id="panel-1" class="panel">
                <div class="panel-hdr">
                    <h2>
                        Manage <span class="fw-300"><i>SubCategories</i></span>
                    </h2>
                    <div class="panel-toolbar">
                        <button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"></button>
                        <button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
                        <button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10" data-original-title="Close"></button>
                    </div>
                </div>
                <div class="panel-container show">
                    <div class="panel-content">
                        <!-- datatable start -->
                        <table id="dt-basic-example" class="table table-bordered table-hover table-striped w-100">
                            <thead>
                                <tr>
                                    <th>Sno</th>
                                    <th>Name</th>
                                    <th>Category</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($data as $item)

                                <tr>
                                    <td scope="row">{{ $loop->iteration }}</td>
                                    <td>{{ $item->name }}</td>
                                    <td>{{ $item->category->name }}</td>
                                    <td>
                                        <a href="{{ route('subCategory.edit',$item->id) }}" class="btn btn-info">Edit</a>
                                        <a href="{{ route('subCategory.destroy',$item->id) }}" class="btn btn-danger" onclick="event.preventDefault();
                                            document.getElementById('subCategory-delete-form-{{ $loop->iteration }}').submit();" >Delete</a>

                                        <form id="subCategory-delete-form-{{ $loop->iteration }}" action="{{ route('subCategory.destroy',$item->id) }}" method="POST" class="d-none">
                                            @method('DELETE')
                                            @csrf
                                        </form>

                                    </td>
                                </tr>

                            @endforeach
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Sno</th>
                                    <th>Name</th>
                                    <th>Category</th>
                                    <th>Action</th>
                                </tr>
                            </tfoot>
                        </table>
                        <!-- datatable end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection