@extends('front.layout.master')
@push('css')
    <style>


        .combo-products {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #ddd;
        }

        .combo-products-wrap {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .combo-product {
            display: flex;
            align-items: center;
            gap: 15px;
            background: #fff;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .combo-product .img {
            flex-shrink: 0;
            width: 80px;
            height: 80px;
        }

        .combo-product .img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 5px;
        }

        .combo-product .info {
            flex-grow: 1;
        }

        .combo-product .info h5 {
            margin: 0 0 5px;
            font-size: 16px;
        }

        .combo-product .info .price {
            font-size: 14px;
            color: #555;
        }

        .add-all-to-cart {
            margin-top: 20px;
            text-align: center;
        }

        .add-all-to-cart .btn {
            background: #007bff;
            color: #fff;
            padding: 10px 20px;
            border-radius: 5px;
            text-decoration: none;
            font-size: 16px;
            cursor: pointer;
        }

        .add-all-to-cart .btn:hover {
            background: #0056b3;
        }


    </style>
@endpush
@section('content')
    <main class="main-content">
        <div class="jumbo">
            <img src="{{ asset('front/images/subscription.png') }}" alt="subscription" />
        </div>

        <div class="services category-wrap">
            <div class="container">
                <div class="g-head">
                    <h3>تفاصيل  ({{ $data['product']->name}})</h3>
                </div>
{{--                @dd($data['product'])--}}
                <div class="service-block">
                    <div class="img">
                        <a href="#"></a>
                        <img src="{{ $data['product']->image }}" alt="service" />
                    </div>
                    <div class="info">
                        <a href="#" class="title">{{ $data['product']->name }}</a>
                        <p>{!! $data['product']->descrption !!}</p>
                        <div class="block-footer">
                            <div class="price">
                                <span>{{ $data['product']->discount }} <i>{{ $data['product']->code }}</i></span>
                                <span class="old-price">{{ $data['product']->mainprice }} <i>{{ $data['product']->code }}</i></span>
                            </div>
                        </div>
                    </div>
                </div>

                @if($data['product']->related->count() > 0)
                <!-- Combo Products Section -->
                <div class="combo-products">
                    <h4>منتجات العرض</h4>
                    <div class="combo-products-wrap">
                        @foreach($data['product']->related as $item)
                            <div class="combo-product">
                                <div class="img">
                                    <img src="{{ $item['image'] }}" alt="{{ $item['name'] }}" style="width: 100%" />
                                </div>
                                <div class="info">
                                    <h5>{{ $item['name'] }}</h5>
                                    <div class="price">
                                        <span>{{ $item['price'] }} <i>{{$data['product']->code}}</i></span>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                </div>
                @endif
                <div class="service-footer">
                    <form action="{{route('addedCart')}}" method="post" id="addedForm" data-id="{{$data['product']->id}}" data-price="{{$data['product']->discount}}">
                        @method('post')
                        @csrf
                        <input type="hidden"  id="branch_id" name="branch_id" value="{{$data['product']->branch_id}}">
                        <input type="hidden" form="addedForm" value="1" id="quantaty" name="quantaty" class="plus-minus-box" disabled="">

                        <button type="submit" class="btn">اضافة للسلة بمجموع {{$data['product']->discount }} {{$data['product']->code }}</button>
                    </form>
                </div>
            </div>
        </div>
    </main>


@endsection