<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">
                    <form class="mt-3 p-2 mx-sm-5 my-3" action="{{route('slider.service.store')}}" method="post"
                          enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <select name="slider_id" id="slider_id" class="form-control">
                                <option selected hidden disabled>انتخاب خدمت سردسته</option>
                                @foreach($services as $service)
                                    @if($service->is_slider == 0)
                                        <option value="{{$service->id}}">{{$service->name}}</option>
                                    @endif
                                @endforeach
                            </select>
                            @error('slider_id')
                            <div class="invalid">
                                <p class="text-danger" style="font-size: 0.8rem;padding-right: 0.2rem">{{$message}}</p>
                            </div>
                            @enderror
                        </div>
                        <button type="submit" class="btn btn-primary btn-block mt-3">ثبت</button>
                    </form>
                </div>
            </div>

            <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>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($services as $service)
                                @if($service->is_slider == 1)
                                    <tr id="tr{{$service->id}}">
                                        <th scope="row">{{$service->id}}</th>
                                        <td>{{$service->name}}</td>
                                        <td class="d-flex justify-content-around">
                                            <a class="btn btn-sm btn-danger"
                                               onclick="deleteItem(event,'{{route('slider.service.destroy',$service->id)}}',{{$service->id}})"
                                               title="حذف"><i class="fa fa-trash text-light"></i></a>
                                        </td>
                                    </tr>
                                @endif
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    {{ $services->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>
