@extends('layouts.app')

@section('title', $item->item_name . ' - MyTelecom')
@section('og_title', $item->item_name)
@section('og_description', Str::limit(strip_tags($item->description), 160))
@section('og_image', asset($item->main_img))
@section('og_url', route('product.show', $item->id))
@section('og_type', 'product')

@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
    .product-title {
        color: #2c3e50;
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        position: relative;
        padding-bottom: 0.5rem;
    }
    .price-container {
        background: linear-gradient(135deg, #ffffff, #f8f9fa);
        border-radius: 15px;
        padding: 1.5rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        margin: 1rem 0;
        border: 1px solid #eee;
    }
    .price-container:before {
        content: '';
        display: inline-block;
        position: absolute;
        width: 4px;
        height: 50px;
        background: linear-gradient(to bottom, #0d6efd, #0dcaf0);
        border-radius: 2px;
        margin-left: 0.5rem;
    }



    .old-price {
        color: #dc3545;
        font-size: 1.2rem;
        text-decoration: line-through;
        opacity: 0.8;
        margin-bottom: 0.5rem;
    }
    .new-price {
        color: #198754;
        font-size: 2.2rem;
        font-weight: 700;
        background: -webkit-linear-gradient(45deg, #198754, #20c997);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0;
        line-height: 1.2;
    }
    .product-description {
        margin: 2rem 0;
    }
    .product-description h4 {
        color: #2c3e50;
        font-size: 1.4rem;
        font-weight: 600;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .product-description h4:before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 20px;
        background: linear-gradient(to bottom, #0d6efd, #0dcaf0);
        border-radius: 2px;
        margin-left: 0.5rem;
    }
    .description-content {
        background: linear-gradient(135deg, #ffffff, #f8f9fa);
        padding: 1.8rem !important;
        border-radius: 12px;
        line-height: 1.8;
        color: #444;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        border: 1px solid #eee;
        font-size: 1.1rem;
    }
    /* Order Section Styles */
    .order-section {
        padding: 3rem 0;
        background: linear-gradient(135deg, #ffffff, #f8f9fa);
    }
    .order-title {
        color: #2c3e50;
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 2rem;
        position: relative;
        display: inline-block;
    }
    .order-title:after {
        content: '';
        position: absolute;
        bottom: -10px;
        right: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(to left, #0d6efd, #0dcaf0);
        border-radius: 2px;
    }
    .order-form {
        background: white;
        padding: 2rem;
        border-radius: 15px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        border: 1px solid #eee;
        max-width: 400px;
        margin: auto;
    }
    .form-label {
        color: #2c3e50;
        font-weight: 600;
        margin-bottom: 0.5rem;
        font-size: 1rem;
    }
    .form-control, .form-select {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 0.8rem 1rem;
        transition: all 0.3s ease;
        background: #f8f9fa;
    }
    .form-control:focus, .form-select:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
        background: white;
    }
    .form-control::placeholder {
        color: #adb5bd;
    }
    .order-btn {
        background: linear-gradient(135deg, #198754, #20c997);
        border: none;
        padding: 1rem;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
        margin-top: 1rem;
    }
    .order-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(25, 135, 84, 0.2);
        background: linear-gradient(135deg, #157347, #1ca183);
    }
    .social-order {
        background: white;
        padding: 2rem;
        border-radius: 15px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        border: 1px solid #eee;
        text-align: center;
    }
    .social-title {
        color: #2c3e50;
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 2rem;
        position: relative;
        display: inline-block;
    }
    .social-title:after {
        content: '';
        position: absolute;
        bottom: -10px;
        right: 0;
        width: 60%;
        height: 2px;
        background: linear-gradient(to left, #6c757d, #adb5bd);
        border-radius: 2px;
    }
    .social-icons {
        display: flex;
        justify-content: center;
        gap: 2rem;
        margin-top: 2rem;
    }
    .social-icon {
        width: 60px;
        height: 60px;
        transition: all 0.3s ease;
        filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
    }
    .social-icon:hover {
        transform: translateY(-5px) scale(1.1);
        filter: drop-shadow(0 8px 12px rgba(0,0,0,0.15));
    }
    .delivery-info {
        background: linear-gradient(135deg, #198754, #20c997);
        color: white;
        border-radius: 12px;
        padding: 1.5rem;
        margin-top: 2rem;
        box-shadow: 0 4px 15px rgba(25, 135, 84, 0.2);
    }
    .delivery-info h5 {
        margin-bottom: 0.8rem;
        font-weight: 500;
        opacity: 0.9;
    }
    .delivery-info h5:last-child {
        margin-bottom: 0;
    }
    @media (max-width: 768px) {
        .product-title {
            font-size: 1.5rem;
        }
        .new-price {
            font-size: 1.8rem;
        }
        .old-price {
            font-size: 1rem;
        }
        .product-description {
            margin: 1.5rem 0;
        }
        .description-content {
            padding: 1.2rem !important;
            font-size: 1rem;
        }
        .order-section {
            padding: 2rem 0;
        }
        .order-title {
            font-size: 1.5rem;
        }
        .social-icons {
            gap: 1rem;
        }
        .social-icon {
            width: 50px;
            height: 50px;
        }
    }
</style>

<div class="container">

        @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif


        <div class="row">
            <div class="col-md-7">

                <div class="price-container" style="margin-top:0">
                    <div class="text-center">
                        <h2 class="">{{$item->item_name}}</h2>
                    </div>
                </div>

                <div class="product-description">
                    <h4>وصف المنتج</h4>
                    <div class="" style="font-size: 1.3rem;">
                        <div class="px-3" style="align-text: justify">{{ $item->description }}</div>
                    </div>
                </div>

                <div class="product-title">

                    @if($item->old_price)
                    <div class="old-price">
                        {{ number_format($item->old_price) }} د.ع
                    </div>
                    @endif
                    <div class="new-price">
                        {{ number_format($item->new_price) }} د.ع
                    </div>
                </div>


            </div>{{-- col --}}
            <div class="col-md-5 rounded">
                <div class="image-box">
                    <a href="{{asset($item->main_img)}}" class="" target="_blank"><img src="{{asset($item->main_img)}}"  style="width: 100%" class="border rounded shadow" alt="" loading="lazy"></a>
                </div>
                <div>
                    <style>
                        .secondary-images img {
                            width: 100%;
                            height: 150px; /* Fixed height */
                            @media (min-width: 400px) {
                                height: auto;
                            }
                            object-fit: cover; /* Maintains aspect ratio while covering container */
                        }
                    </style>
                    <div class="row mt-2 secondary-images">
                        @if(!empty($item->img_1))
                            <div class="col-md-4 mb-4 rounded">
                                <a href="{{ asset($item->img_1) }}" target="_blank">
                                    <img src="{{ asset($item->img_1) }}" class="border-2 rounded shadow" alt="" loading="lazy">
                                </a>
                            </div>
                        @endif

                        @if(!empty($item->img_2))
                            <div class="col-md-4 mb-4 rounded">
                                <a href="{{ asset($item->img_2) }}" target="_blank">
                                    <img src="{{ asset($item->img_2) }}" class="border-2 rounded shadow" alt="" loading="lazy">
                                </a>
                            </div>
                        @endif

                        @if(!empty($item->img_3))
                            <div class="col-md-4 mb-4 rounded">
                                <a href="{{ asset($item->img_3) }}" target="_blank">
                                    <img src="{{ asset($item->img_3) }}" class="border-2 rounded shadow" alt="" loading="lazy">
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>{{-- col --}}
        </div>


    </div>{{-- container --}}




<hr class="my-5">

<div class="container order-section">
    <div class="row">
        <div class="col-12 text-center mb-4">
            <h2 class="order-title">اطلب الآن ❤️</h2>
        </div>

        <div class="col-md-6 d-none">
            <form action="{{ route('order.store') }}" method="POST" class="order-form">
                @csrf
                <div class="mb-3">
                    <label for="customer_name" class="form-label">
                        <i class="fas fa-user text-primary ms-1"></i>
                        الاسم الثلاثي
                    </label>
                    <input type="text" class="form-control" id="customer_name" name="customer_name" placeholder="الاسم الثلاثي" required>
                </div>
                <div class="mb-3">
                    <label for="phone_number" class="form-label">
                        <i class="fas fa-phone text-primary ms-1"></i>
                        رقم الهاتف
                    </label>
                    <input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="رقم الهاتف" required>
                    <input type="hidden" name="product_name" value="{{ $item->item_name }}">
                </div>
                <div class="mb-3">
                    <label for="province" class="form-label">
                        <i class="fas fa-map-marker-alt text-primary ms-1"></i>
                        المحافظة
                    </label>
                    <select class="form-select" id="province" name="province" required>
                        <option value="">اختر المحافظة</option>
                        <option value="بغداد">بغداد</option>
                        <option value="البصرة">البصرة</option>
                        <option value="نينوى">نينوى</option>
                        <option value="أربيل">أربيل</option>
                        <option value="النجف">النجف</option>
                        <option value="كربلاء">كربلاء</option>
                        <option value="السليمانية">السليمانية</option>
                        <option value="دهوك">دهوك</option>
                        <option value="الأنبار">الأنبار</option>
                        <option value="بابل">بابل</option>
                        <option value="ديالى">ديالى</option>
                        <option value="ذي قار">ذي قار</option>
                        <option value="صلاح الدين">صلاح الدين</option>
                        <option value="القادسية">القادسية</option>
                        <option value="المثنى">المثنى</option>
                        <option value="ميسان">ميسان</option>
                        <option value="واسط">واسط</option>
                        <option value="حلبجة">حلبجة</option>
                        </select>
                </div>
                <div class="mb-3">
                    <label for="area" class="form-label">
                        <i class="fas fa-map text-primary ms-1"></i>
                        المنطقة
                    </label>
                    <input type="text" class="form-control" id="area" name="area" placeholder="المنطقة" required>
                </div>
                <div class="mb-3">
                    <label for="landmark" class="form-label">
                        <i class="fas fa-location-arrow text-primary ms-1"></i>
                        أقرب نقطة دالة
                    </label>
                    <input type="text" class="form-control" id="landmark" name="landmark" placeholder="أقرب نقطة دالة" required>
                </div>
                <button type="submit" class="btn order-btn text-white w-100">
                    <i class="fas fa-shopping-cart ms-1"></i>
                    اطلب المنتج الان
                </button>
            </form>
        </div>