@include('layout.header')

<div class="recharge detail">
    <!-- HEADER -->
    <nav class="top_nav">
        <div class="left">
            <a href="{{url('/')}}">
                <img src="{{asset('assets/img/back_arrow.png')}}" alt="" />
            </a>
            <span>Product</span>
        </div>
    </nav>
    <!-- HEADER -->

    <!-- SLIDER -->
    <div class="product_slider_container mt-2 shadow-sm">
        <div class="slider">
            <img src="{{asset('assets/img/'.$product->image)}}" alt="" />
        </div>
    </div>
    <!-- SLIDER -->

    <!-- DATA / BODY -->
    <div class="container-fluid mt-3">
        <p class="mb-2">
            {{$product->title}}
        </p>
        <h5 class="mb-3">₹ {{$product->price}}</h5>
        <button class="soldout d-none">Sold Out</button>
        @if(Gate::check('user'))
        <button class="order_btn" onclick='createOrder("{{$product->id}}")'>Order</button>
        @else
        <a href="{{url('/login')}}" class="order_btn">Order</a>
        @endif

        <br />
        <br />

        <div class="product_specifications py-4">
            <div class="row">
                <!-- --- -->
                <div class="col-11 mx-auto mb-4">
                    <div class="row">
                        <div class="col-12">
                            <p class="color1 fw600">Product Specifications</p>
                        </div>
                    </div>
                </div>
                <!-- --- -->
                <!-- --- -->
                <div class="col-11 mx-auto">
                    <div class="row">
                        <div class="col-6">Brand</div>
                        <div class="col-6">{{$product->brand}}</div>
                    </div>
                </div>
                <hr class="my-3" />
                <!-- --- -->
                <!-- --- -->
                <div class="col-11 mx-auto">
                    <div class="row">
                        <div class="col-6">Collection</div>
                        <div class="col-6">
                            {{$product->collection}}
                        </div>
                    </div>
                </div>
                <hr class="my-3" />

            </div>
        </div>
    </div>
    <!-- DATA / BODY -->
</div>

@include('layout.footer')