@extends('layouts.main')

@section('canonical')
<link rel="canonical" href="{{ url('blogs/'.$blog->id.'/'.$blog->url) }}" />
<title>{{ $blog->meta_title ?: $blog->title }}</title>
<meta name="description" content="{{ $blog->meta_desc }}">
<meta name="keywords" content="{{ $blog->meta_keyword }}">
@if($blog->schema)
<script type="application/ld+json">{!! $blog->schema !!}</script>
@endif
@endsection

@section('content')
@php
    // blog url (slug) -> product category slug
    $productMap = [
        'dmls-crown-known-as-direct-metal-laser-sintering'         => 'metal-dental-products',
        'pfm-crown-known-as-porcelain-fused-to-metal'              => 'metal-dental-products',
        'dentures-an-alternative-for-missing-teeth'                => 'removables-dental-care-products',
        'cast-partial-dentures-features-and-benefits'              => 'removables-dental-care-products',
        'precision-attachment-types-and-advancements-in-dentistry' => 'removables-dental-care-products',
        'zirconia-crown-explained'                                 => 'metal-free-dental-products',
        'zirconia-crown-price-in-india-and-features'               => 'metal-free-dental-products',
        'dental-crown'                                             => 'metal-free-dental-products',
        'dental-bridge'                                            => 'metal-free-dental-products',
        'dental-products'                                          => 'metal-free-dental-products',
        'dental-implants'                                          => 'dental-implantors',
        'imax-crown'                                               => 'other-dental-products',
    ];
    $slugName = $productMap[$blog->url] ?? null;
@endphp

<style>
    ol { list-style-type: none !important; margin-left: 0; padding: 0; }
    .cmp-container { -ms-flex-pack: start !important; justify-content: center !important; }

    .blog_contentcls { margin: 0 auto; width: 80%; }
    @media (min-width: 576px) {
        .blog_maincls { padding-left: 50px; padding-right: 50px; }
    }
    @media (min-width: 992px) {
        .px-lg-6 { padding-left: 8rem !important; padding-right: 8rem !important; }
    }
    @media (max-width: 992px) {
        .px-lg-6 { padding-left: 3rem !important; padding-right: 3rem !important; }
    }
    @media (max-width: 600px) {
        iframe { width: 260px; }
    }
    @media (max-width: 420px) {
        .media-query { font-size: 12px !important; }
    }
    @media only screen and (max-width: 368px) { .breadcrumb { font-size: 14px; } }
    @media only screen and (min-width: 368px) { .breadcrumb { font-size: 14px; } }

    .blog-details {
        font-size: 2.5rem;
        margin-bottom: .5rem;
        font-family: inherit;
        font-weight: 500;
        line-height: 1.2;
        color: inherit;
    }
    .blog_contentcls img { max-width: 100%; height: auto; border-radius: 10px; }

    /* ---------- Product cards / compare modal ---------- */
    .card-img-top { width: 100%; height: 200px; }
    div.gallery { margin: 5px; float: left; width: 250px; }
    div.gallery img { width: 100%; }
    div.desc { padding: 15px; text-align: center; }

    .modal-open { overflow: hidden; }
    .modal-open .modal { overflow-x: hidden; overflow-y: auto; }
    .modal {
        position: fixed;
        top: auto !important;
        left: 0;
        z-index: 1050;
        display: none;
        width: 100%;
        height: auto !important;
        overflow: hidden;
        outline: 0;
    }
    .modal-dialog { position: relative; width: auto; margin: 0.5rem; pointer-events: none; }
    .modal-content {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        pointer-events: auto;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid rgba(13, 12, 13, 0.2);
        border-radius: 0;
        outline: 0;
    }
    .modal-backdrop {
        position: fixed; top: 0; left: 0; z-index: 1040;
        width: 100vw; height: 100vh; background-color: #0d0c0d;
    }
    .modal-body { left: 100px; position: relative; flex: 1 1 auto; padding: 1rem; }
    @media only screen and (max-width: 767px) {
        .modal-body { left: 0 !important; position: relative; flex: 1 1 auto; padding: 1rem; }
    }
    @media (min-width: 576px) {
        .modal-dialog { max-width: 500px; margin: 1.75rem auto; }
    }

    .small li { list-style-type: none; position: relative; }
    .small ul li::before { content: "■"; color: red; left: -2.1em; font-size: 1.1em; }
    .text-black { color: black !important; }
    .px-6 { padding-left: 6rem !important; padding-right: 6rem !important; }

    /* ---------- Social icons ---------- */
    .icons__wrapper { display: flex; gap: 12px; align-items: center; }
    .icons__image { width: 36px; height: 36px; }
</style>

{{-- ========== Header ========== --}}
<div class="row">
    <div class="col-sm-12">
        <section class="undefined lg-5 mt-md-3" style="font-size: medium;">
            <div class="px-lg-6 margin_side py-4" style="background-color: #d4242c; color: white;">
                <div class="blog-details">Blog Details</div>
            </div>
        </section>
    </div>
</div>

<nav class="breadcrumb_new margin_side" >
    <ol class="breadcrumb px-lg-6 ml-lg-2">
        <li class="breadcrumb-item"><a href="{{ url('/') }}" style="color: #d4242c;text-decoration: none;">Home</a></li>
        <li class="breadcrumb-item"><a href="{{ url('blogs') }}" style="color: #d4242c;text-decoration: none;">Blogs</a></li>
        <li class="breadcrumb-item active" aria-current="page">{{ $blog->title }}</li>
    </ol>
</nav>

{{-- ========== Blog content ========== --}}
<div class="col-md-12 blog_maincls">
    <div class="row">
        <div class="blog_contentcls">
            <h1 style="font-size: 38px; font-family: inherit; font-weight: 500 !important;">{{ $blog->title }}</h1>

            @if($blog->blog_image)
                <img src="{{ preg_match('#^(https?:)?//#', $blog->blog_image) ? $blog->blog_image : asset('public/assets/images/blogimages/'.ltrim($blog->blog_image, '/')) }}"
                     alt="{{ $blog->imagealttag }}" class="img-fluid mb-3">
            @endif

            <p class="text-muted">
                @if($blog->author) By {{ $blog->author }} | @endif
                {{ $blog->create_date->format('d M Y') }}
            </p>

            <div>{!! $blog->blog_desc !!}</div>
        </div>

        <div class="blog_contentcls">
            @if($slugName)
                <div class="row" id="product_data"></div>
            @endif
        </div>
    </div>

    {{-- ========== Social links ========== --}}
    <div class="container-fluid pt-5 pb-5">
        <div class="row">
            <div class="col-sm-12">
                <div id="social-links" class="cmp-container d-flex">
                    <div class="socialicons">
                        <div class="icons">
                            <div class="icons__wrapper">
                                <a class="icons__icon" href="https://www.instagram.com/illusiondental/" target="_blank" rel="noopener">
                                    <img class="icons__image" src="https://www.illusiondentallab.com/public/web_image_content/footer/instagram.png" alt="Instagram Icon">
                                </a>
                                <a class="icons__icon" href="https://www.facebook.com/IllusionDentalLabs" target="_blank" rel="noopener">
                                    <img class="icons__image" src="https://www.illusiondentallab.com/public/web_image_content/footer/facebook.png" alt="Facebook Icon">
                                </a>
                                <a class="icons__icon" href="https://twitter.com/illusion_dental" target="_blank" rel="noopener">
                                    <img class="icons__image" src="https://www.illusiondentallab.com/public/web_image_content/footer/twitter.png" alt="Twitter Icon">
                                </a>
                                <a class="icons__icon" href="https://www.linkedin.com/company/illusion-dental-laboratory/" target="_blank" rel="noopener">
                                    <img class="icons__image" src="https://www.illusiondentallab.com/public/web_image_content/footer/linkedin.png" alt="LinkedIn Icon">
                                </a>
                                <a class="icons__icon" href="https://youtube.com/channel/UCJ0Bw_NXnwTX8R5o_kskt1Q" target="_blank" rel="noopener">
                                    <img class="icons__image" src="https://www.illusiondentallab.com/public/web_image_content/footer/youtube.png" alt="YouTube Icon">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ========== Compare modal ========== --}}
<section class="products">
    <div class="px-lg-6">
        <div id="myModal" class="modal">
            <div class="modal-content" id="block">
                <div class="d-flex flex-row-reverse" onclick="hide_model();"><span class="close">&times;</span></div>
                <div class="row">
                    <div class="col-xl-9 col-12">
                        <div class="modal-body">
                            <div class="row" id="compare_data_2"></div>
                        </div>
                    </div>

                    <div class="col-2 d-flex align-self-center">
                        <form action="{{ URL::to('compare-product') }}" class="form_data" id="compare_data" method="POST">
                            @csrf
                            <input type="hidden" id="final_product_id" name="compare_ids">
                            <div class="float-right align-self-center">
                                <button type="button" class="btn btn-light" onclick="hide_model()">Clear All</button><br />
                                <button type="submit" class="btn btn-danger">Compare</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('js')
<script>
    var products  = [];
    var slug_name = @json($slugName);
    var page      = 1;
    var i         = 1;   // compare counter

    $(document).ready(function () {
        if (slug_name) { get_product(); }
    });

    function loadmore() {
        page++;
        get_product();
    }

    function get_product() {
        $.ajax({
            type: "get",
            url: "{{ URL::to('/') }}/" + slug_name + '?page=' + page,
            dataType: 'json',
            success: function (res) {
                if (res.count < 6) {
                    $("#hide_loadmore").addClass('d-none');
                }
                $("#product_data").append(res.data);
            }
        });
    }

    /* ---------- Compare form ---------- */
    $("#compare_data").submit(function (event) {
        if (i == 2) {
            return false;
        }
        var arrayValues = $('input:hidden.compare_id').map(function () {
            return $(this).val();
        }).get();

        $("#final_product_id").val(arrayValues);
    });

    /* ---------- Compare modal helpers ---------- */
    var modal = document.getElementById("myModal");

    function myFunction(id) {
        var ids = products;
        products = [];
        $.each(ids, function (key, val) {
            if (val != id) {
                products.push(val);
            }
        });

        $("#demo" + id).remove();
        i--;
        if (i == 1) {
            modal.style.display = "none";
        }
    }

    function hide_model() {
        i = 1;
        products = [];
        modal.style.display = "none";
        $(".gallery").remove();
    }

    function show_model(id) {
        var img   = $("#data_id_" + id).attr("data-image");
        var title = $("#data_id_" + id).attr("data-url");

        if (products.indexOf(id) !== -1) {
            alert("already selected ");
        } else {
            if (i <= 3) {
                products.push(id);
                var html = "";
                html += '<div class="gallery col-xl-3 col-4" id="demo' + id + '">';
                html += '<div class="d-flex flex-row-reverse"><button onclick="myFunction(' + id + ')"><span class="close">&times;</span></button></div>';
                html += '<img src="' + img + '" alt="' + title + '"/>';
                html += '<h3 class="h6 font-weight-bold" style="max-width: 150px;">' + title + "</h3>";
                html += '<input type="hidden" name="compare_id[]" class="compare_id" value="' + id + '">';
                html += "</div>";
                $("#compare_data_2").append(html);
                modal.style.display = "block";
                i++;
            }
        }
    }
</script>
@endsection