@extends('layouts.koinonia.app')

@section('title', $settings->title ?? $page_title)

@push("after-styles")
<style>
    .testimony-card { border-left: 4px solid #ecru; background: #fdfdfd; transition: 0.3s; }
    .testimony-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
    .btn-faith { padding: 12px 25px; border-radius: 50px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; }
</style>
@endpush

@section('content')
<div class="page status-publish has-post-thumbnail hentry">

    {{-- DYNAMIC HERO SECTION --}}
    <section class="hero alignfull hero_min_height bg_black">
        <div class="photo photo_background gradient_bottom_black photo_overlay">
            @if($settings->media_type == 'video')
                <video src="{{ asset($settings->background_media) }}" muted loop autoplay style="width:100%; height:100%; object-fit:cover;"></video>
            @else
                <img loading="lazy" src="{{ asset($settings->background_media ?? '/frontend-assets/template/1/images/CTY_MAY22_101-1500x1000.jpg') }}">
            @endif
        </div>

        <div class="container">
            <div class="row justify-content-center align-items-end align-items-md-center">
                <div class="col col-sm-11 col-md-10">
                    <div class="content">
                        <h1><strong>{{ $settings->title }}</strong></h1>
                        <h3 class="text-white">{{ $settings->subtitle }}</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="gutenberg_section">
        <div class="container">
            <div class="content">
                <div class="row justify-content-center no_vertical_padding">
                    <div class="col-sm-11 col-md-10 col-xl-9 col-xxl-8">
                        <div class="gutenberg">

                            {{-- DYNAMIC DESCRIPTION --}}
                            <div class="has-text-align-center mb-5">
                                {!! $settings->description !!}
                            </div>

                            {{-- DYNAMIC BUTTONS --}}
                            <div class="d-flex justify-content-center gap-3 mb-5">
                                @if($settings->btn1_name)
                                    <a href="mailto:{{ $settings->btn1_email }}" class="btn btn-primary btn-faith mr-2">{{ $settings->btn1_name }}</a>
                                @endif
                                @if($settings->btn2_name)
                                    <a href="{{ $settings->btn2_url }}" target="_blank" class="btn btn-outline-dark btn-faith">{{ $settings->btn2_name }}</a>
                                @endif
                            </div>

                            <h2 class="has-text-align-center"><strong>Share Your Testimony</strong></h2>
                            
                            {{-- TESTIMONY SUBMISSION FORM --}}
                            <div class='gf_browser_unknown gform_wrapper gravity-theme' id='gform_wrapper_10'>
                                <form method='post' action='{{ route("testimonies.store") }}' id='gform_10'>
                                    @csrf
                                    <div class='gform_body gform-body'>
                                        <div class='gform_fields top_label'>
                                            {{-- Name Fields --}}
                                            <fieldset class="gfield field_sublabel_below">
                                                <legend class='gfield_label'>Name<span class="gfield_required">*</span></legend>
                                                <div class='ginput_complex gf_name_has_2'>
                                                    <span class='name_first'>
                                                        <input type='text' name='first_name' required placeholder="First Name" />
                                                    </span>
                                                    <span class='name_last'>
                                                        <input type='text' name='last_name' required placeholder="Last Name" />
                                                    </span>
                                                </div>
                                            </fieldset>

                                            {{-- Email Field --}}
                                            <div class="gfield">
                                                <label class='gfield_label'>Email<span class="gfield_required">*</span></label>
                                                <input name='email' type='email' class='large' required />
                                            </div>

                                            {{-- Message Field --}}
                                            <div class="gfield">
                                                <label class='gfield_label'>Your Testimony<span class="gfield_required">*</span></label>
                                                <textarea name='message' class='textarea large' rows='8' required></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class='gform_footer'> 
                                        <input type='submit' class='gform_button button' value='Submit Testimony' />
                                    </div>
                                </form>
                            </div>

                            <hr class="my-5">

                            {{-- TESTIMONY FEED (BANK) --}}
                            <h2 class="has-text-align-center"><strong>Recent Faith Stories</strong></h2>
                            <div class="row mt-4">
                                @forelse($testimonies as $testimony)
                                    <div class="col-md-12 mb-4">
                                        <div class="card testimony-card border-0 shadow-sm p-4">
                                            <h5 class="mb-1"><strong>{{ $testimony->full_name }}</strong></h5>
                                            <small class="text-muted mb-3 d-block">{{ $testimony->created_at->format('M d, Y') }}</small>
                                            <p class="mb-0 italic">"{!! nl2br(e($testimony->message)) !!}"</p>
                                        </div>
                                    </div>
                                @empty
                                    <p class="text-center text-muted">Be the first to share your testimony.</p>
                                @endforelse
                            </div>

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