<x-admin-panel-layout>
    <x-slot name="title">
        لیست اسلاید ها
    </x-slot>
    <x-slot name="main">
        <!-- Checked checkbox -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">لیست اسلاید ها</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-left">
                            <li class="breadcrumb-item"><a href="{{ route("admin.dashboard") }}">داشبورد</a></li>
                            <li class="breadcrumb-item active">لیست اسلاید ها</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <section class="content mt-sm-3">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">اسلاید ها</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body p-0">
                    <div class="alert alert-success col-md-11 mx-auto mt-2 d-none" role="alert" id="alertDelUser">
                        اسلاید با موفقیت حذف گردید
                    </div>

                    <div class="tableSection bg-light smSmall p-0 pr-sm-4 pl-sm-4 pt-sm-4 pb-0 table-responsive">
                        <table class="table table-striped text-center ">
                            <thead>
                            <tr>
                                <th scope="col">ID</th>
                                <th scope="col">تصویر</th>
                                <th scope="col">عنوان</th>
                                <th scope="col">گروه</th>
                                <th scope="col">مسیر</th>
                                <th scope="col">عملیات</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($slides as $slide)
                                <tr id="tr{{$slide->id}}">
                                    <th scope="row">{{$slide->id}}</th>
                                    <td><img src="{{$slide->thumb()}}" style="height: 50px;width: 50px"></td>
                                    <td>{{$slide->title ?? '-'}}</td>
                                    <td>@lang($slide->name)</td>
                                    <th scope="row">{{$slide->route}}</th>
                                    <td class="d-flex justify-content-around">
                                        <a class="btn btn-sm btn-danger" onclick="deleteItem(event,'{{route('slider.destroy',$slide->id)}}',{{$slide->id}})" title="حذف"><i class="fa fa-trash text-light"></i></a>
                                        <a class="btn btn-sm btn-primary" href="{{route('slider.edit',$slide->id)}}" title="ویرایش">
                                            <i class="fa fa-pencil-square-o text-light"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    {{ $slides->appends(request()->query())->links() }}
                </div>
                <!-- /.card-body -->
            </div>
        </section>
    </x-slot>
    @if(session()->get('status') == 'created')
        <x-slot name="linkScript">
            <script>
                Swal.fire({
                    icon: 'success',
                    text: 'ایجاد اسلایدر با موفقیت انجام شد',
                })
            </script>
        </x-slot>
    @endif
    @if(session()->get('status') == 'updated')
        <x-slot name="linkScript">
            <script>
                Swal.fire({
                    icon: 'success',
                    text: 'ویرایش اسلایدر با موفقیت انجام شد',
                })
            </script>
        </x-slot>
    @endif
</x-admin-panel-layout>
