@extends('admin.layout.index')

{{-- ===========  meta Title  =================== --}}
@section('title')
    لیست مقالات
@endsection
{{-- ===========  My Css Style  =================== --}}
@section('style')
    <style>
        .img-profile{
            max-width: 150px;
            height: auto;
        }
        td{
            vertical-align: middle !important;
        }
        .img-profile{
            width: 200px;
            height: auto;
        }
    </style>
@endsection
{{-- ===========  My JavaScript  =================== --}}
@section('script')
    <script>
        function categoryChange(tag) {
            let catId = tag.value;
            window.location.href = "/admin-panel/management/articles/index/" + catId;
        }
        function removeModal(id){
            console.log('ok');
            let remove_modal=$('#remove_modal');
            $('#id').val(id);
            remove_modal.modal('show');
        }
    </script>
@endsection

{{-- ===========      CONTENT      =================== --}}
@section('content')


                    <div class="card-header border-0 pt-6">

                        <!--begin::کارت title-->
                        <!--begin::کارت toolbar-->
                        <div class="card-toolbar">
                            <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
                                <!--begin::فیلتر-->
                                <button type="button" class="btn btn-light-primary me-3" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                    <i class="ki-duotone ki-filter fs-2">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>فیلتر</button>
                                <!--begin::Menu 1-->
                                <div class="menu menu-sub menu-sub-dropdown w-300px w-md-325px" data-kt-menu="true">
                                    <!--begin::Header-->
                                    <div class="px-7 py-5">
                                        <div class="fs-5 text-dark fw-bold">فیلتر </div>
                                    </div>
                                    <!--end::Header-->
                                    <!--begin::Separator-->
                                    <div class="separator border-gray-200"></div>
                                    <!--end::Separator-->
                                    <!--begin::Content-->
                                    <div class="px-7 py-5" data-kt-user-table-filter="form">
                                        <!--begin::Input group-->
                                        <div class="mb-10">
                                            <label class="form-label fs-6 fw-semibold">دسته بندی:</label>
                                            <select name="category_id" id="category_id" onchange="categoryChange(this)" class="form-select form-select-solid fw-bold" data-kt-select2="true" data-placeholder="انتخاب گزینه" data-allow-clear="true" data-kt-user-table-filter="role" data-hide-search="true">
                                                <option value="">نمایش همه</option>
                                                @foreach($categories as $category)
                                                    <option value="{{ $category->id }}" {{ $category->id==$cat ? 'selected' : '' }}>{{ $category->title }}</option>
                                                @endforeach
                                            </select>
                                        </div>


                                    </div>
                                    <!--end::Content-->
                                </div>

                                <a href="{{ route('admin.articles.create') }}" class="btn me-3 btn-primary"><i class="ki-duotone ki-plus fs-2"></i>افزودن مقاله</a>
                                <a  href="{{ route('admin.articles.categories.index') }}" class="btn mr-3 btn-primary"><i class="ki-duotone ki-plus fs-2"></i>دسته بندی مقاله</a>
                                <!--end::افزودن user-->
                            </div>

                        </div>
                        <!--end::کارت toolbar-->
                    </div>

                        <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_users">
                            <thead>
                            <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">

                                <th class="min-w-125px">نام</th>
                                <th class="min-w-125px">alias</th>
                                <th class="min-w-125px">دسته بندی</th>
                                <th class="min-w-125px">تصویر </th>
                                <th class="min-w-125px">بازدید</th>
                                <th class="text-end min-w-100px">عملیات</th>
                            </tr>
                            </thead>
                            <tbody class="text-gray-600 fw-semibold">
                            @foreach ($articles as $key => $item)
                            <tr>

                                <td> {{ $item->title }}</td>

                                <td>     {{ $item->alias }}</td>
                                <td>               {{ $item->Category->title }}</td>
                                <td>
                                    <div class="symbol symbol-circle symbol-90px overflow-hidden me-3">
                                        <a href="{{ route('admin.articles.edit',['article'=>$item->id]) }}">
                                            <div class="symbol-label">
                                                <img src="{{ asset(env('ARTICLES_IMAGES_UPLOAD_PATH').$item->image) }}" alt="{{$item->title}}" class="w-100" />
                                            </div>
                                        </a>
                                    </div>
                                </td>

                                <td>        {{$item->hit}}</td>
                                <td class="text-end">
                                    <a href="#" class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">عملیات
                                        <i class="ki-duotone ki-down fs-5 ms-1"></i></a>
                                    <!--begin::Menu-->
                                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a href="{{ route('admin.articles.edit',['article'=>$item->id]) }}" class="menu-link px-3">ویرایش</a>
                                        </div>
                                        <!--end::Menu item-->
                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a onclick="removeModal({{ $item->id }})" class="menu-link px-3" data-kt-users-table-filter="delete_row">حذف</a>
                                        </div>
                                        <!--end::Menu item-->
                                    </div>
                                    <!--end::Menu-->
                                </td>
                            </tr>
                            @endforeach
                            </tbody>
                        </table>
                        <!--end::Table-->

    @include('admin.articles.modal')
@endsection