<x-header />
<div class="content-wrapper">
    <div class="content">
        <h2>Личный кабинет</h2>

        <!-- Управление корзиной -->
        <section id="cart-management">
            <h3>Управление корзиной</h3>
            <div class="cart-items">
                <!-- Пример элемента корзины -->

                @foreach($carts as $cart)
                @if($cart->count != 0)
                <div class="cart-item">
                    <img src="public/images/шау1.jpg">
                    <div class="item-details">
                        <h4>{{ $cart->product->name }}</h4>
                        <p>Цена: {{ $cart->price }} руб.</p>
                        <p>Количество: {{$cart->count}}</p>
                        @if($cart->product->count != 0)
                        <a href="{{ Route('addcart', $cart->id) }}"><button class="remove-btn">+</button></a>
                        @endif
                        <a href="{{ Route('removecart', $cart->id) }}"><button class="remove-btn">-</button></a>
                    </div>
                </div>
                @endif
                @endforeach
                <!-- Добавить больше элементов динамически -->
            </div>
            <div class="cart-total">
                <h3>Итого: {{ $total }} руб.</h3>
                <section id="place-order">
                    <h3>Оформить заказ</h3>
                    <form class="order-form">
                        <div class="input-group">
                            <label for="address">Адрес доставки:</label>
                            <input type="text" id="address" name="address" required>
                        </div>
                        <div class="input-group">
                            <label for="phone">Телефон:</label>
                            <input type="tel" id="phone" name="phone" required>
                        </div>
                        <div class="input-group">
                            <label for="payment">Способ оплаты:</label>
                            <select id="payment" name="payment">
                                <option value="cash">Наличными</option>
                                <option value="card">Картой</option>
                            </select>
                        </div>
                        <button type="submit" class="place-order-btn">Подтвердить заказ</button>
                    </form>
                </section>
            </div>
        </section>

        <!-- Просмотр заказов -->
        <section id="order-history">
            <h3>История заказов</h3>
            <div class="order-list">
                <!-- Пример заказа -->
                <div class="order-item">
                    <p>Заказ №12345</p>
                    <p>Дата: 01.12.2023</p>
                    <p>Статус: Доставлен</p>
                    <p>Сумма: 300 руб.</p>
                    <button class="view-details-btn">Подробнее</button>
                </div>
                <!-- Добавить больше заказов динамически -->
            </div>
        </section>
    </div>
</div>

<x-footer />
<x-scripts />

<style>
    /* Дополнительные стили для личного кабинета */
    .cart-item,
    .order-item {
        display: flex;
        align-items: center;
        background-color: #2d2d5f;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 15px;
    }

    .cart-item img,
    .order-item img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        margin-right: 15px;
    }

    .item-details h4,
    .order-item p {
        margin: 5px 0;
        color: #fff;
    }

    .remove-btn,
    .checkout-btn,
    .view-details-btn,
    .place-order-btn {
        background-color: #7f00ff;
        color: white;
        padding: 8px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
        margin-top: 10px;
    }

    .remove-btn:hover,
    .checkout-btn:hover,
    .view-details-btn:hover,
    .place-order-btn:hover {
        background-color: #9a00ff;
    }

    .cart-total,
    .order-form {
        background-color: #2d2d5f;
        padding: 20px;
        border-radius: 10px;
        margin-top: 20px;
    }

    .input-group {
        margin-bottom: 15px;
    }

    .input-group label {
        display: block;
        color: #b3b3d9;
        margin-bottom: 5px;
    }

    .input-group input,
    .input-group select {
        width: 100%;
        padding: 10px;
        border: none;
        border-radius: 5px;
        background-color: #3a2d5f;
        color: #e0e0e0;
    }
</style>