@extends('layouts.main')

@section('title', 'Request Help')

@section('styles')
<style>
    /* ===== GLOBAL ===== */
    body {
        font-family: 'Poppins', sans-serif;
        background: #0f172a;
        color: #e2e8f0;
    }

    /* ===== HERO ===== */
    .hero {
        height: 100vh;
        background: url('war.jpeg') center/cover no-repeat;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

        .hero::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            z-index: 1;
        }

    .hero-content {
        position: relative;
        z-index: 2;
        text-align: center;
        max-width: 900px;
        padding: 0 15px;
        animation: heroFade 1.5s ease forwards;
    }

    .hero h1 {
        font-size: 3.8rem;
        font-weight: 900;
        color: #ffffff;
        text-shadow: 0 0 15px rgba(0,0,0,0.7);
        margin-bottom: 20px;
        line-height: 1.2;
        background: linear-gradient(90deg, #38bdf8, #6366f1);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .hero p {
        font-size: 1.5rem;
        margin-bottom: 35px;
        color: #e2e8f0;
        opacity: 0;
        animation: fadeUp 1.2s forwards 0.5s;
    }

    /* ===== FORM SECTION ===== */
    .form-section {
        padding: 100px 0;
    }

    .request-card {
        background: rgba(255,255,255,0.05);
        backdrop-filter: blur(15px);
        border-radius: 25px;
        padding: 40px;
        box-shadow: 0 15px 40px rgba(0,0,0,0.4);
        animation: fadeUp 1s ease;
    }

    /* ===== FLOATING INPUT ===== */
    .form-group {
        position: relative;
        margin-bottom: 25px;
    }

    .form-control {
        background: transparent;
        border: 1px solid #334155;
        color: white;
        padding: 15px;
        border-radius: 10px;
    }

        .form-control:focus {
            border-color: #38bdf8;
            box-shadow: 0 0 10px rgba(56,189,248,0.3);
        }

    .form-label {
        position: absolute;
        top: 12px;
        left: 15px;
        color: #94a3b8;
        font-size: 14px;
        transition: 0.3s;
        pointer-events: none;
    }

    .form-control:focus + .form-label,
    .form-control:not(:placeholder-shown) + .form-label {
        top: -10px;
        font-size: 12px;
        color: #38bdf8;
    }

    /* ===== BUTTON ===== */
    .submit-btn {
        background: linear-gradient(135deg,#38bdf8,#6366f1);
        border: none;
        padding: 14px;
        width: 100%;
        border-radius: 30px;
        font-weight: bold;
        transition: 0.3s;
    }

        .submit-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 30px rgba(56,189,248,0.4);
        }

    /* ===== SUCCESS MESSAGE ===== */
    .success-msg {
        display: none;
        background: rgba(34,197,94,0.1);
        border: 1px solid #22c55e;
        padding: 15px;
        border-radius: 10px;
        margin-top: 20px;
        color: #22c55e;
        text-align: center;
    }

    /* ===== ANIMATION ===== */
    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>
@endsection

@section('content')
    <!-- HERO -->
    <section class="hero">
        <div class="overlay"></div>
        <div class="container hero-content text-center">
            <h1>Request Assistance</h1>
            <p>Submit your request and our team will respond quickly</p>
        </div>
    </section>

    <!-- FORM -->
    <section class="form-section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-7">
                    <div class="request-card">

                        <form id="helpForm">

                            <div class="form-group">
                                <input type="text" class="form-control" required placeholder=" ">
                                <label class="form-label">Full Name</label>
                            </div>

                            <div class="form-group">
                                <input type="tel" class="form-control" required placeholder=" ">
                                <label class="form-label">Phone Number</label>
                            </div>

                            <div class="form-group">
                                <select class="form-control" required>
                                    <option value=""> </option>
                                    <option>Food Assistance</option>
                                    <option>Medical Help</option>
                                    <option>Shelter</option>
                                    <option>Other</option>
                                </select>
                                <label class="form-label">Type of Help</label>
                            </div>

                            <div class="form-group">
                                <textarea class="form-control" rows="4" required placeholder=" "></textarea>
                                <label class="form-label">Describe your situation</label>
                            </div>

                            <button type="submit" class="submit-btn">Submit Request</button>

                            <div class="success-msg" id="successMsg">
                                Your request has been sent successfully!
                            </div>

                        </form>

                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
<script>
    /* ===== FORM SUBMIT ===== */
    document.getElementById("helpForm").addEventListener("submit", function (e) {
        e.preventDefault();

        const msg = document.getElementById("successMsg");
        msg.style.display = "block";

        // reset form
        this.reset();

        // hide after 4 sec
        setTimeout(() => {
            msg.style.display = "none";
        }, 4000);
    });
</script>
@endsection