@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 / Payment Details</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">Payment Details</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <form action="{{ route('minings.buy-cloud.update', $cloud_plan->id) }}" method="POST"> @csrf @method('put')
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="">
                                <h4 class="m-0">Balance <i id="info-icon" class="fa fa-eye text-primary"
                                        style="cursor: pointer"></i></h4>
                                <h3 id="balance" class="m-0"><b class="m-0">${{ number_format($user->balance, 2) }}</b>
                                </h3>
                                <h3 id="hidden-balance" class="m-0" style="display:none;"><b class="m-0">*****</b></h3>
                            </div>
                            <a href="{{ route('user.deposit') }}" target="_blank"
                                class="float-right btn btn-primary btn-sm">
                                <i class="mr-5 fa fa-plus"></i>Deposit
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-5">
                    <div class="box">
                        <!-- /.box-header -->
                        <div class="box-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <h3>
                                        Cloud Mining Contracts
                                    </h3>
                                    <div class="border">
                                        <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:250px; max-width:250px; object-fit:contain;">
                                    </div>
                                    <div>
                                        <h3 class="mb-3 h5 fw-bold">Contract Details</h3>
                                        <p class="mb-3 text-muted">
                                            Total mining power: <strong>{{ $mining_power }} TH/s </strong> |
                                            Duration: <strong>{{ $cloud_plan->duration_days }} Days </strong>
                                        </p>

                                        <h3 class="mt-4 mb-0 fw-semibold">
                                            Asic:
                                            <strong>
                                                {{ $cloud_plan->name }}
                                                {{ $cloud_plan->hashrate }}TH/s
                                            </strong>
                                        </h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <h3 class="mb-3 h5 fw-bold">Disclaimer</h3>
                        <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 class="col-7">
                    {{-- Payment Details --}}
                    <div class="mb-4 border-0 shadow-sm card">
                        <div class="bg-white border-0 card-header">
                            <h4 class="mb-0"><strong>Payment Details</strong></h4>
                        </div>
                        <div class="card-body">

                            {{-- Item --}}
                            <div class="mb-3 d-flex justify-content-between align-items-center">
                                <span>Contract Price</span>
                                <span class="fw-semibold">
                                    ${{ number_format($amount, 2) }}
                                </span>
                            </div>
                            <hr>
                            {{-- Service Fee --}}
                            <div class="mb-3 d-flex justify-content-between align-items-center">
                                <span>Service fee per Th/day</span>
                                <span class="fw-semibold">
                                    ${{ $cloud_plan->service_fee }}
                                </span>
                            </div>
                            <hr>
                            {{-- Card Processing Fee --}}
                            <div class="mb-3 d-flex justify-content-between align-items-center">
                                <span>Card Processing Fee</span>
                                <span class="fw-semibold">$0.00</span>
                            </div>
                            {{-- Divider --}}
                            <hr>
                            {{-- Total --}}
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">Total Payment</h5>
                                <h4 class="mb-0 text-primary">
                                    ${{ number_format($amount, 2) }}
                                </h4>
                            </div>

                            <input type="hidden" name="total_amount" value="{{ $amount}}">
                            <input type="hidden" name="mining_power" value="{{ $mining_power}}">
                        </div>
                    </div>

                    {{-- Wallet Balance --}}
                    <div class="box">
                        <div class="box-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <h3>
                                        <strong>Wallet Balance</strong>
                                    </h3>
                                </div>
                                <div class="col-lg-12 form-group">
                                    <input class="form-control"
                                        value="Balance (${{ number_format($user->balance, 2) }})" required disabled>
                                    <x-input-error :messages="$errors->get('wallet_balance')"
                                        class="mt-2 text-danger" />
                                </div>
                                <div class="col-lg-12">
                                    <button class="btn btn-primary w-100" type="submit">Buy Now</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.col -->
            </div>
        </form>
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Initially hide the balance and show the hidden balance
        $("#balance").hide();
        $("#hidden-balance").show();
        // Toggle the visibility of the balance on click
        $("#info-icon").click(function() {
            $("#balance").toggle();
            $("#hidden-balance").toggle();
        });
    });
</script>
@endpush