@extends('layouts.admin-Lti')
@section('title', '-Produtos para Faturação')

@section('content')

<section class="content col-md-12">

    {{-- Breadcrumb --}}
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item">
            <a>
                <span>{{ session()->get('infosession')[0]->TIpoSistema }}</span>
            </a>
        </li>

        <li class="breadcrumb-item active">
            <span><b>Estoque</b></span>
        </li>
    </ol>

    {{-- Cabeçalho --}}
    <div class="card border-0 shadow-sm mb-4 header-card">

        <div class="card-body">

            <div class="d-flex align-items-center">

                <div class="mr-3">
                    <div class="header-icon">
                        <i class="fa fa-cash-register"></i>
                    </div>
                </div>

                <div>
                    <h4 class="mb-1 font-weight-bold">
                        Gestão de Caixa
                    </h4>

                    <p class="text-muted mb-0">
                        Selecione uma operação para continuar
                    </p>
                </div>

            </div>

        </div>

    </div>

    {{-- OPERAÇÕES --}}
    <div class="row">

        {{-- LOJAS --}}
        @foreach ($loja as $lojaItem)

            <div class="col-xl-3 col-lg-4 col-md-6 mb-4">

                <a href="{{ route('loja.index', $lojaItem->id) }}" class="operation-card card-loja">

                    <div class="operation-icon loja">
                        <i class="fa fa-store"></i>
                    </div>

                    <div class="operation-content">
                        <h5> │ 🏪{{ $lojaItem->Descricao }}</h5>
                        <span class="card-action">
                            Faturação <i class="fa fa-arrow-right ml-1"></i>
                        </span>
                    </div>

                </a>

            </div>

        @endforeach

        {{-- REFORÇO --}}
         
        <div class="col-xl-3 col-lg-4 col-md-6 mb-4">

            <a href="{{ route('caixa.refrorcoindex') }}" class="operation-card card-reforco">

                <div class="operation-icon reforco">
                    <i class="fa fa-plus-d"></i>
                </div>

                <div class="operation-content">
                    <h5>│ ➕ Reforço</h5>
                    <span class="card-action">
                        Adicionar dinheiro <i class="fa fa-arrow-right ml-1"></i>
                    </span>
                </div>

            </a>

        </div>
     

        {{-- SAÍDAS --}}
        <div class="col-xl-3 col-lg-4 col-md-6 mb-4">

            <a href="{{ route('caixa.saidaindex') }}" class="operation-card card-saida">

                <div class="operation-icon saida">
                    <i class="fa fa-money-bill-wave"></i>
                </div>

                <div class="operation-content">
                    <h5>│ 💵 Saídas</h5>
                    <span class="card-action">
                        Registrar saída <i class="fa fa-arrow-right ml-1"></i>
                    </span>
                </div>

            </a>

        </div>

        {{-- AJUSTES --}}
        <div class="col-xl-3 col-lg-4 col-md-6 mb-4">

            <a href="{{ route('caixa.ajusteindex') }}" class="operation-card card-ajuste">

                <div class="operation-icon ajuste">
                    <i class="fa fa-sliders-h"></i>
                </div>

                <div class="operation-content">
                    <h5> │ ⚙ Ajustes</h5>
                    <span class="card-action">
                        Corrigir diferenças <i class="fa fa-arrow-right ml-1"></i>
                    </span>
                </div>

            </a>

        </div>

    </div>

    {{-- RESUMO --}}
    <div class="card border-0 shadow-sm mt-3 summary-card">

        <div class="card-body px-4 py-4">

            <div class="row">

                <div class="col-md-4 mb-3 mb-md-0">
                    <div class="d-flex align-items-center justify-content-center">
                        <div class="stat-icon stat-icon-success mr-3">
                            <i class="fa fa-arrow-down"></i>
                        </div>
                        <div>
                            <div class="stat-label">Entradas</div>
                            <div class="stat-value text-success">0,00 MT</div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mb-3 mb-md-0">
                    <div class="d-flex align-items-center justify-content-center">
                        <div class="stat-icon stat-icon-danger mr-3">
                            <i class="fa fa-arrow-up"></i>
                        </div>
                        <div>
                            <div class="stat-label">Saídas</div>
                            <div class="stat-value text-danger">0,00 MT</div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="d-flex align-items-center justify-content-center">
                        <div class="stat-icon stat-icon-primary mr-3">
                            <i class="fa fa-wallet"></i>
                        </div>
                        <div>
                            <div class="stat-label">Saldo do Caixa</div>
                            <div class="stat-value text-primary">0,00 MT</div>
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>

</section>

@push('styles')

<style>
    /* ==============================
       FONTE MODERNA
    ============================== */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

    .content {
        font-family: 'Inter', sans-serif;
    }

    /* ==============================
       CABEÇALHO
    ============================== */
    .header-card {
        background: linear-gradient(145deg, #ffffff, #f8faff);
        border-radius: 24px !important;
        border: 1px solid #f0f4fe !important;
        transition: all 0.3s ease;
    }

    .header-icon {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 18px;
        background: linear-gradient(135deg, #eef4ff, #dce7ff);
        color: #2f6fed;
        font-size: 28px;
        box-shadow: 0 6px 15px rgba(47, 111, 237, 0.15);
        transition: all 0.3s ease;
    }

    .header-card:hover .header-icon {
        transform: scale(1.05) rotate(-3deg);
    }

    /* ==============================
       BREADCRUMB
    ============================== */
    .breadcrumb {
        background: transparent;
        padding: 0.5rem 0;
        font-size: 0.95rem;
    }
    .breadcrumb-item.active {
        color: #1a2332;
    }

    /* ==============================
       CARTÕES DAS OPERAÇÕES
    ============================== */
    .operation-card {
        background: #ffffff;
        border: 1px solid #edf2f9;
        border-radius: 24px;
        padding: 24px 22px;
        display: flex;
        align-items: center;
        text-decoration: none !important;
        min-height: 130px;
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.03);
        transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    /* Faixa lateral colorida (escondida por padrão) */
    .operation-card::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 6px;
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: 24px 0 0 24px;
    }

    .operation-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
        border-color: transparent;
    }

    .operation-card:hover::after {
        opacity: 1;
    }

    /* Cores das faixas laterais */
    .card-loja::after { background: linear-gradient(180deg, #3678e8, #1a4fbf); }
    .card-reforco::after { background: linear-gradient(180deg, #28a745, #1a7a32); }
    .card-saida::after { background: linear-gradient(180deg, #dc3545, #a71d2a); }
    .card-ajuste::after { background: linear-gradient(180deg, #f39c12, #c5800e); }

    /* ==============================
       ÍCONES
    ============================== */
    .operation-icon {
        width: 60px;
        height: 60px;
        min-width: 60px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        margin-right: 18px;
        transition: all 0.3s ease;
    }

    .operation-card:hover .operation-icon {
        transform: scale(1.05);
    }

    .operation-icon.loja {
        background: linear-gradient(135deg, #e6f0ff, #c7dcff);
        color: #1a5fc7;
        box-shadow: 0 6px 12px rgba(26, 95, 199, 0.15);
    }

    .operation-icon.reforco {
        background: linear-gradient(135deg, #e0f6e8, #b8e6cd);
        color: #0f8a40;
        box-shadow: 0 6px 12px rgba(15, 138, 64, 0.15);
    }

    .operation-icon.saida {
        background: linear-gradient(135deg, #fce7ea, #fbc4ca);
        color: #c52a3a;
        box-shadow: 0 6px 12px rgba(197, 42, 58, 0.15);
    }

    .operation-icon.ajuste {
        background: linear-gradient(135deg, #fef3e0, #fce3b6);
        color: #d48a0b;
        box-shadow: 0 6px 12px rgba(212, 138, 11, 0.15);
    }

    /* ==============================
       TEXTO DOS CARDS
    ============================== */
    .operation-content h5 {
        margin: 0 0 8px;
        font-weight: 700;
        font-size: 1.1rem;
        color: #1a2332;
        letter-spacing: -0.3px;
    }

    .card-action {
        display: inline-flex;
        align-items: center;
        background: #f4f7fc;
        padding: 4px 14px 4px 14px;
        border-radius: 50px;
        font-size: 0.8rem;
        font-weight: 500;
        color: #4a5a72;
        transition: all 0.3s ease;
        border: 1px solid transparent;
    }

    .operation-card:hover .card-action {
        background: #ffffff;
        border-color: #dce3ef;
        color: #1a2332;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    }

    .card-action i {
        font-size: 0.7rem;
    }

    /* ==============================
       RESUMO / ESTATÍSTICAS
    ============================== */
    .summary-card {
        border-radius: 24px !important;
        background: #ffffff;
        border: 1px solid #edf2f9 !important;
    }

    .stat-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }

    .stat-icon-success {
        background: #e3f5ec;
        color: #0d9e4e;
    }

    .stat-icon-danger {
        background: #fde7e9;
        color: #d63944;
    }

    .stat-icon-primary {
        background: #e6f0ff;
        color: #1a5fc7;
    }

    .stat-label {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        font-weight: 600;
        color: #7b8a9f;
        margin-bottom: 2px;
    }

    .stat-value {
        font-weight: 800;
        font-size: 1.6rem;
        letter-spacing: -0.5px;
        line-height: 1.2;
    }

    .stat-value.text-success { color: #0d9e4e !important; }
    .stat-value.text-danger { color: #d63944 !important; }
    .stat-value.text-primary { color: #1a5fc7 !important; }

    /* ==============================
       RESPONSIVO
    ============================== */
    @media (max-width: 768px) {

        .operation-card {
            min-height: 110px;
            padding: 18px;
        }

        .operation-icon {
            width: 50px;
            height: 50px;
            min-width: 50px;
            font-size: 20px;
            margin-right: 14px;
        }

        .stat-value {
            font-size: 1.3rem;
        }

        .stat-icon {
            width: 40px;
            height: 40px;
            min-width: 40px;
            font-size: 16px;
        }

        .summary-card .d-flex {
            flex-direction: row !important;
            justify-content: flex-start !important;
        }
    }

    @media (max-width: 576px) {
        .operation-content h5 {
            font-size: 1rem;
        }
        .card-action {
            font-size: 0.7rem;
            padding: 2px 10px;
        }
    }
</style>

@endpush

@push('scripts')

<script>
    // Aqui podes futuramente colocar:
    // - abertura de caixa
    // - reforço
    // - sangria
    // - despesas
    // - devoluções
    // - ajustes
    // - fechamento de caixa
</script>

@endpush

@endsection