@extends('backend.layouts.app')

@section('content')

<div class="container p-4 mx-auto">
    <h1 class="mb-4 h2 fw-bold">Services</h1>
    <a href="{{ route('services.create') }}" class="btn btn-primary"><i class='bx bx-add-to-queue'></i> Add New Services</a>
</div>

<section class="container px-4 mx-auto">
    <div class="table-responsive ">
        <table id="servicesTable" class="table table-bordered table-hover">
            <thead class="table-light">
                <tr>
                    <th scope="col">Id</th>
                    <th scope="col">Title</th>
                    <th scope="col">Subtitle</th>
                    <th scope="col" class="text-center">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($services as $service)
                <tr>
                    <td>{{ $service->id }}</td>
                    <td>{{ $service->title }}</td>
                    <td>{{ $service->subtitle }}</td>
                    <td>
                        <form method="GET" action="{{ route('services.edit', $service->id) }}">
                            <button class="btn btn-primary btn-block mb-2">Edit</button>
                        </form>
                        <form method="POST" action="{{ route('services.destroy', $service->id) }}">@csrf @method('DELETE')
                            <button class="btn btn-danger btn-block mb-2">Delete</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</section>
@endsection


@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css">
@endsection

@section('js')
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js"></script>
<script>
    $(document).ready(function() {
        $('#servicesTable').DataTable({
            order: [
                [0, 'desc'] // Order by the first column (Id) descending
            ],

        });
    });
</script>
@endsection