@extends('admin.master')
@section('title')
    {{ 'Add Category' }}
@endsection
<style>
    .dataTables_length {
        margin-left: 20px;
    }

    .dataTables_info {
        margin-left: 20px;

    }

    .dataTables_filter {
        display: flex;
        justify-content: flex-end;
    }

    .dataTables_filter label {
        margin-right: 20px;

    }

    .dataTables_wrapper .row {
        --bs-gutter-x: 0 !important;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .dataTables_paginate {
        display: flex;
        justify-content: flex-end;
        margin-right: 20px;
        margin-top: 20px;
    }

    .dataTables_wrapper {
        width: 100%;
        border-collapse: collapse;
        padding-inline: 20px !important;
        table-layout: fixed !important;

        /* padding-inline: 20px ; */
    }

    .dataTables_length label select {
        width: 40px;
        height: 40px;
        display: inline-block;
    }

    /* .table-responsive {
        overflow-x: auto; */
    /* Add additional styles as needed */
    /* } */

    /* Responsive table layout */
    .qr-table {
        width: 100% !important;
        table-layout: fixed !important;
        /* Prevent individual column widths from affecting layout */
    }

    input[type="color"] {
        border: none;
        padding: 0;
        width: 30px;
        /* Adjust this as needed */
        height: 30px;
        /* Adjust this as needed */
        border-radius: 50%;
        /* Make it round */
        cursor: pointer;
    }
    .hideClass{
        display:none !important;
    }
</style>
@section('template')
<div class="container-xxl flex-grow-1 container-p-y">
    <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-bolder">Create Category</h4>
    <div class="row">
        <div class="col-xl">                
            <div class="card mb-4">
                <div class="card-body">
                    <div class="hideClass alert alert-success success_msg msg_padding" role="alert">
                        Test
                    </div>
                    <div class="hideClass alert alert-danger danger_alert_msg msg_padding" role="alert">
                        Test
                    </div>
                    <div id="step1">
                        <h5>Basic Details</h5>
                        <form method="POST" action="{{route('category.store')}}" enctype='multipart/form-data'>
                            @csrf
                            @include('admin.categories.form')
                        </form>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>
</script>
<script src="{{ asset('assets/js/qrcodegenerator.js') }}"></script>
@endsection