@extends('theme::layouts.app-sro', ['alias' => 'Account'])
@section('theme::title', __('seo.web-mall'))
@section('theme::content')
    <div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12">
        <div class="container">
            <div class="modern-card">
                <div class="modern-card-body">
                    <div class="row web-mall">
                        @forelse($webmall as $item)
                            <div class="col-md-4 mb-4">
                                <div class="mall-item-card">
                                    {{-- <div class="rarity-badge">
                                    Add your rarity condition here
                                    @if ($item->rare) ★ RARE @endif
                                </div> --}}
                                    <div class="item-preview">
                                        {!! $item->tooltip !!}
                                    </div>
                                    <div class="item-details">
                                        <div class="detail-row">
                                            <span class="detail-label">{{ __('webmall/webmall.itemname') }}</span>
                                            <span class="detail-value">{{ $item->item_name }}</span>
                                        </div>
                                        <div class="detail-row">
                                            <span class="detail-label">{{ __('webmall/webmall.gender') }}</span>
                                            <span
                                                class="detail-value">{{ $item->gender == 0 ? 'Female' : ($item->gender == 1 ? 'Male' : 'Not Specified') }}</span>
                                        </div>
                                        <div class="detail-row highlight">
                                            <span class="detail-label">{{ __('webmall/webmall.silkprice') }}</span>
                                            <span class="detail-value">
                                                {{ $item->silk_price }}
                                                <img src="{{ asset('image/latino/credits.gif') }}" class="silk-icon"
                                                    alt="Silk">
                                            </span>
                                        </div>
                                        <div class="detail-row">
                                            <span class="detail-label">{{ __('webmall/webmall.itemquantity') }}</span>
                                            <span class="detail-value">{{ $item->item_quantity }}</span>
                                        </div>
                                        <div class="detail-row">
                                            <span class="detail-label">{{ __('webmall/webmall.itemplus') }}</span>
                                            <span class="detail-value">{{ $item->item_plus }}</span>
                                        </div>
                                    </div>
                                    <div class="item-action">
                                        <button class="purchase-btn" onclick="purchaseItem({{ $item->id }})">
                                            <img src="{{ asset('image/latino/purchase_btn.gif') }}" alt="Purchase">
                                        </button>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="col-md-12 empty-state">
                                {{ __('webmall/webmall.empty') }}
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('theme::css')
    <style>
        .modern-card {
            background: linear-gradient(145deg, #0a0b12 0%, #1a1c24 100%);
            border-radius: 12px;
            border: 1px solid #2d2f3a;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        .modern-card-header {
            background: linear-gradient(145deg, #DAA520 0%, #b8860b 100%);
            padding: 1.2rem;
            border-radius: 12px 12px 0 0;
        }

        .modern-card-header h2 {
            color: #fff;
            font-weight: 700;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .mall-item-card {
            background: rgba(16, 17, 26, 0.9);
            border: 1px solid #2d2f3a;
            border-radius: 8px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
        }

        .mall-item-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(218, 165, 32, 0.2);
            border-color: #4169E1;
        }

        .item-preview {
            background: rgba(0, 0, 0, 0.4);
            padding: 1rem;
            text-align: center;
            border-bottom: 2px solid #DAA520;
        }

        .item-details {
            padding: 1rem;
        }

        .detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid rgba(65, 105, 225, 0.1);
        }

        .detail-row:last-child {
            border-bottom: none;
        }

        .detail-label {
            color: #DAA520;
            font-size: 0.8rem;
            font-weight: 600;
        }

        .detail-value {
            color: #e0e0e0;
            font-size: 0.85rem;
            text-align: right;
            max-width: 60%;
        }

        .highlight .detail-value {
            color: #4169E1;
            font-weight: 700;
        }

        .silk-icon {
            width: 18px;
            height: 18px;
            margin-left: 5px;
        }

        .item-action {
            padding: 1rem;
            background: rgba(218, 165, 32, 0.05);
            text-align: center;
            border-top: 1px solid rgba(65, 105, 225, 0.1);
        }



        .purchase-btn img {
            width: 86px;
            height: 26px;
        }

        .purchase-btn:hover img {
            filter: drop-shadow(0 2px 4px rgba(65, 105, 225, 0.4));
        }

        .empty-state {
            color: #DAA520;
            text-align: center;
            padding: 2rem;
            font-size: 1.1rem;
        }

        @keyframes cardGlow {
            0% {
                box-shadow: 0 0 10px rgba(218, 165, 32, 0.3);
            }

            50% {
                box-shadow: 0 0 20px rgba(218, 165, 32, 0.6);
            }

            100% {
                box-shadow: 0 0 10px rgba(218, 165, 32, 0.3);
            }
        }

        .modern-card {
            position: relative;
            overflow: hidden;
        }

        .modern-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg,
                    transparent 20%,
                    rgba(65, 105, 225, 0.1) 45%,
                    rgba(218, 165, 32, 0.1) 55%,
                    transparent 80%);
            animation: ambientGlow 6s infinite linear;
            z-index: 0;
        }

        @keyframes ambientGlow {
            0% {
                transform: rotate(0deg) translate(-25%, -25%);
            }

            100% {
                transform: rotate(360deg) translate(-25%, -25%);
            }
        }

        .mall-item-card {
            position: relative;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .mall-item-card:hover {
            animation: cardGlow 2s infinite;
        }

        .item-preview {
            position: relative;
            transition: transform 0.3s ease;
        }

        .item-preview:hover {
            transform: scale(1.05);
        }

        .item-preview::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg,
                    transparent 30%,
                    rgba(218, 165, 32, 0.1) 50%,
                    transparent 70%);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .item-preview:hover::after {
            opacity: 0.6;
        }


        .purchase-btn::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg,
                    transparent 20%,
                    rgba(255, 255, 255, 0.3) 50%,
                    transparent 80%);
            animation: buttonShine 3s infinite;
            opacity: 0.4;
        }

        @keyframes buttonShine {
            0% {
                transform: translateX(-100%) rotate(45deg);
            }

            100% {
                transform: translateX(200%) rotate(45deg);
            }
        }

        .detail-row {
            transition: all 0.2s ease;
        }

        .detail-row:hover {
            background: rgba(65, 105, 225, 0.05);
            transform: translateX(5px);
        }

        /* Rarity Badge */
        .rarity-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: linear-gradient(45deg, #DAA520, #b8860b);
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: bold;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            box-shadow: 0 2px 5px rgba(218, 165, 32, 0.3);
            z-index: 1;
        }





        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(16, 17, 26, 0.8);
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(45deg, #DAA520, #4169E1);
            border-radius: 4px;
        }

        /* Enhanced Purchase Button Effects */
        .purchase-btn {
            position: relative;
            transition: all 0.3s ease;
            overflow: visible;
            background: transparent;
            border: none;
        }



        /* Enhanced button styling */
        .purchase-btn img {
            width: 86px;
            height: 26px;
            transition: all 0.3s ease;
            filter: drop-shadow(0 2px 4px rgba(218, 165, 32, 0.3));
        }

        .purchase-btn:hover img {
            transform: translateZ(10px);
            /* Simulate 3D lift */
            filter:
                brightness(1.1) drop-shadow(0 4px 8px rgba(65, 105, 225, 0.4));
        }

        /* Fallback for broken 3D effects */
        .purchase-btn:active img {
            transform: scale(0.95);
        }

        /* Add glow animation */
        @keyframes btn-glow {
            0% {
                opacity: 0.8;
            }

            50% {
                opacity: 1;
            }

            100% {
                opacity: 0.8;
            }
        }

        .purchase-btn::after {
            content: '';
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            background: radial-gradient(circle,
                    rgba(218, 165, 32, 0.4) 0%,
                    rgba(65, 105, 225, 0.2) 100%);
            z-index: -1;
            animation: btn-glow 2s infinite;
        }

        /* Modern Bootbox Modal Design */
        .bootbox.modal {
            background: rgba(10, 11, 18, 0.98) !important;
            backdrop-filter: blur(10px) !important;
            border: 2px solid #DAA520 !important;
            border-radius: 12px !important;
            box-shadow: 0 0 40px rgba(218, 165, 32, 0.2) !important;
            animation: modalEntrance 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes modalEntrance {
            0% {
                transform: scale(0.9) translateY(20px);
                opacity: 0;
            }

            100% {
                transform: scale(1) translateY(0);
                opacity: 1;
            }
        }

        .modal-content {
            background: linear-gradient(145deg, #0a0b12 0%, #1a1c24 100%) !important;
            border: 1px solid rgba(65, 105, 225, 0.2) !important;
            border-radius: 12px !important;
            overflow: hidden !important;
        }

        .modal-header {
            background: linear-gradient(45deg,
                    rgba(218, 165, 32, 0.1) 0%,
                    rgba(65, 105, 225, 0.05) 100%) !important;
            border-bottom: 2px solid #4169E1 !important;
            padding: 1.5rem !important;
        }

        .modal-title {
            color: #DAA520 !important;
            font-weight: 700 !important;
            text-shadow: 0 2px 4px rgba(218, 165, 32, 0.2);
            font-size: 1.25rem !important;
        }

        .bootbox-close-button {
            color: #DAA520 !important;
            opacity: 0.8 !important;
            text-shadow: none !important;
            transition: all 0.3s ease !important;
        }

        .bootbox-close-button:hover {
            color: #4169E1 !important;
            opacity: 1 !important;
            transform: rotate(90deg) scale(1.2);
        }

        .modal-body {
            padding: 2rem !important;
            text-align: center !important;
        }

        .bootbox-body .text-dark {
            color: #e0e0e0 !important;
            font-size: 1.1rem !important;
            padding: 1rem 0 !important;
            position: relative !important;
        }



        .modal-footer {
            border-top: 1px solid rgba(65, 105, 225, 0.2) !important;
            padding: 1.5rem !important;
            justify-content: center !important;
            gap: 1rem !important;
        }

        .bootbox-cancel,
        .bootbox-accept {
            border: 0 !important;
            border-radius: 6px !important;
            padding: 0.75rem 2rem !important;
            font-weight: 700 !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            position: relative !important;
            overflow: hidden !important;
        }

        .bootbox-cancel {
            background: rgba(65, 105, 225, 0.1) !important;
            color: #4169E1 !important;
            border: 1px solid rgba(65, 105, 225, 0.3) !important;
        }

        .bootbox-cancel:hover {
            background: rgba(65, 105, 225, 0.2) !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(65, 105, 225, 0.2);
        }

        .bootbox-accept {
            background: linear-gradient(145deg,
                    #DAA520 0%,
                    #b8860b 100%) !important;
            color: #fff !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        .bootbox-accept:hover {
            background: linear-gradient(145deg,
                    #4169E1 0%,
                    #1e40af 100%) !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(218, 165, 32, 0.3);
        }

        /* Add ambient light effect */
        .modal-content::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg,
                    transparent 20%,
                    rgba(218, 165, 32, 0.1) 45%,
                    rgba(65, 105, 225, 0.1) 55%,
                    transparent 80%);
            animation: ambientRotate 20s infinite linear;
            pointer-events: none;
            z-index: 0;
        }

        @keyframes ambientRotate {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* Additional Enhancements - New Effects (Preserve existing styles) */

        /* Enhanced scaling and shadow effect for modern cards */
        .modern-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        /* Slight scale added to mall-item cards on hover (in addition to your translateY) */
        .mall-item-card:hover {
            transform: translateY(-5px) scale(1.01);
        }

        /* Enhanced hover effect for detail rows with a bit more translation */
        .detail-row {
            transition: background 0.3s ease, transform 0.3s ease;
        }
        .detail-row:hover {
            transform: translateX(8px);
            background: rgba(65, 105, 225, 0.15); /* a subtle variation for a refined look */
        }

        /* Adding a subtle text shadow to detail labels for extra depth */
        .detail-label {
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }

        /* Pulse effect on the purchase button when pressed */
        .purchase-btn:active {
            animation: pulse 0.3s ease;
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(0.95); }
            100% { transform: scale(1); }
        }

        /* Refined tooltip styling for enhanced readability */
        .ui-tooltip {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            border: 1px solid #4169E1;
            background-color: #1a1c24;
            color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        }
    </style>
@endpush
@push('theme::javascript')
    <script type="text/javascript">
        $(document).ready(function() {
            itemInfo();

            function itemInfo() {
                $(document).tooltip({
                    items: "[data-itemInfo]",
                    position: {
                        my: "left+5 center",
                        at: "right center"
                    },
                    content: function() {
                        let element = jQuery(this);
                        if (jQuery(this).prop("tagName").toUpperCase() === 'IFRAME') {
                            return;
                        }
                        if (element.is("[data-itemInfo]")) {
                            if (element.parent().parent().find('.itemInfo').html() === '') {
                                return;
                            }
                            return element.parent().parent().find('.itemInfo').html();
                        }
                        if (element.is("[title]")) {
                            return element.attr("title");
                        }
                    },
                    close: function(event, ui) {
                        $(".ui-helper-hidden-accessible").remove();
                    }
                });
            }
        });

        /**
         *
         * @param id
         */
        function purchaseItem(id) {
            bootbox.confirm({
                title: "{{ __('bootbox.confirm.title') }}",
                message: "<div class='text-dark'>{{ __('bootbox.confirm.message') }}</div>",
                buttons: {
                    cancel: {
                        label: "<i class='fa fa-times'></i>{{ __('bootbox.confirm.buttons.cancel') }}"
                    },
                    confirm: {
                        label: "<i class='fa fa-check'></i> {{ __('bootbox.confirm.buttons.submit') }}"
                    }
                },
                callback: function(result) {
                    if (result == true) {
                        axios.post("{{ route('sro.webmall.purchase', '') }}/" + id)
                            .then(function(data) {
                                toastr.success("The item has been purchased successfully.");
                            })
                            .catch(function(error) {
                                let errors = [];
                                if (isJson(error.response.data) && JSON.parse(error.response.data)) {
                                    $.each(JSON.parse(error.response.data), function(index, value) {
                                        errors += "-" + value + "<br>";
                                    });
                                } else {
                                    errors = error.response.data;
                                }
                                toastr.error(errors).css("width", "500px");
                            });
                    }
                }
            });
        }
    </script>
@endpush