@extends('layouts.main')
@section('title', $product->name)
@section('main')
    <div class="container mt-4">
        <a href="{{ route('categories.products', ['id' => $category->category_type == 'main' ? $category->main_category_id : $category->sub_category_id, 'categorySlug' => $category->slug]) }}"
           class="btn btn-secondary mb-3"><i class="bi bi-arrow-left"></i> Back to Products</a>
        <input type="hidden" name="variable_id" id="variable_id" value="{{$product->base_product['uid']}}">
        <div class="row">
            <div class="col-md-6 d-flex flex-column align-items-start">
                <img id="main-image" src="{{ asset('storage/products/' . $product->feature_image) }}" class="img-fluid mb-3"
                     alt="{{ $product->name }}">
                @if(isset($product->images))
                    <h4>Product Images:</h4>
                    @foreach (json_decode($product->images) as $image)
                        <img src="{{ asset('storage/products/' . $image) }}" class="img-fluid mb-3" alt="Product Image">
                    @endforeach
                @endif

                @if(isset($product['technical_image']))
                <h4>Technical Images:</h4>
                <div class="technical-images">
                    @foreach ($product['technical_image'] as $timage)
                        <img src="{{ asset('storage/products/' . $timage) }}" class="img-fluid mb-3" alt="Product Image">
                    @endforeach
                </div>
                @endif

                <h4 id="variable_images_div">Variable Images:</h4>
                <div class="additional-images">
                    @foreach ($product->base_product['images'] as $image)
                        <img src="{{ asset('storage/products/' . $image) }}" class="img-fluid mb-3" alt="Product Image">
                    @endforeach
                </div>


                <h4>Technical Video:</h4>
                <video width="320" height="240" controls>
                    <source src="{{ asset('storage/products/' . $product->technical_video) }}" type="video/mp4">
                    Your browser does not support the video tag.
                </video>

                @if(isset($product->videos))
                    <h4>Videos:</h4>
                    @foreach (json_decode($product->videos) as $video)
                        <video width="320" height="240" controls>
                            <source src="{{ asset('storage/products/' . $video) }}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                    @endforeach
                @endif
            </div>

            <!-- Product Details and Description -->
            <div class="col-md-6">
                <h2>{{ $product->name }}</h2>
                <h6>{{ $product->brand }}</h6>
                <p class="text-muted">{{ $product->title }}</p>

                @if(isset($product->variable_structure['attribute']))
                    <form id="attribute-form">
                        @foreach($product->variable_structure['attribute'] as $key => $options)
                            <div class="mb-3">
                                <label for="{{ $key }}">{{ str_replace('_', ' ', ucfirst($key)) }}:</label>
                                <select id="{{ $key }}" name="{{ $key }}" class="form-select">
                                    <option value="" >Select {{ str_replace('_', ' ', ucfirst($key)) }}</option>
                                    @foreach($options as $option)
                                        <option
                                            value="{{ $option }}" {{ (isset($product->base_product[$key]) && $option == $product->base_product[$key]) ? 'selected' : '' }}>
                                            {{ $option }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        @endforeach
                    </form>
                @endif

                <div id="product-not-available" style="display: none; color: red; font-weight: bold;"></div>
                <div id="product_variable_details">
                    <p>Original Price: $<span
                            id="original-price">{{ number_format($product->base_product['original_price'], 2) }}</span>
                    </p>
                    <p>Listed Price: $<span
                            id="listed-price">{{ number_format($product->base_product['listed_price'], 2) }}</span></p>
                    <p id="quantity-available"
                       style="{{ $product->limited == 'yes' ? '' : 'display: none;' }}">
                        Quantity Available: {{ $product->quantity_available }}
                    </p>
                    <p>Waiting Time: {{ $product->waiting_time ?? 0 }} days</p>
                    <p>Box Size: <span id="box-size"> {{ implode(', ', $product->base_product['box_size']) }}</span></p>
                    <p>Weight: <span id="weight">{{ implode(', ', $product->base_product['weight']) }} kg</span></p>
                    <p>Total Weight: <span id="total-weight">{{ $product->base_product['total_weight'] }} kg</span></p>
                    <p>In Stock: <span id="in-stock">{{ $product->base_product['in_stock'] ? 'Yes' : 'No' }}</span></p>
                    @if(isset($product->base_product['specification']) && !empty($product->base_product['specification']) &&isset(json_decode($product->base_product['specification'])[0]))
                        <h5 id="specification-header" >Specification:</h5>
                        <ul id="specification-list">
                            @foreach (json_decode($product->base_product['specification']) as $specification)
                                <li>{{ $specification }}</li>
                            @endforeach
                        </ul>
                    @endif
                </div>


                <div class="d-flex align-items-center mb-3" id="cart-div">
                    <div class="input-group me-3">
                        <button class="btn btn-outline-secondary btn-sm" type="button" data-action="minus"
                                data-product-id="{{ $product->id }}">-
                        </button>
                        <input type="text" class="form-control text-center qty-reset" id="qty{{ $product->id }}" value="1"
                               min="1"
{{--                               @if($product->quantity_available > 0) max="{{ $product->quantity_available }}" @endif--}}
                        >
                        <button class="btn btn-outline-secondary btn-sm" type="button" data-action="plus"
                                data-product-id="{{ $product->id }}">+
                        </button>

                    </div>
                    <button class="btn btn-success w-100 add-to-cart-button" type="button" id="add-to-cart{{ $product->id }}">Add to Cart
                    </button>
                </div>

                @if($product->description)
                <h4>Description:</h4>
                @php
                    $descriptions = json_decode($product->description, true);
                @endphp
                @if($descriptions)
                    <ul>
                        @foreach($descriptions as $desc)
                            <li>{{ $desc }}</li>
                        @endforeach
                    </ul>
                @else
                    <p>No description available.</p>
            @endif
            @endif
                @if(isset(json_decode($product->features)[0]))
                <h4>Features:</h4>
                <ul>
                    @foreach (json_decode($product->features) as $feature)
                        <li>{{ $feature }}</li>
                    @endforeach
                </ul>
                @endif


                @if(isset(json_decode($product->inclusions)[0]))
                <h4>Inclusions:</h4>
                <ul>
                    @foreach (json_decode($product->inclusions) as $inclusion)
                        <li>{{ $inclusion }}</li>
                    @endforeach
                </ul>

                @endif
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function () {
            $('[data-action="plus"]').on('click', function () {
                var productId = $(this).data('product-id');
                var $qtyInput = $('#qty' + productId);
                var currentVal = parseInt($qtyInput.val(), 10);
                var maxVal = parseInt($qtyInput.attr('max'), 10);

                if (!isNaN(maxVal) && currentVal < maxVal) {
                    $qtyInput.val(currentVal + 1);
                } else if (isNaN(maxVal)) {
                    $qtyInput.val(currentVal + 1);
                }
            });

            $('[data-action="minus"]').on('click', function () {
                var productId = $(this).data('product-id');
                var $qtyInput = $('#qty' + productId);
                var currentVal = parseInt($qtyInput.val(), 10);

                if (currentVal > 1) {
                    $qtyInput.val(currentVal - 1);
                }
            });

            $('[id^="add-to-cart"]').on('click', function () {
                var productId = $(this).attr('id').replace('add-to-cart', '');
                var quantity = String(parseInt($('#qty' + productId).val()));
                var variableId = $('#variable_id').val();
                if (variableId == ''){
                    return false;
                }
                $.ajax({
                    url: "{{ route('cart.add') }}",
                    method: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        product_id: productId,
                        quantity: quantity,
                        variable_id: variableId
                    },
                    success: function (response) {
                        if (response.success) {
                            updateCartCount();
                            toastr.success(response.message);
                        } else {
                            toastr.error(response.message);
                        }
                    }
                });
            });

            $('#attribute-form select').on('change', function () {
                var selectedAttributes = {};
                $('#attribute-form select').each(function () {
                    if ($(this).val()) {
                        selectedAttributes[$(this).attr('id')] = $(this).val();
                    }
                });

                $.ajax({
                    url: "{{ route('product.variable_details') }}",
                    method: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        product_id: "{{ $product->id }}",
                        selected_attributes: selectedAttributes
                    },
                    success: function (response) {
                        $('.qty-reset').val(1)
                        if (response.success) {
                            if (Array.isArray(response.data) && response.data.length > 0) {
                                $('#cart-div').find('button').prop('disabled', false);

                                $('#product-not-available').hide();
                                $('#product_variable_details').show();
                                var productDetails = response.data[0];
                                $('#variable_id').val(productDetails.uid);
                                $('#original-price').text(parseFloat(productDetails.original_price).toFixed(2));
                                $('#listed-price').text(parseFloat(productDetails.listed_price).toFixed(2));
                                $('#quantity-available').text('Quantity Available: ' + productDetails.quantity_available);
                                $('#box-size').text(productDetails.box_size);
                                $('#weight').text(productDetails.weight + ' kg');
                                $('#in-stock').text(productDetails.in_stock === 'yes' ? 'Yes' : 'No');

                                if (productDetails.limited === 'yes') {
                                    $('#quantity-available').show();
                                } else {
                                    $('#quantity-available').hide();
                                }
                                var specificationList = $('#specification-list');
                                if (productDetails.specification && productDetails.specification.length > 0) {
                                    var specifications = JSON.parse(productDetails.specification);

                                    if (specifications.length > 0) {
                                        var specHtml = '';
                                        specifications.forEach(function(specification) {
                                            specHtml += '<li>' + specification + '</li>';
                                        });
                                        specificationList.html(specHtml);
                                        $('#specification-header').show();
                                    } else {
                                        specificationList.empty();
                                        $('#specification-header').hide();
                                    }
                                } else {
                                    specificationList.empty();
                                    $('#specification-header').hide();
                                }
                                if (productDetails.feature_image) {
                                    $('#main-image').attr('src', '/storage/products/' + productDetails.feature_image);
                                }

                                var imageContainer = $('.additional-images');
                                imageContainer.empty();
                                if (productDetails.images.length > 0) {
                                    $('#variable_images_div').show();
                                    productDetails.images.forEach(function(image) {
                                        imageContainer.append(
                                            '<img src="' + '/storage/products/' + image + '" class="img-fluid mb-3" alt="Product Image">'
                                        );
                                    });
                                }else{
                                    $('#variable_images_div').hide();
                                }
                            } else {
                                $('#product_variable_details').hide();
                                $('#cart-div').find('button').prop('disabled', true);
                                $('#product-not-available').show().text('Product not available');
                                $('#variable_id').val(null);
                            }
                        } else {
                            $('#cart-div').find('button').prop('disabled', true);
                            toastr.error(response.message);
                        }
                    }
                });
            });
        });
    </script>
@endsection