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

        .search:hover{
           background: linear-gradient(135deg, #8f94fb,#4e54c8);
        }
    </style>
    <div class="row">
        <div class="col-12">
            <div class="d-flex flex-column h-100">
                	<div class="row">
    <div class="col-12">
        <div class="d-flex flex-column h-100">

            <!-- RTS SERVICES -->
            <div class="mb-3">
                <h5 data-bs-toggle="collapse" data-bs-target="#rtsServices" style="cursor:pointer">
                    ▶ RTS SERVICES
                </h5>
                <div class="collapse show" id="rtsServices">
                    <div class="row">
                        @foreach($services as $service)
                        <div class="col-md-3 col-lg-3 col-6 hovereffect">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between bg-primary" style="background: linear-gradient(135deg, #4e54c8, #8f94fb);" >
                                    <div class="d-flex">
                                        <img src="{{ asset('storage/'.$service->image) }}" width="25px" alt="{{ $service->name }}">
                                        <span style="padding-left: 6px;color: #fff;font-size: 21px;">[{{ $service->services_count }}]</span>
                                    </div>
                                    <h5 class="card-title text-white">{{ $service->name }}</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-6" style="">
                                            <a class="btn btn-primary" style="background: linear-gradient(135deg, #8f94fb,#4e54c8);" href="@if($service->route_name){{ route($service->route_name) }}@else {{ route('service.my-service', $service->id) }} @endif"><i class="fa fa-paper-plane me-2"></i> Apply</a>
                                        </div>
                                        <div class="col-6 d-flex justify-content-end">
                                            <a class="btn btn-outline-primary search" href="{{ route('my-application') }}"> <i class="fa fa-search me-2"></i> Search</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- NONRTS SERVICES -->
            <div>
                <h5 data-bs-toggle="collapse" data-bs-target="#nonrtsServices" style="cursor:pointer">
                    ▶ NONRTS SERVICES
                </h5>
                <div class="collapse show" id="nonrtsServices">
                    <div class="row">
                        @foreach($servicesnonrts as $service)
                        <div class="col-md-3 col-lg-3 col-6 hovereffect">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between bg-primary" style="background: linear-gradient(135deg, #4e54c8, #8f94fb);" >
                                    <div class="d-flex">
                                        <img src="{{ asset('storage/'.$service->image) }}" width="25px" alt="{{ $service->name }}">
                                        <span style="padding-left: 6px;color: #fff;font-size: 21px;">[{{ $service->services_count }}]</span>
                                    </div>
                                    <h5 class="card-title text-white">{{ $service->name }}</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-6" style="">
                                            <a class="btn btn-primary"  style="background: linear-gradient(135deg, #8f94fb,#4e54c8);" href="@if($service->route_name){{ route($service->route_name) }}@else {{ route('service.my-service', $service->id) }} @endif"><i class="fa fa-paper-plane me-2"></i>Apply</a>
                                        </div>
                                        <div class="col-6 d-flex justify-content-end">
                                            <a class="btn btn-outline-primary search" href="{{ route('my-application') }}">   <i class="fa fa-search me-2"></i>Search</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
            </div>
        </div>

    </div>
    @push('scripts')
    @endpush

</x-admin.layout>
