@extends('frontend.layouts.main')
@section('title', 'Đặt hàng')
@section('idMain', 'page-cart')
@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('frontend/css/style.css') }}?v={{ time() }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('frontend/css/cart.css') }}?v={{ time() }}">
@endsection
@section('content')
    <div class="breadcrumb">
        <div class="ctnr">
            <ul>
                <li>
                    <a href="/">Trang chủ</a>
                </li>
                <li>
                    Giỏ hàng
                </li>
            </ul>
        </div>
    </div>

    <div class="page-cart-new">
        <div class="ctnr">
            <div class="row">
                @if (!empty($carts) && count($carts) > 0)
                    <div class="clm" style="--w-lg:12; --w-md:12; --w-xs:12">
                        <div class="cart-full">
                            <div class="cart-header">
                                <div class="header-row">
                                    <div>Sản Phẩm</div>
                                    <div>Đơn Giá</div>
                                    <div>Số Lượng</div>
                                    <div>Số Tiền</div>
                                    <div>Thao Tác</div>
                                </div>
                            </div>

                            <!-- Product 1 -->
                            @foreach($carts as $key =>  $cart)
                            <div class="store-section cart-item" data-id="{{ $cart['id'] }}">
                                    <div class="product-item">

                                        {{-- Product Info --}}
                                        <div class="product-info">
                                            <img src="{{ asset($cart['image']) }}" alt="{{ $cart['name'] }}" class="product-image">
                                            <div class="product-details">
                                                <div class="product-name">{{ $cart['name'] }}</div>

                                                @if(!empty($cart['option_name']))
                                                    <div class="option-name">{{ $cart['option_name'] }}</div>
                                                @endif
                                            </div>
                                        </div>

                                        {{-- Price --}}
                                        <div class="price-section">
                                            <div class="price-current" data-price="{{ $cart['price_sale'] }}">
                                                <span class="text-m">Giá:</span>

                                                @if(!empty($cart['price_sale']) && $cart['price_sale'] > 0)
                                                    {{ number_format($cart['price_sale'], 0, ',', '.') }}đ
                                                @else
                                                    {{ number_format($cart['price'], 0, ',', '.') }}đ
                                                @endif
                                            </div>
                                        </div>

                                        {{-- Quantity --}}
                                        <div class="quantity-section">
                                            <span class="text-m">Số lượng:</span>
                                            <div class="quantity-control" data-url="{{ route('carts.update') }}">
                                                <button type="button" class="qty-btn quantity-btn minus"
                                                    data-id="{{ $key }}">−</button>
                                                <input type="text" class="qty-input quantity-input" value="{{ $cart['quantity'] }}">
                                                <button type="button" class="qty-btn quantity-btn plus"
                                                    data-id="{{ $key }}">+</button>
                                            </div>
                                        </div>

                                        {{-- Total Price --}}
                                        <div class="total-section">
                                            <div class="total-price">
                                                <span class="text-m">Tổng giá:</span>
                                                {{ number_format(($cart['price_sale'] ?? $cart['price']) * $cart['quantity'], 0, ',', '.') }}đ
                                            </div>
                                        </div>

                                        {{-- Actions --}}
                                        <div class="actions">
                                            <button data-url="{{ route('carts.remove', $cart['id']) }}"
                                                class="btn-delete cart-item-remove remove-from-cart remove-cart">
                                                Xóa
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                @endforeach


                            <div class="checkout-section">
                                <div class="checkout-row">
                                    <div class="clear-cart">
                                        <button data-url="{{ route('carts.clear') }}" id="clear-all-cart">Xóa giỏ hàng</button>
                                    </div>

                                    <div class="checkout-summary">
                                        <div class="summary-text">
                                            Tổng cộng (<span id="total-qty">{{ $totalQuantity }}</span> sản phẩm) :
                                        </div>
                                        <div class="summary-total">
                                            <span class="summary-amount">{{ number_format($totalPrice, 0, ',', '.') }}đ</span>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clm" style="--w-lg:12; --w-md:12; --w-xs:12">
                        <form action="{{ route('carts.pay') }}" id="form-store-order">
                            <div class="checkout-form">
                                <h2 class="section-title"> Thông tin người mua</h2>
                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="name" class="form-label">Họ tên <span class="required">*</span></label>
                                        <input type="text" name="name" id="name" class="form-control"
                                            value="{{ auth()->user()->name ?? '' }}" placeholder="VD: Nguyen Van A">
                                    </div>

                                    <div class="form-group">
                                        <label for="phone" class="form-label">Số điện thoại <span
                                                class="required">*</span></label>
                                        <input type="tel" id="phone" name="phone" value="{{ auth()->user()->phone ?? '' }}"
                                            class="form-control" placeholder="VD:+84 1245 5312">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="email" class="form-label">Email </label>
                                        <input type="text" name="email" id="email" class="form-control"
                                            value="{{ auth()->user()->email ?? '' }}" placeholder="VD: nguyenvana@gmail.com">
                                    </div>
                                    <div class="form-group">
                                        <label for="address" class="form-label">Địa chỉ chi tiết <span
                                                class="required">*</span></label>
                                        <input type="text" id="address" name="address_detail"
                                            value="{{ auth()->user()->address ?? '' }}" class="form-control"
                                            placeholder="VD:Số nhà, tên đường, phường/xã...">
                                    </div>
                                </div>


                                <div class="form-group">
                                    <label for="note" class="form-label">Ghi chú</label>
                                    <textarea id="note" class="form-control form-textarea" name="note" value=""
                                        placeholder="Nội dung..."></textarea>
                                </div>

                                @if (isset($paymentMethod) && $paymentMethod->childs->isNotEmpty())
                                    <div class="radio-group">
                                        <h3 class="radio-group__title">{{ $paymentMethod->name }}</h3>

                                        @foreach ($paymentMethod->childs as $method)
                                            <label class="radio-option">
                                                <input type="radio"
                                                    class="radio-option__input"
                                                    name="httt"
                                                    value="{{ $method->id }}"
                                                    {{ $loop->first ? 'checked' : '' }}>
                                                    
                                                <span class="radio-option__label">
                                                    <span class="radio-option__checkmark"></span>
                                                    {{ $method->name }}
                                                </span>

                                                @if($method->description)
                                                    <div class="radio-option__description">
                                                        {!! $method->description !!}
                                                    </div>
                                                @endif
                                            </label>
                                        @endforeach
                                    </div>
                                @endif

                                <button type="submit" class="checkout-button">
                                    Đặt hàng ngay
                                </button>
                            </div>
                        </form>
                    </div>
                @else
                    <div class="clm" style="--w-xs:12">
                      <div class="text-center">
                        <p>
                        	Giỏ hàng không có sản phẩm nào!
                        </p>
                        <a href="/danh-muc-san-pham" title="Tiếp tục mua sắm" class="back-to-buy">Tiếp tục mua sắm</a>
                      </div>
                    </div>
                @endif
            </div>
        </div>


    </div>
@endsection

@section('js')

@endsection