@extends('admin.layouts.master')

@section('page-title')
    Sub 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>Category</th>
                            <th>Sub Category Name</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>

            <!-- Modal -->
            <div class="modal fade" id="modalAdd" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">

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

                        <form id="subcategory">
                            @include('admin.layouts.validationLayout')

                            <div class="modal-body">
                <input type="hidden" name="id" class="id">

                <!-- Row 1 : Category Select + Status -->
                <div class="row align-items-center mb-3">
                    <!-- 70% -->
                    <div class="col-12 col-md-12">
                        <select name="category_id" class="form-control category_id">
                            <option value="">Select Category</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Row 2 : Sub Category Name + Status -->
                <div class="row align-items-center mb-3">
                    <!-- 70% -->
                    <div class="col-12 col-md-8">
                        <input type="text" class="form-control name" name="name" placeholder="Sub Category Name">
                    </div>

                    <!-- 30% -->
                    <div class="col-12 col-md-4 mt-2 mt-md-0">
                        @include('admin.layouts.status')
                    </div>
                </div>
            </div>


                            <div class="modal-footer">
                                <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">
                <div class="modal-dialog">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">Confirm Delete</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></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/subcategory/subcategory.js') }}"></script>
@endsection