@extends('layout')

@section('content')
<link href="css/landing.css" rel="stylesheet">
@if (session('login_success'))
<div class="custom-modal" id="customAlert">
    <div class="modal-content">
        <span class="close-btn" onclick="closeCustomAlert()">&times;</span>
        <p class="success-message">{{ session('login_success') }}</p>
    </div>
</div>

@php
    session()->forget('login_success');
@endphp
@endif
    <div class="header-cont height-700">
        <div class="header-container">
            <h1 class="text-black display-4">Post-Traumatic Stress Disorder (PTSD)</h1>
            <div>
                <h4 class="text-black short-description display-5 p-4">PTSD is a psychological disorder that is activated by a horrifying incident - whether one has personally experienced it or observed it. </h4>
            </div>
            
        </div>
    </div>

    <div class="content-margin section1">
        <div class="subsection1">
            <h5 class="display-4 pb-4">“Healing Beyond The Shadows of PTSD: Navigating Life After Trauma.”</h5>
            <p class="text-justify">We are dedicated to reducing the obstacles posed by PTSD helping individuals to embrace the life they desire. We are providing reliable resources and tests to assist people to reduce the intensity of the terrifying events which is triggering them, ultimately helping them discover the relief they seek. This &nbsp initiative &nbsp is &nbsp to &nbsp identify individuals &nbsp who &nbsp are &nbsp struggling &nbsp with &nbsp  PTSD &nbsp and &nbsp help &nbsp them &nbsp by &nbsp providing   &nbsp various &nbsp methods &nbsp which &nbsp  can &nbsp help &nbsp them &nbsp to overcome &nbsp those &nbsp triggers &nbsp  which &nbsp are &nbsp scaring &nbsp them. This &nbsp website &nbsp also &nbsp helps &nbsp to &nbsp spread&nbsp  awareness &nbsp among &nbsp users &nbsp about &nbsp the &nbsp Mental &nbsp health &nbsp  condition &nbsp called &nbsp "Post- Traumatic Stress  Disorder", &nbsp its &nbsp symptoms, causes &nbsp and &nbsp  treatment &nbsp options.</p>
        </div>
        <div class="subsection2">
            <img src="\assets\grp_therapy.png" alt="therapy session" class="content_img">
        </div>
    </div>

                <div class="survey_btn_container" style="margin-left:200px">
                <a href="{{ route('questionnaire') }}"><button type="button" class="btn survey_btn" style="margin-right:100px text-align:center;">Start test
                    </button></a>
            </div>

    <div class="content-margin">
        <div class="card-content">
            <div class="row">
                <div class="col-md-6 col-lg-3 mb-3" style="border:none">
                    <div class="card bg-light mb-3" style="max-width: 20rem; border:none">
                        {{-- <img class="card-img-top" src="\assets\depression.svg" alt="Card image cap"> --}}
                        <div class="card-body">
                            <h2 style="color: #00796B;" class="card-title"><b>What can cause PTSD?</b></h2>
                            <p class="card-text">PTSD can affect anyone who has been exposed to trauma. Trauma is an emotional reaction to complex events, such as abuse, rape, combat or a natural disaster.
                            </p>
                            <a href="{{route('about')}}"style="color: #00796B;"
                                class="card-link">Learn More</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 mb-3">
                    <div class="card bg-light mb-3" style="max-width: 20rem; border:none">
                        {{-- <img class="card-img-top" src="\assets\depression.svg" alt="Card image cap"> --}}
                        <div class="card-body">
                            <h2 style="color: #00796B;"class="card-title"><b>What PTSD Triggers are?</b> </h2>
                            <p class="card-text">Triggers are stimuli or events that can evoke distressing symptoms in individuals who have experienced a traumatic event.</p>
                            <a style="color: #00796B;"href="{{route('cause')}}"
                                class="card-link">Learn More</a>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-3 mb-3" style="border:none">
                    <div class="card bg-light mb-3" style="max-width: 20rem; border:none">
                        {{-- <img class="card-img-top" src="\assets\depression.svg" alt="Card image cap"> --}}
                        <div class="card-body">
                            <h2 style="color: #00796B;"class="card-title"><b>Signs of PTSD</b></h2>
                            <p class="card-text">Symptoms may vary from person to person however, some of the common symptoms are self isolation,flashbacks,severe anxiety,or uncontrollable thoughts.
                            </p>
                            <a href="{{route('signs')}}"style="color: #00796B;"
                                class="card-link">Learn More</a>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-3 mb-3">
                    <div class="card bg-light mb-3" style="max-width: 20rem; border:none">
                        {{-- <img class="card-img-top" src="\assets\depression.svg" alt="Card image cap"> --}}
                        <div class="card-body">
                            <h2 style="color: #00796B;"class="card-title"><b>How to cure PTSD?</b></h2>
                            <p class="card-text">“Psychotherapies like Prolonged Exposure and Cognitive Behavioral Therapy have proven to be effective.</p>
                            <a href="{{route('treatments')}}"style="color: #00796B;"
                                class="card-link">Learn More</a>
                        </div>
                    </div>
                </div>
                


            </div>
        </div>
        <div id="aboutus">
         <article class="contents">
            <section id="intro">

               
            </section></article></div>
    </div>
    <script>
        function showCustomAlert() {
            document.getElementById('customAlert').style.display = 'flex';
        }

        // Function to close the custom alert modal
        function closeCustomAlert() {
            document.getElementById('customAlert').style.display = 'none';
        }

        // Automatically close the alert after 5 seconds (adjust as needed)
        setTimeout(closeCustomAlert, 5000);

        showCustomAlert();
    </script>
@endsection