@extends('Admin.layout')

@section('navlink')
    <a href="{{ route('dashboard') }}" class="link-secondary text-decoration-none">Home</a>
    / <span>Package</span>
@endsection

@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
<style>
    .deposit-page {
        --gold: #c99a3b;
        --gold-hi: #e4be63;
        --card: #1c1710;
        --muted: #a69b83;
        color: #f6f1e4;
    }

    .deposit-tabs {
        display: flex;
        justify-content: center;
        gap: 10px;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto 25px;
        padding: 6px;
        border: 1px solid rgba(201, 154, 59, .25);
        border-radius: 13px;
        background: #17130d;
    }

    .deposit-tab {
        min-width: 145px;
        padding: 11px 22px;
        border: 1px solid transparent;
        border-radius: 9px;
        color: #aaa08d;
        background: transparent;
        text-decoration: none;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        transition: .25s;
    }

    .deposit-tab i {
        margin-right: 6px;
        font-size: 17px;
        vertical-align: -2px;
    }

    .deposit-tab.active {
        color: #17130d;
        background: linear-gradient(135deg, #e4be63, #c99a3b);
        border-color: var(--gold-hi);
    }

    .deposit-tab:not(.active):hover {
        color: var(--gold-hi);
        background: rgba(201, 154, 59, .08);
    }

    .payment-card {
        max-width: 450px;
        margin: 0 auto 30px;
        padding: 22px;
        border: 1px solid var(--gold);
        border-radius: 20px;
        background: linear-gradient(145deg, #262015, #17130d);
        box-shadow: 0 15px 35px rgba(0, 0, 0, .25);
    }

    .payment-title {
        display: flex;
        align-items: center;
        gap: 9px;
        padding-bottom: 13px;
        border-bottom: 1px solid rgba(201, 154, 59, .2);
        color: var(--gold-hi);
        font-size: 14px;
        font-weight: 700;
    }

    .payment-title i {
        font-size: 20px;
    }

    .wallet-address {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 13px;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 9px;
        background: rgba(255, 255, 255, .04);
    }

    .wallet-address code {
        flex: 1;
        min-width: 0;
        color: #eee;
        font-family: inherit;
        font-size: 12px;
        overflow-wrap: anywhere;
    }

    .copy-btn {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        border: 1px solid rgba(201, 154, 59, .4);
        border-radius: 7px;
        color: var(--gold-hi);
        background: rgba(201, 154, 59, .08);
    }

    .copy-btn:hover {
        color: #17130d;
        background: var(--gold-hi);
    }

    .network-label {
        margin: 13px 0 7px;
        color: var(--muted);
        font-size: 12px;
        text-align: center;
    }

    .network-badge {
        display: inline-block;
        padding: 6px 17px;
        border-radius: 30px;
        color: #17130d;
        background: linear-gradient(135deg, #e4be63, #c99a3b);
        font-size: 12px;
        font-weight: 800;
    }

    .qr-wrapper {
        display: grid;
        place-items: center;
        width: 108px;
        height: 108px;
        margin: 15px auto 0;
        padding: 7px;
        border-radius: 11px;
        background: #fff;
        color: #111;
    }

    .qr-wrapper i {
        font-size: 85px;
    }

    .qr-note {
        margin-top: 9px;
        color: var(--muted);
        font-size: 11px;
        text-align: center;
    }

    .deposit-form .form-label {
        margin-bottom: 7px;
        color: #dedede;
        font-size: 12px;
        font-weight: 600;
    }

 

    .currency-options {
        display: flex;
        justify-content: center;
        gap: 28px;
        margin-bottom: 25px;
    }

    .currency-options .form-check {
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 0;
        padding: 0;
    }

    .currency-options .form-check-input {
        float: none;
        margin: 0;
        background-color: #171717;
        border-color: #777;
    }

    .currency-options .form-check-input:checked {
        background-color: var(--gold);
        border-color: var(--gold);
    }

    .currency-options .form-check-label {
        color: #ddd;
        font-size: 13px;
    }

    .upload-box {
        min-height: 78px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        padding: 10px;
        border: 1px dashed rgba(201, 154, 59, .7);
        border-radius: 9px;
        color: #aaa;
        background: rgba(255, 255, 255, .015);
        cursor: pointer;
        transition: .2s;
    }

    .upload-box:hover {
        border-color: var(--gold-hi);
        background: rgba(201, 154, 59, .06);
    }

    .upload-box i {
        color: var(--gold-hi);
        font-size: 22px;
    }

    .upload-box span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
    }

    .upload-input {
        display: none;
    }

    .submit-wrapper {
        display: flex;
        justify-content: center;
        margin-top: 23px;
    }

    .deposit-submit {
        min-width: 170px;
        padding: 12px 25px;
        border: 1px solid var(--gold-hi);
        border-radius: 9px;
        color: #17130d;
        background: linear-gradient(135deg, #e4be63, #c99a3b);
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 2px;
        transition: .25s;
    }

    .deposit-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(201, 154, 59, .22);
    }

    @media(max-width: 767px) {
        .deposit-tabs {
            width: 100%;
        }

        .deposit-tab {
            flex: 1;
            min-width: 0;
        }

        .payment-card {
            max-width: 100%;
        }
    }

    @media(max-width: 575px) {
        .deposit-form .row {
            row-gap: 14px;
        }

        .deposit-submit {
            width: 100%;
        }
    }
</style>

<div class="deposit-page">
    <div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
        <div>
            <h1 class="h3 mb-1">Purchase Package</h1>
        </div>
         <div class="d-flex gap-2">
        <a href="{{ route('purchase_package_report') }}" class="btn-back">
            <i class="ti ti-arrow-left"></i>
            <span>Back</span>
        </a>
    </div>
    </div>

   <div class="card p-4">
        <form class="deposit-form" method="POST" action="#" enctype="multipart/form-data">
            @csrf

            <input type="hidden" name="payment_type" value="online">

          
            <div class="row g-3">
                 <div class="col-md-4">
                    <label for="amount" class="form-label" id="amountLabel">Purchase For</label>
                    <select class="form-select">
                        <option>For Others</option>
                    </select>
                   </div>
                <div class="col-md-4">
                    <label for="amount" class="form-label" id="amountLabel">User ID</label>
                    <input type="text" class="form-control" placeholder="User ID">
                </div>
                <div class="col-md-4">
                    <label for="amount" class="form-label" id="amountLabel">User Name</label>
                    <input type="number" class="form-control" placeholder="Autofetch" readonly>
                </div>
                 <div class="col-md-4">
                    <label for="amount" class="form-label" id="amountLabel"> Package Name</label>
                    <select class="form-select">
                        <option>Standard Package</option>
                        <option>Premium Package</option>
                    </select>
                   </div>

                   <div class="col-md-4">
                    <label for="amount" class="form-label" id="amountLabel"> Package USDT</label>
                    <select class="form-select">
                        <option>--Select--</option>
                        <option>$50</option>
                    </select>
                   </div>

           

                <div class="col-md-4">
                    <label for="receipt" class="form-label">Upload Your Advance Receipt</label>
                    <label class="upload-box" for="receipt">
                        <i class="ti ti-cloud-upload"></i>
                        <span id="fileName">Upload receipt</span>
                    </label>
                    <input type="file" class="upload-input" id="receipt" name="receipt"
                        accept="image/*,.pdf" required>
                </div>
            </div>

            <div class="submit-wrapper">
                <button type="submit" class="deposit-submit">
                    <i class="ti ti-send"></i> SUBMIT
                </button>
            </div>
        </form>
    </div>
</div>


<script>
    document.querySelectorAll('input[name="currency"]').forEach(input => {
        input.addEventListener('change', function() {
            const isUsdt = this.value === 'USDT';

            document.getElementById('walletTitle').textContent =
                isUsdt ? 'USDT Wallet Address' : 'INR Payment Details';

            document.getElementById('networkName').textContent =
                isUsdt ? 'BEP20' : 'INR';

            document.getElementById('amountLabel').textContent =
                this.value + ' Amount';

            document.getElementById('amount').placeholder =
                isUsdt ? '0.00 USDT' : '0.00 INR';
        });
    });

    function copyWalletAddress() {
        const address = document.getElementById('walletAddress').textContent.trim();

        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(address)
                .then(() => alert('Wallet address copied!'))
                .catch(() => fallbackCopy(address));
        } else {
            fallbackCopy(address);
        }
    }

    function fallbackCopy(text) {
        const input = document.createElement('textarea');
        input.value = text;
        input.style.position = 'fixed';
        input.style.opacity = '0';
        document.body.appendChild(input);
        input.select();

        try {
            document.execCommand('copy');
            alert('Wallet address copied!');
        } catch (error) {
            alert('Unable to copy. Please copy manually.');
        }

        input.remove();
    }

    document.getElementById('receipt').addEventListener('change', function() {
        document.getElementById('fileName').textContent =
            this.files.length ? this.files[0].name : 'Upload receipt';
    });
</script>
@endsection