@php $page = 'mining-store' @endphp
@extends('includes.layout')

@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>Buy Cloud Mining</h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{{ route('dashboard') }}"><i class="fa fa-dashboard"></i> Home</a>
            </li>
            <li class="breadcrumb-item active">Buy Cloud Mining</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-12">
                <div class="box">
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="container">
                            <div class="row g-4 align-items-start">
                                <div class="text-center col-md-12" style="margin-bottom: 40px">
                                    <img src="{{ $cloud_plan->image ? asset('storage/'.$cloud_plan->image) : asset('default-miner.png') }}"
                                        class="p-3 card-img-top" alt="{{ $cloud_plan->name }}"
                                        style="max-height:100px; object-fit:contain;">
                                    <h4 class="">
                                        Hashrate based on {{ $cloud_plan->category }} {{ $cloud_plan->name }} {{
                                        $cloud_plan->hashrate }}
                                        TH/s
                                    </h4>
                                    <p>
                                        Mine Bitcoin daily with a cloud contract on the powerful {{ $cloud_plan->name }}
                                        {{
                                        $cloud_plan->hashrate }}TH/s — no need to buy or
                                        maintain any equipment.
                                    </p>
                                </div>
                                <div class="col-md-12" style="margin-bottom: 40px">
                                    <form action="{{ route('minings.buy-cloud.store') }}" method="POST"> @csrf
                                        <!-- Top mining details -->
                                        <div class="mb-4 text-center row justify-content-between"
                                            style="border:1px solid #eee; padding:15px; margin-bottom: 40px">
                                            <div class="col-md-3">
                                                <h5 style="margin:0;">{{ $cloud_plan->mining_output }} TH/s</h5>
                                                <small>Mining Power</small>
                                            </div>
                                            <div class="col-md-3">
                                                <h5 style="margin:0;">{{ $cloud_plan->energy_efficiency }} J/TH</h5>
                                                <small>Efficiency</small>
                                            </div>
                                            <div class="col-md-3">
                                                <h5 style="margin:0;">{{ $cloud_plan->power_consumption }} W</h5>
                                                <small>Power Consumption</small>
                                            </div>
                                            <div class="col-md-3">
                                                <h5 style="margin:0; color:#007bff; cursor:pointer;">{{
                                                    $cloud_plan->algorithm }}</h5>
                                                <small>Algorithm</small>
                                            </div>
                                        </div>

                                        <!-- Title -->
                                        <div class="mb-4 text-center">
                                            <h4 style="font-weight:bold;">Cloud Mining on {{ $cloud_plan->name }} {{
                                                $cloud_plan->hashrate
                                                }}TH/s</h4>
                                            <p style="color:#666;">
                                                Choose the contract amount to see the mining power. Increase the amount
                                                and
                                                receive up to 15% bonus power.
                                            </p>
                                        </div>

                                        <!-- Contract buttons -->
                                        {{-- <div class="form-group">
                                            <label for="">Choose the contract amount</label>
                                            <div class="gap-4 mb-4 d-flex justify-content-center">
                                                <button class="px-4 btn btn-light quick-click" data-amount="250"
                                                    style="border:1px solid #ddd; border-radius:8px;"
                                                    type="button">$250</button>
                                                <button class="px-4 btn btn-light quick-click" data-amount="500"
                                                    style="border:1px solid #ddd; border-radius:8px;"
                                                    type="button">$500</button>
                                                <button class="px-4 btn btn-light quick-click" data-amount="1000"
                                                    style="border:1px solid #ddd; border-radius:8px;"
                                                    type="button">$1000</button>
                                                <button class="px-4 btn btn-light quick-click" data-amount="1500"
                                                    style="border:1px solid #ddd; border-radius:8px;"
                                                    type="button">$1500</button>
                                                <button class="px-4 btn btn-light quick-click" data-amount="5000"
                                                    style="border:1px solid #ddd; border-radius:8px;"
                                                    type="button">$5000</button>
                                                <button class="px-4 btn btn-light quick-click" data-amount="10000"
                                                    style="border:1px solid #ddd; border-radius:8px;"
                                                    type="button">$10000</button>
                                            </div>
                                        </div> --}}
                                        <div class="form-group">
                                            <label for="">Choose the contract amount</label>
                                            <div class="flex-wrap gap-3 mb-4 d-flex justify-content-center">
                                                <button class="px-4 btn btn-light quick-click" data-amount="250"
                                                    style="border:1px solid #ddd; border-radius:8px;"
                                                    type="button">$250</button>
                                                <button class="px-4 btn btn-light quick-click" data-amount="500"
                                                    style="border:1px solid #ddd; border-radius:8px;"
                                                    type="button">$500</button>
                                                <button class="px-4 btn btn-light quick-click" data-amount="1000"
                                                    style="border:1px solid #ddd; border-radius:8px;"
                                                    type="button">$1000</button>
                                                <button class="px-4 btn btn-light quick-click" data-amount="1500"
                                                    style="border:1px solid #ddd; border-radius:8px;"
                                                    type="button">$1500</button>
                                                <button class="px-4 btn btn-light quick-click" data-amount="5000"
                                                    style="border:1px solid #ddd; border-radius:8px;"
                                                    type="button">$5000</button>
                                                <button class="px-4 btn btn-light quick-click" data-amount="10000"
                                                    style="border:1px solid #ddd; border-radius:8px;"
                                                    type="button">$10000</button>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="amount">Or Enter Amount</label>
                                            <input type="number" class="form-control" name="amount" id="amount"
                                                placeholder="Enter Amount" required>
                                        </div>

                                        <!-- Power table -->
                                        <div
                                            style="border-radius:10px; padding:20px; box-shadow:0 2px 6px rgba(0,0,0,0.1); max-width:100%;">
                                            <div
                                                style="display:flex; justify-content:space-between; margin-bottom:8px; flex-wrap:wrap;">
                                                <span>Base Power</span>
                                                <span><strong><span id="base_power">{{ $cloud_plan->service_fee
                                                            }}</span>
                                                        TH/s</strong></span>
                                            </div>
                                            <div
                                                style="display:flex; justify-content:space-between; margin-bottom:8px; flex-wrap:wrap;">
                                                <span>Bonus</span>
                                                <span style="color:green;"><strong>+<span id="bonus">3</span>% (<span
                                                            id="bonus_value">{{
                                                            $cloud_plan->service_fee
                                                            }}</span>
                                                        TH/s)</strong></span>
                                            </div>
                                            <div
                                                style="display:flex; justify-content:space-between; border-top:1px solid #eee; padding-top:10px; flex-wrap:wrap;">
                                                <span>Total Power</span>
                                                <span><strong><span id="total_power">{{ $cloud_plan->service_fee
                                                            }}</span>
                                                        TH/s</strong></span>
                                            </div>
                                        </div>

                                        <input type="hidden" id="mining_power" name="mining_power" class="form-control"
                                            value="{{ $cloud_plan->service_fee }}">
                                        <input type="hidden" name="cloud_id" class="form-control"
                                            value="{{ $cloud_plan->id }}">

                                        <!-- Next button -->
                                        <div class="mt-4 text-center form-group" style="margin-top: 20px">
                                            <button class="btn btn-primary" type="submit">Next</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="row alert alert-success">
                                <div class="text-center col-md-12 col-lg-12" style="margin-top: 40px">
                                    <h4>Contract Mining Output</h4>
                                    <h1>${{ $cloud_plan->service_fee }}</h1>
                                    <h3>Return: {{ $cloud_plan->roi }}%</h3>
                                </div>
                            </div>
                            <div class="row">
                                <div class="text-center col-md-12 col-lg-12" style="margin-top: 40px">
                                    <h2>Disclaimer</h2>
                                    <p>
                                        These calculations provide you a forward-looking information which allows you to
                                        model potential
                                        income under certain
                                        conditions selected by you. This forward-looking information is based on a data
                                        currently available
                                        to {{ $settings->name }}, including
                                        current mining difficulty. It's is not a guarantee of future performance and
                                        accordingly undue
                                        reliance should not be
                                        put on such information due to the inherent uncertainty therein.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
@endsection

@push('scripts')
<script>
    $(document).ready(function () {

    function getBasePower(amount) {
        if (amount >= 250 && amount <= 999) {
            return 8.33;
        } else if (amount >= 1000 && amount <= 1999) {
            return 33.33;
        } else if (amount >= 2000 && amount <= 9999) {
            return 66.67;
        } else if (amount >= 10000) {
            return 100.00;
        } else {
            return 0; // below 250 → no mining power
        }
    }

    function calculatePower(amount) {
        let basePower = getBasePower(amount);
        let bonusPercent = 0;

        if (amount < 250) {
            bonusPercent = 0;
        } else if (amount >= 10000) {
            bonusPercent = 15;
        } else {
            // Scale smoothly between 3% (at 250) and 14% (just before 10000)
            bonusPercent = 3 + ((amount - 250) / (10000 - 250)) * (14 - 3);
            bonusPercent = Math.floor(bonusPercent); // round down
        }

        const bonusValue = (basePower * bonusPercent) / 100;
        const totalPower = basePower + bonusValue;

        // Update UI
        $("#base_power").text(basePower.toFixed(2));
        $("#bonus").text(bonusPercent + "%");
        $("#bonus_value").text(bonusValue.toFixed(2));
        $("#total_power").text(totalPower.toFixed(2));
        $("#mining_power").val(totalPower.toFixed(2));
    }

    // Quick-click buttons
    $(".quick-click").on("click", function () {
        let amount = parseInt($(this).data("amount"));
        $("#amount").val(amount);
        calculatePower(amount);
    });

    // Manual input
    $("#amount").on("input", function () {
        let amount = parseInt($(this).val());
        if (!isNaN(amount) && amount > 0) {
            calculatePower(amount);
        }
    });
});
</script>
@endpush