@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>Rent ASICs / 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"><a href="{{ route('minings.buy-asic.create') }}">Rent Asics</a></li>
            <li class="breadcrumb-item active">Payment Details</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <form action="{{ route('minings.rent-asic.update', $asic->id) }}" method="POST"> @csrf @method('put')
            <div class="row">
                <div class="col-12 col-lg-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-12 col-lg-5">
                    <div class="box">
                        <!-- /.box-header -->
                        <div class="box-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <h3>
                                        <strong>{{ $asic->name }} {{ $asic->hashrate }}TH/s</strong>
                                    </h3>
                                    <div class="border">
                                        <img src="{{ $asic->image ? asset('storage/'.$asic->image) : asset('default-miner.png') }}"
                                            class="p-3 card-img-top" alt="{{ $asic->name }}"
                                            style="max-height:250px; max-width:250px; object-fit:contain;">
                                    </div>
                                    <div>
                                        <h3 class="mb-3 h5 fw-bold">Rental Details</h3>
                                        <p class="mb-3 text-muted">
                                            Duration: <strong>{{ $asic->duration }} {{
                                                Str::ucfirst($asic->rental_period) }}</strong> |
                                            Hashrate: <strong>{{ $asic->hashrate }} TH/s</strong> |
                                            Power: <strong>{{ $asic->power_consumption ?? '—' }} W</strong> |
                                            Algorithm: <strong>{{ $asic->algorithm }}</strong> |
                                            Efficiency: <strong>{{ $asic->energy_efficiency }} W/TH</strong>
                                        </p>

                                        <h5 class="mt-4 mb-0 fw-semibold">Hosting at {{ $settings->name }} Data Center
                                        </h5>
                                        <ul class="list-inline">
                                            <li class="list-inline-item me-3">
                                                <i class="bi bi-truck"></i> Shipping & Tax
                                            </li>
                                            <li class="list-inline-item me-3">
                                                <i class="bi bi-tools"></i> Setup & Launch
                                            </li>
                                            <li class="list-inline-item">
                                                <i class="bi bi-shield-check"></i>
                                                24/7 Maintenance and Security
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="alert alert-info">
                                        <h5 class="fw-semibold">Profitability Info</h5>
                                        <hr class="m-0">
                                        <p class="mb-3">
                                            Monthly Mining Output: <strong>${{ number_format($asic->mining_output, 2)
                                                }}</strong> |
                                            Breakeven: 536 days</strong> |
                                            Return: 273%</strong>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-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>{{ $asic->name }} {{ $asic->hashrate }}TH/s</span>
                                <span class="fw-semibold">
                                    $ <span id="total_price">{{ $asic->price }}</span>
                                </span>
                            </div>
                            <hr>
                            {{-- Hosting Fee --}}
                            <div class="mb-3 d-flex justify-content-between align-items-center">
                                <span>Hosting fee <span class="hosting_period">Monthly</span></span>
                                <span class="fw-semibold">
                                    $ <span id="total_hosting_fee">{{ $asic->hosting_fee }}</span>
                                </span>
                            </div>
                            <hr>
                            {{-- Payment System Fee --}}
                            <div class="mb-3 d-flex justify-content-between align-items-center">
                                <span>Payment System 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">
                                    $ <span id="total">{{ $asic->price + $asic->hosting_fee }}</span>
                                </h4>
                            </div>

                            <input type="hidden" name="total_amount" id="total_amount"
                                value="{{ $asic->price + $asic->hosting_fee }}">
                        </div>
                    </div>

                    {{-- Hosting Fee Payment: --}}
                    <div class="box">
                        <div class="box-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <h3>
                                        <strong>
                                            Hosting Fee Payment
                                            (<span id="numberOfDeviceHold">1</span>):
                                        </strong>
                                    </h3>
                                </div>
                                <div class="col-lg-8 form-group">
                                    <select class="form-control" name="hosting_fee_type" id="hosting_fee_type" required>
                                        <option value="monthly">Monthly</option>
                                        <option value="daily">Daily</option>
                                    </select>
                                </div>
                                <div class="col-lg-4 form-group">
                                    <div class="flex items-center justify-between mb-3">
                                        <!-- Right side: Controls -->
                                        <div class="flex items-center space-x-2">
                                            <button type="button" id="decrementBtn"
                                                class="flex items-center justify-center w-8 h-8 text-white bg-gray-600 rounded-full">-</button>
                                            <span id="quantityDisplay"
                                                class="px-3 py-1 text-lg font-semibold bg-gray-100 rounded">1</span>
                                            <button type="button" id="incrementBtn"
                                                class="flex items-center justify-center w-8 h-8 text-white bg-gray-600 rounded-full">+</button>
                                        </div>
                                    </div>

                                    <!-- Hidden inputs for syncing -->
                                    <input type="hidden" id="numberOfDeviceValue" value="1" name="number_of_device">
                                    <input type="hidden" id="number_of_device" value="1">
                                </div>
                            </div>
                        </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>
                <div class="col-12 col-lg-12">
                    <h3 class="mb-3 h5 fw-bold">Disclaimer</h3>
                    <p>
                        These estimates offer forward-looking information based on current data, including mining
                        difficulty: FPPS 0.00000048,
                        and BTC reference rate of $175k. They are not guarantees of future results and should be
                        viewed
                        with
                        caution due to
                        market uncertainties.
                    </p>
                </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();
        });

        $('.quick-click').on('click', function() {
            // Get the data-amount attribute of the clicked button
            var amount = $(this).data('amount');
            // Populate the input field with the button data-amount
            $('#amount').val(amount);
        });

        var price = parseFloat($('#total_price').text());
        var hosting_fee = parseFloat($('#total_hosting_fee').text());

        $('#number_of_device').change(function() {
            var count = $(this).val();

            var total_price = parseFloat(price * count);
            var serviceFee = parseFloat(hosting_fee * count);

            //work on the price_count
            $('#total_price').text(total_price)

            //work on count_hosting_fee
            $('#total_hosting_fee').text(serviceFee)

            $('#total').text(parseFloat(total_price + serviceFee))
            $('#total_amount').val(parseFloat(total_price + serviceFee))
        });

        // Get the range input and text input elements
        var rangeInput = $('#duration');
        var textInput = $('#durationValue');
        var durationHold = $('#durationHold');

        // Add an input event listener to the range input
        rangeInput.on('input', function() {
            // Update the text input value with the current value of the range input
            textInput.val($(this).val());
            durationHold.text($(this).val());
        });

        // Get the range input and text input elements
        var rangeInput2 = $('#number_of_device');
        var textInput2 = $('#numberOfDeviceValue');
        var numberOfDeviceHold = $('#numberOfDeviceHold');

        // Add an input event listener to the range input
        rangeInput2.on('input', function() {
            // Update the text input value with the current value of the range input
            textInput2.val($(this).val());
            numberOfDeviceHold.text($(this).val());
        });

        let min = 1, max = 24;
        let currentValue = parseInt($("#number_of_device").val());

        function updateAll() {
            $("#numberOfDeviceHold").text(currentValue);
            $("#quantityDisplay").text(currentValue);
            $("#numberOfDeviceValue").val(currentValue);
            $("#number_of_device").val(currentValue).trigger("change");
        }

        $("#incrementBtn").click(function () {
            if (currentValue < max) {
                currentValue++;
                updateAll();
            }
        });
        $("#decrementBtn").click(function () {
            if (currentValue > min) {
                currentValue--;
                updateAll();
            }
        });

        updateAll();
    });
</script>
@endpush