@extends('layouts.dashboard')
@section('content')
<div class="container">    
    <div class="contentbox">
        <div class="contentboxheading"><i class="las la-heartbeat"></i><span id="formStatus">Add New Category</span> 
        <a class="btn btn-primary pull-right mt-2 mr10 btn-form-toggle"><span>Show</span> Form</a>  
        </div>
        <div class="contentboxinner">
            @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif
            <div class="form-container fhide">
                <form class="row g-3" id="savecategory" >
                    @csrf
                    <input type="hidden"  name="hdn_id" id="hdn_CategoryId" readonly>   
                    <div class="alert alert-danger errorMsgUpdt" style="display:none;"></div>
                        <div class="col-md-4">
                            <label for="categoryName" class="form-label ml10">Category Name<span style="color:red">*</span></label>
                            <input type="text" class="form-control" id="categoryName" name="category_name" placeholder="Category Name">
                        </div>
                        <div class="col-4">
                            <label for="txtDescription" class="form-label ml10"> Description</label>
                            <input type="text" class="form-control" id="txtDescription" name ="description" placeholder="Description">
                        </div>
                        <div class="col-4">
                            <div class="mt-2">
                                <button type="button" id = "addCategory" class="btn btn-primary mt-4 mb-4">Submit</button>
                            </div>
                        </div>
                </form>  
            </div>    
            <div class="row">
                <div class="subheading mt-2">Existing(s) Category Details</div>
                <div class="table-responsive mt-3">
                    <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Action</th>
                                    <th scope="col">Category Name</th>
                                    <th scope="col">Description</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Added By</th>
                                </tr>
                            </thead>
                            <tbody id="ajaxData">@include('category.addCategory_ajax')</tbody>
                    </table>
                </div>
            </div>
        </div>         
    </div>
</div>
@endsection