@extends('admin.layout.master')
@section('title','PRODUCT CATEGORY')
@section('custom_style')
    <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>
@endsection
@section ('content')
    <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">{{__('obs.product')}} {{__('obs.categories')}}</h4>
        </div>
        <div class="card-body">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" onclick="loadCategory(1)"  data-bs-target="#category">Category</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" onclick="loadCategory(2)" data-bs-target="#sub_category">Sub Category</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" onclick="loadCategory(3)" data-bs-target="#sub_sub_category">Sub Sub Category</a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                {{-- category Tab --}}
                <div id="category" class="tab-pane active">
                    <div class="d-flex align-items-center flex-wrap my-3" style="gap: 1rem;">
                        <h4 class="me-3">{{__('obs.category')}}</h4>
                        <button onclick="setModalInfo(1)" class="btn btn-primary btn-icon-sm">  {{__('obs.add')}} {{__('obs.new')}}</button>
                    </div>
                    <div class="row">
                        <div class="col-lg-12" id="div_tbl_category">
                            <table id="tbl_category" class="table cl-table table-sm table-striped table-bordered dataTable no-footer" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>{{__('obs.code')}}</th>
                                        <th>{{__('obs.name')}} ({{__('obs.english')}})</th>
                                        <th>{{__('obs.name')}} ({{__('obs.local')}})</th>
                                        <th>{{__('obs.serial')}}</th>
                                        <th>{{__('obs.status')}}</th>
                                        <th>{{__('obs.action')}}</th>
                                    </tr>
                                </thead>
                                <tbody id="c_tbody"> </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                {{-- sub_category Tab --}}
                <div id="sub_category" class="tab-pane fade">
                    <div class="d-flex align-items-center flex-wrap my-3" style="gap: 1rem;">
                        <h4 class="me-3">{{__('obs.sub')}} {{__('obs.category')}}</h4>
                        <button href="" onclick="setModalInfo(2)" class="btn btn-primary btn-icon-sm">  {{__('obs.add')}} {{__('obs.new')}}</button>
                    </div>
                    <div class="row">
                        <div class="col-lg-12" id="div_sub_category">
                            <table id="tbl_sub_category" class="table cl-table table-sm table-striped table-bordered dataTable no-footer" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>{{__('obs.code')}}</th>
                                        <th>{{__('obs.category')}}</th>
                                        <th>{{__('obs.name')}} ({{__('obs.english')}})</th>
                                        <th>{{__('obs.name')}} ({{__('obs.local')}})</th>
                                        <th>{{__('obs.serial')}}</th>
                                        <th>{{__('obs.status')}}</th>
                                        <th>{{__('obs.action')}}</th>
                                    </tr>
                                </thead>
                                <tbody id="sc_tbody"> </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                {{-- sub_sub_category Tab --}}
                <div id="sub_sub_category" class="tab-pane fade">
                    <div class="d-flex align-items-center flex-wrap my-3" style="gap: 1rem;">
                        <h4 class="me-2"> {{__('obs.sub')}} {{__('obs.sub ')}} {{__('obs.category')}}</h4>
                        <button onclick="setModalInfo(3)" class="btn btn-primary btn-icon-sm">  {{__('obs.add')}}{{__('obs.new')}}</button>
                    </div>
                    <div class="row">
                        <div class="col-lg-12" id="div_sub_sub_category">
                            <table id="tbl_sub_sub_category" class="table cl-table table-sm table-striped table-bordered dataTable no-footer" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>{{__('obs.code')}}</th>
                                        <th>{{__('obs.category')}}</th>
                                        <th>{{__('obs.name')}} ({{__('obs.english')}})</th>
                                        <th>{{__('obs.name')}} ({{__('obs.local')}})</th>
                                        <th>{{__('obs.serial')}}</th>
                                        <th>{{__('obs.status')}}</th>
                                        <th>{{__('obs.action')}}</th>
                                    </tr>
                                </thead>
                                <tbody id="ssc_tbody"> </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('admin.global.loader')
    <!-- 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-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="modal_label">{{__('obs.category')}}</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    @include('inventory.forms.product_category_form')
                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script type="text/javascript" src="{{ asset('inventory/blade_js/common.js') }}"></script>
    <script type="text/javascript" src="{{ asset('inventory/blade_js/product-category-new.js') }}"></script>
    {{-- <script type="text/javascript" src="{{ asset('inventory/blade_js/branch-warehouse-store.js') }}"></script> --}}

@endsection