@extends('user.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('package_purchase') }}" method="POST" enctype="multipart/form-data" id="buyForm">
                @csrf
                <!-- Package Selection Section -->
                {{-- <div class="package-dropdown">
                <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 }} - <span class="strikethrough">Mrp </span> ₹{{ $package->mrp }} -Discount Price  ₹{{ $package->discount_price }}
                        </option>
                    @endforeach
                </select>
            </div> --}}




                <div class="package-dropdown">
                    <label for="packageDropdown" class="form-label fw-bold">Select</label>
                    <div class="custom-dropdown" id="dropdown">
                        <div class="dropdown-button" id="dropdownButton">
                            <span id="dropdownSelectedText">Select</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="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="disableButton(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 disableButton(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>