@extends('layouts.app')

@section('content')
<!-- Page Header -->
<div style="background-color: #f8f9fa; padding: 40px 0; border-bottom: 1px solid #e9ecef; text-align: center;" class="page-header">
    <h2 style="margin: 0; color: #333; font-weight: 700; font-size: 28px;" class="page-title">Product Details</h2>
    <p style="margin: 10px 0 0 0; color: #6c757d; font-size: 15px;">
        <a href="{{ url('/') }}" style="color: #0170B9; text-decoration: none;">Home</a> / <span style="color: #6c757d;">{{ $product->name }}</span>
    </p>
</div>

<div class="product-container" style="max-width: 1200px; margin: 60px auto; padding: 0 20px;">
    <div class="product-flex" style="display: flex; flex-wrap: wrap; gap: 50px;">
        
        <!-- Product Image Section -->
        <div style="flex: 1 1 300px;">
            <div style="background: #ffffff; padding: 20px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); text-align: center; border: 1px solid #f0f0f0;">
                @if($product->photo)
                    <img src="{{ asset('storage/' . $product->photo) }}" alt="{{ $product->name }}" style="max-width: 100%; height: auto; border-radius: 8px; object-fit: contain;">
                @else
                    <div style="width: 100%; aspect-ratio: 1; background: #f8f9fa; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-box-open" style="font-size: 80px; color: #dee2e6;"></i>
                    </div>
                @endif
            </div>
        </div>

        <!-- Product Info Section -->
        <div style="flex: 1.5 1 300px;">
            <h1 class="product-title" style="color: #222; font-size: 32px; font-weight: 700; margin: 0 0 15px 0; line-height: 1.3;">{{ $product->name }}</h1>
            
            <!-- Price and Badge -->
            <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 25px; flex-wrap: wrap;">
                @if($product->price)
                    <span style="font-size: 24px; font-weight: 700; color: #0170B9;">৳ {{ $product->price }}</span>
                @endif
                <span style="background-color: #e8f5e9; color: #2e7d32; padding: 5px 12px; border-radius: 20px; font-size: 13px; font-weight: 600;"><i class="fas fa-check-circle" style="margin-right: 5px;"></i>In Stock</span>
            </div>
            
            <div style="height: 1px; background: #eee; margin-bottom: 25px;"></div>

            <h4 style="color: #333; font-weight: 600; margin: 0 0 15px 0; font-size: 18px;">Product Description</h4>
            
            <!-- Description Box -->
            <div class="desc-box" style="background-color: #fcfcfc; border-left: 4px solid #0170B9; padding: 20px 25px; border-radius: 0 8px 8px 0; color: #555; font-size: 15.5px; line-height: 1.8; margin-bottom: 35px;">
                @if($product->description)
                    {!! nl2br(e($product->description)) !!}
                @else
                    <p style="margin: 0; font-style: italic; color: #888;">No description available for this product.</p>
                @endif
            </div>

            <!-- Action Buttons -->
            <div class="action-buttons" style="display: flex; gap: 15px; flex-wrap: wrap;">
                <a href="tel:01936900216" style="background: #0170B9; color: #fff; padding: 14px 28px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.3s; box-shadow: 0 4px 10px rgba(1, 112, 185, 0.2);">
                    <i class="fas fa-phone-alt"></i> Call for Order
                </a>
                <a href="{{ url('/') }}" style="background: #fff; color: #555; border: 1px solid #ddd; padding: 14px 28px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.3s;">
                    <i class="fas fa-arrow-left"></i> Back to Home
                </a>
            </div>
            
            <!-- Safe & Secure Info -->
            <div class="safe-info" style="margin-top: 30px; display: flex; align-items: center; gap: 15px; flex-wrap: wrap; color: #666; font-size: 14px;">
                <span style="display: flex; align-items: center; gap: 5px;"><i class="fas fa-shield-alt" style="color: #2e7d32;"></i> 100% Authentic Product</span>
                <span style="display: flex; align-items: center; gap: 5px;"><i class="fas fa-truck" style="color: #0170B9;"></i> Fast Delivery</span>
            </div>
        </div>
    </div>
</div>

<style>
    /* Hover effects */
    .action-buttons a[href^="tel:"]:hover {
        background: #015a96 !important;
        transform: translateY(-2px);
    }
    .action-buttons a[href="{{ url('/') }}"]:hover {
        background: #f8f9fa !important;
        border-color: #ccc !important;
        transform: translateY(-2px);
    }

    /* Mobile Responsiveness */
    @media (max-width: 768px) {
        .page-header {
            padding: 25px 0 !important;
        }
        .page-title {
            font-size: 22px !important;
        }
        .product-container {
            margin: 30px auto !important;
            padding: 0 15px !important;
        }
        .product-flex {
            gap: 25px !important;
        }
        .product-title {
            font-size: 24px !important;
        }
        .desc-box {
            padding: 15px !important;
            font-size: 14px !important;
        }
        .action-buttons {
            flex-direction: column !important;
            gap: 10px !important;
        }
        .action-buttons a {
            width: 100% !important;
        }
        .safe-info {
            gap: 10px !important;
            flex-direction: column;
            align-items: flex-start !important;
        }
    }
</style>

<div class="elementor elementor-12">
        <div class="elementor-section elementor-top-section elementor-element elementor-section-boxed" style="margin-top: 60px; margin-bottom: 40px;">
        <div class="elementor-container elementor-column-gap-default" style="flex-direction: column;">
            <div style="text-align: center; margin-bottom: 30px;">
                <h2 style="font-size: 28px; font-weight: 700; color: #333;">Related Products</h2>
                <div style="width: 60px; height: 3px; background: #0170B9; margin: 10px auto 0;"></div>
            </div>
            <div class="elementor-row" style="flex-wrap: wrap; justify-content: center;">
@foreach($related_products as $product)
                    <div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-bd7481f" data-id="bd7481f" data-element_type="column" style="margin-bottom: 20px;">
                        <div class="elementor-column-wrap elementor-element-populated">
                            <div class="elementor-widget-wrap">
                                <div class="elementor-element elementor-element-a7d969b elementor-widget elementor-widget-image" data-id="a7d969b" data-element_type="widget" data-widget_type="image.default">
                                    <div class="elementor-widget-container">
                                        <div class="elementor-image" style="text-align: center;">
                                            <a href="{{ url('product/' . $product->url) }}">
                                                @if($product->photo)
                                                <img src="{{ asset('storage/' . $product->photo) }}" style="width: 100%; height: auto; max-width: 300px; aspect-ratio: 1; object-fit: cover;" alt="{{ $product->name }}" />
                                                @else
                                                <div style="width: 100%; max-width: 300px; aspect-ratio: 1; background: #eee; display: flex; align-items: center; justify-content: center; margin: 0 auto;"><i class="fa-solid fa-image" style="font-size: 40px; color: #ccc;"></i></div>
                                                @endif
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="elementor-element elementor-element-009f743 elementor-widget elementor-widget-heading" data-id="009f743" data-element_type="widget" data-widget_type="heading.default">
                                    <div class="elementor-widget-container">
                                        <h5 class="elementor-heading-title elementor-size-default" style="text-align: center;">
                                            <a href="{{ url('product/' . $product->url) }}">{{ $product->name }}</a>
                                            @if($product->price)
                                            <div style="color: #2e7d32; font-size: 16px; margin-top: 5px;">৳{{ $product->price }}</div>
                                            @endif
                                        </h5>
                                    </div>
                                </div>
                                <div class="elementor-element elementor-element-40c2cdc elementor-align-center elementor-widget elementor-widget-button" data-id="40c2cdc" data-element_type="widget" data-widget_type="button.default">
                                    <div class="elementor-widget-container">
                                        <div class="elementor-button-wrapper">
                                            <a href="{{ url('product/' . $product->url) }}" class="elementor-button-link elementor-button elementor-size-sm" role="button">
                                                <span class="elementor-button-content-wrapper">
                                                    <span class="elementor-button-icon elementor-align-icon-left">
                                                        <i aria-hidden="true" class="fas fa-arrow-right"></i>
                                                    </span>
                                                    <span class="elementor-button-text">More Info</span>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
@endforeach
            </div>
        </div>
    </div>

    @include('layouts.footer')
</div>
@endsection