@extends('layouts.app')

@section('title', 'Simple Test')

@section('content')
<div class="container mt-4">
    <h1>Bootstrap CSS Test</h1>
    
    <div class="row">
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    Test Card 1
                </div>
                <div class="card-body">
                    <p class="card-text">This card should have Bootstrap styling: white background, shadow, rounded corners, and proper spacing.</p>
                    <button class="btn btn-primary btn-sm">Primary Button</button>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-header bg-success text-white">
                    Test Card 2
                </div>
                <div class="card-body">
                    <p class="card-text">Grid should work: 4+4+4 columns on medium screens.</p>
                    <button class="btn btn-success btn-sm">Success Button</button>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-header bg-warning text-dark">
                    Test Card 3
                </div>
                <div class="card-body">
                    <p class="card-text">If this looks like plain text without styling, Bootstrap is not loading.</p>
                    <button class="btn btn-warning btn-sm">Warning Button</button>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mt-4">
        <div class="col-12">
            <div class="alert alert-info">
                <h5 class="alert-heading">Bootstrap Alert Test</h5>
                <p>If this alert has a blue background, white text, and proper padding, Bootstrap CSS is working correctly.</p>
                <hr>
                <p class="mb-0">The card headers above should be colored (blue, green, yellow) with white text.</p>
            </div>
        </div>
    </div>
    
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Bootstrap Components Test</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="list-group">
                                <a href="#" class="list-group-item list-group-item-action active">Active item</a>
                                <a href="#" class="list-group-item list-group-item-action">Second item</a>
                                <a href="#" class="list-group-item list-group-item-action">Third item</a>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="progress mb-3">
                                <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
                            </div>
                            <span class="badge bg-primary">Primary Badge</span>
                            <span class="badge bg-secondary ms-2">Secondary Badge</span>
                            <span class="badge bg-success ms-2">Success Badge</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection