    {{-- product-detail.blade.php --}}

    @extends('frontend.layout.app')

    @section('content')
    @include('frontend.layout.header')


    <style>

    body{
        background:#f5f5f5;
    }

    /* MAIN CONTAINER */

    .container.py-5{
        padding-top:20px !important;
        padding-bottom:20px !important;
    }

    /* MAIN CARD */

    .product-detail-card{
        background:#fff;
        border-radius:18px;
        padding:18px;
        box-shadow:0 4px 15px rgba(0,0,0,0.06);
    }

    /* IMAGE */

    .product-detail-image{
        width:100%;
        object-fit:cover;
        border-radius:14px;
        background:#f8f8f8;
    }

    /* RIGHT SIDE */

    .col-lg-6:last-child{
        padding-left:10px;
    }

    /* TITLE */

    .product-title{
        font-size:26px;
        font-weight:700;
        margin-bottom:15px;
        color:#111;
        line-height:1.3;
    }

    /* DETAIL BOX */

    .detail-box{
        background:#fafafa;
        border:1px solid #eee;
        border-radius:12px;
        padding:10px 14px;
        margin-bottom:10px;
    }

    /* LABEL */

    .detail-label{
        font-size:11px;
        color:#888;
        margin-bottom:2px;
        text-transform:uppercase;
        letter-spacing:.5px;
    }

    /* VALUE */

    .detail-value{
        font-size:15px;
        font-weight:600;
        color:#111;
    }

    /* PRICE */

    .product-price{
        font-size:30px;
        font-weight:700;
        color:#000;
        margin:18px 0;
    }

    /* BUTTON */

    .cart-btn{
        width:100%;
        height:48px;
        border:none;
        border-radius:10px;
        background:#000;
        color:#fff;
        font-size:15px;
        font-weight:600;
        transition:.3s;
    }

    .cart-btn:hover{
        background:#222;
    }

    /* EXTRA DETAILS */

    .extra-details{
        margin-top:18px;
        background:#fff;
        border-radius:18px;
        padding:18px;
        box-shadow:0 4px 15px rgba(0,0,0,0.05);
    }

    .extra-title{
        font-size:20px;
        font-weight:700;
        margin-bottom:15px;
    }

    /* SPEC ROW */

    .spec-row{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:10px 0;
        border-bottom:1px solid #f1f1f1;
    }

    .spec-name{
        color:#777;
        font-size:14px;
        font-weight:500;
    }

    .spec-value{
        font-size:14px;
        font-weight:600;
        color:#111;
    }

    /* MOBILE */

    @media(max-width:768px){

        .product-detail-card{
            padding:14px;
        }

        .extra-details{
            padding:14px;
        }

        .product-detail-image{
            height:280px;
            margin-bottom:15px;
        }

        .product-title{
            font-size:22px;
        }

        .product-price{
            font-size:26px;
        }

    }

    .cart-success-popup{
        position:fixed;
        top:10px;
        right:20px;
        background:#16a34a;
        color:#fff;
        padding:14px 22px;
        border-radius:12px;
        font-weight:600;
        box-shadow:0 10px 25px rgba(0,0,0,0.2);
        z-index:9999;
        display:none;
      }

    </style>

    <div class="container py-5">

        {{-- TOP SECTION --}}
        <div class="product-detail-card">

            <div class="row">

                {{-- IMAGE --}}
                <div class="col-lg-6 mb-4 mb-lg-0">

                    <img
                        src="{{ asset($product->image ?? 'public/img/no_image.jpg') }}"
                        class="product-detail-image img-fluid"
                        onerror="this.src='{{ asset('public/img/no_image.jpg') }}'">

                </div>

                {{-- DETAILS --}}
                    <div class="col-lg-6">
                    {{-- TITLE --}}
                    @if(!empty($product->collection))
                    <div class="product-title">

                        {{ $product->collection }}

                    </div>
                    @endif

                    {{-- SKU --}}
                    @if(!empty($product->new_triple_sku))
                    <div class="detail-box">

                        <div class="detail-label">

                            Product SKU

                        </div>

                        <div class="detail-value">

                            {{ $product->new_triple_sku }}

                        </div>

                    </div>
                    @endif

                    {{-- TYPE --}}
                    @if(!empty($product->product_type))
                    <div class="detail-box">

                        <div class="detail-label">

                            Product Type

                        </div>

                        <div class="detail-value">

                            {{ $product->product_type }}

                        </div>

                    </div>
                    @endif

                    {{-- WEIGHT --}}
                    @if(!empty($product->net_weight) && $product->net_weight != 0)
                    <div class="detail-box">

                        <div class="detail-label">

                            Weight

                        </div>

                        <div class="detail-value">

                            {{ $product->net_weight }}

                        </div>

                    </div>
                    @endif

                    {{-- PRICE --}}
                    @if(!empty($product->final_price) && $product->final_price != 0)
                    <div class="product-price">

                    @php

                        $price = $product->final_price ?? 0;

                        $markupValue = Auth::user()->markup_value ?? 0;

                        $markupType = Auth::user()->markup_type ?? '';

                        // FINAL PRICE
                    if($markupType == 'percent'){

                            $finalPrice = $price + (($price * $markupValue) / 100);

                        }elseif($markupType == 'fixed'){

                            $finalPrice = $price + $markupValue;

                        }else{

                            $finalPrice = $price;
                        }

                        @endphp
                        
                        ${{ number_format($finalPrice,2) }}
                       

                    </div>
                    @endif

                    {{-- BUTTON --}}
                    <button
                        class="cart-btn addToCartBtn"
                        data-id="{{ $product->id }}">

                        <i class="fas fa-shopping-cart"></i>

                        Add To Cart

                    </button>

                </div>

            </div>

        </div>

        {{-- EXTRA DETAILS SECTION --}}
        <div class="extra-details">

            <div class="extra-title">

                Product Details

            </div>

         @if(!empty($product->new_triple_sku))
        <div class="spec-row">

            <div class="spec-name">

                SKU Code

            </div>

            <div class="spec-value">

                {{ $product->new_triple_sku }}

            </div>

        </div>
        @endif


        @if(!empty($product->collection))
        <div class="spec-row">

            <div class="spec-name">

                Collection

            </div>

            <div class="spec-value">

                {{ $product->collection }}

            </div>

        </div>
        @endif


        @if(!empty($product->product_type))
        <div class="spec-row">

            <div class="spec-name">

                Product Type

            </div>

            <div class="spec-value">

                {{ $product->product_type }}

            </div>

        </div>
        @endif


        @if(!empty($product->description))
        <div class="spec-row">

            <div class="spec-name">

                Description

            </div>

            <div class="spec-value">

                {{ $product->description }}

            </div>

        </div>
        @endif


        @if(!empty($product->metal_kt))
        <div class="spec-row">

            <div class="spec-name">

                Metal

            </div>

            <div class="spec-value">

                {{ $product->metal_kt }}

            </div>

        </div>
        @endif


        @if(!empty($product->metal_color))
        <div class="spec-row">

            <div class="spec-name">

                Metal Color

            </div>

            <div class="spec-value">

                {{ $product->metal_color }}

            </div>

        </div>
        @endif


        @if(!empty($product->net_weight) && $product->net_weight != 0)
        <div class="spec-row">

            <div class="spec-name">

                Weight

            </div>

            <div class="spec-value">

                {{ $product->net_weight }}

            </div>

        </div>
        @endif


        @if(!empty($product->duty) && $product->duty != 0)
        <div class="spec-row">

            <div class="spec-name">

                Duty

            </div>

            <div class="spec-value">

                {{ $product->duty }}

            </div>

        </div>
        @endif


        @if(!empty($product->diamond_type))
        <div class="spec-row">

            <div class="spec-name">

                Diamond Type

            </div>

            <div class="spec-value">

                {{ $product->diamond_type }}

            </div>

        </div>
        @endif


        @if(!empty($product->final_price) && $product->final_price != 0)
        <div class="spec-row">

            <div class="spec-name">

                Price

            </div>

            <div class="spec-value">

                   
                    @php

                    $without_extra_price = $product->without_extra_price ?? 0;
                    $extra_charge = $product->extra_charge ?? 0;
                    $price = $without_extra_price + $extra_charge;
                        $markupValue = Auth::user()->markup_value ?? 0;

                        $markupType = Auth::user()->markup_type ?? '';

                        // FINAL PRICE
                        if($markupType == 'percent'){

                            $finalPrice = $price + (($price * $markupValue) / 100);

                        }
                        elseif($markupType == 'fixed'){

                            $finalPrice = $price + $markupValue;

                        }
                        else{

                            $finalPrice = $price;

                        }

                    @endphp
                        
                        ${{ number_format($finalPrice,2) }}

            </div>

        </div>
        @endif


        @if(!empty($product->id))
        <div class="spec-row border-0">

            <div class="spec-name">

                Product ID

            </div>

            <div class="spec-value">

                #{{ $product->id }}

            </div>

        </div>
        @endif

            </div>

        </div>
        @include('frontend.layout.footer')

<script>
$(document).on(
    'click',
    '.addToCartBtn',
    function(){

        let product_id = $(this).data('id');

        $.ajax({

            url:"{{ route('add.to.cart') }}",

            type:"POST",

            data:{

                _token:"{{ csrf_token() }}",

                product_id:product_id

            },

            success:function(response){

                $('.cartCount')
                    .show()
                    .text(response.cartCount);

                // Success Popup
                $('body').append(`
                    <div class="cart-success-popup">
                        Product Added To Cart
                    </div>
                `);

                $('.cart-success-popup')
                    .fadeIn()
                    .delay(1500)
                    .fadeOut(500, function(){
                        $(this).remove();
                    });

            }

        });

});
</script>

        @endsection