@extends('Front.layout')

@push('front-styles')
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8f9fa;
        }

        .container {
            max-width: 800px;
        }

        .tracking-card {
            border: none;
            border-radius: 0.75rem;
        }



        .status-header {
            background-color: #e9ecef;
            border-bottom: 1px solid #dee2e6;
            font-weight: 600;
        }

        /* Styling for the progress tracker */
        .progress-timeline {
            display: flex;
            justify-content: space-between;
            list-style: none;
            padding: 0;
            margin: 2rem 0;
            position: relative;
        }

        .progress-timeline::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 3px;
            background-color: #e9ecef;
            transform: translateY(-50%);
            z-index: 1;
        }

        .progress-step {
            position: relative;
            z-index: 2;
            text-align: center;
        }

        .progress-marker {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: #e9ecef;
            border: 3px solid #e9ecef;
            display: inline-block;
            transition: all 0.3s ease;
        }

        .progress-step.completed .progress-marker {
            background-color: #198754;
            /* Green for completed */
            border-color: #198754;
        }

        .progress-step.active .progress-marker {
            background-color: #0d6efd;
            /* Blue for active */
            border-color: #0d6efd;
            transform: scale(1.2);
        }

        .progress-step-label {
            margin-top: 0.5rem;
            font-size: 0.85rem;
            color: #6c757d;
            font-weight: 500;
        }

        .progress-step.completed .progress-step-label,
        .progress-step.active .progress-step-label {
            color: #212529;
            font-weight: 600;
        }
    </style>
@endpush

@push('front-scripts')
    <script>
        var pixels = @json($metaPixels->where('target_page', 'check-referral.index')->where('target_element', 'button#cek-button')->toArray());
        console.log(pixels);
        document.querySelector("button#cek-button").addEventListener('click', function(event) {
            event.preventDefault();
            for (const p in pixels) {
                if (Object.prototype.hasOwnProperty.call(pixels, p)) {
                    const pixel = pixels[p];
                    if (pixel.source == "meta") {
                        //fbq('init', `${pixel.pixel_id}`);
                        fbq('trackCustom', `${pixel.pixel_event}`);
                    } else if (pixel.source == "tiktok") {
                        //ttq.load(`${pixel.pixel_id}`);
                        ttq.track(`${pixel.pixel_event}`);
                    } else if (pixel.source == "gtm") {
                        dataLayer.push({
                            'event': `${pixel.pixel_event}`
                        });
                    }
                }
            }

            setTimeout(function() {
                document.getElementById('trackingForm').submit();
            }, 200);

        });
    </script>
@endpush

@section('frontcontent')

    <div class="container my-5" style="min-height: 70vh;">
        <!-- Page Header -->
        <div class="text-center mb-5">

            <h1 class="fw-bold">Cek Kode Referral</h1>
            <p class="text-muted">
                Masukkan Kode Referral Anda di bawah ini untuk melihat apakah valid atau tidak.
            </p>
        </div>

        <!-- Tracking Form Card -->
        <div class="card shadow-sm tracking-card">
            <div class="card-body p-4">
                <form id="trackingForm" method="POST" action="{{ route('check-referral.cek') }}">
                    @csrf
                    <div class="row align-items-center">
                        <div class="col-md-9 mb-3 mb-md-0">
                            <label for="code" class="form-label visually-hidden">Kode Referral</label>
                            <input type="text" class="form-control form-control-lg" name="code" id="code"
                                placeholder="Masukan kode..." required
                                value="{{ old('code', @$code) }}">
                        </div>
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-lg btn-primary w-100"
                                style="background-color: {{ $landing->primary_color }};color: {{ $landing->secondary_color }};"
                                id="cek-button">
                                Cek
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        @if (isset($referral))
            @if ($referral)
                <!-- Divider for better visual separation -->
                <hr class="my-4 " id="resultDivider">

                <!-- Result Display Area (Initially Hidden) -->
                <div id="statusResult">
                    <div class="card shadow-sm tracking-card">
                        <div class="card-header status-header d-flex justify-content-between align-items-center p-3">
                            <span id="resultHeader">Kode Referral Anda:</span>
                            <span id="resultServiceNumber" class="badge bg-secondary">{{ $referral->code }}</span>
                        </div>
                        <div class="card-body p-4 p-md-5">

                         

                            <div class="row">
                                <div class="col-md-12 ">
                                    <ul>
                                        
                                        <li>
                                            <strong>
                                                Kode : {{ $referral->code }}
                                            </strong>
                                        </li>
                                        <li>
                                            <strong>
                                                Nama : {{ $referral->name }}
                                            </strong>
                                        </li>
                                        <li>
                                            <strong>
                                                Dipakai : {{ $referral->referrables_count }}
                                            </strong>
                                        </li>
                                        <li>
                                            <strong>
                                                Bonus : @if(str_contains("percent",$referral->type)) {{ $referral->value }} % @else {{ number_format($referral->value) }} @endif
                                            </strong>
                                        </li>
                                        
                                    </ul>
                                </div>
                            </div>

                        </div>
                        <div class="card-footer text-center text-muted p-3">
                            Ada pertanyaan? Hubungi kami di {{ $profil->kontak }}.
                        </div>
                    </div>
                </div>
            @else
                <!-- Not Found Alert (Initially Hidden) -->
                <div id="notFoundAlert" class="alert alert-danger mt-4" role="alert">
                    <h5 class="alert-heading">Tidak Ditemukan!</h5>
                    <p>Kode Referral yang Anda masukkan tidak valid. Mohon periksa kembali kode Anda dan coba lagi.</p>
                </div>
            @endif
        @endif




    </div>






@endsection