@extends('layouts.admin')
@section('content')
    @include('components.admin.header')
    @include('components.admin.nav')
    @push('styles')
        <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
        <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" />
        <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
        <link href="{{ asset('admin/assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
    @endpush
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">
                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                            <h4 class="mb-sm-0">Services</h4>
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">Dashboard</a></li>
                                    <li class="breadcrumb-item active">Services</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between">
                                <a class="btn btn-success btn-sm" href="{{route('admin.create.service')}}">Add
                                    Service</a>
                            </div>
                            <div class="card-body">
                                <table id="datatable" class="table table-striped table-bordered dt-responsive nowrap"
                                    style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                    <thead>
                                        <tr>
                                            <th>Service</th>
                                            <th>Service Items</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($services as $service)
                                            <tr>
                                                <td>{{$service->name}}</td>
                                                <td>
                                                    @forelse ($service->serviceItems as $serviceItem)
                                                       <span class="badge bg-success">{{$serviceItem->name}}</span>
                                                    @empty
                                                        <span class="badge bg-danger">No Service Items</span>
                                                    @endforelse
                                                </td>
                                                <td>
                                                    <a class="btn btn-sm btn-info" href="{{url('admin/services/edit/'.$service->id)}}">Edit</a>
                                                    <a class="btn btn-sm btn-danger" id="delete" href="{{url('admin/services/destroy/'.$service->id)}}">Delete</a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!--end col-->
                </div>
                <!--end row-->
                <!-- end page title -->
            </div>
            <!-- container-fluid -->
        </div>
        @include('components.admin.footer')
    </div>
    @push('scripts')
        <!--datatable js-->
        <script src="{{ asset('admin/assets/js/jquery.dataTables.min.js') }}"></script>
        <script src="{{ asset('admin/assets/js/dataTables.bootstrap5.min.js') }}"></script>
        <script src="{{ asset('admin/assets/js/dataTables.responsive.min.js') }}"></script>
        <script src="{{ asset('admin/assets/js/dataTables.buttons.min.js') }}"></script>
        <script src="{{ asset('admin/assets/js/buttons.print.min.js') }}"></script>
        <script src="{{ asset('admin/assets/js/buttons.html5.min.js') }}"></script>
        <script src="{{ asset('admin/assets/js/pdfmake.min.js') }}"></script>
        <script src="{{ asset('admin/assets/js/vfs_fonts.js') }}"></script>
        <script src="{{ asset('admin/assets/js/jszip.min.js') }}"></script>
        <script src="{{ asset('admin/assets/js/pages/datatables.init.js') }}"></script>
        <script src="{{ asset('admin/assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
        
        <script type="text/javascript">
            $(document).on("click", "#delete", function(e) {
                e.preventDefault();
                var link = $(this).attr("href");
                Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    icon: "question",
                    allowOutsideClick: false,
                    showCancelButton: true,
                    confirmButtonText: "Yes, delete it!",
                    cancelButtonText: "No, cancel!",
                    reverseButtons: true,
                }).then(function(result) {
                    if (result.value) {
                        window.location.href = link;
                        // result.dismiss can be "cancel", "overlay",
                        // "close", and "timer"
                    } else {
                        Swal.fire({
                            icon: "success",
                            title: "Service Not Deleted",
                            showConfirmButton: false,
                            timer: 1000,
                        });
                    }
                });
            });
        </script>
    @endpush
@endsection