@extends('admin.layouts.master')

@section('page-title')
    Category Setup
@endsection

@section('main-content')
<div class="dashboard-main-body">

    <div class="container">
        @include('admin.layouts.errorLayout')
        @include('admin.layouts.successLayout')

        <div class="card">

            <div class="card-header">
                <button type="button" class="btn btn-primary create py-4 d-flex">
                    <iconify-icon icon="ic:baseline-plus" class="icon text-xl"></iconify-icon>
                    Add New
                </button>
            </div>

            <div class="card-body">
                <table class="table bordered-table" id="example">
                    <thead>
                        <tr>
                            <th class="text-start">S No</th>
                            <th>Name</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>

            <!-- Modal -->
            <div class="modal fade" id="modalAdd" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-md">
                    <div class="modal-content">

                        <!-- Header -->
                        <div class="modal-header">
                            <h6 class="modal-title">Create Category</h6>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <!-- Form -->
                        <form id="category">
                            @include('admin.layouts.validationLayout')
                            <!-- Body -->
                            <div class="modal-body">
                                <div class="row align-items-center mb-3">
                                    <input type="hidden" name="id" class="id">
                                    <!-- 70% width -->
                                    <div class="col-12 col-md-8">
                                        <input type="text" class="form-control name" name="name" placeholder="Category Name">
                                    </div>
                                    <!-- 30% width -->
                                    <div class="col-12 col-md-4 mt-2 mt-md-0">
                                        @include('admin.layouts.status')
                                    </div>
                                </div>
                            </div>
                            <!-- Footer -->
                            <div class="modal-footer d-flex justify-content-end flex-wrap gap-2">
                                <button type="submit" class="btn btn-primary">Save</button>
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            </div>

                        </form>

                    </div>
                </div>
            </div>


            <!-- Modal: Confirm Delete -->
                    <div id="deleteModal" class="modal fade" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">

                                <div class="modal-header">
                                    <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>

                                <div class="modal-body">
                                    Do you want to delete this record?
                                </div>

                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                    <button type="button" id="btnDelete" class="btn btn-danger">Delete</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Delete Modal -->

        </div>

    </div>
</div>
@endsection

@section('script')
<script src="{{ asset('admin/myjs/category/category.js') }}"></script>
@endsection