@push('meta')
    @include('frontend.partials.product-seo', ['product' => $product])
@endpush

@extends('frontend.layouts.app')
@section('content')
    <div class="container mt-3">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item text-capitalize"><a href="#">{{ $product->name }}</a></li>
            </ol>
        </nav>
    </div>

    <div class="container">
        <section class="product-section">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                    <div class="image-container">
                        <div id="carouselExample" class="carousel slide">
                            <div class="carousel-inner">
                                @foreach ($product->galleries as $key => $gallery)
                                    <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                                        <img src="{{ asset('storage/' . $gallery->image) }}" class="d-block w-100"
                                            alt="Gallery Image">
                                    </div>
                                @endforeach
                            </div>
                            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample"
                                data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Previous</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#carouselExample"
                                data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Next</span>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                    <div class="d-flex flex-column justify-content-center mt-4">

                        @php
                            $hasDiscount = !is_null($product->discount_price) && $product->discount_price > 0;
                            $basePrice = $product->price ?: 0;
                            $finalPrice = $hasDiscount ? $product->discount_price : $basePrice;

                            $discountPercent =
                                $hasDiscount && $basePrice > 0
                                    ? round((($basePrice - $product->discount_price) / $basePrice) * 100)
                                    : null;
                        @endphp

                        <div class="pro-info text-center">
                            <h3>{{ $product->name }}</h3>
                            <p>{{ $product->product_code }}</p>

                            <h3 class="price">
                                BDT: {{ number_format($finalPrice, 2) }} Tk

                                @if ($hasDiscount)
                                    <span class="text-muted text-decoration-line-through fs-6 ms-2">
                                        {{ number_format($basePrice, 2) }} Tk
                                    </span>
                                @endif
                            </h3>

                            @if ($discountPercent)
                                <span class="badge bg-danger rounded-pill px-3 py-2 mt-2">
                                    {{ $discountPercent }}% OFF
                                </span>
                            @endif
                        </div>

                        @php
                            $hasSize = false;
                            foreach ($product->variants as $item) {
                                if (!is_null($item->size)) {
                                    $hasSize = true;
                                    break;
                                }
                            }
                        @endphp

                        <input type="hidden" id="hasSize" value="{{ $hasSize ? 'true' : 'false' }}">

                        @if ($hasSize)
                            <div class="size-guid">
                                <div class="view-size d-flex justify-content-between align-items-center">
                                    <h5>Select Size</h5>
                                    <p><a class="size-guide" href="" data-bs-toggle="modal"
                                            data-bs-target="#staticBackdrop">View Size Guide</a></p>
                                </div>

                                <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static"
                                    data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel"
                                    aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h1 class="modal-title fs-5" id="staticBackdropLabel">Cotton Panjabi
                                                </h1>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <ul class="nav nav-pills mb-1 d-flex justify-content-start w-100"
                                                    id="pills-tab" role="tablist">

                                                    <li class="nav-item mt-2" role="presentation">
                                                        <button class="pill-item nav-link modal-button active"
                                                            id="pills-home-tab" data-bs-toggle="pill"
                                                            data-bs-target="#pills-home" type="button" role="tab"
                                                            aria-controls="pills-home" aria-selected="true">IN</button>
                                                    </li>

                                                    <li class="nav-item mt-2" role="presentation">
                                                        <button class="pill-item nav-link modal-button"
                                                            id="pills-profile-tab" data-bs-toggle="pill"
                                                            data-bs-target="#pills-profile" type="button" role="tab"
                                                            aria-controls="pills-profile" aria-selected="false">CM</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" tabindex="0">
                                                        <h5 class="text-center">Regular Fit (Set)</h5>
                                                        <div class="size-table">
                                                            <table class="table">
                                                                <tbody>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">Size Guide for
                                                                            Kabli</th>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">Measurement
                                                                            Points</th>
                                                                        <td>XS</td>
                                                                        <td>S</td>
                                                                        <td>M</td>
                                                                        <td>L</td>
                                                                        <td>XL</td>
                                                                        <td>2XL</td>
                                                                        <td>3XL</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">1/2 CHEST</th>
                                                                        <td>19.75</td>
                                                                        <td>20.5</td>
                                                                        <td>21.75</td>
                                                                        <td>22.75</td>
                                                                        <td>24</td>
                                                                        <td>25.25</td>
                                                                        <td>26.75</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">BODY LENGTH</th>
                                                                        <td>41.25</td>
                                                                        <td>42</td>
                                                                        <td>43.25</td>
                                                                        <td>46.5</td>
                                                                        <td>47.25</td>
                                                                        <td>47.25</td>
                                                                        <td>47.25</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">Size Guide for
                                                                            Trousers</th>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">WAIST RANGE</th>
                                                                        <td>27-29</td>
                                                                        <td>30-32</td>
                                                                        <td>33-34</td>
                                                                        <td>35-36</td>
                                                                        <td>37-38</td>
                                                                        <td>39-42</td>
                                                                        <td>43-47</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">FULL LENGTH</th>
                                                                        <td>37.75</td>
                                                                        <td>38.5</td>
                                                                        <td>39.25</td>
                                                                        <td>40</td>
                                                                        <td>41</td>
                                                                        <td>41.75</td>
                                                                        <td>42.5</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">FULL LEG
                                                                            OPENING</th>
                                                                        <td>12.25</td>
                                                                        <td>12.5</td>
                                                                        <td>13</td>
                                                                        <td>13.25</td>
                                                                        <td>13.75</td>
                                                                        <td>14</td>
                                                                        <td>14.5</td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>

                                                    <div class="tab-pane fade" id="pills-profile" role="tabpanel"
                                                        aria-labelledby="pills-profile-tab" tabindex="0">
                                                        <h5 class="text-center">Regular fit (Set)</h5>
                                                        <div class="size-table">
                                                            <table class="table">
                                                                <tbody>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">Size Guide for
                                                                            Kabli</th>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">Measurement
                                                                            Points</th>
                                                                        <td>XS</td>
                                                                        <td>S</td>
                                                                        <td>M</td>
                                                                        <td>L</td>
                                                                        <td>XL</td>
                                                                        <td>2XL</td>
                                                                        <td>3XL</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">1/2 Chest</th>
                                                                        <td>50</td>
                                                                        <td>52.5</td>
                                                                        <td>55</td>
                                                                        <td>58</td>
                                                                        <td>61</td>
                                                                        <td>64</td>
                                                                        <td>68</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">Body Length</th>
                                                                        <td>105</td>
                                                                        <td>107</td>
                                                                        <td>110</td>
                                                                        <td>118</td>
                                                                        <td>120</td>
                                                                        <td>120</td>
                                                                        <td>120</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">Size Guide for
                                                                            Trousers</th>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                        <td></td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">Waist Range</th>
                                                                        <td>68.5 - 73.5</td>
                                                                        <td>76 - 81</td>
                                                                        <td>83 - 86</td>
                                                                        <td>89 - 91.5</td>
                                                                        <td>94 - 96.5</td>
                                                                        <td>99 - 106.5</td>
                                                                        <td>109-119.5</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">Full Length</th>
                                                                        <td>96</td>
                                                                        <td>98</td>
                                                                        <td>100</td>
                                                                        <td>102</td>
                                                                        <td>104</td>
                                                                        <td>106</td>
                                                                        <td>108</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th class="fw-normal" scope="col">Full leg
                                                                            Opening</th>
                                                                        <td>31</td>
                                                                        <td>32</td>
                                                                        <td>33</td>
                                                                        <td>34</td>
                                                                        <td>35</td>
                                                                        <td>36</td>
                                                                        <td>37</td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="size">
                                    <div
                                        class="pro-size d-flex justify-content-start align-items-center gap-4 border-bottom pb-2">
                                        @foreach ($product->variants as $item)
                                            <li class="product-size {{ $item->stock === 0 ? 'disabled-link' : '' }}">
                                                <a href=""
                                                    data-product-size="{{ $item->size }}">{{ $item->size }}</a>
                                            </li>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="message d-flex justify-content-center align-items-center">
                            <p class="selected-size"></p>
                        </div>

                        <div class="d-flex justify-content-center align-items-center">
                            <a class="getcartitem add-item" href="javascript:void(0)"
                                data-product-id="{{ $product->id }}">
                                <button class="cartbtn" type="button">ADD TO CART</button>
                            </a>
                        </div>

                        <div class="mt-5">
                            <div class="socil-icon">
                                <li><a href="https://www.facebook.com/luxurylifestyle2030" target="_blank"><i
                                            class="fa-brands fa-facebook"></i></a></li>
                                <li><a href="https://x.com/i/flow/login?mx=2" target="_blank"><i
                                            class="fa-brands fa-twitter"></i></a></li>
                                <li><a href="https://www.linkedin.com/company/thebrainbd/posts/?feedView=all"
                                        target="_blank"><i class="fa-brands fa-linkedin"></i></a></li>
                                <li><a href="https://www.linkedin.com/login" target="_blank"><i
                                            class="fa-brands fa-youtube"></i></a></li>
                                <li><a href="https://www.instagram.com/accounts/login/?hl=en" target="_blank"><i
                                            class="fa-brands fa-instagram"></i></a></li>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div class="container-fluid mt-5">
        <section class="details-section">
            <div class="p-details">
                <div class="card-body product-details">
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                            <div class="p-description d-flex justify-content-center align-items-center">
                                <div class="description ms-2">
                                    <h5 class="description-title">Description</h5>
                                    <div class="pdescription">
                                        {!! $product->description !!}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                            <div class="p-details d-flex justify-content-center align-items-center">
                                <div class="details ms-2">
                                    <h5 class="details-title">Details</h5>
                                    <div class="pdetails">
                                        {!! $product->detail !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                            <div class="p-materials d-flex justify-content-center align-items-center">
                                <div class="materials ms-2">
                                    <h5 class="materials-title">Materials</h5>
                                    <div class="pmaterials">
                                        {!! $product->matetial !!}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                            <div class="p-care d-flex justify-content-center align-items-center">
                                <div class="care ms-2">
                                    <h5 class="care-title">Care</h5>
                                    <div class="pcare">
                                        {!! $product->care !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div class="container-fluid mt-5">
        <section class="carousel">
            <div class="container">
                <div class="caro-heading d-flex justify-content-center align-items-center">
                    <h4>YOU MAY ALSO BUY</h4>
                </div>

                <div class="owl-carousel owl-theme details-carousel mt-2">
                    @foreach ($tranding as $item)
                        @php
                            $itemBasePrice = $item->price ?: 0;
                            $itemHasDiscount =
                                !is_null($item->discount_price) &&
                                $item->discount_price > 0 &&
                                $item->discount_price < $itemBasePrice;
                            $itemFinalPrice = $itemHasDiscount ? $item->discount_price : $itemBasePrice;
                        @endphp

                        <div class="item">
                            <div class="pcard">
                                <div class="pimage">
                                    <img src="{{ asset('storage/' . $item->thumbnail) }}" class="card-img-top"
                                        alt="{{ $item->name }}">
                                </div>
                                <div class="pbody">
                                    <h5 class="pname">{{ $item->name }}</h5>

                                    <p class="p-0 m-0 fw-semibold text-danger">
                                        Tk {{ number_format($itemFinalPrice, 2) }}
                                    </p>

                                    @if ($itemHasDiscount)
                                        <p class="p-0 m-0 text-muted text-decoration-line-through small">
                                            Tk {{ number_format($itemBasePrice, 2) }}
                                        </p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

            </div>
        </section>
    </div>
@endsection

@push('script')
    @include('frontend.partials.ga4-product', ['product' => $product])
@endpush

@push('style')
    <style>
        .product-section {
            padding: 2.5rem 0 3rem;
        }

        .product-section .row:first-child {
            row-gap: 2rem;
        }

        .image-container {
            background: linear-gradient(135deg, #f9fafb, #eef2ff);
            border-radius: 18px;
            padding: 1rem;
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
        }

        .image-container .carousel,
        .image-container img {
            border-radius: 14px;
            overflow: hidden;
        }

        .image-container img {
            width: 100%;
            height: 420px;
            object-fit: cover;
        }

        .pro-info {
            text-align: left;
            margin-bottom: 1.25rem;
        }

        .pro-info h3 {
            font-size: 1.5rem;
            font-weight: 600;
            color: #111827;
            margin-bottom: .25rem;
        }

        .pro-info p {
            margin-bottom: 0;
            font-size: .9rem;
            color: #6b7280;
        }

        .price {
            font-size: 1.3rem;
            font-weight: 700;
            color: #e11d48;
            margin-top: .4rem;
        }

        .size-guid {
            margin-top: 1.5rem;
        }

        .view-size h5 {
            font-size: .95rem;
            font-weight: 500;
            margin-bottom: 0;
        }

        .size-guide {
            font-size: .85rem;
            text-decoration: none;
            color: #4f46e5;
            font-weight: 500;
        }

        .size-guide:hover {
            text-decoration: underline;
            color: #4338ca;
        }

        .size {
            margin-top: 0.75rem;
        }

        .pro-size {
            list-style: none;
            padding-left: 0;
            flex-wrap: wrap;
            gap: .5rem .75rem;
        }

        .product-size {
            position: relative;
            display: inline-flex;
        }

        .product-size a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            padding: .35rem .75rem;
            border-radius: 999px;
            border: 1px solid #e5e7eb;
            font-size: .85rem;
            color: #111827;
            text-decoration: none;
            background-color: #ffffff;
            transition: all .15s ease-out;
        }

        .product-size a:hover {
            border-color: #4f46e5;
            color: #111827;
            box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.15);
        }

        .product-size.active a {
            background-color: #111827;
            color: #f9fafb;
            border-color: #111827;
        }

        .message {
            min-height: 24px;
            margin-top: .75rem;
        }

        .selected-size {
            font-size: .9rem;
            color: #10b981;
        }

        .add-item {
            width: 100%;
            max-width: 320px;
            display: flex;
            justify-content: center;
            text-decoration: none;
        }

        .cartbtn {
            width: 100%;
            border: none;
            border-radius: 999px;
            padding: .7rem 1rem;
            font-size: .95rem;
            font-weight: 600;
            letter-spacing: .04em;
            text-transform: uppercase;
            background: linear-gradient(135deg, #111827, #020617);
            color: #f9fafb;
            box-shadow: 0 12px 25px rgba(15, 23, 42, 0.45);
            transition: transform .1s ease-out, box-shadow .1s ease-out, background .15s ease-out;
        }

        .cartbtn:hover {
            transform: translateY(-1px);
            box-shadow: 0 16px 30px rgba(15, 23, 42, 0.55);
            background: linear-gradient(135deg, #020617, #000000);
            color: #f9fafb;
        }

        .cartbtn:active {
            transform: translateY(0);
            box-shadow: 0 10px 20px rgba(15, 23, 42, 0.35);
        }

        .product-popup img {
            border-radius: 12px;
            object-fit: cover;
        }

        .product-popup h3 {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: .25rem;
        }

        .product-popup p {
            font-size: .9rem;
            color: #4b5563;
        }

        .p-description,
        .p-details,
        .p-materials,
        .p-care {
            padding: 1.75rem 1.25rem;
            border-radius: 18px;
            background-color: #f9fafb;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
            margin-bottom: 1.25rem;
        }

        .description-title,
        .details-title,
        .materials-title,
        .care-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: .5rem;
            color: #111827;
        }

        .pdescription,
        .pdetails,
        .pmaterials,
        .pcare {
            font-size: .92rem;
            color: #4b5563;
            line-height: 1.6;
        }

        .car {
            padding-bottom: 3rem;
        }

        .car .card {
            border-radius: 18px;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
        }

        .car .card-title {
            font-size: 1rem;
            font-weight: 600;
        }

        .car .card-text {
            font-size: .9rem;
            color: #4b5563;
        }

        .size-table table {
            font-size: .82rem;
        }

        .size-table th {
            font-weight: 500;
        }

        .size-table td,
        .size-table th {
            padding: .35rem .5rem;
            vertical-align: middle;
        }

        .pill-item {
            font-size: .85rem;
            border-radius: 999px !important;
        }

        .pill-item.nav-link.active {
            background-color: #111827;
        }

        .disabled-link {
            pointer-events: none;
            opacity: 0.5;
        }

        .disabled-link a {
            cursor: not-allowed;
            text-decoration: line-through;
        }

        .disabled-link::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 55%;
            height: 2px;
            background: rgb(230, 8, 8);
        }

        @media (max-width: 767.98px) {
            .image-container img {
                height: 320px;
            }

            .add-item {
                max-width: 100%;
            }

            .product-section {
                padding-top: 1.5rem;
            }
        }
    </style>
@endpush

@push('script')
@endpush