@extends('frontend.layouts.frontend_app')
@push('style')
    <style>
        .product_name {
            font-size: 36px;
            font-weight: 500;
            color: #000;
            margin-top: 0;
            margin-bottom: 0;
        }

        .product_details_content label {
            position: relative;
            display: block;
            margin-top: 2px;
            font-size: 18px;
            line-height: 1.8;
        }

        .quantity-btn {
            height: 30px;
            width: 30px;
            border: 0;
            border-radius: 5px;
            background: #fff;
            font-weight: 700;
        }

        .increment {
            background: #4CAF50;
            color: #fff;
        }

        .decreament {
            background: #F44336;
            color: #fff;
        }

        .quantity-input {
            border: 0;
            border-radius: 5px;
            height: 30px;
            width: 30px;
            text-align: center;
        }

    </style>
@endpush
@section('content')
    <section id="product_details mt-1">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-5">
                    <div class="product_details_image border rounded p-5">
                        @if(isset($medicine->image))
                            <img src="{{ asset('storage/images/ecommerce/product/'.$medicine->image) }}"
                                 alt="Deslor kid"
                                 class="big_image w-100">
                        @else
                            <img src="{{ asset('storage/images/medicine/default.png') }}" alt="{{ $medicine->name }}"
                                 class="big_image w-100">
                        @endif
                    </div>
                </div>

                <div class="col-12 col-sm-12 col-md-12 col-lg-7">
                    <div class="product_details_content">
                        <h1 class="product_name">{{ $medicine->name }}</h1>
                        <div class="category">
                            <label class="mr-2 text-muted mb-0">{{ $medicine->category? $medicine->category->name :'' }}</label>
                        </div>
                        <div class="generics">
                            <label class="mr-2  mb-0"><b>{{__('pages.Generic')}}</b>:
                                <a class="text-muted" href="">{{ $medicine->generic_name}}</a></label>
                        </div>
                        <div class="manufacture">
                            <label class="mr-2 mb-0">
                                <a class="text-danger"
                                   href=""><b>{{ $medicine->supplier ? $medicine->supplier->name :''}}</b></a>
                            </label>
                        </div>
                        <h3 class="product_price">{{__('pages.Price')}} :
                            <span>{{ setting('currency') }}</span>{{ number_format($medicine->discounted_price,2) }}
                            <del class="ml-3 text-danger"><span>{{ setting('currency') }}</span> {{ number_format($medicine->price,2) }}</del>
                        </h3>

                        <p class="description"></p>
                        <hr>
                        <div class="quntity_add d-flex align-items-center justify-content-between">
                            <p>{{ $medicine->leaf->name }} </p>
                            <div class="">
                                <input
                                    type="button" onclick="decrementQuantity()"
                                    class="quantity-btn decreament"
                                    value="-"
                                />
                                <input
                                    type="text" id="quantity"
                                    value="1" name="quantity" readonly min="1"
                                    class="quantity-input"
                                />
                                <input
                                    type="button" onclick="incrementQuantity()"
                                    class="quantity-btn increment"
                                    value="+"
                                />
                            </div>
                        </div>
                        <hr>
                        <div class="cart_btn_box">
                            <a href="{{ route('front.index') }}"
                               class="btn btn-warning text-uppercase font-weight-bold text-white py-3 px-5 mr-0 mr-lg-4 mb-3 mb-lg-0 d-block d-lg-inline-block"><i
                                        class="fa fa-search"></i> {{__('pages.Buy More')}}</a>
                            @if($medicine->instock > 0)
                            <a type="button" onclick="ADD_TO_CART('{{ $medicine->id }}')"
                                    class="btn btn-success text-uppercase font-weight-bold py-3 px-5 cart_btn d-block d-lg-inline-block"><i
                                        class="fa fa-shopping-cart"></i> {{__('pages.Add To Cart')}}
                            </a>
                            @else
                                <a type="button" disabled
                                   class="btn btn-danger text-uppercase disabled font-weight-bold py-3 px-5 cart_btn d-block d-lg-inline-block"><i
                                            class="fa fa-warning"></i> {{__('pages.Stockout')}}
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <!-- description section -->
            <div class="row py-4">
                <div class="col-12">
                    <div class="review_descriptiobn_box border p-3 rounded">
                        <h4>{{__('pages.Description')}}</h4>
                        <hr>
                        <div class="description_box py-3">
                            <p class="pb-2 text-muted"></p>
                            {!! $medicine->dess !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@push('script')
    <script>
        function incrementQuantity() {
            var quantityField = document.getElementById("quantity");
            var quantityValue = parseInt(quantityField.value);

            if (!isNaN(quantityValue)) {
                quantityValue++;
                quantityField.value = quantityValue;
            }
        }

        function decrementQuantity() {
            var quantityField = document.getElementById("quantity");
            var quantityValue = parseInt(quantityField.value);

            if (!isNaN(quantityValue) && quantityValue > 1) {
                quantityValue--;
                quantityField.value = quantityValue;
            }
        }
    </script>

    <script>
        "use strict"

        // Add to cart
        function ADD_TO_CART(id) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            // Get product by id
            $.post({
                url: "{{ route('front.addtocart') }}",
                data: {product_id: id, quantity: $('#quantity').val()},
                success: function (data) {
                    toastr.success('Product has been added!', {
                        CloseButton: true,
                        ProgressBar: true
                    });
                    location.reload();
                },
            });
        }

    </script>
@endpush