<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="mx-auto my-3 d-flex">
                        <button type="button" class="btn btn-primary mx-auto btn-sm" data-toggle="modal"
                                data-target="#exampleModalCenter">
                            جست و جو
                        </button>
                    </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($services as $service)
                                <tr id="tr{{$service->id}}">
                                    <th scope="row">{{$service->id}}</th>
                                    <td scope="row">
                                        @if($service->media_id)
                                            <img src="{{$service->thumb()}}" style="width: 3rem;height: 2.5rem">
                                        @else
                                        ندارد
                                        @endif
                                    </td>
                                    <td>{{$service->name}}</td>
                                    <td>{{$service->parent ? $service->parent->name : '-'}}</td>
                                    <td>{{$service->priority ?? "وارد نشده"}}</td>
                                    <td class="d-flex justify-content-center">
{{--                                        <a class="btn btn-sm btn-danger" onclick="deleteItem(event,'{{route('city.destroy',$service->id)}}',{{$service->id}})" title="حذف"><i class="fa fa-trash text-light"></i></a>--}}
                                        <a class="btn btn-sm btn-primary ml-3" href="{{route('service.edit',$service->id)}}" title="ویرایش">
                                            <i class="fa fa-pencil-square-o text-light"></i>
                                        </a>
                                        @if($service->parent_id)
                                        <a class="btn btn-sm btn-danger ml-3" href="{{route('service.regions',$service->id)}}" title="مناطق ارائه">
                                            <i class="fa fa-map-marker text-light" aria-hidden="true"></i>
                                        </a>
                                        @endif
                                        @if($service->parent_id)
                                        <a class="btn btn-sm btn-success ml-3" href="{{route('service.show',$service->id)}}" title="مشاهده">
                                            <i class="fa fa-eye text-light" aria-hidden="true"></i>
                                        </a>
                                        @endif
                                        @if($service->parent_id)
                                        <a class="btn btn-sm btn-info ml-3" href="{{route('service.description',$service->id)}}" title="توضیحات">
                                            <i class="fa fa-newspaper-o text-light" aria-hidden="true"></i>
                                        </a>
                                        @endif
                                        @if($service->parent_id)
                                            <a class="btn btn-sm btn-warning ml-3" href="{{route('service.question',$service->id)}}" title="سوالات">
                                                <div class="text-dark" style="font-weight: bold">&quest;</div>
                                            </a>
                                        @endif
                                        @if($service->parent_id)
                                            <a class="btn btn-sm btn-outline-secondary ml-3" href="{{route('service.price',$service->id)}}" title="قیمت ها">
                                                <i class="fa fa-usd " aria-hidden="true"></i>
                                            </a>
                                        @endif
                                        <a class="btn btn-sm btn-danger admin-table-actions-delete" href="{{route('service.delete',$service->id)}}"
                                           title="حذف">
                                            <i class="fa fa-trash text-white"></i>
                                        </a>
                                        <a class="btn btn-sm ml-3" onclick="statusItem(event,'{{route('service.status',$service->id)}}',{{$service->id}})" title="تغیر وضعیت">
                                            <i class="fa fa-toggle-on {{$service->status == \Mehrab\Service\Models\Service::ACTIVE ? 'text-info' : 'text-danger'}}"
                                               id="status{{$service->id}}"
                                               style="font-size: 1rem" aria-hidden="true">
                                            </i>
                                        </a>

                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    {{ $services->appends(request()->query())->links() }}
                </div>
                <!-- /.card-body -->
            </div>
        </section>
        @includeIf("admin.partials.delete_modal")
        <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle"></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group row">
                                <label for="inputPassword3" class="col-sm-2 col-form-label">نام خدمت	</label>
                                <div class="col-sm-10">
                                    <input type="text" name="name" value="{{request()->name}}" class="form-control" id="inputPassword3">
                                </div>
                            </div>


                            <div class="form-group row float-left">
                                <div class="col-sm-10 ">
                                    <button type="submit" class="btn btn-primary mx-auto">جست و جو</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </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>
