@extends('layouts.app')

@section('content')
<div class="container mt-5">
    <div class="row">
        <div class="col-md-12">
            <h1 class="mb-4">Select a Subcategory in {{ $category->name }}</h1>
        </div>
    </div>
    <div class="row">
        @foreach($subcategories as $subcategory)
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-body d-flex flex-column">
                    <img width="250" src="{{ $subcategory->img }}" class="img-responsive center-block d-block mx-auto" alt="frame">
     
                    <h5 class="card-title text-center">{{ $subcategory->name }}</h5>
                    <p class="card-text text-center">Explore various products and services under this subcategory.</p>
                    <a href="{{ route('products', $subcategory->id) }}" class="btn btn-primary mt-auto">View Products</a>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    <div class="row">
        <div class="col-md-12">
            <a href="{{ route('home') }}" class="btn btn-secondary mt-3">Back to Categories</a>
        </div>
    </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