@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</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 Asics</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="row">
                            @forelse ($asics as $item)
                            <div class="col-lg-3">
                                <div class="mb-4 box card-shadowed">
                                    <div class="text-center box-body">
                                        @if($item->tag == 'best')
                                        <div class="ribbon best">Best Seller</div>
                                        @elseif($item->tag == 'new')
                                        <div class="ribbon new">New</div>
                                        @elseif($item->tag == 'hot')
                                        <div class="ribbon hot">Hot Deal</div>
                                        @endif
                                        <h4 class="mt-2 text-uppercase">
                                            <b>{{ $item->name }}</b><br>
                                            {{ $item->hashrate }}TH/s
                                        </h4>
                                        {{-- Miner Image --}}
                                        @if($item->image)
                                        <img src="{{ asset($item->image) }}" alt="{{ $item->name }}"
                                            class="mx-auto mb-3 rounded d-block"
                                            style="max-height:150px; max-width:150px; object-fit:contain;">
                                        @else
                                        <img src="{{ asset('default-miner.png') }}" alt="No image"
                                            class="mx-auto mb-3 rounded d-block"
                                            style="max-height:150px; max-width:150px; object-fit:contain;">
                                        @endif
                                        <p><strong>Power:</strong> {{ $item->power_consumption }} W</p>
                                        <p>
                                            <strong>Mining Output:</strong>
                                            ${{ number_format($item->mining_output, 2) }}
                                        </p>
                                        <p>
                                            <strong>Installation Fee:</strong>
                                            ${{ number_format($item->installation_fee, 2) }}
                                        </p>
                                        <p>
                                            <strong>Hosting Fee:</strong>
                                            ${{ number_format($item->hosting_fee, 2) }}
                                        </p>
                                        <p>
                                            <strong>Setup Duration:</strong>
                                            {{ $item->setup_duration }} Days
                                        </p>
                                        <div class="btn-group">
                                            <a href="{{ route('minings.buy-asic.show', $item->id) }}"
                                                class="btn btn-primary">
                                                ${{ number_format($item->price, 2) }}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @empty
                            <div class="text-center col-lg-12">
                                <p class="alert alert-warning">No asic miner found</p>
                            </div>
                            @endforelse
                        </div>
                    </div>
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
@endsection