@extends('layouts.base')
{{-- @section('title', __('labels.case_studies')) --}}
@push('css')
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

    <!-- Poppins -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f4f6fb;
        }

        .page-header, .rc-header {
            background: #4f46e5;
            color: #fff;
            padding: 20px 0;
        }

        .header-grid {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
        }

        .header-grid h4 {
            justify-self: center;
        }

        .content-card {
            border-radius: 16px;
            border: 1px solid #e5e7eb;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
            background: #fff;
        }

        .section-title {
            font-weight: 600;
            color: #24384a;
        }

        .icon-badge {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #4f46e5;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-right: 10px;
            flex-shrink: 0;
        }

        .list-check li {
            margin-bottom: 10px;
        }

        .list-check i {
            color: #22c55e;
            margin-right: 8px;
        }

        .btn-submit {
            background: #4f46e5;
            border: none;
            border-radius: 10px;
            font-weight: 600;
            padding: 14px;
            color: white;
        }

        .btn-submit:hover {
            background: #534bd5;
            color: white;
        }

        .form-control {
            border-radius: 10px;
            padding: 12px;
        }

        textarea.form-control {
            min-height: 120px;
        }

        @media (max-width: 767px) {
            .page-header {
                padding: 16px 0;
            }

            .page-header .header-title {
                font-size: 1rem;
                padding: 0 40px;
                /* prevents overlap with button */
            }

            .page-header .back-btn {
                padding: 6px 10px;
                font-size: 0.85rem;
            }
        }
        /*  */

        /* Header */
        .rc-navbar {
          background: #4f46e5;
          padding: 14px 0;
        }
    
        .rc-navbar a {
          color: #fff;
          text-decoration: none;
          font-weight: 600;
        }
    
        /* Success Icon */
        .rc-success-icon {
          width: 80px;
          height: 80px;
          background: #22c55e;
          color: #fff;
          border-radius: 50%;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 36px;
          box-shadow: 0 10px 25px rgba(34,197,94,.4);
        }
    
        /* Cards */
        .rc-card {
          background: #fff;
          border-radius: 16px;
          border: 1px solid #e5e7eb;
          box-shadow: 0 20px 40px rgba(0,0,0,.06);
        }
    
        .rc-step-circle {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          background: #4f46e5;
          color: #fff;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          font-weight: 600;
          flex-shrink: 0;
        }
    
        .rc-feature-box {
          background: #f8fafc;
          border-left: 4px solid #4f46e5;
          border-radius: 12px;
          padding: 18px;
          height: 100%;
        }
    
        footer {
          color: #94a3b8;
          font-size: 14px;
        }
    </style>
@endpush
@section('content')
    @include('modules.templates.header2', [
        'title' => $product->title ?? '',
    ])
    <div class="container my-5" id="product_detail_section">
        <div class="content-card p-4 p-lg-5">
            @include('modules.templates.detail-image',[
                'id' => $product->id ?? '',
                'title' => $product->title ?? '',
                'imageUrl' => $product->feature_image_url ?? '',
            ])

                {{-- <img src="{{ $product->feature_image_url ?? '' }}" alt="Ransomware Case Study" class="rc-image mb-5"> --}}

                {!! html_entity_decode($product->description ?? '') !!}
            <!-- Form -->
            <h2 class="section-title mb-3 mt-5">Ihre Empfehlungsanfrage</h2>
      
            <form id="productRequestForm" onsubmit="submitProductRequest(event)">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Ihr Name *</label>
                        <input type="hidden" id="product_id" name="id" value="{{ $product->id }}">
                        <input type="text" id="name" name="name" class="form-control" required>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Ihre E-Mail *</label>
                        <input type="email" id="email" name="email" class="form-control" required>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Kontakt-E-Mail *</label>
                        <input type="email" id="contact_email" name="contact_email" class="form-control" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Unternehmensname *</label>
                        <input type="text" id="company" name="company" class="form-control" required>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Telefonnummer</label>
                        <input type="text" id="phone" name="phone" class="form-control">
                    </div>

                    <div class="col-12">
                        <label class="form-label">Zusätzliche Informationen</label>
                        <textarea id="message" name="message" class="form-control" placeholder="Besondere Anforderungen, Zeitrahmen oder andere Details..."></textarea>
                    </div>

                    <div class="col-12">
                        <button type="submit" class="btn btn-submit w-100">
                            Empfehlung absenden
                        </button>
                    </div>
                </div>
            </form>

        </div>
    </div>

    <main class="container my-5" id="confirmation_section" style="display: none;">

        <!-- Success Header -->
        <div class="text-center mb-5">
            <div class="rc-success-icon mb-3">
                <i class="bi bi-check-lg"></i>
            </div>

            <h3 class="fw-semibold text-success">
                Vielen Dank für Ihre Empfehlung!
            </h3>

            <p class="text-muted mt-2 mx-auto" style="max-width:600px;">
                Sie haben einen wichtigen Beitrag zur IT-Sicherheit Ihres Kunden geleistet. Damit Sie genau wissen, was
                als Nächstes passiert, finden Sie hier alle weiteren Schritte auf einen Blick.
            </p>
        </div>

        <!-- Next Steps -->
        <div class="rc-card p-4 p-lg-5 mb-4 mx-auto" style="max-width: 720px;">
            <h5 class="fw-semibold mb-4 text-center">
                Was passiert als Nächstes?
            </h5>

            <div class="d-flex mb-4">
                <div class="rc-step-circle me-3">1</div>
                <div>
                    <strong>Kontakt innerhalb von 48 Stunden</strong>
                    <p class="mb-0 text-muted">
                        Ihr Kunde erhält eine E-Mail mit ersten Informationen zu den nächsten Schritten und zur
                        optimalen Vorbereitung auf den Penetrationstest.
                    </p>
                </div>
            </div>

            <div class="d-flex mb-4">
                <div class="rc-step-circle me-3">2</div>
                <div>
                    <strong>Kurzer Fragebogen</strong>
                    <p class="mb-0 text-muted">
                        Mit wenigen gezielten Fragen ermitteln wir den optimalen Testumfang und bewerten individuelle
                        Risiken.
                    </p>
                </div>
            </div>

            <div class="d-flex">
                <div class="rc-step-circle me-3">3</div>
                <div>
                    <strong>Angebot mit RiskCircle-Rabatt</strong>
                    <p class="mb-0 text-muted">
                        Auf Basis der Informationen erhält Ihr Kunde ein transparentes Angebot – inklusive des
                        vereinbarten RiskCircle-Rabatts.
                    </p>
                </div>
            </div>
        </div>

        <!-- Why Trust -->
        <div class="rc-card p-4 p-lg-5 mx-auto" style="max-width: 720px;">
            <h5 class="fw-semibold mb-4 text-center">
                Warum ist Ihr Kunde bei uns in guten Händen?
            </h5>

            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <div class="rc-feature-box">
                        <strong>Erfahrene Sicherheitsexperten</strong>
                        <p class="mb-0 text-muted">
                            Wir arbeiten nach anerkannten Standards und mit erfahrenen IT-Sicherheitsexperten.
                        </p>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="rc-feature-box">
                        <strong>Klare Handlungsempfehlungen</strong>
                        <p class="mb-0 text-muted">
                            Ihr Kunde erhält konkrete Maßnahmen mit echtem Mehrwert für die tägliche IT-Sicherheit.
                        </p>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="rc-feature-box">
                        <strong>Persönliche Begleitung</strong>
                        <p class="mb-0 text-muted">
                            Wir begleiten den gesamten Prozess – vom Erstkontakt bis zur Umsetzung.
                        </p>
                    </div>
                </div>
            </div>

            <p class="text-center text-muted small mb-0">
                Mit Ihrer Empfehlung tragen Sie aktiv dazu bei, Unternehmen besser zu schützen und widerstandsfähiger
                gegenüber Cyberangriffen zu machen.
                <br><strong>Vielen Dank für Ihr Vertrauen!</strong>
            </p>
        </div>

    </main>





    @include('modules.templates.copyright')
@endsection
@push('js')
    <script>
        const products = @json(isset($products) && !empty($products) ? $products : []);
        const URL_productRequestSubmit = "{{ route('product-requests.store') }}";
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.26.2/dist/sweetalert2.all.min.js" ></script>
    <script src="{{ asset('assets/custom/js/frontend/modules/products/index.js') }}?v=2"></script>
    <script>
    </script>
@endpush