@extends('layouts.app', ['title' => 'Preview Home Futurista'])

@section('css')
<style>
:root{--neo-border:rgba(255,255,255,.12)}
.neo-card{background:linear-gradient(135deg,rgba(20,20,45,.6),rgba(10,10,25,.6));border:1px solid var(--neo-border);border-radius:16px;backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .2s ease,box-shadow .2s ease}
.neo-card:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(0,0,0,.45)}
.neo-success{background:linear-gradient(135deg,rgba(16,120,98,.45),rgba(16,18,27,.6))}
.neo-danger{background:linear-gradient(135deg,rgba(180,52,52,.45),rgba(16,18,27,.6))}
.neo-info{background:linear-gradient(135deg,rgba(36,124,196,.45),rgba(16,18,27,.6))}
.neo-dark{background:linear-gradient(135deg,rgba(55,60,75,.55),rgba(16,18,27,.6))}
.neo-primary{background:linear-gradient(135deg,rgba(74,74,253,.45),rgba(16,18,27,.6))}
.neo-warning{background:linear-gradient(135deg,rgba(255,182,0,.45),rgba(16,18,27,.6))}
.neo-card .widget-icon-box-avatar{background:rgba(255,255,255,.08)!important;border-radius:12px;box-shadow:0 0 0 1px var(--neo-border),0 8px 24px rgba(0,0,0,.35)}
.neo-card h4{letter-spacing:.6px}
.neo-card h3{font-weight:700}
.span-box{display:inline-block;margin-top:.5rem;opacity:.85}
canvas{border-radius:12px}
.preview-wrap{margin-top:20px}
</style>
@endsection

@section('content')
<div class="preview-wrap">
    <h3>Painel (Preview Futurista)</h3>

    <div class="row mt-2">
        <div class="col-12 col-lg-3 col-xl-2 mb-3">
            <div class="card widget-icon-box neo-card neo-success">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div class="flex-grow-1 overflow-hidden">
                            <h4 class="text-uppercase fs-13 mt-0">Contas a Receber</h4>
                            <h3 class="my-3" style="font-size:16px;">R$ 1.120,00</h3>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-white bg-opacity-25 text-white rounded rounded-3 fs-3 widget-icon-box-avatar shadow">
                                <i class="ri-money-dollar-circle-line"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-3 col-xl-2 mb-3">
            <div class="card widget-icon-box neo-card neo-danger">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div class="flex-grow-1 overflow-hidden">
                            <h4 class="text-uppercase fs-13 mt-0">Contas a Pagar</h4>
                            <h3 class="my-3" style="font-size:16px;">R$ 8.806,00</h3>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-white bg-opacity-25 text-white rounded rounded-3 fs-3 widget-icon-box-avatar shadow">
                                <i class="ri-money-dollar-circle-line"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-3 col-xl-2 mb-3">
            <div class="card widget-icon-box neo-card neo-info">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div class="flex-grow-1 overflow-hidden">
                            <h4 class="text-uppercase fs-13 mt-0">Produtos</h4>
                            <h3 class="my-3" style="font-size:16px;">0</h3>
                            <span class="span-box">Produtos em promoção <span class="badge bg-success">0</span></span>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-white bg-opacity-25 text-white rounded rounded-3 fs-3 widget-icon-box-avatar shadow">
                                <i class="ri-box-3-line"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-3 col-xl-2 mb-3">
            <div class="card widget-icon-box neo-card neo-dark">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div class="flex-grow-1 overflow-hidden">
                            <h4 class="text-uppercase fs-13 mt-0">Clientes</h4>
                            <h3 class="my-3" style="font-size:16px;">0</h3>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-white bg-opacity-25 text-white rounded rounded-3 fs-3 widget-icon-box-avatar shadow">
                                <i class="ri-account-box-fill"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-3 col-xl-2 mb-3">
            <div class="card widget-icon-box neo-card neo-primary">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div class="flex-grow-1 overflow-hidden">
                            <h4 class="text-uppercase fs-13 mt-0">Total de Vendas</h4>
                            <h3 class="my-3" style="font-size:16px;">R$ 0,00</h3>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-white bg-opacity-25 text-white rounded rounded-3 fs-3 widget-icon-box-avatar shadow">
                                <i class="ri-shopping-cart-fill"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-3 col-xl-2 mb-3">
            <div class="card widget-icon-box neo-card neo-warning">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div class="flex-grow-1 overflow-hidden">
                            <h4 class="text-uppercase fs-13 mt-0">Total de Compras</h4>
                            <h3 class="my-3" style="font-size:16px;">R$ 0,00</h3>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-white bg-opacity-25 text-white rounded rounded-3 fs-3 widget-icon-box-avatar shadow">
                                <i class="ri-shopping-bag-2-fill"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <hr>

    <div class="row mt-1">
        <div class="col-12 col-lg-4 col-xl-4 mb-3">
            <div class="card widget-icon-box neo-card neo-dark" style="height:180px">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div class="flex-grow-1 overflow-hidden">
                            <h4 class="text-uppercase fs-13 mt-0">Saldo Total Atualizado</h4>
                            <h3 class="my-3" style="font-size:22px;">R$ 0,00</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-4 col-xl-4 mb-3">
            <div class="card widget-icon-box neo-card neo-dark">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div class="flex-grow-1 overflow-hidden">
                            <h4 class="text-uppercase fs-13 mt-0">Recebidos</h4>
                            <h3 style="font-size:22px;">R$ 0,00</h3>
                            <h3 class="my-3" style="font-size:17px;">A Receber <strong>R$ 0,00</strong></h3>
                            <a class="btn w-100 btn-sm btn-light disabled">NOVO RECEBIMENTO</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-4 col-xl-4 mb-3">
            <div class="card widget-icon-box neo-card neo-dark">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div class="flex-grow-1 overflow-hidden">
                            <h4 class="text-uppercase fs-13 mt-0">Pagos</h4>
                            <h3 style="font-size:22px;">R$ 0,00</h3>
                            <h3 class="my-3" style="font-size:17px;">A Pagar <strong>R$ 0,00</strong></h3>
                            <a class="btn w-100 btn-sm btn-light disabled">NOVO PAGAMENTO</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection