@extends('admin.layout')

@section('content')
<style>
    .retail-card.shadow-sm.p-4 {
        max-width: 500px;
        height: auto;
        background: #fff;
        border-radius: 10px;
    }

    .retail-history {
        width: 100%;
        margin-top: 20px;
    }

    .btn {
        font-family: Poppins, sans-serif;
        font-size: 14px;
        font-weight: 500;
    }

    .balance-section {
        margin-bottom: 20px;
    }

    .package-dropdown {
        margin-bottom: 20px;
    }

    .custom-checkbox-container {
        margin-top: 15px;
        font-family: 'IBM Plex Sans', sans-serif;
        display: flex;
        align-items: flex-start;
    }

    /* Custom checkbox appearance */
    .custom-checkbox {
        width: 18px;
        height: 18px;
        border-radius: 4px;
        transition: background-color 0.3s, border-color 0.3s;
    }

    .custom-checkbox-label {
        margin-left: 10px;
        font-size: 14px;
        color: #333;
        line-height: 1.5;
    }

    /* Optional: Add a media query for responsiveness */
    @media (max-width: 600px) {
        .custom-checkbox-label {
            font-size: 12px;
        }
    }

    .custom-dropdown {
            position: relative;
            display: inline-block;
            width: 100%;
        }

        .dropdown-button {
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            font-size: 14px;
        }

        .dropdown-button span {
            display: inline-block;
        }

        /* Dropdown options container */
        .dropdown-options {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            border: 1px solid #ccc;
            background-color: white;
            z-index: 10;
            display: none;
            flex-direction: column;
            max-height: 200px;
            overflow-y: auto;
        }

        /* Individual option styles */
        .dropdown-option {
            padding: 10px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
        }

        .dropdown-option:hover {
            background-color: #1e8f72;
        }

        /* Strikethrough effect for original price */
        .strike {
            text-decoration: line-through;
            color: red;
            margin-right: 5px;
        }

        /* Add some basic styling for the label */
        .form-label {
            font-weight: bold;
        }
</style>

<div class="row mb-3">
    {{-- <div class="col d-flex justify-content-between">
        <h4 class="page-top-heading">Retail Page</h4>
        <a href="{{ route('user.retail_history') }}" class="btn btn-primary py-2 px-4">History</a>
    </div> --}}
</div>

<div class="row d-flex justify-content-center">
    <div class="retail-card shadow-sm p-4">
        <!-- Available Balance Section -->
        <div class="balance-section card text-center p-4 rounded-3">
            <div class="d-flex justify-content-center align-items-center mb-3">
                <i class="bi bi-wallet2 fs-1 text-primary me-2"></i>
                <h6 class="fw-bold mb-0">Available Wallet Balance</h6>
            </div>
            <p class="fs-4 mb-3 text-success">
                ₹ <span id="walletBalance">{{ $wallet_balance }}</span>
            </p>
        </div>
        <form action="{{ route('admin_purchase') }}" method="POST" enctype="multipart/form-data" id="buyForm">
            @csrf
            <!-- Package Selection Section -->
            <div class="package-dropdown">
                <input type="hidden" name="user_id" value="{{$user_id}}">
                <label for="packageDropdown" class="form-label fw-bold">Select Package</label>
                <div class="custom-dropdown" id="dropdown">
                    <div class="dropdown-button" id="dropdownButton">
                        <span id="dropdownSelectedText">Select a Package</span>
                        <span>&#9660;</span> <!-- Downward arrow -->
                    </div>
                    <div class="dropdown-options" id="dropdownOptions" style="display: none;">
                        @foreach ($packages as $package)
                            <div class="dropdown-option" data-value="{{ $package->package_id }}"
                                data-mrp="₹{{ $package->mrp }}" data-discount-price="₹{{ $package->discount_price }}">
                                <span>
                                    {{ $package->package_id }} -
                                    <span class="strike">₹{{ $package->mrp }}</span>
                                    ₹{{ $package->discount_price }} - PV {{ $package->pv }}
                                </span>
                            </div>
                        @endforeach
                    </div>
                </div>
                <!-- Hidden input to store the selected package value -->
                <input type="hidden" name="package" id="selectedPackage">
            </div>

            {{-- <div class="package-dropdown">
                <input type="hidden" name="user_id" value="{{$user_id}}">
                <label for="packageDropdown" class="form-label fw-bold">Select Package</label>
                <select id="packageDropdown" name="package" class="form-select">
                    <option value="" disabled selected>Select a Package</option>
                    @foreach ($packages as $package)
                        <option value="{{ $package->package_id }}">{{ $package->package_id }} - ₹{{ $package->mrp }}
                        </option>
                    @endforeach
                </select>
            </div> --}}

            <div class="form-check custom-checkbox-container">
                <input class="form-check-input custom-checkbox" type="checkbox" id="acknowledgePolicy" name="check_box" required>
                <label class="form-check-label custom-checkbox-label" for="acknowledgePolicy">
                    I acknowledge that purchased packages are non-refundable and non-returnable, and that the company is
                    not responsible for incorrect package selections.
                </label>
            </div>



            <!-- Buy Now Button -->
            <button type="submit" class="btn btn-primary submit-btn mt-4 mb-2" id="submitButton"
                onclick="disableButtonmmm(this)">Buy Now</button>
        </form>
        <!-- Success/Insufficient Balance Message -->
        <div id="transactionMessage" class="mt-3" style="display:none;">
            <div id="successMessage" class="alert alert-success" style="display:none;">
                Order Successful
            </div>
            <div id="insufficientMessage" class="alert alert-danger" style="display:none;">
                Insufficient Balance
            </div>
        </div>
    </div>
</div>
@endsection
<script>
    function disableButtonmmm(button) {
        button.disabled = true;
        button.innerText = 'Processing...';
        document.getElementById('buyForm').submit();
    }
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const dropdownButton = document.getElementById("dropdownButton");
        const dropdownOptions = document.getElementById("dropdownOptions");
        const selectedPackageInput = document.getElementById("selectedPackage");
        const dropdownSelectedText = document.getElementById("dropdownSelectedText");

        // Toggle the visibility of the dropdown options
        dropdownButton.addEventListener("click", function() {
            dropdownOptions.style.display = dropdownOptions.style.display === "block" ? "none" :
            "block";
        });

        // Handle selection of a dropdown option
        document.querySelectorAll(".dropdown-option").forEach((option) => {
            option.addEventListener("click", function() {
                const value = this.getAttribute("data-value");
                const mrp = this.getAttribute("data-mrp");
                const discountPrice = this.getAttribute("data-discount-price");

                // Update the button text
                dropdownSelectedText.innerHTML =
                    `${value} - <span class="strike">${mrp}</span> ${discountPrice}`;

                // Update the hidden input value
                selectedPackageInput.value = value;

                // Hide the dropdown options
                dropdownOptions.style.display = "none";
            });
        });

        // Close the dropdown if clicked outside
        window.addEventListener("click", function(event) {
            if (!event.target.closest(".custom-dropdown")) {
                dropdownOptions.style.display = "none";
            }
        });
    });
</script>