@push('meta_data')
    <title>{{ $seo->seo_title ?? config('app.name') }}</title>
    <meta name="description" content="{{ $seo->meta_description ?? '' }}">
    <meta name="keywords" content="{{ $seo->meta_keywords ?? '' }}">

    {{-- Open Graph --}}
    <meta property="og:title" content="{{ $seo->seo_title ?? '' }}">
    <meta property="og:description" content="{{ $seo->meta_description ?? '' }}">
    {{-- <meta property="og:image" content="{{ $seo->og_image ?? asset('default-og.png') }}"> --}}
    <meta property="og:type" content="website">
@endpush
<div>
    <!-- Brdcrumb -->

    <section class="brdcrumb">
        <div class="container">
            <ul class="mb-0">
                <li><a href="index.html" title="Home">Home</a></li>
                <li class="">{{ $seo->breadcrum ?? '' }}</li>
            </ul>
        </div>
    </section>

    <!-- Brdcrumb -->

    <!-- Page Content -->
    <section>
        <div class="container">
            <div class="row">
                <div class="col-xl-10 mx-auto text-center">
                    <span class="h2 fw-semibold">{{ $seo->h1 ?? '' }}</span>
                    <p>{{ $seo->short_description ?? '' }}</p>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-10 mx-auto">
                    <div class="bg-purple-gradient p-2 rounded-2">
                        <div class="text-center">
                            <span class="h2 fw-bold ">Claim Casino Listing</span>
                        </div>
                        @if (session()->has('success'))
                            <div id="success-alert" class="alert alert-success">
                                {{ session('success') }}
                            </div>

                            <script>
                                // Wait 5 seconds (5000 ms) and then hide
                                setTimeout(function() {
                                    var alert = document.getElementById('success-alert');
                                    if (alert) {
                                        alert.style.display = 'none';
                                    }
                                }, 5000); // 5000 ms = 5 seconds
                            </script>
                        @endif


                        <form wire:submit.prevent="submit" class="row p-4">
                            {{-- <div class="col-lg-6 col-12 p-1">
                                <label class="prf-lbl mb-1">Casino Name</label>
                                <input type="text" wire:model="name" class="curve-input" placeholder="Name">
                                @error('name')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="col-lg-6 col-12 p-1">
                                <label class="prf-lbl mb-1">Casino Website URL</label>
                                <input type="url" wire:model="website" class="curve-input" placeholder="Website">
                                @error('website')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div> --}}

                            <span class="d-block h5 fw-bold purple-clr my-3">
                                <i class="fa-solid fa-file-pen me-1"></i> Profile of the Claimant
                            </span>

                            <div class="col-lg-6 col-12 p-1">
                                <label class="prf-lbl mb-1">Linkedin Profile URL</label>
                                <input type="url" wire:model="linkedin" class="curve-input" placeholder="Linkedin">
                                @error('linkedin')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="col-lg-6 col-12 p-1">
                                <label class="prf-lbl mb-1">Telegram ID</label>
                                <input type="text" wire:model="telegram" class="curve-input" placeholder="Telegram">
                                @error('telegram')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="col-lg-6 col-12 p-1">
                                <label class="prf-lbl mb-1">Official Email ID</label>
                                <input type="email" wire:model="email" class="curve-input"
                                    placeholder="Official Email ID">
                                @error('email')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="col-lg-6 col-12 p-1">
                                <label class="prf-lbl mb-1">Casino Verification Page Link</label>
                                <input type="url" wire:model="verify" class="curve-input"
                                    placeholder="Casino Verification Page Link">
                                @error('verify')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="col-12 text-center mt-2">
                                <button type="submit" class="purple-btn rounded-2" title="Submit">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Page Content -->

    <!-- faqs -->
    <div wire:ignore>
        @livewire('faqs', ['page' => 'claim-casinos'])
    </div>
    <!-- Faqs -->

    <!-- Content -->
    <section>
        <div class="container">
            <div class="row">
                <div class="col-12 p-1 top-border bg-card-gradient">
                    <div class="details-page py-3">
                        {{ $seo->description }}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Content -->
</div>