@extends('mental.layouts.app')

@section('content')
<div class="container-fluid pt-4 px-4"> 
    <div class="row g-4">
        <div class="col-sm-6 col-xl-3">
            <a href="{{ route('mentalHealth.formShow', ['text' => 'adhd']) }}"><div class="bg-secondary rounded d-flex flex-column align-items-center justify-content-center p-4" style="min-height: 200px;">
                <i class="fa fa-brain fa-3x text-primary"></i>
                <p class="mb-2 mt-2 text-center">ADHD</p> 
            </div> </a>
        </div>
        <div class="col-sm-6 col-xl-3">
        <a href="{{ route('mentalHealth.formShow', ['text' => 'anxiety']) }}"><div class="bg-secondary rounded d-flex flex-column align-items-center justify-content-center p-4" style="min-height: 200px;">
                <i class="fa fa-heartbeat fa-3x text-primary"></i>
                <p class="mb-2 mt-2 text-center">Anxiety</p>
            </div></a>
        </div>
        <div class="col-sm-6 col-xl-3">
        <a href="{{ route('mentalHealth.formShow', ['text' => 'autism_spectrum']) }}"><div class="bg-secondary rounded d-flex flex-column align-items-center justify-content-center p-4" style="min-height: 200px;">
                <i class="fa fa-puzzle-piece fa-3x text-primary"></i>
                <p class="mb-2 mt-2 text-center">Autism Spectrum</p>
            </div></a>
        </div>
        <div class="col-sm-6 col-xl-3">
        <a href="{{ route('mentalHealth.formShow', ['text' => 'bipolar']) }}"><div class="bg-secondary rounded d-flex flex-column align-items-center justify-content-center p-4" style="min-height: 200px;">
                <i class="fa fa-moon fa-3x text-primary"></i>
                <p class="mb-2 mt-2 text-center">Bipolar</p>
            </div></a>
        </div>
    </div> 
</div>

<div class="container-fluid pt-4 px-4">
    <div class="row g-4">
        <div class="col-sm-6 col-xl-3">
        <a href="{{ route('mentalHealth.formShow', ['text' => 'depression']) }}"><div class="bg-secondary rounded d-flex flex-column align-items-center justify-content-center p-4" style="min-height: 200px;">
                <i class="fa fa-sad-tear fa-3x text-primary"></i>
                <p class="mb-2 mt-2 text-center">Depression</p>
            </div></a>
        </div>
        <div class="col-sm-6 col-xl-3">
        <a href="{{ route('mentalHealth.formShow', ['text' => 'eating_disorders']) }}"><div class="bg-secondary rounded d-flex flex-column align-items-center justify-content-center p-4" style="min-height: 200px;">
                <i class="fa fa-utensils fa-3x text-primary"></i>
                <p class="mb-2 mt-2 text-center">Eating Disorders</p>
            </div></a>
        </div>
        <div class="col-sm-6 col-xl-3">
        <a href="{{ route('mentalHealth.formShow', ['text' => 'general_psychological_distress']) }}"><div class="bg-secondary rounded d-flex flex-column align-items-center justify-content-center p-4" style="min-height: 200px;">
                <i class="fa fa-exclamation-circle fa-3x text-primary"></i>
                <p class="mb-2 mt-2 text-center">General Psychological Distress</p>
            </div></a>
        </div>
        <div class="col-sm-6 col-xl-3">
        <a href="{{ route('mentalHealth.formShow', ['text' => 'psychosis_schizophrenia']) }}"><div class="bg-secondary rounded d-flex flex-column align-items-center justify-content-center p-4" style="min-height: 200px;">
                <i class="fa fa-user-injured fa-3x text-primary"></i>
                <p class="mb-2 mt-2 text-center">Psychosis Schizophrenia</p>
            </div> </a>
        </div>
    </div> 
</div>

<div class="container-fluid pt-4 px-4">
    <div class="row g-4">
        <div class="col-sm-6 col-xl-3">
        <a href="{{ route('mentalHealth.formShow', ['text' => 'ptsd_trauma']) }}"><div class="bg-secondary rounded d-flex flex-column align-items-center justify-content-center p-4" style="min-height: 200px;">
                <i class="fa fa-shield-alt fa-3x text-primary"></i>
                <p class="mb-2 mt-2 text-center">PTSD Trauma</p>
            </div></a>
        </div>
        <div class="col-sm-6 col-xl-3">
        <a href="{{ route('mentalHealth.formShow', ['text' => 'substance_abuse']) }}"><div class="bg-secondary rounded d-flex flex-column align-items-center justify-content-center p-4" style="min-height: 200px;">
                <i class="fa fa-wine-bottle fa-3x text-primary"></i>
                <p class="mb-2 mt-2 text-center">Substance Abuse</p>
            </div></a>
        </div>
        <div class="col-sm-6 col-xl-3">
        <a href="{{ route('mentalHealth.formShow', ['text' => 'suicidality_risk']) }}"><div class="bg-secondary rounded d-flex flex-column align-items-center justify-content-center p-4" style="min-height: 200px;">
                <i class="fa fa-skull fa-3x text-primary"></i>
                <p class="mb-2 mt-2 text-center">Suicidality Risk</p> 
            </div></a>
        </div>
        <div class="col-sm-6 col-xl-3 bg-white text-dark border">
        <a href="{{ route('mentalHealth.dashboard') }}"><div class="bg-white rounded d-flex flex-column align-items-center justify-content-center p-4" style="min-height: 200px;">
             
                <p class="mb-2 mt-2 text-center">Exit</p> 
            </div></a>
        </div>
    </div> 
</div>

@endsection