@extends('layouts.app')

@section('js')
<script src="/js/categories.js"></script>
@endsection
@section('content')
        <!-- Begin page -->
        <div id="wrapper">
            @include('layouts.components.admin.navbar')

            <!-- Left Sidebar End -->

            <!-- ============================================================== -->
            <!-- Start Page Content here -->
            <!-- ============================================================== -->

            <div class="content-page p-3">
                @if (Auth::user()->role == "admin")
               
                <hr>
                <div class="table-responsive ">
                    <div class="row">
                        <div class="col">التصنيف</div>
                        <div class="col">اجراء</div>
                    </div>
                            @foreach ($Categories as $Category)
                            <div class="row my-3">
                                <div class="col " scope="row">{{$Category->name}}
                                    <button class="btn" type="button" onclick="$(this).parent().parent().next().find('.sub').toggle();$(this).text($(this).text() == 'اظهار' ?  'اخفاء':'اظهار')">اظهار</button>
                                </div>
                                    <div class="col ">
                                    <a  style="cursor: pointer;" onclick="remove('main','{{$Category->id}}')" class="far fa-trash-alt col text-danger"></a>
                                    <a  style="cursor: pointer;margin-right: 10px;" onclick="edit('main','{{$Category->id}}', '{{$Category->name}}')" class="fas fa-pen col text-primary d-inline-block "></a>
                                </div>
                            </div>
                            <div>

                                @foreach (json_decode($Category->{"sub_categories"}) as $key => $sub_category)
                                    <div class="row my-3 mx-4 sub" style="display: none">
                                        <div class="col " scope="row">← {{$sub_category}} </div>
                                            <div class="col ">
                                            <a  style="cursor: pointer;" onclick="remove('sub', '{{$Category->id}}', '{{$key}}')" class="far fa-trash-alt col text-danger"></a>
                                            <a  style="cursor: pointer;margin-right: 10px;" onclick="edit('sub', '{{$Category->id}}', '{{$sub_category}}', '{{$key}}')" class="fas fa-pen col text-primary d-inline-block "></a>
                                        </div>
                                    </div>
                                @endforeach
                                <div class="row my-3 mx-4 sub" style="display: none" scope="row">
                                    <div class="col ">←
                                        <a  style="cursor: pointer;" onclick="add('sub', '{{$Category->id}}')" class="fas fa-plus col text-danger"> اضافة </a>
                                    </div>
                            </div>
                        </div>

                            @endforeach
                            <div class="row my-3 " scope="row">
                                <div class="col ">
                                    <a  style="cursor: pointer;" onclick="add('main')" class="fas fa-plus col text-danger"> اضافة </a>
                                </div>
                        </div>
                                </div>
                            
                           
                        </tbody>
                    </table>
                </div>
             
                @endif

                <!-- Footer Start -->
                <footer class="footer">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-6">
                                <script>document.write(new Date().getFullYear())</script> &copy; Powered by {{env('website_name')}}
                            </div>

                        </div>
                    </div>
                </footer>
                <!-- end Footer -->

            </div>

            <!-- ============================================================== -->
            <!-- End Page content -->
            <!-- ============================================================== -->


        </div>
        <!-- Right bar overlay-->
        <div class="rightbar-overlay"></div>

@endsection