@extends('app.template.index')

@section('title', 'Layanan')

@push('css')
    <style>
        equipment-list {
            border-radius: 10px;
            padding-bottom: 30px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        h2 {
            font-weight: bold;
            color: #333;
        }

        .alert-warning {
            background-color: #f8d7da;
            color: #721c24;
            border-radius: 5px;
            font-size: 1.1rem;
        }

        .list-group-item {
            font-size: 1rem;
            padding: 15px;
            border: 1px solid #ddd;
            /* Border pada semua sisi */
            border-radius: 5px;
            /* Menjaga border-radius pada sudut */
            margin-bottom: 10px;
            transition: color 0.3s ease;
        }


        .list-group-item:hover {
            color: #017c72;
        }

        .btn-info {
            background-color: ;
            border: none;
            padding: 5px 10px;
        }

        .btn-info:hover {
            background-color: #017c72;
        }

        .btn-secondary {
            background-color: #01a19e;
            border: none;
            color: white;
        }

        .btn-secondary:hover {
            background-color: #017c72;
            color: white !important;
        }

        .text-primary {
            color: #01a19e;
        }
    </style>
@endpush
@section('content')
    <section class="bg-white py-5 text-center mb-2  ">
        <h2 class="display-6 fw-bolder text-black mt-1">
            Hasil Pencarian Layanan Kalibrasi: <span style="color:#017c72">"{{ $keyword }}"
        </h2>
    </section>
    <section class="equipment-list" id="equipment-list">
        <div class="container">
            <div class="container px-5">
                @if ($results->isEmpty())
                    <div class="alert alert-warning text-center" role="alert">
                        Layanan Kalibrasi "<strong style="color:#017c72">{{ $keyword }}</strong>" tidak ada.
                    </div>
                @else
                    <div class="row">
                        <div class="col-md-12">
                            <ul class="list-group list-group-flush">
                                @foreach ($results as $result)
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        <span>{{ $result->name }}</span>
                                    </li>
                                @endforeach
                            </ul>   
                        </div>
                    </div>
                @endif
            </div>
    </section>

    <section class="bg-white py-5 text-center">
        <a href="/layanan-bats#layanan-kalibrasi" class="btn btn-secondary mt-4">Kembali</a>
    </section>

@endsection