@extends('layouts.app')

@section('content')
<div class="container">
    <h1 class="text-center mb-4 text-success">Welcome, {{ Auth::user()->name }}! </h1>
    

    <div class="row g-4">
        <!-- Livestock Count -->
        <div class="col-md-6">
            <a href="{{ url('/species-count') }}" class="text-decoration-none">
                <div class="card text-center shadow-lg border-0 bg-light">
                    <div class="card-body">
                        <div class="icon mb-3">
                            <i class="fas fa-paw fa-3x text-success"></i>
                        </div>
                        <h5 class="card-title text-uppercase text-dark">Total Active Livestock</h5>
                        <p class="display-3 text-success fw-bold">{{ $livestockCount }}</p>
                    </div>
                </div>
            </a>
        </div>

        <!-- Veterinarian Count -->
        <!-- <div class="col-md-6">
            <a href="{{ url('/livestocks') }}" class="text-decoration-none">
                <div class="card text-center shadow-lg border-0 bg-light">
                    <div class="card-body">
                        <div class="icon mb-3">
                            <i class="fas fa-user-md fa-3x text-info"></i>
                        </div>
                        <h5 class="card-title text-uppercase text-dark">Livestock Veterinarians</h5>
                        <p class="display-3 text-info fw-bold">{{ $veterinarianCount }}</p>
                    </div>
                </div>
            </a>
        </div> -->

        <!-- Total Medical Records -->
        <div class="col-md-6">
            <a href="{{ url('/livestocks') }}" class="text-decoration-none">
                <div class="card text-center shadow-lg border-0 bg-light">
                    <div class="card-body">
                        <div class="icon mb-3">
                            <i class="fas fa-stethoscope fa-3x text-warning"></i>
                        </div>
                        <h5 class="card-title text-uppercase text-dark">Total Medical Records</h5>
                        <p class="display-3 text-warning fw-bold">{{ $medicalCount }}</p>
                    </div>
                </div>
            </a>
        </div>

        <!-- Total Vaccination Records -->
        <div class="container my-5 d-flex justify-content-center align-items-center">
        <div class="col-md-6">
            <a href="{{ url('/livestocks') }}" class="text-decoration-none">
                <div class="card text-center shadow-lg border-0 bg-light">
                    <div class="card-body">
                        <div class="icon mb-3">
                            <i class="fas fa-syringe fa-3x text-danger"></i>
                        </div>
                        <h5 class="card-title text-uppercase text-dark">Total Vaccination Records</h5>
                        <p class="display-3 text-danger fw-bold">{{ $vaccinationCount }}</p>
                    </div>
                </div>
            </a>
        </div>
    </div>
    </div>

    <!-- <div class="text-center mt-5">
        <a href="{{ url('/livestocks') }}" class="btn btn-success btn-lg shadow-sm">
            <i class="fas fa-home"></i> Go to Home
        </a>
    </div> -->
</div>

<style>
    body {
        background-color: #f8fafc;
    }
    .card {
        border-radius: 15px;
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }
    .card-title {
        font-size: 1.25rem;
        font-weight: bold;
    }
    .display-3 {
        font-size: 3.5rem;
        margin: 0;
    }
    .btn-success {
        background-color: #28a745;
        border: none;
        padding: 12px 25px;
        border-radius: 10px;
        font-size: 1.25rem;
        font-weight: bold;
    }
    .btn-success:hover {
        background-color: #218838;
    }
    .icon {
        margin-bottom: 20px;
    }
</style>
@endsection