@extends('front.layouts.master')

@section('content')
<main class="mb-4 pb-4">
    <div class="mb-4 pb-4"></div>
    @if(count($cart['products']) > 0)
        <section class="shop-checkout container">
            <h2 class="page-title">{{ __('front.cart') }}</h2>
            <div class="checkout-steps">
                <a href="#" class="checkout-steps__item active">
                    <span class="checkout-steps__item-number">01</span>
                    <span class="checkout-steps__item-title">
                        <span>{{ __('front.offer_cart') }}</span>
                        <em>{{ __('front.manage_items_list') }}</em>
                    </span>
                </a>
                <a href="#" class="checkout-steps__item text-black-50">
                    <span class="checkout-steps__item-number">02</span>
                    <span class="checkout-steps__item-title">
                        <span>{{ __('front.confirmation') }}</span>
                        <em>{{ __('front.review_and_submit_offer') }}</em>
                    </span>
                </a>
            </div>
            <div class="shopping-cart">
                <div class="cart-table__wrapper">
                    <table class="cart-table">
                        <thead>
                            <tr>
                                <th>{{ __('front.product') }}</th>
                                <th></th>
                                <th>{{ __('front.quantity') }}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($cart['products'] as $product)
                                <tr>
                                    <td>
                                        <div class="shopping-cart__product-item">
                                            <a href="">
                                                <img loading="lazy" src="{{ $product->getCover() }}" width="120" height="120" alt="{{ $product->getTranslatedAttribute('title') }}" />
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="shopping-cart__product-item__detail">
                                            <h4><a href="./product1_simple.html">{{ $product->getTranslatedAttribute('title') }}</a></h4>
                                            <ul class="shopping-cart__product-item__options">
                                                <li>{{ __('front.category') }}: {{ $product->category->getTranslatedAttribute('title') }}</li>
                                                <li>{{ __('front.code') }}: {{ $product->code }}</li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="qty-control position-relative">
                                            <input type="number" name="quantity" value="{{ $product->qty }}" min="1" class="qty-control__number text-center" />
                                            <div class="qty-control__reduce" data-source="{{ route('front.cart.add') }}" data-id="{{ $product->id }}">-</div>
                                            <div class="qty-control__increase" data-source="{{ route('front.cart.add') }}" data-id="{{ $product->id }}">+</div>
                                        </div>
                                    </td>
                                    <td>
                                        <a href="#" class="remove-cart" data-url="{{ route('front.cart.remove', $product->id) }}">
                                            <svg width="10" height="10" viewBox="0 0 10 10" fill="#767676" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M0.259435 8.85506L9.11449 0L10 0.885506L1.14494 9.74056L0.259435 8.85506Z" />
                                                <path d="M0.885506 0.0889838L9.74057 8.94404L8.85506 9.82955L0 0.97449L0.885506 0.0889838Z" />
                                            </svg>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="shopping-cart__totals-wrapper">
                    <div class="sticky-content">
                        <form action="{{ url()->current() }}" method="post">
                            @csrf
                            <div class="shopping-cart__totals">
                                <h3 class="text-uppercase">{{ __('front.preferences') }}</h3>
                                <table class="cart-totals">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <div class="form-check">
                                                    <label class="form-check-label" for="free_shipping">{{ __('front.notes') }}</label>
                                                    <textarea class="form-control form-control_gray" placeholder="{{ __('front.notes') }}" cols="30" rows="5" name="user_notes"></textarea>
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label" for="currency">{{ __('front.offer_currency') }}</label>
                                                    <select class="form-select form-select-lg mb-3" aria-label="{{ __('front.select_box') }}" name="currency_id">
                                                        <option value="" selected>{{ __('front.select_boxes') }}</option>
                                                        @foreach ($currencies as $currency)
                                                            <option value="{{ $currency->id }}">{{ $currency->code }}</option>
                                                        @endforeach
                                                    </select>
                                                    @if ($errors->has('currency_id'))
                                                        <small class="text-red">{{ $errors->first('currency_id') }}</small>
                                                    @endif
                                                </div>
                                                <div class="form-check">
                                                    <label class="form-check-label mb-1" for="communication_preference">{{ __('front.communication_preference') }}</label>
                                                    <div class="form-check">
                                                        <input class="form-check-input form-check-input_fill" type="radio" name="contact" id="via_email" value="email" checked>
                                                        <label class="form-check-label" for="via_email">
                                                            {{ __('front.via_email') }}
                                                        </label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input class="form-check-input form-check-input_fill" type="radio" name="contact" id="via_phone" value="phone">
                                                        <label class="form-check-label" for="via_phone">
                                                            {{ __('front.via_phone') }}
                                                        </label>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="mobile_fixed-btn_wrapper">
                                <div class="button-wrapper container">
                                    <button type="submit" class="btn btn-red btn-checkout text-uppercase" data-text={{  __('front.request_offer') }}>
                                        {{ __('front.request_offer') }}
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
        @else
        <div class="container">
            <div class="alert alert-warning">
                {{ __('front.your_cart_empty') }}
            </div>
        </div>
    @endif
</main>
@endsection

@push('javascript')
<script>
    $(document).ready(function () {
        $('.cart-table').on('click', '.qty-control__increase, .qty-control__reduce', function (e) {
            e.preventDefault(); // Varsayılan davranışı engelle

            const $button = $(this); // Tıklanan buton
            const $qtyInput = $button.closest('.qty-control').find('input[name="quantity"]'); // Miktar input alanı
            const url = $button.data('source'); // URL
            const productId = $button.data('id'); // Ürün ID'si
            let newQuantity = parseInt($qtyInput.val()); // Mevcut miktar

            if (newQuantity < 1) {
                newQuantity = 1;
            }

            // AJAX ile sepeti güncelle
            updateCart(url, productId, newQuantity, $qtyInput);
        });

        // Input alanına manuel giriş yapılmasını dinle
        $('.cart-table').on('change', 'input[name="quantity"]', function (e) {
            const $qtyInput = $(this); // Miktar input alanı
            const url = $qtyInput.closest('.qty-control').find('.qty-control__increase').data('source'); // URL
            const productId = $qtyInput.closest('.qty-control').find('.qty-control__increase').data('id'); // Ürün ID'si
            let newQuantity = parseInt($qtyInput.val()); // Yeni miktar

            if (isNaN(newQuantity) || newQuantity < 1) {
                newQuantity = 1; // Minimum değer kontrolü
            }

            // Input değeri sıfırlandıysa geri güncelle
            $qtyInput.val(newQuantity);

            // AJAX ile sepeti güncelle
            updateCart(url, productId, newQuantity, $qtyInput);
        });

        function updateCart(url, productId, quantity, $qtyInput) {
            showPageLoader(); // Loader'ı göster
            $.ajax({
                url: url,
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                contentType: 'application/json',
                data: JSON.stringify({
                    id: productId, // Ürün ID'si
                    qty: quantity, // Yeni miktar
                }),
                success: function (data) {
                    if (data.status) {
                        $qtyInput.val(quantity); // Miktarı güncelle
                        toastr.success(data.message); // Başarı mesajı
                        console.log(data.message);
                    } else {
                        toastr.error(data.message); // Hata mesajı
                        if (data.login_required) {
                            window.location.href = data.login_required;
                        }
                    }
                    hidePageLoader(); // Loader'ı gizle
                },
                error: function (xhr, status, error) {
                    console.error('Error:', error);
                    hidePageLoader(); // Loader'ı gizle
                },
            });
        }
    });
</script>
@endpush