@push('metadata')
@php
$page_id = 36;
$mTitle = @$priceDetails['seo_title'];
$mDescr = @$priceDetails['meta_description'];
$faqs = $priceDetails['faq'] ?? '[]';
$mKWords = $priceDetails['meta_keywords'];
$mUrl = url()->current();
$mImage = config('constants.crypto-press-release');
@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
@push('head_scripts')
{!! SchemaHelper::webpageSchema($mTitle ?? null, $mDescr ?? null) !!}
{!! SchemaHelper::getImageObjectSchema($priceDetails['logo'],$mTitle) !!}
{!! SchemaHelper::priceArticleSchema($priceDetails) !!}
{!! SchemaHelper::getFaqSchema($priceDetails['crypto_market_faq']) !!}
{!! SchemaHelper::newsListArticleSchema($cryptoNews['data']) !!}
{!! SchemaHelper::getBreadcrumbSchema([['name' => 'Home', 'url' => url('/')],['name' => 'Crypto Price', 'url' => 'https://cryptohindinews.in/list-crypto-price-inr-india'],['name' => $priceDetails['name'], 'url' => $mUrl]]) !!}
@endpush
@push('styles')
<style>
    .converter-box {
        background: #f4f8ff;
        padding: 25px;
        border-radius: 10px;
        margin: 20px 0;
    }

    .converter-title {
        font-size: 22px;
        font-weight: 700;
    }

    .converter-input-box {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
        align-items: center;
    }

    .converter-input,
    .converter-select {
        padding: 10px;
        border: 1px solid #dcdcdc;
        border-radius: 6px;
        font-size: 16px;
        width: 200px;
    }

    .rate-box {
        font-size: 15px;
        font-weight: 600;
    }

    .stat-item:last-child {
        margin-bottom: 0;
    }

    .stat-label {
        color: #262626;
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .range-values {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .range-value {
        font-size: 14px;
        font-weight: 600;
        color: #1e293b;
    }

    .range-value.low {
        color: #f43f5e;
    }

    .range-value.high {
        color: #10b981;
    }

    .range-container {
        position: relative;
    }

    .type-badge.spot {
        background: #d1f4e0;
        color: #0f5132;
    }

    .type-badge {
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .type-badge.perp {
        background: #ffe5d3;
        color: #7c3b00;
    }

    .range-bar {
        position: relative;
        height: 6px;
        background: #e2e8f0;
        border-radius: 10px;
        overflow: visible;
        margin: 0 12px;
    }

    .range-label {
        position: absolute;
        top: -2px;
        font-size: 11px;
        font-weight: 600;
        color: #94a3b8;
    }

    .range-label.left {
        left: 0;
    }

    .range-label.right {
        right: 0;
    }

    .range-indicator {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 12px;
        height: 12px;
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        border-radius: 50%;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2),
            0 4px 12px rgba(59, 130, 246, 0.4);
        animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {

        0%,
        100% {
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2),
                0 4px 12px rgba(59, 130, 246, 0.4);
        }

        50% {
            box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.1),
                0 4px 16px rgba(59, 130, 246, 0.6);
        }
    }

    .volume-value {
        font-size: 18px;
        font-weight: 700;
        background: linear-gradient(135deg, #d91c34 0%, #d13347 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stats-grid {
        display: grid;
        gap: 10px;
    }

    .calculator-section {
        background: #ffffff;
        border-radius: 8px;
        padding: 10px 15px;
        border: 1px solid #e9ecef;
    }

    .calc-header {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 0px;
        color: #212529;
    }

    .calc-row {
        display: flex;
        gap: 10px;
        margin-bottom: 12px;
        align-items: center;
    }

    .calc-input-group {
        flex: 1;
        display: flex;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        overflow: hidden;
    }

    .calc-input-group input {
        flex: 1;
        border: none;
        padding: 12px 15px;
        font-size: 15px;
        outline: none;
    }

    .calc-input-group .currency-label {
        background: #f8f9fa;
        padding: 12px 15px;
        font-weight: 600;
        color: #495057;
        border-left: 1px solid #dee2e6;
        font-size: 14px;
    }

    .swap-icon {
        background: var(--dark-shade);
        color: #ffffff;
        border: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 18px;
        transition: transform 0.3s;
    }

    .swap-icon:hover {
        transform: rotate(180deg);
    }

    .pricetable td {
        padding: 10px;
    }

    .pricetabs .nav-pills .nav-link.active,
    .pricetabs .nav-pills .show>.nav-link {
        color: var(--bs-nav-pills-link-active-color);
        background-color: #d91c34;
    }

    .pricetabs .nav-pills .nav-link {
        padding: 5px 15px 2px;
        border: 1px solid #d91c34;
        color: #d91c34;
        margin-right: 5px;
    }

    .pricetabs .nav-pills .nav-link.active:after {
        border: solid #c7182e;
        border-width: 0 1px 1px 0;
        display: inline-block;
        padding: 3px;
        transform: rotate(135deg);
        -webkit-transform: rotate(45deg);
        background-color: transparent;
        outline: 0;
        content: "";
        position: absolute;
        left: 46%;
        top: 27px;
        background-color: #d91c34;
    }
</style>
@endpush
<div>
    <section class="bg-darkpink p-2 breadcrumb mb-0">
        <div class="container">
            <div class="row">
                <div class="d-flex gap-2 p-0 m-0 list-unstyled justify-content-center text-white">
                    <ul class="d-flex p-0 m-0 list-unstyled align-items-center">
                        <li><a href="{{ URL('/') }}" class="text-decoration-none text-white" title="Home">Home</a></li>
                        <li><a href="{{ URL('list-crypto-price-inr-india') }}" class="text-decoration-none text-white" title="Crypto Price">Crypto Price</a></li>
                        <li><a href="{{ url('crypto-price/'.$priceDetails['alias']) }}" class="text-decoration-none text-white" title="{{ $priceDetails['name'] }}">{{ $priceDetails['name'] }}</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section class="bg-lightgray p-4">
        <div class="container">
            <div class="row bg-white m-0 p-3 align-items-center pricetabs justify-content-between">
                <div class="col-xxl-7 col-lg-7 col-sm-12">
                    <ul class="nav nav-pills mb-3 justify-content-center pricetabs" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link fw-semibold active position-relative" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">INR</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link fw-semibold position-relative" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">USD</button>
                        </li>
                    </ul>
                    <div class="tab-content " id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                            <div class="row">
                                <div class="col-xxl-6 col-lg-6 border-end pe-2">
                                    <div class="d-flex gap-2 align-items-center mb-0">
                                        <img src="{{ CommonHelper::s3ImageOrDefault( $priceDetails['logo'])}}" alt="{{ $priceDetails['name'] }}" class="rounded-circle" width="24" height="24">
                                        <h1 class="fw-bold text-black h5 mb-1"> {{ $priceDetails['name'] }} Price In India</h1>
                                        <span class="text-paragraph d-block"><i class="fa-solid fa-indian-rupee-sign"></i>{{ $priceDetails['symbol'] }}</span>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="pricesection">
                                                                                        <span class="h2 text-black d-block fw-bold mb-0 mt-1">{{CommonHelper::formatIndianNumber($price_usd)}}</span>
                                            <p class="mb-0 {{$percent_class}} h5 fw-bold">