@extends('Admin.layout')

@section('content')


    {{-- ========================================================= --}}
    {{-- PAGE HEADER --}}
    {{-- ========================================================= --}}
<div class="row align-items-center justify-content-between mb-3 mt-3">
    <div class="col-auto">
        <h5>
            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('admin.products')  }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-tabler">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a>
            </button>
            View Product
        </h5>
    </div>
</div>


    {{-- ========================================================= --}}
    {{-- PRODUCT OVERVIEW --}}
    {{-- ========================================================= --}}

    <div class="card shadow-sm border-0 mb-4">

        <div class="card-body p-4">

            <div class="row g-4 align-items-start">

                {{-- PRODUCT IMAGE --}}
                <div class="col-lg-5">

                    <div class="border rounded-3 overflow-hidden">

                        <img src="{{ asset('assets/img/diamond_ring.png') }}"
                             alt="Diamond Halo Ring"
                             class="img-fluid w-100">

                    </div>

                    {{-- GALLERY --}}
                    <div class="d-flex gap-2 mt-3">

                        <div class="border rounded-2 p-1">
                            <img src="{{ asset('assets/img/diamond_ring.png') }}"
                                 class="rounded"
                                 width="70"
                                 height="70"
                                 style="object-fit: cover;"
                                 alt="">
                        </div>

                        <div class="border rounded-2 p-1">
                            <img src="{{ asset('assets/img/diamond_ring.png') }}"
                                 class="rounded"
                                 width="70"
                                 height="70"
                                 style="object-fit: cover;"
                                 alt="">
                        </div>

                        <div class="border rounded-2 p-1">
                            <img src="{{ asset('assets/img/diamond_ring.png') }}"
                                 class="rounded"
                                 width="70"
                                 height="70"
                                 style="object-fit: cover;"
                                 alt="">
                        </div>

                        <div class="border rounded-2 p-1">
                            <img src="{{ asset('assets/img/diamond_ring.png') }}"
                                 class="rounded"
                                 width="70"
                                 height="70"
                                 style="object-fit: cover;"
                                 alt="">
                        </div>

                    </div>

                </div>



                {{-- PRODUCT BASIC DETAILS --}}
                <div class="col-lg-7">

                    <div class="d-flex justify-content-between align-items-start">

                        <div>

                            <h4 class="fw-bold mb-2">
                                Diamond Halo Ring
                            </h4>

                            <div class="text-muted mb-3">
                                SKU: <strong>RING001</strong>
                            </div>

                        </div>

                        <span class="badge bg-success px-3 py-2">
                            Active
                        </span>

                    </div>


                    <div class="mb-4">

                        <span class="badge bg-light text-dark border me-2">
                            Rings
                        </span>

                        <span class="badge bg-light text-dark border">
                            Best Seller
                        </span>

                    </div>


                    {{-- PRICE --}}
                    <div class="mb-4">

                        <div class="d-flex align-items-center gap-3">

                            <h4 class="fw-bold text-primary mb-0">
                                ₹24,999
                            </h4>

                            <del class="text-muted">
                                ₹28,000
                            </del>

                            <span class="badge bg-success">
                                11% OFF
                            </span>

                        </div>

                    </div>


                    {{-- SHORT DESCRIPTION --}}
                    <p class="text-muted mb-4">

                        Elegant 18K gold diamond halo ring designed
                        for timeless everyday elegance.

                    </p>


                    {{-- QUICK INFORMATION --}}
                    <div class="row g-3">

                        <div class="col-sm-6">

                            <div class="border rounded-3 p-3">

                                <small class="text-muted d-block">
                                    Category
                                </small>

                                <strong>
                                    Rings
                                </strong>

                            </div>

                        </div>


                        <div class="col-sm-6">

                            <div class="border rounded-3 p-3">

                                <small class="text-muted d-block">
                                    Current Stock
                                </small>

                                <strong>
                                    12 Units
                                </strong>

                            </div>

                        </div>


                        <div class="col-sm-6">

                            <div class="border rounded-3 p-3">

                                <small class="text-muted d-block">
                                    GST
                                </small>

                                <strong>
                                    3%
                                </strong>

                            </div>

                        </div>


                        <div class="col-sm-6">

                            <div class="border rounded-3 p-3">

                                <small class="text-muted d-block">
                                    Product Status
                                </small>

                                <strong class="text-success">
                                    Active
                                </strong>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>



    {{-- ========================================================= --}}
    {{-- JEWELRY DETAILS --}}
    {{-- ========================================================= --}}

    <div class="card shadow-sm border-0 mb-4">

        <div class="card-body p-4">

            <h6 class="fw-bold mb-4">
                Jewelry Details
            </h6>

            <div class="row g-3">

                {{-- METAL --}}
                <div class="col-md-3">

                    <small class="text-muted d-block mb-1">
                        Metal Type
                    </small>

                    <strong>
                        Gold
                    </strong>

                </div>


                {{-- PURITY --}}
                <div class="col-md-3">

                    <small class="text-muted d-block mb-1">
                        Purity
                    </small>

                    <strong>
                        18K
                    </strong>

                </div>


                {{-- METAL WEIGHT --}}
                <div class="col-md-3">

                    <small class="text-muted d-block mb-1">
                        Metal Weight
                    </small>

                    <strong>
                        4.25 g
                    </strong>

                </div>


                {{-- STONE TYPE --}}
                <div class="col-md-3">

                    <small class="text-muted d-block mb-1">
                        Stone Type
                    </small>

                    <strong>
                        Diamond
                    </strong>

                </div>

            </div>

        </div>

    </div>



    {{-- ========================================================= --}}
    {{-- STONE DETAILS --}}
    {{-- ========================================================= --}}

    <div class="card shadow-sm border-0 mb-4">

        <div class="card-body p-4">

            <h6 class="fw-bold mb-4">
                Stone Details
            </h6>

            <div class="row g-3">

                <div class="col-md-3">

                    <small class="text-muted d-block mb-1">
                        Stone Weight
                    </small>

                    <strong>
                        0.25 ct
                    </strong>

                </div>


                <div class="col-md-3">

                    <small class="text-muted d-block mb-1">
                        Stone Count
                    </small>

                    <strong>
                        12
                    </strong>

                </div>


                <div class="col-md-3">

                    <small class="text-muted d-block mb-1">
                        Color
                    </small>

                    <strong>
                        G
                    </strong>

                </div>


                <div class="col-md-3">

                    <small class="text-muted d-block mb-1">
                        Clarity
                    </small>

                    <strong>
                        VS1
                    </strong>

                </div>


                <div class="col-md-6">

                    <small class="text-muted d-block mb-1">
                        Certification
                    </small>

                    <strong>
                        IGI Certified
                    </strong>

                </div>

            </div>

        </div>

    </div>



    {{-- ========================================================= --}}
    {{-- DESCRIPTION --}}
    {{-- ========================================================= --}}

    <div class="card shadow-sm border-0 mb-4">

        <div class="card-body p-4">

            <h6 class="fw-bold mb-3">
                Product Description
            </h6>

            <p class="text-muted mb-0">

                This elegant diamond halo ring is crafted in premium
                18K gold and designed to add timeless sophistication
                to every occasion. The central diamond is surrounded
                by brilliant accent stones that create a classic halo
                effect.

            </p>

        </div>

    </div>



    {{-- ========================================================= --}}
    {{-- VARIANTS --}}
    {{-- ========================================================= --}}

    <div class="card shadow-sm border-0 mb-4">

        <div class="card-body p-4">

            <h6 class="fw-bold mb-4">
                Product Variants
            </h6>

            <div class="d-flex flex-wrap gap-2">

                <span class="badge bg-light text-dark border px-3 py-2">
                    Size 6
                </span>

                <span class="badge bg-light text-dark border px-3 py-2">
                    Size 7
                </span>

                <span class="badge bg-light text-dark border px-3 py-2">
                    Size 8
                </span>

                <span class="badge bg-light text-dark border px-3 py-2">
                    Size 9
                </span>

                <span class="badge bg-light text-dark border px-3 py-2">
                    Size 10
                </span>

            </div>

        </div>

    </div>



    {{-- ========================================================= --}}
    {{-- FRONTEND DISPLAY --}}
    {{-- ========================================================= --}}

    <div class="card shadow-sm border-0 mb-4">

        <div class="card-body p-4">

            <h6 class="fw-bold mb-4">
                Frontend Display
            </h6>

            <div class="row g-3">

                {{-- NEW ARRIVAL --}}
                <div class="col-md-4">

                    <div class="border rounded-3 p-3">

                        <div class="d-flex align-items-center gap-2">

                            <i class="fa-solid fa-circle-check text-success"></i>

                            <strong>
                                New Arrival
                            </strong>

                        </div>

                        <small class="text-muted">
                            Displayed in New Arrivals
                        </small>

                    </div>

                </div>


                {{-- BEST SELLER --}}
                <div class="col-md-4">

                    <div class="border rounded-3 p-3">

                        <div class="d-flex align-items-center gap-2">

                            <i class="fa-solid fa-circle-check text-success"></i>

                            <strong>
                                Best Seller
                            </strong>

                        </div>

                        <small class="text-muted">
                            Displayed in Best Sellers
                        </small>

                    </div>

                </div>


            </div>

        </div>

    </div>



    {{-- ========================================================= --}}
    {{-- PRODUCT INFORMATION --}}
    {{-- ========================================================= --}}

    <div class="card shadow-sm border-0 mb-4">

        <div class="card-body p-4">

            <h6 class="fw-bold mb-4">
                Product Information
            </h6>

            <div class="row g-3">

                <div class="col-md-4">

                    <small class="text-muted d-block">
                        Product ID
                    </small>

                    <strong>
                        #PRD001
                    </strong>

                </div>


                <div class="col-md-4">

                    <small class="text-muted d-block">
                        Created On
                    </small>

                    <strong>
                        12 Aug 2026
                    </strong>

                </div>


                <div class="col-md-4">

                    <small class="text-muted d-block">
                        Last Updated
                    </small>

                    <strong>
                        17 Aug 2026
                    </strong>

                </div>

            </div>

        </div>

    </div>



    {{-- ========================================================= --}}
    {{-- BOTTOM ACTIONS --}}
    {{-- ========================================================= --}}

    <div class="d-flex justify-content-end gap-2 mb-4">

        <a href="{{route('admin.products')}}"
           class="btn btn-light border">

            <i class="fa-solid fa-arrow-left me-1"></i>
            Back to Products

        </a>

        <a href="{{route('admin.edit_product')}}"
           class="btn btn-primary">

            <i class="fa-solid fa-pen-to-square me-1"></i>
            Edit Product

        </a>

    </div>



@endsection