@extends('admin.layouts.app')
@push('style')

<link href="{{asset('admin/assets/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('admin/assets/libs/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('admin/assets/libs/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('admin/assets/libs/datatables.net-select-bs5/css//select.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<!-- third party css end -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<style>
    .app-title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        background-color: #FFF;
        margin: -30px -30px 30px;
        padding: 23.7px 30px;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .app-title h1,
    .app-title .h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 400;
    }

    .app-title p {
        margin-bottom: 0;
        font-style: italic;
    }

    .app-title a {
        color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    }

    .block-header h2 {
        margin-top: 10px !important;
        font-size: 20px;
    }

    select {
        width: 100%;
        padding: 14px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
</style>
<style>
    .form-outline {
        position: relative;
        margin-bottom: 1rem;
        margin-top: 0.67rem;
    }

    .form-outline .form-control {
        width: 100%;
        padding: .375rem 2.25rem .375rem 2.5rem; /* Adjust padding for the icon and space between icon and text */
        font-size: 1rem;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        
    }

    .form-outline .form-control:focus {
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
    }

    .search-icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.25rem;
        margin-right: 5px; /* Add margin between the icon and text */
    }
</style>
@endpush

@section('content')
<section class="content home">

    <div class="block-header">
        <div class="row app-title">
            <div class="col-lg-7 col-md-6 col-sm-12">
                <h2 class="mt-3"><i class="zmdi zmdi-account"></i>
                    Manage Categories
                    <small class="text-muted"></small>
                </h2>
            </div>
            <div class="col-lg-5 col-md-6 col-sm-12">
                <ul class="breadcrumb float-md-right mt-3">
                    <li class="breadcrumb-item"><a href="{{route('admin-dashboard')}}"><i class="zmdi zmdi-home"></i></a></li>
                    <li class="breadcrumb-item active">Manage Categories</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Start Content-->

    <div class="container-fluid">
        <div class="row">
            <div class="col-12">

                <div class="card">
                    <div class="card-body">

                        @include('admin.common.flash')

                        <div class="row">
                            <div class="col-lg-7 col-md-12">
                                <a href="{{route('admin-add_category')}}" class="btn btn-primary mb-3 mt-2">Add Category</a>
                            </div>
                            <div class="col-lg-5 col-md-12">
                                <div class="form-outline">
                                    <i class="zmdi zmdi-search search-icon ml-2"></i>
                                    <input type="text" id="search-input" class="form-control" placeholder="Search by category name" />
                                </div>
                            </div>

                        </div>




                        <div class="table-responsive">
                            <table id="customer-datatable" class="table dt-responsive nowrap table-striped w-100 mb-5 mt-2" style="width:100%;">
                                <thead class="text">
                                    <tr>
                                        <th>#</th>
                                        <th>Category Name</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>


                                <tbody class="text">
                                    <tr>
                                        <td>#</td>
                                        <td>Category Name</td>
                                        <td>Status</td>
                                        <td>Action</td>
                                    </tr>
                                    <tr>
                                        <td>#</td>
                                        <td>Category Name</td>
                                        <td>Status</td>
                                        <td>Action</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div> <!-- end card body-->
                </div>
            </div>
        </div>

    </div>

</section>
@endsection


@push('script')


<script>
    $(document).ready(function() {
        $('.btn-default').hide();
    });
</script>
@endpush