@extends('admin.layout.master')
@section('title','PRODUCT CATEGORY')
@section ('content') 
    <style>
        label {
            font-size: 13px
        }

        .sm-pd-t th,
        .sm-pd-t td {
            padding: 0rem;
            padding-right: 0.35rem;
            padding-left: 0.35rem;
        }

        .nav-tabs .nav-link.active,
        .nav-tabs .nav-item.show .nav-link {
            border-top: 1px solid #2c7f6f;
            border-bottom: 1px solid #e2e2e2;
            border-left: 1px solid #2c7f6f;
            border-right: 1px solid #2c7f6f;
            background: none !important;
            color: #2c7f6f;
        }

        .nav-link:hover {
            border-bottom: #2c7f6f !important;
        }

        a.nav-link.active:hover {
            border-bottom: #e2e2e2 !important;
        }

        a.nav-link {
            color: #9e9e9e;
        }

        .nav-tabs {
            border-bottom: 1px solid #2c7f6f;
        }
        
    </style>
    <div class="card sina-card">
        <div class="card-header card-header-s d-flex flex-wrap align-items-center">
            <h4 class="col-6 pl-0">Product Categories</h4> 
        </div> 
        <div class="card-body"> 
            <div class="d-flex justify-content-center"> 
                <div class="col-md-1"></div>
                <div class="col-md-2 px-0 d-none">
                    <label for="category_id px-0" style="font-size: 20px;">Warehouse</label>
                </div>
                <div class="col-md-5 d-none" style="margin-left: -70px">
                    <input type="text" name="warehouse" id="warehouse" value="{{current_warehouse()}}">
                    <input type="text" name="store" id="store" value="{{current_store()}}">
                    {{-- <select class="form-control" onchange="loadCategory(this.value)" name="warehouse" id="warehouse">
                        <option value=' '>-- Select Warehouse --</option>
                        @foreach ($whouse as $item)
                            <option value='{{$item->id}}'>{{$item->name_eng}}</option>
                        @endforeach
                    </select> --}}
                </div>
                {{-- <div class="col-md-2" align="left" style="margin-left: -18px;">
                    <a data-toggle="modal" data-target="#w_modal" onclick="loadBranch()" type="button" class="btn btn-outline-primary" style="font-size: 10px"><i class="fas fa-plus"></i></a>
                </div> --}}
            </div> 
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" onclick="formActiveCategory()"  href="#category">Category</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" onclick="setModalLabal('Sub Category')" href="#sub_category">Sub Category</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" onclick="setModalLabal('Sub Sub Category')" href="#sub_sub_category">Sub Sub Category</a>
                </li>
            </ul> 
            <!-- Tab panes -->
            <div class="tab-content">
                {{-- category Tab --}}
                <div id="category" class="container tab-pane active"><br>
                    <div class="row mb-3">
                        <div class="col-6">
                            <h5 class="text-bold card-title">Category</h5>
                        </div>
                        <div class="col-6 text-right">
                        <button href="" data-toggle="modal" onclick="formReset()" data-target="#modal" class="btn btn-primary btn-icon-sm">
                            Add New
                        </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12" id="div_tbl_category"> 
                            <table id="tbl_category" class="table table-striped table-bordered dataTable no-footer" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Code</th>
                                        <th>Name (English)</th>
                                        <th>Name (Local)</th>
                                        <th>Serial</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="c_tbody"> 
                                </tbody>
                            </table> 
                        </div>
                    </div>
                </div>
                {{-- sub_category Tab --}}
                <div id="sub_category" class="container tab-pane fade">

                    <div class="row mb-3 mt-4">
                        <div class="col-6">
                            <h5 class="text-bold card-title">Sub Category</h5>
                        </div>
                        <div class="col-6 text-right">
                        <button href="" onclick="formReset()" data-toggle="modal"  data-target="#modal" class="btn btn-primary btn-icon-sm">
                            Add New
                        </button>
                        </div>
                    </div>
                    <div class="row"> 
                        <div class="col-lg-12" id="div_sub_category"> 
                            <table id="sub_category" class="table table-striped table-bordered dataTable no-footer" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Code</th>
                                        <th>Category</th>
                                        <th>Name (English)</th>
                                        <th>Name (Local)</th>
                                        <th>Serial</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="sc_tbody">

                                </tbody>
                            </table> 
                        </div>
                    </div>
                </div>
                {{-- sub_sub_category Tab --}}
                <div id="sub_sub_category" class="container tab-pane fade">

                    <div class="row mb-3 mt-4">
                        <div class="col-6">
                            <h5 class="text-bold card-title">Sub Sub Category</h5>
                        </div>
                        <div class="col-6 text-right">
                        <button onclick="formReset()" data-toggle="modal" data-target="#modal" class="btn btn-primary btn-icon-sm">
                            Add New
                        </button>
                        </div>
                    </div>
                    <div class="row">
                        {{-- <div class="col-lg-2"></div> --}}
                        <div class="col-lg-12" id="div_sub_sub_category">
                            <div class="">
                                <div class=""> 
                                    <table id="sub_sub_category" class="table table-striped table-bordered dataTable no-footer" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Code</th>
                                                <th>Category</th>
                                                <th>Name (English)</th>
                                                <th>Name (Local)</th>
                                                <th>Serial</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="ssc_tbody">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- </div> --}}
                </div>
            </div>
        </div> 
    </div> 
 
    <!-- sub_category Modal -->
    <div class="modal modals fade bd-example-modal-lg" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content"> 
                <div class="modal-body">
                    @include('inventory.forms.product_category_form')
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="{{ asset('inventory/blade_js/product-category.js') }}"></script>
    {{-- <script type="text/javascript" src="{{ asset('inventory/blade_js/branch-warehouse-store.js') }}"></script> --}}

@endsection