<x-admin.layout>
    <x-slot name="title">Service</x-slot>
    <x-slot name="heading">Service</x-slot>
    {{-- <x-slot name="subheading">Test</x-slot> --}}
    <style>
        .hovereffect:hover {
            transform: scale(1.05);
            transition: .5s;
        }

        .hovereffect {
            transition: .5s;
        }
    </style>


    <div class="row">
        @foreach ($services as $service)
            <div class="col-md-3 hovereffect mb-3">
                <div class="card h-100">
                    <div class="card-header bg-primary" style=" min-height:90px;background: linear-gradient(135deg, #4e54c8, #8f94fb);">
                        @if ($service->image)
                            <img src="{{ asset('storage/' . $service->image) }}" width="25px" style="padding-right: 10px;"
                                alt="{{ $service->name }}">
                        @endif
                        <h5 class="text-white">{{ $service->name }}</h5>
                    </div>
                    <div class="card-body align-content-center">
                        <div class="text-center">
                            <a class="btn btn-primary" style="background: linear-gradient(135deg,#8f94fb, #4e54c8);"
                                href="@if ($service->route_name) {{ route($service->route_name) }}@else javascript:void(0) @endif"><i class="fa fa-file-invoice me-2"></i>New
                                 Application
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- <div class="col-md-3 col-lg-3 col-6 hovereffect">
        <div class="card m-0">
            <div class="card-header d-flex justify-content-between" style="background:{{ $service->background_color }}">
                @if ($service->image)
                    <img src="{{ asset('storage/'.$service->image) }}" width="25px" style="padding-right: 10px;" alt="{{ $service->name }}">
                @endif
                <h5 class="text-white">{{ $service->name }}</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12 text-center">
                        <a class="btn btn-primary btn-sm" href="@if ($service->route_name){{ route($service->route_name) }}@else javascript:void(0) @endif">New Application</a>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}
{{-- <div class="col-12">
    <div class="row">
        <div class="row">

        </div>
    </div>
</div> --}}



    @push('scripts')
    @endpush

</x-admin.layout>
