@extends('layouts.app')

@section('content')
<div class="container mt-5">
    <div class="row">
        <div class="col-md-12">
            
            <img width="350" src="https://sciekore.com/mysciekore/assets/images/appui/discount.png" class="img-responsive center-block d-block mx-auto" alt="frame">
            <h4 class="mb-4 text-center">Select a Category</h4>
        </div>
    </div>
    <div class="row">
        @foreach($categories as $category)
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-body d-flex flex-column">
                     <img width="250" src="{{ $category->img }}" class="img-responsive center-block d-block mx-auto" alt="frame">
     
                   
                    <h5 class="card-title text-center">{{ $category->name }}</h5>
                    <p class="card-text text-center">Explore various subcategories and services.</p>
                    <a href="{{ route('subcategories', $category->id) }}" class="btn btn-primary mt-auto">View Subcategories</a>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>
@endsection

@push('styles')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Muli&display=swap');

    .btn-primary {
        background: linear-gradient(90deg, #007bff 0%, #00d4ff 100%);
        border: none;
        color: white;
        padding: 10px 20px;
        font-size: 18px;
        border-radius: 30px;
        transition: background 0.3s ease;
        text-decoration: none;
    }

    .btn-primary:hover {
        background: linear-gradient(90deg, #0056b3 0%, #00aaff 100%);
        color: white;
    }

    body {
        font-family: 'Muli', sans-serif;
        margin: 0;
        overflow-x: hidden;
        position: relative;
    }

    .container {
        max-width: 1200px;
        margin: auto;
        padding: 0 2rem;
    }

    .card {
        padding: 2rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        transition: 0.3s ease all;
    }

    .card:hover {
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
        transform: scale(1.05);
    }

    .card h5 {
        font-size: 1.3rem;
    }

    .card p {
        opacity: 0.6;
    }
</style>
@endpush