```blade
@extends('layouts.admin-Lti')
@section('title', '-Reforço de Caixa')

@section('content')

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

    {{-- Breadcrumb --}}
    <ol class="breadcrumb mb-3">

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

        <li class="breadcrumb-item">
            <a>Caixa</a>
        </li>

        <li class="breadcrumb-item active">
            <b>Reforço</b>
        </li>

    </ol>


    {{-- TÍTULO --}}
    <div class="card border-0 shadow-sm mb-4">

        <div class="card-body">

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

                <div class="reforco-header-icon mr-3">
                    <i class="fas fa-plus"></i>
                </div>

                <div>

                    <h4 class="mb-1 font-weight-bold">
                        Reforço de Caixa
                    </h4>

                    <p class="text-muted mb-0">
                        Adicione dinheiro ao caixa e registe a origem do valor.
                    </p>

                </div>

            </div>

        </div>

    </div>


    <div class="row">

        {{-- FORMULÁRIO --}}
        <div class="col-lg-8">

            <div class="card border-0 shadow-sm">

                <div class="card-header bg-white border-0 pt-4 px-4">

                    <h5 class="font-weight-bold mb-1">
                        <i class="fas fa-money-bill-wave text-success mr-2"></i>
                        Dados do Reforço
                    </h5>

                    <small class="text-muted">
                        Preencha os dados abaixo para registar o movimento.
                    </small>

                </div>


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

                    <form method="POST" action="#">

                        @csrf

                        <div class="row">

                            {{-- CAIXA --}}
                            <div class="col-md-6 mb-3">

                                <label class="font-weight-bold">
                                    Caixa
                                </label>

                                <select
                                    name="caixa_id"
                                    class="form-control">

                                    <option value="">
                                        Selecionar caixa
                                    </option>

                                    @foreach ($loja as $lojaItem)

                                        <option value="{{ $lojaItem->id }}">
                                            {{ $lojaItem->Descricao }}
                                        </option>

                                    @endforeach

                                </select>

                            </div>


                            {{-- VALOR --}}
                            <div class="col-md-6 mb-3">

                                <label class="font-weight-bold">
                                    Valor do Reforço
                                </label>

                                <div class="input-group">

                                    <input
                                        type="number"
                                        name="valor"
                                        id="valor"
                                        class="form-control form-control-lg"
                                        min="0.01"
                                        step="0.01"
                                        placeholder="0,00"
                                        required>

                                    <div class="input-group-append">
                                        <span class="input-group-text font-weight-bold">
                                            MT
                                        </span>
                                    </div>

                                </div>

                            </div>


                            {{-- ORIGEM --}}
                            <div class="col-md-6 mb-3">

                                <label class="font-weight-bold">
                                    Origem do Dinheiro
                                </label>

                                <select
                                    name="origem"
                                    class="form-control"
                                    required>

                                    <option value="">
                                        Selecionar origem
                                    </option>

                                    <option value="cofre">
                                        Cofre
                                    </option>

                                    <option value="tesouraria">
                                        Tesouraria
                                    </option>

                                    <option value="responsavel">
                                        Responsável do Caixa
                                    </option>

                                    <option value="outro">
                                        Outra origem
                                    </option>

                                </select>

                            </div>


                            {{-- REFERÊNCIA --}}
                            <div class="col-md-6 mb-3">

                                <label class="font-weight-bold">
                                    Referência
                                    <small class="text-muted">(opcional)</small>
                                </label>

                                <input
                                    type="text"
                                    name="referencia"
                                    class="form-control"
                                    placeholder="Ex.: REF-000125">

                            </div>


                            {{-- OBSERVAÇÃO --}}
                            <div class="col-md-12 mb-4">

                                <label class="font-weight-bold">
                                    Observação
                                </label>

                                <textarea
                                    name="descricao"
                                    class="form-control"
                                    rows="3"
                                    placeholder="Descreva o motivo do reforço..."></textarea>

                            </div>

                        </div>


                        {{-- BOTÕES --}}
                        <div class="d-flex justify-content-end">

                            <a
                                href="{{ url()->previous() }}"
                                class="btn btn-light mr-2">

                                <i class="fas fa-times mr-1"></i>
                                Cancelar

                            </a>


                            <button
                                type="submit"
                                class="btn btn-success px-4">

                                <i class="fas fa-check mr-1"></i>
                                Confirmar Reforço

                            </button>

                        </div>

                    </form>

                </div>

            </div>

        </div>


        {{-- RESUMO DO CAIXA --}}
        <div class="col-lg-4">

            <div class="card border-0 shadow-sm mb-4">

                <div class="card-body">

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

                        <div>

                            <small class="text-muted">
                                Saldo Atual
                            </small>

                            <h3 class="font-weight-bold mt-1 mb-0">
                                15.000,00 MT
                            </h3>

                        </div>

                        <div class="saldo-icon">
                            <i class="fas fa-wallet"></i>
                        </div>

                    </div>

                </div>

            </div>


            {{-- PREVISÃO --}}
            <div class="card border-0 shadow-sm">

                <div class="card-body">

                    <h6 class="font-weight-bold mb-3">
                        <i class="fas fa-calculator mr-2"></i>
                        Resumo
                    </h6>


                    <div class="resumo-linha">

                        <span>Saldo atual</span>

                        <strong>
                            15.000,00 MT
                        </strong>

                    </div>


                    <div class="resumo-linha">

                        <span>Reforço</span>

                        <strong
                            id="resumoReforco"
                            class="text-success">

                            0,00 MT

                        </strong>

                    </div>


                    <hr>


                    <div class="resumo-total">

                        <span>Novo saldo</span>

                        <strong id="novoSaldo">
                            15.000,00 MT
                        </strong>

                    </div>

                </div>

            </div>


            {{-- AVISO --}}
            <div class="alert alert-info mt-4 border-0">

                <i class="fas fa-info-circle mr-2"></i>

                O reforço aumenta o saldo disponível do caixa,
                mas não é considerado uma venda.

            </div>

        </div>

    </div>

</section>


@push('styles')

<style>

    .reforco-header-icon {

        width: 55px;
        height: 55px;

        border-radius: 14px;

        display: flex;
        align-items: center;
        justify-content: center;

        background: #eaf8ef;
        color: #28a745;

        font-size: 24px;
    }


    .saldo-icon {

        width: 50px;
        height: 50px;

        border-radius: 12px;

        display: flex;
        align-items: center;
        justify-content: center;

        background: #eef4ff;
        color: #3678e8;

        font-size: 21px;
    }


    .resumo-linha {

        display: flex;
        justify-content: space-between;

        padding: 9px 0;

        color: #6c757d;
    }


    .resumo-linha strong {

        color: #343a40;
    }


    .resumo-total {

        display: flex;
        justify-content: space-between;

        align-items: center;

        font-size: 16px;
    }


    .resumo-total strong {

        font-size: 19px;

        color: #28a745;
    }


    .form-control {

        border-radius: 8px;
    }


    .btn {

        border-radius: 8px;
    }

</style>

@endpush


@push('scripts')

<script>

    const valor = document.getElementById('valor');

    const resumoReforco = document.getElementById('resumoReforco');

    const novoSaldo = document.getElementById('novoSaldo');

    const saldoAtual = 15000;


    valor.addEventListener('input', function () {

        let reforco = parseFloat(this.value) || 0;

        let novo = saldoAtual + reforco;


        resumoReforco.innerText =
            reforco.toLocaleString('pt-PT', {
                minimumFractionDigits: 2
            }) + ' MT';


        novoSaldo.innerText =
            novo.toLocaleString('pt-PT', {
                minimumFractionDigits: 2
            }) + ' MT';

    });

</script>

@endpush

@endsection
```