@push('metadata')
@php
    $page_id = 43;
    $mTitle   = $seoData['seo_title'] ?? '';
    $mDescr   = $seoData['meta_description'] ?? '';
    $faqs     = $seoData['faq'] ?? '[]';
    $mKWords  = $seoData['meta_keywords'] ?? '';
    $mUrl     = url()->current();
    $mImage   = config('constants.submit-coin');
@endphp

<title>{{ @$mTitle }}</title>
<meta name="keywords" content="{{ @$mKWords }}" />
<meta name="description" content="{{ @$mDescr }}" />
<meta property=og:locale content="{{ app()->getLocale() }}" />
<meta property=og:type content="{{config('constants.organisation_type_news')}}" />
<meta property="og:site_name" content="Crypto Presale" />
<meta property="og:title" content="{{ @$mTitle }}" />
<meta property="og:description" content="{{ @$mDescr }}" />
<meta property="og:url" content="{{ @$mUrl }}" />
<meta property="og:image" content="{{ @$mImage }}" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="{{ @$mTitle }}" />
<meta property="twitter:description" content="{{ @$mDescr }}" />
<meta property="twitter:url" content="{{ @$mUrl }}" />
<meta property="twitter:image" content="{{ @$mImage }}" />
<meta name="twitter:site" content="{{config('constants.twitter_url')}}" />
<meta name="twitter:creator" content="{{config('constants.twitter_url')}}" />
@endpush

<div>
    @push('styles')
    <style>
        #container {
            max-width: 1100px;
        }

        .step-container {
            position: relative;
            text-align: center;
            transform: translateY(-43%);
        }

        .step-circle {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background-color: #fff;
            line-height: 30px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            cursor: pointer;
        }

        .step-line {
            position: absolute;
            top: 16px;
            left: 50px;
            width: calc(100% - 100px);
            height: 2px;
            background-color: #051b33;
            z-index: -1;
        }

        #multi-step-form {
            overflow-x: hidden;
        }

        .progress {
            height: 3px;
            background: white;
        }

        .progress-bar {
            background-color: #051b33;
        }

        .logo-upload {
            margin-top: 10px;
        }

        .logo-preview {
            position: relative;
            display: inline-block;
            width: 120px;
            height: 120px;
        }

        .logo-img,
        .placeholder-circle {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #e0e0e0;
            background-color: #f9f9f9;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: #aaa;
        }

        .edit-icon {
            position: absolute;
            bottom: 0;
            right: 0;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .edit-icon:hover {
            background-color: #f1f1f1;
        }

        .edit-icon i {
            color: #555;
            font-size: 14px;
        }
    </style>
    @endpush
    <section class="brdcrumb">
        <div class="container">
            <ul class="mb-0">
                <li>
                    <a href="/" title="Home">Home</a>
                    <i class="fas fa-chevron-right small text-dark ms-2"></i>
                </li>
                <li>
                    <p class="h6 fw-normal mb-0 ms-2">{{ $seoData['breadcrumb'] ?? 'Submit Coin' }}</p>
                </li>
            </ul>
        </div>
    </section>

    <section class="py-5 submitcoin">
        <div class="container">
            <div class="row">
                <div class="col-lg-9 mx-auto">
                    <div class="contact-us-form py-4 border-0">
                        <div class="row">
                            @if (session()->has('success'))
                            <div class="alert alert-success mt-3">{{ session('success') }}</div>
                            @endif

                            <div class="col-xl-12 text-center">
                                <p class="h2 fw-bold mb-4">{{ $seoData['h1_title'] ?? 'Submit new coin' }}</p>
                            </div>

                            <div id="submitMessage"></div>
                            <div id="container" class="container mt-5">
                                <div class="progress px-1">
                                    <div class="progress-bar" role="progressbar"  style="width:
                                        @if($step == 1) 0%
                                        @elseif($step == 2) 25%
                                        @elseif($step == 3) 50%
                                        @elseif($step == 4) 75%
                                        @else 100%
                                        @endif;"   aria-valuenow="{{ $step }}"
                                       aria-valuemax="100">
                                    </div>
                                </div>
                                <div class="step-container d-flex justify-content-between">
                                    <div class="step-circle shadow" onclick="displayStep(1)">1</div>
                                    <div class="step-circle shadow" onclick="displayStep(2)">2</div>
                                    <div class="step-circle shadow" onclick="displayStep(3)">3</div>
                                    <div class="step-circle shadow" onclick="displayStep(4)">4</div>
                                    <div class="step-circle shadow" onclick="displayStep(5)">5</div>
                                </div>

                                <form id="multi-step-form" wire:submit.prevent="submit">
                                    <div class="step" style="{{ $step == 1 ? '' : 'display:none;' }}">
                                        <!-- Step 1 form fields here -->
                                        <span class="text-center fw-bold h3 d-block">Coin Details</span>
                                        <p class="fw-semibold text-center">
                                            Please complete the steps to add a new coin to Crypto Presale.
                                            After approval your project will be visible on our platform.
                                        </p>
                                        <div class="row mt-5">
                                            <div class="col-xl-4 text-center">
                                                <div class="mb-3">
                                                    <label for="logo" class="form-label fw-semibold d-block">Coin Logo</label>
                                                    <div
                                                        class="logo-upload text-center position-relative d-inline-block">
                                                        <div class="logo-preview position-relative">
                                                            @if ($logo)
                                                            <img src="{{ $logo->temporaryUrl() }}" alt="coin"
                                                                class="logo-img" width="120" height="120">
                                                            @else
                                                            <div class="placeholder-circle">+</div>
                                                            @endif
                                                            <label for="logo" class="edit-icon">
                                                                <i class="fa fa-pen"></i>
                                                            </label>
                                                        </div>
                                                        <input type="file" id="logo" wire:model="logo" accept="image/*"
                                                            hidden>
                                                        @error('logo')
                                                        <span class="text-danger d-block mt-2">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>

                                            </div>

                                            <div class="col-xl-8">
                                                <div class="mb-2">
                                                    <label for="name" class="form-label mb-0">
                                                        Coin Name <sup class="text-danger">*</sup>
                                                    </label>
                                                    <input type="text" class="form-control" wire:model="name"
                                                        name="name" id="name" placeholder="Please enter name" >
                                                    @error('name') <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                                <div class="mb-2">
                                                    <label for="symbol" class="form-label mb-0">
                                                        Symbol <sup class="text-danger">*</sup>
                                                    </label>
                                                    <input type="text" class="form-control" wire:model="symbol"
                                                        name="symbol" id="symbol" placeholder="Symbol Here" >
                                                    @error('symbol') <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                                <div class="mb-2">
                                                    <label for="description" class="form-label mb-0">
                                                        Description <sup class="text-danger">*</sup>
                                                    </label>
                                                    <textarea class="form-control" rows="2" wire:model="description"
                                                        name="description" id="description"
                                                        placeholder="Enter Description Here" ></textarea>
                                                    @error('description') <span
                                                        class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-xl-12 mt-3">
                                                <label>Categories (select at least one)*</label>
                                                <div class="checkboxflex mb-2">
                                                    @foreach ([
                                                    'Artificial Intelligence', 'Gambling', 'NFT Platform', 'Other',
                                                    'DeFiv', 'Gaming', 'Play To Earn', 'Pump.fun Tokens',
                                                    'Fan Token', 'Memecoins', 'Utility Token'
                                                    ] as $key => $cat)
                                                    <div class="listing-category">
                                                        <input type="checkbox" wire:model="categories"
                                                            id="cat{{ $key }}" value="{{ $cat }}">
                                                        <label for="cat{{ $key }}">{{ $cat }}</label>
                                                    </div>
                                                    @endforeach
                                                </div>
                                                <small class="text-danger">Select all categories that apply to your
                                                    token.</small>
                                                @error('categories') <small class="text-danger">{{ $message }}</small>
                                                @enderror
                                            </div>
                                        </div>
                                        @if(Auth::check())
                                            <button type="button" class="btn btn-primary next-step" wire:click="nextStep">Next</button>
                                        @else
                                            <button type="button" class="btn btn-warning" onclick="openLoginPopup()">
                                                <i class="fas fa-lock me-1"></i> Login to Proceed
                                            </button>
                                        @endif
                                    </div>

                                    <div class="step" style="{{ $step == 2 ? '' : 'display:none;' }}">
                                        <!-- Step 2 form fields here -->
                                        <span class="text-center fw-bold h3 d-block">Address Details</span>
                                        <div class="row mt-4">
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="websiteLink" class="form-label">
                                                        Project Website <sup class="text-danger">*</sup>
                                                    </label>
                                                    <input type="url" class="form-control" wire:model="websiteLink"
                                                        name="websiteLink" id="websiteLink"
                                                        placeholder="Please enter website link" >
                                                    @error('websiteLink') <span
                                                        class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="telegramLink" class="form-label">Telegram link</label>
                                                    <input type="url" class="form-control" wire:model="telegramLink"
                                                        name="telegramLink" id="telegramLink"
                                                        placeholder="Please enter Telegram link">
                                                    @error('telegramLink') <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="xLink" class="form-label">Twitter link</label>
                                                    <input type="url" class="form-control" wire:model="xLink"
                                                        name="xLink" id="xLink" placeholder="Please enter Twitter link">
                                                        @error('xLink') <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="discordLink" class="form-label">Discord link</label>
                                                    <input type="url" class="form-control" wire:model="discordLink"
                                                        name="discordLink" id="discordLink"
                                                        placeholder="Please enter Discord link">
                                                        @error('discordLink') <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="facebookLink" class="form-label">Facebook
                                                        link</label>
                                                    <input type="url" class="form-control" wire:model="facebookLink"
                                                        name="facebookLink" id="facebookLink"
                                                        placeholder="Please enter Facebook link">
                                                        @error('facebookLink') <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="instagramLink" class="form-label">Instagram
                                                        link</label>
                                                    <input type="url" class="form-control" wire:model="instagramLink"
                                                        name="instagramLink" id="instagramLink"
                                                        placeholder="Please enter Instagram link">
                                                        @error('instagramLink') <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="redditLink" class="form-label">Reddit link</label>
                                                    <input type="url" class="form-control" wire:model="redditLink"
                                                        name="redditLink" id="redditLink"
                                                        placeholder="Please enter Reddit link">
                                                        @error('redditLink') <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="mediumLink" class="form-label">Medium link</label>
                                                    <input type="url" class="form-control" wire:model="mediumLink"
                                                        name="mediumLink" id="mediumLink"
                                                        placeholder="Please enter Medium link">
                                                        @error('mediumLink') <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="mb-3">
                                                    <label for="whitepaperLink" class="form-label">Whitepaper
                                                        link</label>
                                                    <input type="url" class="form-control" wire:model="whitepaperLink"
                                                        name="whitepaperLink" id="whitepaperLink"
                                                        placeholder="Please enter whitepaper link">
                                                        @error('whitepaperLink') <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        <button type="button" class="btn btn-primary prev-step" wire:click="prevStep">Previous</button>
                                        <button type="button" class="btn btn-primary next-step" wire:click="nextStep">Next</button>
                                    </div>

                                    <div class="step" style="{{ $step == 3 ? '' : 'display:none;' }}">
                                        <!-- Step 3 form fields here -->
                                        <span class="text-center fw-bold h3 d-block">Listing Details</span>
                                        <div class="row mt-4">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label" for="coin">Total Coin / Token Supply: <sup
                                                        class="text-danger">*</sup>
                                                    <span class="fs-12 text-secondary">(Number only)</span></label>
                                                <input class="form-control" id="coin" type="number"
                                                    wire:model="total_coin" name="total_coin"
                                                    placeholder="Enter your total coins" >
                                                @error('total_coin') <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label" for="qty">Total Qty <sup
                                                        class="text-danger">*</sup>
                                                    <span class="fs-12 text-secondary">(Number only)</span></label>
                                                <input class="form-control" id="qty" type="number"
                                                    wire:model="quantity_of_coin" name="quantity_of_coin"
                                                    placeholder="Enter your total qty" >
                                                @error('quantity_of_coin') <span
                                                    class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label" for="price">Price <sup
                                                        class="text-danger">*</sup>
                                                    <span class="fs-12 text-secondary">(USD only)</span></label>
                                                <input class="form-control" id="price" type="number"
                                                    wire:model="ico_price" step="0.01" name="ico_price"
                                                    placeholder="Price" >
                                                    @error('ico_price') <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label" for="start-date">Start Date</label>
                                                <input class="form-control" id="start-date" type="date"
                                                    wire:model="start_time" name="start_time" >
                                                @error('start_time') <span class="text-danger">{{ $message }}</span>@enderror
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label" for="end-date">End Date</label>
                                                <input class="form-control" id="end-date" type="date"
                                                    wire:model="end_time" name="end_time" >
                                                @error('end_time') <span class="text-danger">{{ $message }}</span>@enderror
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label" for="soft-cap">Soft Cap</label>
                                                <input class="form-control" id="soft-cap" type="text"
                                                    wire:model="soft_cap" name="soft_cap" placeholder="Soft cap"
                                                    >
                                                    @error('soft_cap') <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label" for="hard-cap">Hard Cap</label>
                                                <input class="form-control" id="hard-cap" type="text"
                                                    wire:model="hard_cap" name="hard_cap" placeholder="Hard cap"
                                                    >
                                                    @error('hard_cap') <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label" for="personal-cap">Personal Cap</label>
                                                <input class="form-control" id="personal-cap" type="text"
                                                    wire:model="personal_cap" name="personal_cap"
                                                    placeholder="Personal cap" >
                                                    @error('personal_cap') <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label" for="link">ICO/IDO Buy Link</label>
                                                <input class="form-control" id="link" type="url"
                                                    wire:model="where_to_buy" name="where_to_buy"
                                                    placeholder="Enter your link" >
                                                    @error('where_to_buy') <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label" for="stage">Funding Stage</label>
                                                <select name="fund_stage" wire:model="fund_stage" id="stage"
                                                    class="form-select form-control">
                                                    <option value="">Select Funding Stage</option>
                                                    <option value="0">Privatesale</option>
                                                    <option value="1">Presale</option>
                                                    <option value="2">Publicsale</option>
                                                    <option value="3">ICO</option>
                                                    <option value="4">IEO</option>
                                                </select>
                                                @error('fund_stage') <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                            </div>
                                            <div class="col-12 mb-3">
                                                <label class="form-label" for="country">Country from Coin / Token
                                                    Issued:</label>
                                                <select class="form-select form-control" wire:model="country"
                                                    id="country" name="country">
                                                    <option value="">Please choose</option>
                                                    <option value="United States">United States</option>
                                                    <option value="United Kingdom">United Kingdom</option>
                                                    <option value="Canada">Canada</option>
                                                    <option value="Australia">Australia</option>
                                                    <option value="India">India</option>
                                                    <option value="Singapore">Singapore</option>
                                                    <!-- Add more countries as needed -->
                                                </select>
                                                @error('country') <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                            </div>
                                        </div>
                                        <button type="button" class="btn btn-primary prev-step" wire:click="prevStep">Previous</button>
                                        <button type="button" class="btn btn-primary next-step" wire:click="nextStep">Next</button>
                                    </div>

                                    <div class="step" style="{{ $step == 4 ? '' : 'display:none;' }}">
                                        <!-- Step 4 form fields here -->
                                        <span class="text-center fw-bold h3 d-block">Pricing Details</span>
                                        <div class="row mt-4">
                                            <div class="col-lg-4 col-md-6 mb-3">
                                                <label class="form-label" for="price1">Price</label>
                                                <input class="form-control" id="price1" type="number" wire:model="price"
                                                    step="0.01" name="price" >
                                                @error('price') <span class="text-danger">{{ $message }}</span>@enderror
                                            </div>
                                            <div class="col-lg-4 col-md-6 mb-3">
                                                <label class="form-label" for="currency">Currency</label>
                                                <input class="form-control" type="text" wire:model="currency"
                                                    id="currency" name="currency" value="USD" >
                                                @error('currency') <span class="text-danger">{{ $message }}</span>@enderror
                                            </div>
                                            <div class="col-lg-4 col-12 mb-3">
                                                <label class="form-label" for="fees">Fees</label>
                                                <input class="form-control" type="number" wire:model="fees" step="0.01"
                                                    id="fees" name="fees" >
                                                @error('fees') <span class="text-danger">{{ $message }}</span>@enderror
                                            </div>
                                            <div class="col-md-12 mb-3">
                                                <span class="h5 fw-bold">User Contact Info:</span>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label" for="contact">User Contact Type:</label>
                                                <select class="form-control" wire:model="user_contact_type" id="contact"
                                                    name="user_contact_type" >
                                                    <option value="">Contact Type</option>
                                                    <option value="email">Email</option>
                                                    <option value="telegram">Telegram</option>
                                                    <option value="WhatsApp number">WhatsApp Number</option>
                                                </select>
                                                @error('user_contact_type') <span class="text-danger">{{ $message }}</span>@enderror
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label" for="type">Enter Here:</label>
                                                <input class="form-control" id="type" type="text"
                                                    wire:model="user_contact" name="user_contact"
                                                    placeholder="Enter the Information" >
                                                @error('user_contact') <span class="text-danger">{{ $message }}</span>@enderror
                                            </div>
                                        </div>
                                        <button type="button" class="btn btn-primary prev-step" wire:click="prevStep">Previous</button>
                                        <button type="button" class="btn btn-primary next-step" wire:click="nextStep">Next</button>
                                    </div>

                                    <div class="step" style="{{ $step == 5 ? '' : 'display:none;' }}">
                                        <!-- Step 5 form fields here -->
                                        <span class="text-center fw-bold h3 d-block">Finish</span>
                                        <div class="text-center">
                                            <p>All Set! Please submit to continue.</p>
                                            <p>Thank you for submitting your coin to our platform.</p>
                                            <p>Our team will review your submission and will get back to you soon.
                                            </p>
                                        </div>
                                        <button type="button" class="btn btn-primary prev-step" wire:click="prevStep">Previous</button>
                                        @if(Auth::user())
                                        <button type="submit" class="btn btn-success">Submit</button>
                                        @else
                                        <button type="button" onclick="openLoginPopup()" class="btn btn-success">Submit</button>
                                        @endif
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @if(!empty($seoData['description']))
    <section class="py-1">
        <div class="container">
            <div class="policy-content bg-white p-4 rounded shadow-sm contentview">
                <div class="details-page">
                    {!! $seoData['description'] !!}
                </div>
            </div>
        </div>
    </section>
    @endif
    @if(!empty($faqs))
    <livewire:faq-section pageType="submit-coin" />
    @endif
    @push('scripts')

    <script>
        Livewire.on('triggerLoginPopup', () => {
            openLoginPopup();
        });
    </script>
    @endpush
</div>