@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 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') }}">Buy Asics</a></li>
            <li class="breadcrumb-item active">Payment Details</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <form action="{{ route('minings.buy-asic.update', $asic->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>
                                        <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 class="form-group">
                                        <div class="flex items-center justify-between mb-3">
                                            <!-- Left side: Heading -->
                                            <h3 class="flex-shrink-0 m-0 text-lg fw-bold">
                                                Quantity <b>(<span id="numberOfDeviceHold">1</span>)</b>
                                            </h3>

                                            <!-- 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>
                                        <h3 class="mb-3 h5 fw-bold">Hardware Details</h3>
                                        <p class="mb-3 text-muted">
                                            Algorithm: <strong>{{ $asic->algorithm }}</strong> |
                                            Hashrate: <strong>{{ $asic->hashrate }} TH/s</strong> |
                                            Power: <strong>{{ $asic->power_consumption ?? '—' }} W</strong>
                                            @if($asic->tag == 'best')
                                            Condition: <strong>Best Seller</strong>
                                            @elseif($asic->tag == 'new')
                                            Condition: <strong>New</strong>
                                            @elseif($asic->tag == 'hot')
                                            Condition: <strong>Hot Deal</strong>
                                            @endif
                                        </p>

                                        <h5 class="mt-4 mb-0 fw-semibold">Services Included</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
                                                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>
                        <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>
                </div>
                <div class="col-7">
                    <div class="box">
                        <!-- /.box-header -->
                        <div class="box-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <h3>
                                        <strong>Payment Details</strong>
                                    </h3>
                                    <div class="table-responsive">
                                        <table class="table ">
                                            <thead>
                                                <tr style="border: 2px solid #dc3545">
                                                    <th class="text-center"></th>
                                                    <th class="text-center">Price</th>
                                                    <th class="text-center">Quantity</th>
                                                    <th class="text-center">Total</th>
                                                </tr>

                                            </thead>
                                            <tbody>
                                                <tr style="border: 2px solid #dc3545">
                                                    <td>{{ $asic->name }} {{ $asic->hashrate }}TH/s</td>
                                                    <td class="text-center">
                                                        $<span id="price"> {{ $asic->price }}</span>
                                                    </td>
                                                    <td class="text-center" id="price_count">1</td>
                                                    <td class="text-center">
                                                        $<span id="total_price">{{ $asic->price }}</span>
                                                    </td>
                                                </tr>
                                                <tr style="border: 2px solid #dc3545">
                                                    <td>Installation Fee</td>
                                                    <td class="text-center">
                                                        $<span id="installation_fee">{{ $asic->installation_fee
                                                            }}</span>
                                                    </td>
                                                    <td class="text-center" id="count_installation_fee">1</td>
                                                    <td class="text-center">
                                                        $<span id="total_installation_fee">{{ $asic->installation_fee
                                                            }}</span>
                                                    </td>
                                                </tr>
                                                <tr style="border: 2px solid #dc3545">
                                                    <td>Monthly Hosting Fee</td>
                                                    <td class="text-center">
                                                        $<span id="hosting_fee">{{ $asic->hosting_fee }}</span>
                                                    </td>
                                                    <td class="text-center" id="count_hosting_fee">1</td>
                                                    <td class="text-center">
                                                        $ <span id="total_hosting_fee">{{ $asic->hosting_fee
                                                            }}</span>
                                                    </td>
                                                </tr>
                                                <tr style="border: 2px solid #dc3545">
                                                    <td colspan="3">Payment system fee</td>
                                                    <td class="text-center">$ 0</td>
                                                </tr>
                                                <tr style="border: 2px solid #dc3545">
                                                    <td colspan="3">Promocode</td>
                                                    <td class="text-center">None</td>
                                                </tr>
                                                <tr style="border: 2px solid #dc3545">
                                                    <td colspan="3">
                                                        <h3>Total Payment:</h3>
                                                    </td>
                                                    <td class="text-center">
                                                        <h3>
                                                            $<span id="total">{{ $asic->installation_fee +
                                                                $asic->hosting_fee + $asic->price }}</span>
                                                        </h3>
                                                        <input type="hidden" name="total_amount" id="total_amount"
                                                            value="{{ $asic->installation_fee + $asic->hosting_fee + $asic->price }}">
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.box -->
                    <div class="box">
                        <!-- /.box-header -->
                        <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();
        });

        $('.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($('#price').text());
        var hosting_fee = parseFloat($('#hosting_fee').text());
        var installation_fee = parseFloat($('#installation_fee').text());

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

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

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

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

            //work on count_installation_fee
            $('#count_installation_fee').text(count)
            $('#total_installation_fee').text(installationFee)

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

        // 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 = 90;
        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