@extends('User.layout')

@section('navlink')
    <a href="{{ route('user.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('user.my_purchases') }}" class="btn btn-primary">
                    <span>My packages</span>
                </a>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="card p-4">
                    <form class="deposit-form" method="POST" action="{{ route('user.purchase_package_store') }}"
                        id="packagePurchaseForm">

                        @csrf

                        <div class="row g-3">

                            {{-- Package --}}
                            <div class="col-md-12">

                                <label for="package" class="form-label">
                                    Package Name
                                </label>

                                <select class="form-select" name="package_id" id="package">

                                    <option value="">
                                        -- Select Package --
                                    </option>

                                    @foreach ($packages as $package)
                                        <option value="{{ $package->id }}" data-usdt="{{ $package->usdt }}">
                                            {{ $package->package_name }}
                                        </option>
                                    @endforeach

                                </select>

                                <div class="text-danger small mt-1" id="packageError"></div>

                            </div>


                            {{-- USDT --}}
                            <div class="col-md-12" id="usdtWrapper" style="display: none;">

                                <label for="usdtAmount" class="form-label">
                                    Package USDT
                                </label>

                                <div class="form-control" id="usdtAmount"
                                    style="background: #17130f;
                        color: #ffffff;
                        border: 1px solid #3d321e;">
                                    -
                                </div>

                            </div>

                        </div>


                        {{-- Submit --}}
                        <div class="submit-wrapper">

                            <button type="button" class="deposit-submit" id="submitPackage">

                                <i class="ti ti-send"></i>
                                <span>SUBMIT</span>

                            </button>

                        </div>

                    </form>



                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <script>
        $(document).ready(function() {

            //    Update Package USDT
            function updatePackageDetails() {

                let selectedOption = $('#package option:selected');

                let packageId = selectedOption.val();
                let usdt = selectedOption.data('usdt');

                $('#packageError').text('');

                if (packageId && usdt !== undefined && usdt !== '') {

                    $('#usdtAmount').text(
                        '$' + parseFloat(usdt).toFixed(2)
                    );

                    $('#usdtWrapper').show();

                } else {

                    $('#usdtAmount').text('-');
                    $('#usdtWrapper').hide();
                }
            }


            $('#package').on('change', function() {

                updatePackageDetails();

            });

            updatePackageDetails();


            // Package Purchase

            $('#submitPackage').on('click', function(e) {

                e.preventDefault();

                let form = $('#packagePurchaseForm');
                let button = $('#submitPackage');
                let packageId = $('#package').val();

                // Clear previous errors
                $('#packageError').text('');


                if (!packageId) {

                    $('#packageError').text(
                        'Please select a package.'
                    );

                    return;
                }


                button.prop('disabled', true);
                button.find('span').text('Submitting...');


                // AJAX
                $.ajax({

                    url: form.attr('action'),

                    type: 'POST',

                    data: form.serialize(),

                    dataType: 'json',

                    headers: {
                        'Accept': 'application/json'
                    },


                    // Success
                    success: function(response) {

                        console.log('SUCCESS:', response);


                        if (response.status === true) {

                            showCustomToast(
                                response.message ||
                                'Package request sent successfully.',
                                'success'
                            );




                            form[0].reset();


                            $('#usdtAmount').text('-');
                            $('#usdtWrapper').hide();


                        } else {

                            showCustomToast(
                                response.message ||
                                'Package purchase failed.',
                                'error'
                            );

                        }

                    },


                    //   Error
                    error: function(xhr) {

                        console.log('AJAX ERROR:', xhr);
                        console.log('Response:', xhr.responseText);


                        let message =
                            'Something went wrong. Please try again.';


                        //     Validation Error - 422
                        if (xhr.status === 422) {

                            if (
                                xhr.responseJSON &&
                                xhr.responseJSON.errors
                            ) {

                                let errors = xhr.responseJSON.errors;


                                if (errors.package_id) {

                                    $('#packageError').text(
                                        errors.package_id[0]
                                    );

                                    return;
                                }
                            }


                            // custom message for validation error

                            if (
                                xhr.responseJSON &&
                                xhr.responseJSON.message
                            ) {

                                message = xhr.responseJSON.message;
                            }
                        }


                        // other error messages
                        else if (
                            xhr.responseJSON &&
                            xhr.responseJSON.message
                        ) {

                            message = xhr.responseJSON.message;
                        }


                        showCustomToast(
                            message,
                            'error'
                        );

                    },

                    // Complete

                    complete: function() {

                        button.prop('disabled', false);

                        button.find('span').text('SUBMIT');

                    }

                });

            });

        });
    </script>
@endsection