@extends('backend.layouts.app')
@section('content')


<style>
    .nav-pills .nav-link.active,
    .nav-pills .show > .nav-link
    {
        color: #fff;
        background-color: #594D98;
    }

    /* Bootstrap 4 text input with search icon */

    .has-search .form-control {
        padding-left: 2.375rem;
    }

    .has-search .form-control-feedback {
        position: absolute;
        z-index: 2;
        display: block;
        width: 2.375rem;
        height: 2.375rem;
        line-height: 2.375rem;
        text-align: center;
        pointer-events: none;
        color: #aaa;
    }

</style>

    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <div class="">
                    <div class="">
                        <div class="row align-items-between">
                            <div class="col d-flex justify-content-between">
                                <h6 style="font-family: 'Poppins'; font-size: 25px">Menu Categories</h6>
                            </div>
                        </div>


                        <div class="nav-wrapper mb-1">
                            <ul class="nav nav-pills" id="tabs-icons-text" role="tablist">
                                <li class="nav-item p-0">
                                    <a class="nav-link pr-3 active" id="all" data-toggle="tab" href="#tabs-icons-text-1" role="tab" aria-controls="tabs-icons-text-1" aria-selected="true" style="border-radius: 5px 0px 0px 5px; font-family: 'Poppins'; font-size: 15px;">All</a>
                                </li>
                                <li class="nav-item p-0">
                                    <a class="nav-link" id="primary" data-toggle="tab" href="#tabs-icons-text-2" role="tab" aria-controls="tabs-icons-text-2" aria-selected="false" style="border-radius: 0px; font-family: 'Poppins'; font-size: 15px;">Primary</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="secondary" data-toggle="tab" href="#tabs-icons-text-3" role="tab" aria-controls="tabs-icons-text-3" aria-selected="false" style="border-radius: 0px 5px 5px 0px; font-family: 'Poppins'; font-size: 15px">Secondary</a>
                                </li>
                                <!-- <li class="nav-item">
                                    <a class="nav-link" id="archived" data-toggle="tab" href="#tabs-icons-text-4" role="tab" aria-controls="tabs-icons-text-4" aria-selected="false" style="border-radius: 0px 5px 5px 0px; font-family: 'Poppins'; font-size: 15px">Archives</a>
                                </li> -->
                                @if(auth()->user()->user_type_id == '2' || auth()->user()->user_type_id == '3')
                                    <button type="button" class="btn ml-auto" id="up-add-category" style="background-color:#594D98; color:white;"><span><i class="ni ni-fat-add"></i></span></button>
                                @endif
                            </ul>
                        </div>

                        <div class="form-group has-search">
                            <span class="fa fa-search form-control-feedback mt-1"></span>
                            <input type="text" class="form-control" placeholder="Search" id="search-menu-categ">
                        </div>

                        <!-- <div class="row align-items-start mt-3">
                            <div class="col">
                                <button type="button" class="btn btn-warning" id="show-primary" value="primary">Primary</button>
                                <button type="button" class="btn btn-secondary" id="show-secondary" value="secondary">Secondary</button>
                            </div>
                        </div> -->

                    </div>

                    <div class="container-fluid mb-5" style="overflow: auto; height: 1000px;">

                                <div class="text-center" id="category_list">
                                    
                                    @include('backend.menu-category.list')
                                        
                                </div>

                    </div>


                    <!-- <div class="card">
                        <div class="card-body">
                            <div class="table-responsive table-hover">
                                <table class="table">
                                    <tbody id="div_user_ratings">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div> -->


                </div>
            </div>
        </div>
        @include('backend.menu-category.modals.add-menu')
        @include('backend.menu-category.modals.edit-menu')
    </div>
    <footer class="fixed-bottom" align="right">
        <div class="dropdown mr-1">
            <button type="button" style="margin-bottom:40px; margin-right:40px;" class="btn btn-danger dropdown-toggle archive-menu" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
                Archives
            </button>

            @include('backend.menu-category.archive-list')
            
        </div>
    </footer>
@endsection
@section('after-scripts')
    <script src="{{ asset('js/menu-category/menu-category.js') }}" type="text/javascript"></script>
@endsection