@section('title', 'Services')

<x-admin-layout>
    <x-slot name="header">
        {{ __('Services List') }}
    </x-slot>

    <x-slot name="js">
        <!-- Page specific script -->
        <script>
            function deleteConfirmation(ele) {
                var id = $(ele).data("id");
                var action_url = $(ele).data("action");
                Swal.fire({
                    icon: 'info',
                    title: "Delete?",
                    text: "Please ensure and then confirm!",
                    type: "warning",
                    showCancelButton: !0,
                    confirmButtonText: "Yes, delete it!",
                    cancelButtonText: "No, cancel!",
                    reverseButtons: !0
                }).then(function(e) {
                    if (e.value === true) {
                        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                        $.ajax({
                            type: 'DELETE',
                            url: action_url,
                            data: {
                                _token: CSRF_TOKEN
                            },
                            dataType: 'JSON',
                            success: function(results) {
                                if (results.success === true) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Deleted!',
                                        type: "success",
                                        text: results.message,
                                        showConfirmButton: false,
                                        timer: 1500
                                    });
                                    location.reload();
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Error!',
                                        type: "danger",
                                        text: results.message,
                                        showConfirmButton: false,
                                        timer: 1500
                                    });
                                    location.reload();
                                }
                            }
                        });
                    } else {
                        e.dismiss;
                    }
                }, function(dismiss) {
                    return false;
                })
            }
        </script>
    </x-slot>

    <div class="card">
        <div class="card-header">
            What We Offer
            <div class="card-tools">
                <a href="{{ route('admin.services.create') }}" class="btn-sm btn-block btn-outline-primary">
                    <i class="fas fa-plus-circle"></i> Add
                </a>
            </div>
        </div>
        <div class="card-body">
            <table class="table">
                <thead>
                    <tr>
                        <div class="float-left">
                            Showing
                            {{ ($services->currentPage() - 1) * $services->perPage() + ($services->total() ? 1 : 0) }}
                            to {{ ($services->currentPage() - 1) * $services->perPage() + count($services) }} of
                            {{ $services->total() }}
                            Results
                        </div>
                        <div class="float-right">
                            <form action="{{ route('admin.services.index') }}" class="form-inline">
                                <div class="input-group input-group-sm">
                                    <input type="text" class="form-control" name="search">
                                    <span class="input-group-append">
                                        <button type="submit" class="btn btn-info btn-flat"><i
                                                class="fas fa-search"></i></button>
                                    </span>
                                </div>
                            </form>
                        </div>
                    </tr>
                    <tr>
                        <th>Title</th>
                        <th>Slug</th>
                        <th width='40%'>Details</th>
                        <th scope="col">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($services as $key => $row)
                        <tr>
                            <td>
                                <i class="icon {{ $row->icon }}"></i>
                                {{ $row->title }}</td>
                            <td>{{ $row->slug }}</td>
                            <td>{{ $row->short_details }}</td>
                            <td>
                                <a href="{{ route('admin.services.edit', $row->slug) }}"
                                    class="text-warning float-left ml-2 mr-2">
                                    <i class="fas fa-edit"></i>
                                </a>

                                <a class="text-danger" data-id="{{ Crypt::encryptString($row->id) }}"
                                    data-action="{{ route('admin.services.destroy', Crypt::encryptString($row->id)) }}"
                                    onclick="deleteConfirmation(this)" title="Delete">
                                    <i class="fas fa-trash"></i></a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <table>
                <tr>
                    <div class="float-right">
                        {{ $services->appends(request()->except('page'))->links('pagination::bootstrap-4') }}
                    </div>
                </tr>
            </table>
        </div>
    </div>
</x-admin-layout>