@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 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 justify-content-end">

        <!--begin::کارت title-->
        <!--begin::کارت toolbar-->
        <div class="card-toolbar justify-content-start">
            <div class="d-flex justify-content-start" data-kt-user-table-toolbar="base">


                <a href="{{ route('admin.educations.create') }}" class="btn me-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"> موقعیت نمایش</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 ($educations as $key => $item)
            <tr>

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

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

                <td>
                    <div class="symbol symbol-circle symbol-90px overflow-hidden me-3">
                        <a href="{{ route('admin.educations.edit',['education'=>$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 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.educations.edit',['education'=>$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.educations.modal')
@endsection