@include('header')
<style>
    .holder_description{
        width: 100%;
        height: 200px;
        overflow: scroll;
    }
    .my_btn {
        cursor: pointer !important;
        color: white;
        background-color: #bf0a0a;
        border-radius: 5px;
        text-align: center;
        height: 40px; /* تنظیم ارتفاع */
        line-height: 40px; /* همان مقدار برای وسط چین شدن */
        display: inline-block;
        padding: 0 15px; /* تنظیم فاصله‌های داخلی */
    }
</style>

<div class="x_panel">
    <div class="x_title">
        <h2>مدیریت دسته بندی ها</h2>

        <ul class="nav navbar-right panel_toolbox">
            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i
                        class="fa fa-wrench"></i></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">تنظیمات 1</a>
                    </li>
                    <li><a href="#">تنظیمات 2</a>
                    </li>
                </ul>
            </li>
            <li><a class="close-link"><i class="fa fa-close"></i></a>
            </li>
        </ul>
        <div class="clearfix"></div>
    </div>
    <div class="x_content">

        <!-- start accordion -->
        <div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
            @foreach($items as $item)
                <div class="panel">
                    <a class="panel-heading collapsed" role="tab" id="headingThree" data-toggle="collapse"
                       data-parent="#accordion" href="#collapse{{$item->id}}" aria-expanded="false"
                       aria-controls="collapseThree">
                        <div style="display: flex;justify-content: space-between">
                            <h4 class="panel-title">{{$item->name}}</h4>
                            <img style="width: 100px" src="{{$item->pic}}">
                        </div>
                    </a>
                    <div id="collapse{{$item->id}}" class="panel-collapse collapse" role="tabpanel"
                         aria-labelledby="headingThree" aria-expanded="false">
                        <div class="panel-body">
                            <table class="table">
                                @foreach($item->cat_child as $items)
                                    <tr>
                                        <td style="width: 10%;">
                                            {{$items->name}}
                                            <a class="my_btn" href="/panel/category_details_page?cat_id={{$items->id}}">ویرایش</a>

                                        </td>
                                        <td style="width: 10%;">{{$items->commission}} درصد</td>
                                        <td style="width: 35%;">
                                            <p class="holder_description">
                                            {!! $items->description !!}
                                            <p>
                                        </td>
                                        <td style="width: 35%;">
                                            <p class="holder_description">
                                            {!! $items->price_guide !!}
                                            <p>
                                        </td>
                                        <td style="width: 10%;">
                                            <img style="width: 100px" src="{{$items->pic}}">
                                        </td>
                                    </tr>
                                @endforeach


                            </table>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <!-- end of accordion -->


    </div>
</div>

@include('footer')