@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
@push('styles')
<style>
    .heading {
        font-size: 14px;
        font-weight: 600;
    }

    .form-check-input {
        width: 20px;
        height: 20px;
        /* background: linear-gradient(107.97deg, #FFFFFF 40%, rgba(240, 227, 247, 0.5) 99.99%); */
        border: 1px solid rgba(108, 52, 131, 0.5);
    }

    .form-check-input:checked {
        background-color: #6C3483;
        border-color: #6C3483;
    }

    .golden-btn {
        padding: 8px 14px;
        background: #E0BC74;
        border-radius: 12px;
        border: 1px;
        color: #FFFFFF;
        font-weight: 600;
        box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.5);
    }

    .add {
        width: 24px !important;
        height: 24px;
    }

    .model {
        display: flex;
        justify-content: space-between;
    }

    @media (max-width : 470px) {
        .model {
            flex-direction: column;
        }
    }
</style>
@endpush
<div>
    <!-- Brdcrumb -->
    <section class="brdcrumb">
        <div class="container">
            <ul class="mb-0">
                <li><a href="{{ makeUrl('/') }}" 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">
                    <div class="bg-purple-gradient p-2 rounded-2">
                        <div class="text-center">
                            <span class="h2 fw-bold ">Add Casino Listing</span>
                        </div>
                        @if(session()->has('message'))
                            <div class="alert alert-success">{{ session('message') }}</div>
                        @endif

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

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

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

                            <div class="col-lg-4 col-12 p-1">
                                <label class="prf-lbl mb-1" for="name">Casino Name</label>
                                <input type="text" wire:model="casino_name" id="casino_name" class="curve-input" placeholder="Casino Name">
                                @error('casino_name')<span class="text-danger">{{ $message }}</span>@enderror
                            </div>

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

                            <div x-data x-init="$nextTick(() => {
                                $('#typeSelect').select2();
                                    $('#typeSelect').on('change', function() {
                                        $wire.set('casino_type', $(this).val());
                                    });
                                });"
                             class="col-lg-4 col-12 p-1" wire:ignore>
                                <label class="prf-lbl mb-1" for="type">Choose Casino Type</label>
                                <select id="typeSelect" wire:model="casino_type" class="curve-input" multiple>
                                    @foreach ($typesList as $t)
                                        <option value="{{ $t->id }}">{{ $t->title }}</option>
                                    @endforeach
                                </select>
                                @error('casino_type')<span class="text-danger">{{ $message }}</span>@enderror
                            </div>

                            <div class="col-lg-4 col-12 p-1">
                                <label class="prf-lbl mb-1" for="type">Slot Games</label>
                                <select wire:model="slot_games" class="curve-input">
                                    <option value="">Select an option</option>
                                    <option value="video-slot">Video Slot</option>
                                    <option value="progressive-jackpot-slot">Progressive Jackpot Slot</option>
                                    <option value="classic-slot">Classic Slot</option>
                                </select>
                                @error('slot_games')<span class="text-danger">{{ $message }}</span>@enderror
                            </div>

                            <div class="col-lg-4 col-12 p-1">
                                <label class="prf-lbl mb-1" for="type">Table Games</label>
                                <select wire:model="table_games" class="curve-input">
                                    <option value="">Select an option</option>
                                    <option value="blackjack">Blackjack</option>
                                    <option value="roulette">Roulette</option>
                                    <option value="baccarat">Baccarat</option>
                                    <option value="craps">Craps</option>
                                    <option value="poker-variants">Poker Variants</option>
                                </select>
                                @error('table_games')<span class="text-danger">{{ $message }}</span>@enderror
                            </div>

                            <div class="col-lg-4 col-12 p-1">
                                <label class="prf-lbl mb-1" for="type">Live Dealer Games</label>
                                <select wire:model="live_dealer_games" class="curve-input">
                                    <option value="">Select an option</option>
                                    <option value="live-blackjack">Live Blackjack</option>
                                    <option value="live-roulette">Live Roulette</option>
                                    <option value="live-baccarat">Live Baccarat</option>
                                    <option value="live-poker">Live Poker</option>
                                </select>
                                @error('live_dealer_games')<span class="text-danger">{{ $message }}</span>@enderror
                            </div>

                            <div class="col-lg-6 col-12 p-1">
                                <label class="prf-lbl mb-1" for="type">Specialty and Instant-Win Games</label>
                                <select wire:model="specialty_and_instant_win_games" class="curve-input">
                                    <option value="">Select an option</option>
                                    <option value="Keno Lottery-style number draw">Keno Lottery-style number draw</option>
                                    <option value="Bingo Number matching for lines or patterns">Bingo Number matching for lines or patterns</option>
                                    <option value="Scratch Cards Virtual scratch-and-win tickets">Scratch Cards Virtual scratch-and-win tickets</option>
                                    <option value="Arcade-style Games Coin toss, crash games, wheel spins">Arcade-style Games Coin toss, crash games, wheel spins</option>
                                </select>
                                @error('specialty_and_instant_win_games')<span class="text-danger">{{ $message }}</span>@enderror
                            </div>

                            <div class="col-lg-6 col-12 p-1">
                                <label class="prf-lbl mb-1" for="type">Sports and Virtual Betting</label>
                                <select wire:model="specialty_and_instant_win_games" class="curve-input">
                                    <option value="">Select an option</option>
                                    <option value="virtual-horse-racing">Virtual Horse Racing</option>
                                    <option value="football">Football</option>
                                    <option value="basketball">Basketball</option>
                                    <option value="e-sport-betting">E-Sport Betting</option>
                                </select>
                                @error('specialty_and_instant_win_games')<span class="text-danger">{{ $message }}</span>@enderror
                            </div>

                            <div class="col-lg-6 col-12 p-1">
                                <span class="heading">Model of Deal</span>
                                <div class="model">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="check1" name="model_of_deal" wire:model="model_of_deal"
                                            value="something">
                                        <label class="form-check-label" for="check1">CPA</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="check2" name="model_of_deal" wire:model="model_of_deal"
                                            value="something">
                                        <label class="form-check-label" for="check2">Rev. Share</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="check3" name="model_of_deal" wire:model="model_of_deal"
                                            value="something">
                                        <label class="form-check-label" for="check3">CPC</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="check4" name="model_of_deal" wire:model="model_of_deal"
                                            value="something">
                                        <label class="form-check-label" for="check4">Fix Fee</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="check5" name="model_of_deal" wire:model="model_of_deal"
                                            value="something">
                                        <label class="form-check-label" for="check5">Hybrid</label>
                                    </div>
                                </div>
                                @error('model_of_deal')<span class="text-danger">{{ $message }}</span>@enderror
                            </div>

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

                            <div class="col-12 p-1">
                                <label class="prf-lbl mb-1" for="bonus">Welcome Bonus</label>
                                <input type="text" wire:model="welcome_bonus" id="bonus" class="curve-input" placeholder="Welcome Bonus">
                                @error('welcome_bonus')<span class="text-danger">{{ $message }}</span>@enderror
                            </div>

                            <div class="col-lg-4 col-md-6 col-12 p-1">
                                <span class="heading">KYC Required?</span>
                                <div class="d-flex justify-content-start gap-3">
                                    <div class="form-check">
                                        <input class="form-check-input" name="kyc_required" type="radio" id="kyc_required_yes" wire:model="kyc_required"
                                            value="1">
                                        <label class="form-check-label" for="kyc_required_yes">Yes</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" name="kyc_required" type="radio" id="kyc_required_no" wire:model="kyc_required"
                                            value="0">
                                        <label class="form-check-label" for="kyc_required_no">No</label>
                                    </div>
                                </div>
                                @error('kyc_required')<span class="text-danger">{{ $message }}</span>@enderror
                            </div>

                            <div class="col-lg-4 col-md-6 col-12 p-1">
                                <span class="heading">No Deposit?</span>
                                <div class="d-flex justify-content-start gap-3">
                                    <div class="form-check">
                                        <input class="form-check-input" name="no_deposit" type="radio" id="no_deposit_yes" wire:model="no_deposit" value="1">
                                        <label class="form-check-label" for="no_deposit_yes">Yes</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" name="no_deposit" type="radio" id="no_deposit_no" wire:model="no_deposit" value="0">
                                        <label class="form-check-label" for="no_deposit_no">No</label>
                                    </div>
                                </div>
                                @error('no_deposit')<span class="text-danger">{{ $message }}</span>@enderror
                            </div>

                            <div class="col-lg-4 col-12 p-1">
                                <label class="prf-lbl mb-1" for="bonus">Other Bonus <span class="fs-14 text-muted">(if
                                        any)</span></label>
                                <input type="text" wire:model="other_bonus" id="bonus" class="curve-input" placeholder="Other Bonus">
                                @error('other_bonus')<span class="text-danger">{{ $message }}</span>@enderror
                            </div>

                            <span class="d-block h4 fw-bold my-3">Casino Social Media Handles</span>

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

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

                            <!-- <div class="col-12 text-end mt-3">
                                <button type="button" class="golden-btn rounded-2" title="Add More Casinos">
                                    <img src="./assets/images/add (1).png" class="img-fluid add" alt="Add More Casino">
                                    Add More Casinos</button>
                            </div> -->

                            <div class="col-12 text-center mt-3">
                                <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' => 'submit-casino-listing'])
    </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>