@extends('layouts.master')
@section('title')
    @lang('translation.market-place')
@endsection

@section('content')

    <!-- Breadcrumb Trail -->
    @component('components.breadcrumb')
        @slot('li_1')
            @lang('translation.back-to-store')
        @endslot
        @slot('title')
            @lang('translation.item')
        @endslot
    @endcomponent

    <!-- Session Messages -->
    @include('partials.session')

    <!-- Checkout Form -->
    <form action="{{ route('addToCart') }}" method="POST">
        @csrf
        <div class="row">
            <div class="col-xl-8">
                <div class="card">
                    <div class="card-body checkout-tab">

                        <!-- Payment Form -->
                        {{-- <form action="{{ url('/market-place/'.encrypt($asset->id).'/confirm/checkout') }}" method="POST">
                            @csrf
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="pills-payment" role="tabpanel" aria-labelledby="pills-payment-tab">
                                    <!-- Payment Text -->
                                    <div>
                                        <h5 class="mb-1">Payment Selection</h5>
                                        <p class="text-muted mb-4">Please select and enter your billing information</p>
                                    </div>

                                    <!-- Payment Options -->
                                    <div class="row g-4">
                                        <!-- Credit/Debit Card -->
                                        <div class="col-lg-4 col-sm-6">
                                            <div data-bs-toggle="collapse" data-bs-target="#paymentmethodCollapse"
                                                aria-expanded="true" aria-controls="paymentmethodCollapse">
                                                <div class="form-check card-radio">
                                                    <input id="paymentMethod02" name="paymentMethod" type="radio" class="form-check-input" checked>
                                                    <label class="form-check-label" for="paymentMethod02">
                                                        <span class="fs-16 text-muted me-2">
                                                            <i class="ri-bank-card-fill align-bottom"></i>
                                                        </span>
                                                        <span class="fs-14 text-wrap">Credit Card</span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Crypto -->
                                        <div class="col-lg-4 col-sm-6">
                                            <div data-bs-toggle="collapse" data-bs-target="#paymentmethodCollapse.show" aria-expanded="false" aria-controls="paymentmethodCollapse">
                                                <div class="form-check card-radio">
                                                    <input id="paymentMethod01" name="paymentMethod" type="radio" class="form-check-input">
                                                    <label class="form-check-label" for="paymentMethod01">
                                                        <span class="fs-16 text-muted me-2">
                                                            <i class="ri-coins-fill align-bottom"></i>
                                                        </span>
                                                        <span class="fs-14 text-wrap">Crypto</span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Card Details -->
                                    <div class="collapse show" id="paymentmethodCollapse">
                                        <div class="card p-4 border shadow-none mb-0 mt-4">
                                            <div class="row gy-3">
                                                <div class="col-md-12">
                                                    <label for="cc-name" class="form-label">Card Holder</label>
                                                    <input type="text" class="form-control" name="cc-name" placeholder="John Doe">
                                                </div>

                                                <div class="col-md-6">
                                                    <label for="cc-number" class="form-label">Card Number</label>
                                                    <input type="text" class="form-control" name="cc-number" placeholder="xxxx xxxx xxxx xxxx">
                                                </div>

                                                <div class="col-md-3">
                                                    <label for="cc-expiration" class="form-label">Expiry</label>
                                                    <input type="text" class="form-control" name="cc-expiration" placeholder="MM/YY">
                                                </div>

                                                <div class="col-md-3">
                                                    <label for="cc-cvv" class="form-label">CVC</label>
                                                    <input type="text" class="form-control" name="cc-cvc" placeholder="xxx">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="text-muted mt-2 fst-italic">
                                            <i data-feather="lock" class="text-muted icon-xs"></i> Your
                                            transaction is secured with SSL encryption
                                        </div>
                                    </div>

                                    <!-- Pay Now Button -->
                                    <div class="d-flex align-items-start gap-3 mt-4">
                                        <a href="{{ url('/market-place/assets') }}" class="btn btn-light btn-label">
                                            <i class="ri-arrow-left-line label-icon align-middle fs-16 me-2"></i>
                                            Back to Marketplace
                                        </a>
                                        <button type="submit" class="btn btn-primary btn-label right ms-auto">
                                            <i class="ri-shopping-basket-line label-icon align-middle fs-16 ms-2"></i>
                                            Pay Now
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form> --}}



                        <!-- Add to Cart Form -->
                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="pills-payment" role="tabpanel" aria-labelledby="pills-payment-tab">
                                <!-- Cart Text -->
                                <div>
                                    <h5 class="mb-1">Add To Cart</h5>
                                    <p class="text-muted mb-4"></p>
                                </div>

                                <!-- Hidden Product ID -->
                                <input type="hidden" name="productId" value="{{ $asset->id }}">

                                <!-- Quantity Selection -->
                                <div class="collapse show" id="paymentmethodCollapse">
                                    <div class="card p-4 border shadow-none mb-0 mt-4">
                                        <div class="row align-items-end gy-2">
                                            <div class="col-md-10">
                                                <label for="quantity" class="form-label">Quantity</label>
                                                <input type="number" id="quantityInput" class="form-control" name="quantity" placeholder="Quantity" required>
                                            </div>
                                            <div class="col-md-2">
                                                <button type="button" class="btn btn-primary w-100" id="maxBtn">Max</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Add to Cart Button -->
                                <div class="d-flex align-items-start gap-3 mt-4">
                                    <a href="{{ url('/market-place/assets') }}" class="btn btn-light btn-label">
                                        <i class="ri-arrow-left-line label-icon align-middle fs-16 me-2"></i>
                                        Back to GC7 Store
                                    </a>
                                    <button type="submit" class="btn btn-primary btn-label right ms-auto">
                                        <i class="ri-shopping-basket-line label-icon align-middle fs-16 ms-2"></i>
                                        Add To Cart
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Order Summary -->
            <div class="col-xl-4">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex">
                            <div class="flex-grow-1">
                                <h5 class="card-title mb-0">Item Summary</h5>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive table-card">
                            <table class="table table-borderless align-middle mb-0">
                                <thead class="table-light text-muted">
                                <tr>
                                    <th style="width: 90px;" scope="col">Product</th>
                                    <th scope="col">Information</th>
                                    <th scope="col" class="text-end">Price per item</th>
                                </tr>
                                </thead>
                                <tbody>
                                <!-- Current Asset Details -->
                                <tr>
                                    <td>
                                        <div class="avatar-md rounded p-1">
                                            <img src="{{ asset($asset->image) }}" alt="{{ $asset->name }}" class="img-fluid d-block">
                                        </div>
                                    </td>
                                    <td>
                                        <h5 class="fs-14">
                                            <a href="#" class="text-dark">{{ $asset->name }}</a>
                                        </h5>
                                        {{-- <p class="text-muted mb-0">Available Quantity: {{ $asset->quantity }}</p> --}}

                                        @if($asset->free_item_type !== null && $asset->free_item_type == \App\Models\DigitalAsset::FreeItem && $asset->freeItems->isNotEmpty())
                                            <p class="text-muted mb-1">
                                                <strong>Free items on purchase of {{ $asset->item_quantity_for_free_item }}</strong>
                                            </p>
                                            <ul style="list-style-type: none; padding: 0; margin: 0;">
                                                @foreach($asset->freeItems as $index => $freeItem)
                                                    <li  class="mb-1 align-items-center">
                                                        <span style="{{ $freeItem->free_item_highlight ? 'background-color: #90ee90;' : '' }}">
                                                            {{ $freeItem->free_item_quantity }} x {{ $freeItem->freeItem->name }}
                                                        </span>
                                                    </li>
                                                @endforeach

                                            </ul>
                                        @elseif($asset->redeemable_items !== 0 && $asset->free_item_type !== null && $asset->free_item_type == \App\Models\DigitalAsset::FreeItemUserSelect && $asset->freeItems->isNotEmpty())
                                            <p class="text-muted mb-1">
                                                <strong>Select only {{ $asset->redeemable_items }} free item{{ $asset->redeemable_items > 1 ? 's' : '' }}:</strong>
                                            </p>
                                            <ul style="list-style-type: none; padding: 0; margin: 0;">
                                                @foreach($asset->freeItems as $index => $freeItem)
                                                    <li class="mb-1">
                                                        <label class="mb-0 d-flex align-items-center">
                                                            <input type="checkbox"
                                                                   class="free-item-checkbox me-1"
                                                                   name="free_items[]"
                                                                   value="{{ $freeItem->id }}">
                                                            <span style="{{ $freeItem->free_item_highlight ? 'background-color: #90ee90;' : '' }}">
                                                            {{ $freeItem->free_item_quantity }} x {{ $freeItem->freeItem->name }}
                                                        </span>
                                                        </label>
                                                    </li>
                                                @endforeach

                                            </ul>
                                            <div id="freeItemWarning" class="text-danger mt-2" style="display: none;">
                                                Please select only {{ $asset->redeemable_items ?? 0 }} item{{ $asset->redeemable_items > 1 ? 's' : '' }}.
                                            </div>

                                        @elseif($asset->redeemable_items !== 0 && $asset->free_item_type !== null && $asset->free_item_type == \App\Models\DigitalAsset::FreeItemBundle && $asset->bundles->isNotEmpty())
                                            <p class="text-muted mb-1">
                                                <strong>Select only {{$asset->redeemable_items ?? 0}} bundle of free items on purchase of {{ $asset->item_quantity_for_free_item }}:</strong>
                                            </p>
                                            <ul style="list-style-type: none; padding: 0; margin: 0;">
                                                @foreach($asset->bundles as $index => $bundle)
                                                    <li>
                                                        <label class="mb-0">
                                                            <input type="checkbox"
                                                                   class="bundle-checkbox"
                                                                   name="bundle[]"
                                                                   value="{{ $bundle->id }}">
                                                            {{ $bundle->name }}
                                                            <ul class="list-unstyled ms-2">
                                                                @if(isset($bundle->items) && !empty($bundle->items))
                                                                    @foreach($bundle->items as $i)
                                                                        <li  class="mb-1 align-items-center">
                                                                            <i class="ri-gift-line align-bottom me-1"></i>
                                                                            <span style="{{ $i->highlight ? 'background-color: #90ee90;' : '' }}">
                                                            {{$i->quantity}} x {{$i->asset->name}}
                                                        </span>
                                                                        </li>
                                                                    @endforeach
                                                                @endif
                                                            </ul>
                                                        </label>
                                                    </li>
                                                @endforeach

                                            </ul>
                                            <div id="bundleWarning" class="text-danger mt-2" style="display: none;">
                                                Please select only {{ $asset->redeemable_items ?? 0 }} bundle{{ $asset->redeemable_items > 1 ? 's' : '' }}.
                                            </div>
                                        @endif
                                        @if($asset->onetime_timebased_bonuses->count()>0)
                                            <div class="special-bonus">
                                                @foreach($asset->onetime_timebased_bonuses as $bonus)
                                                    @if($bonus->bonus_type === \App\Models\DigitalItemBonusQuantity::ONETIME)
                                                        <h5>Bonus on first purchase:</h5>
                                                        <ul>
                                                            @foreach($bonus->free_items as $freeItem)
                                                                <li>{{$freeItem->free_item_quantity}} x {{$freeItem->digital_asset->name}}</li>
                                                            @endforeach
                                                        </ul>
                                                    @endif
                                                    @if($bonus->bonus_type === \App\Models\DigitalItemBonusQuantity::TIMEBASED)
                                                        <h5>Bonus if x{{$bonus->quantity}} purchased at time(s):</h5>
                                                        <div class="times-div">
                                                            @foreach($bonus->times as $time)
{{--                                                                <span class="badge badge-pill bg-primary">--}}
{{--                                                            <span class="start-time" data-utc-time="{{ $time->start_time }}">{{$time->start_time}}</span> - <span--}}
{{--                                                                        class="end-time" data-utc-time="{{ $time->end_time }}">{{$time->end_time}}</span>--}}
{{--                                                        </span>--}}
                                                                <span class="badge badge-pill bg-primary">
                                                <span>{{ \Carbon\Carbon::createFromFormat('H:i:s', $time->start_time)->format('h:i A') }}</span> -
                                                <span>{{ \Carbon\Carbon::createFromFormat('H:i:s', $time->end_time)->format('h:i A') }}</span>
                                            </span>
                                                            @endforeach
                                                        </div>
                                                        <ul>
                                                            @foreach($bonus->free_items as $freeItem)
                                                                <li>{{$freeItem->free_item_quantity}} x {{$freeItem->digital_asset->name}}</li>
                                                            @endforeach
                                                        </ul>
                                                    @endif
                                                @endforeach
                                            </div>
                                        @endif
                                    </td>
                                    <td class="text-end">${{ $asset->price }}</td>
                                </tr>

                                <!-- Total USD -->
                                <tr class="table-active">
                                    <th colspan="2">Total (USD) :</th>
                                    <td class="text-end">
                                    <span class="fw-semibold">
                                        ${{ $asset->price }}
                                    </span>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- end card body -->
                </div>
                <!-- end card -->
            </div>
        </div>
    </form>
@endsection

@section('script')
    <!-- Checkout Page -->
    <script src="{{ URL::asset('assets/js/pages/ecommerce-product-checkout.init.js') }}"></script>
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <!-- App JS -->
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script>
        $(document).ready(function () {
            // Function to convert UTC time to local time and format it as AM/PM
            function convertUTCToLocalTime(utcTime) {
                const completeUTC = `1970-01-01T${utcTime}Z`;
                const date = new Date(completeUTC);
                console.log(date);
                const options = {
                    hour: 'numeric',
                    minute: 'numeric',
                    // second: 'numeric',
                    hour12: true
                };
                let localTime = date.toLocaleTimeString(undefined, options);
                localTime = localTime.replace('am', 'AM').replace('pm', 'PM');
                return localTime;
            }

            $('.start-time').each(function () {
                const utcTime = $(this).data('utc-time');
                const localTime = convertUTCToLocalTime(utcTime);
                $(this).text(localTime);
            });
            $('.end-time').each(function () {
                const utcTime = $(this).data('utc-time');
                const localTime = convertUTCToLocalTime(utcTime);
                $(this).text(localTime);
            });

            const balance = {{ auth()->user()->balance }};
            const price = {{ $asset->price }};
            const maxAllowed = {{ $asset->redeemable_items }};

            $('#maxBtn').on('click', function () {
                if (price > 0) {
                    const maxQuantity = Math.floor(balance / price);
                    $('#quantityInput').val(maxQuantity);
                } else {
                    alert("Invalid price");
                }
            });

            $('.free-item-checkbox').on('change', function () {
                const checkedCount = $('.free-item-checkbox:checked').length;

                if (checkedCount > maxAllowed) {
                    $(this).prop('checked', false);
                    return;
                }

                if (checkedCount < maxAllowed) {
                    $('#freeItemWarning').show();
                } else {
                    $('#freeItemWarning').hide();
                }
            });

            $('.bundle-checkbox').on('change', function () {
                const checkedCount = $('.bundle-checkbox:checked').length;

                if (checkedCount > maxAllowed) {
                    $(this).prop('checked', false);
                    return;
                }

                if (checkedCount < maxAllowed) {
                    $('#bundleWarning').show();
                } else {
                    $('#bundleWarning').hide();
                }
            });

            $('form').on('submit', function (e) {
                const maxAllowed = {{ $asset->redeemable_items }};
                const $freeCheckboxes = $('.free-item-checkbox');
                const $bundleCheckboxes = $('.bundle-checkbox');

                const selectedFree = $freeCheckboxes.filter(':checked').length;
                const selectedBundles = $bundleCheckboxes.filter(':checked').length;

                // Check Free Items (if exists)
                if ($freeCheckboxes.length > 0 && selectedFree !== maxAllowed) {
                    e.preventDefault();
                    $('#freeItemWarning').show();
                    $('html, body').animate({
                        scrollTop: $('#freeItemWarning').offset().top - 100
                    }, 300);
                    return;
                }

                if ($bundleCheckboxes.length > 0 && selectedBundles !== maxAllowed) {
                    e.preventDefault();
                    $('#bundleWarning').show();
                    $('html, body').animate({
                        scrollTop: $('#bundleWarning').offset().top - 100
                    }, 300);
                    return;
                }
            });
        });
    </script>
@endsection