@extends('index')
@section('estilos')
    <link rel="stylesheet" href="/files/calendario/css/bootstrap-datepicker.standalone.css?v={{ date('d-m-Y h:i:s') }}">
@endsection
@section('contenido')
<div class="container-fluid" style="padding: 0.5rem; margin-top: -10px;">

    <div class="card mb-2">
        <div class="card-body p-2">
            <div class="d-flex justify-content-between align-items-center flex-wrap">
                <div class="mb-1 mb-sm-0">
                    <h6 class="mb-0">
                        <span class="text-muted">CAJA:</span>
                        <span class="text-primary font-weight-bold">{{ $caja['descripCaja'] }}</span>
                    </h6>
                </div>
                <div class="text-muted" style="font-size: 0.85rem;">
                    {{ date('d/m/Y') }}
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-2">
        <div class="card-body p-2">
            <form id="frmActualizar">
                <div class="row">
                    <div class="col-md-3 col-6 mb-2 mb-md-0">
                        <button type="button" class="form-control btn btn-primary" onclick="AbrirModalCaja()">
                            <i class="fas fa-search"></i> Elegir caja
                        </button>
                    </div>
                    <div class="col-md-3 col-6">
                        <button type="submit" class="form-control btn btn-primary">
                            <i class="fas fa-bolt"></i> Actualizar
                        </button>
                    </div>
                    <input type="text" name="cd" id="cd" hidden>
                </div>
            </form>
        </div>
    </div>

    <div id="vista-efectiva">
        <div class="card mb-2">
            <div class="card-header bg-success text-white p-2">
                <h6 class="mb-0"><i class="fas fa-arrow-down"></i> INGRESOS</h6>
            </div>
            <div class="card-body p-2">
                <table class="table table-sm table-borderless mb-0">
                    <tbody>
                        <tr>
                            <td class="text-start">SALDO INICIAL S/.</td>
                            <td class="text-end fw-bold text-success">S/. {{ number_format($caja['saldoinicial'], 2, '.', '') }}</td>
                        </tr>
                        <tr>
                            <td class="text-start">+ INGRESOS S/.</td>
                            <td class="text-end fw-bold">S/. {{ number_format($caja['ingresos'], 2, '.', '') }}</td>
                        </tr>
                        <tr>
                            <td class="text-start">+ VENTAS S/.</td>
                            <td class="text-end fw-bold">S/. {{ number_format($caja['ventas'], 2, '.', '') }}</td>
                        </tr>
                        <tr class="border-top">
                            <td class="text-start fw-bold">TOTAL INGRESOS S/.</td>
                            <td class="text-end fw-bold text-success">
                                S/. {{ number_format($caja['saldoinicial'] + $caja['ingresos'] + $caja['ventas'], 2, '.', '') }}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card mb-2">
            <div class="card-header bg-danger text-white p-2">
                <h6 class="mb-0"><i class="fas fa-arrow-up"></i> EGRESOS</h6>
            </div>
            <div class="card-body p-2">
                <table class="table table-sm table-borderless mb-0">
                    <tbody>
                        <tr>
                            <td class="text-start">- EGRESOS S/.</td>
                            <td class="text-end fw-bold text-danger">S/. {{ number_format($caja['egresos'], 2, '.', '') }}</td>
                        </tr>
                        <tr>
                            <td class="text-start">- YAPE S/.</td>
                            <td class="text-end fw-bold">S/. {{ number_format($caja['yape'], 2, '.', '') }}</td>
                        </tr>
                        <tr>
                            <td class="text-start">- TARJETA S/.</td>
                            <td class="text-end fw-bold">S/. {{ number_format($caja['tarjeta'], 2, '.', '') }}</td>
                        </tr>
                        <tr>
                            <td class="text-start">- PLIM S/.</td>
                            <td class="text-end fw-bold">S/. {{ number_format($caja['plim'], 2, '.', '') }}</td>
                        </tr>
                        <tr>
                            <td class="text-start">- TRANSFERENCIA S/.</td>
                            <td class="text-end fw-bold">S/. {{ number_format($caja['transferencia'], 2, '.', '') }}</td>
                        </tr>
                        <tr class="border-top">
                            <td class="text-start fw-bold">TOTAL EGRESOS S/.</td>
                            <td class="text-end fw-bold text-danger">
                                S/. {{ number_format($caja['egresos'] + $caja['yape'] + $caja['tarjeta'] + $caja['plim'] + $caja['transferencia'], 2, '.', '') }}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card mb-2 border-warning">
            <div class="card-body p-2 bg-warning bg-opacity-25">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 text-dark">TOTAL EFECTIVO:</h5>
                    <h4 class="mb-0 fw-bold text-dark">S/. {{ number_format($caja['totalCaja'], 2, '.', '') }}</h4>
                </div>
            </div>
        </div>
    </div>

</div>

@include('Caja.modalBuscarCaja')
@endsection

@section('scripts')
    <script src="/files/calendario/js/bootstrap-datepicker.min.js?v={{ date('d-m-Y h:i:s') }}"></script>
    <script src="/files/calendario/locales/bootstrap-datepicker.es.min.js?v={{ date('d-m-Y h:i:s') }}"></script>
    <script src="/files/newJS/Caja.js?v={{ date('d-m-Y h:i:s') }}"></script>
@endsection