@extends('layouts.admin-Lti')
@section('title', '-Saída 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>Saída</b>
        </li>

    </ol>


    {{-- CABEÇALHO --}}
    <div class="card border-0 shadow-sm mb-4">

        <div class="card-body">

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

                <div class="saida-header-icon mr-3">
                    <i class="fas fa-money-bill-wave"></i>
                </div>

                <div>

                    <h4 class="mb-1 font-weight-bold">
                        Saída de Caixa
                    </h4>

                    <p class="text-muted mb-0">
                        Registe uma saída de dinheiro do caixa.
                    </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-arrow-circle-up text-danger mr-2"></i>

                        Dados da Saída

                    </h5>

                    <small class="text-muted">
                        Informe o motivo e o valor que será retirado do caixa.
                    </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"
                                    required>

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

                                    @foreach ($loja as $lojaItem)

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

                                            {{ $lojaItem->Descricao }}

                                        </option>

                                    @endforeach

                                </select>

                            </div>


                            {{-- TIPO DE SAÍDA --}}
                            <div class="col-md-6 mb-3">

                                <label class="font-weight-bold">
                                    Tipo de Saída
                                </label>

                                <select
                                    name="tipo"
                                    id="tipoSaida"
                                    class="form-control"
                                    required>

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

                                    <option value="despesa">
                                        💳 Despesa
                                    </option>

                                    <option value="sangria">
                                        🏦 Sangria
                                    </option>

                                    <option value="devolucao">
                                        🔄 Devolução
                                    </option>

                                </select>

                            </div>


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

                                <label class="font-weight-bold">
                                    Valor da Saída
                                </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>


                            {{-- CATEGORIA --}}
                            <div
                                class="col-md-6 mb-3"
                                id="campoCategoria">

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

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

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

                                    <option value="transporte">
                                        Transporte
                                    </option>

                                    <option value="agua">
                                        Água
                                    </option>

                                    <option value="energia">
                                        Energia
                                    </option>

                                    <option value="internet">
                                        Internet
                                    </option>

                                    <option value="material">
                                        Material de escritório
                                    </option>

                                    <option value="limpeza">
                                        Limpeza
                                    </option>

                                    <option value="manutencao">
                                        Manutenção
                                    </option>

                                    <option value="outros">
                                        Outros
                                    </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>


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

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

                                <input
                                    type="text"
                                    name="destino"
                                    class="form-control"
                                    placeholder="Ex.: Cofre / Fornecedor / Cliente">

                            </div>


                            {{-- VENDA --}}
                            <div
                                class="col-md-12 mb-3"
                                id="campoVenda"
                                style="display:none;">

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

                                    Venda relacionada

                                    <small class="text-muted">
                                        (para devolução)
                                    </small>

                                </label>

                                <input
                                    type="text"
                                    name="venda_id"
                                    class="form-control"
                                    placeholder="Informe o número da venda">

                            </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 da saída..."></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-danger px-4">

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

                                Confirmar Saída

                            </button>

                        </div>

                    </form>

                </div>

            </div>

        </div>


        {{-- PAINEL DIREITO --}}
        <div class="col-lg-4">


            {{-- SALDO --}}
            <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"
                                id="saldoAtual">

                                15.000,00 MT

                            </h3>

                        </div>


                        <div class="saldo-icon">

                            <i class="fas fa-wallet"></i>

                        </div>

                    </div>

                </div>

            </div>


            {{-- RESUMO --}}
            <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 da Operação

                    </h6>


                    <div class="resumo-linha">

                        <span>
                            Saldo atual
                        </span>

                        <strong>
                            15.000,00 MT
                        </strong>

                    </div>


                    <div class="resumo-linha">

                        <span>
                            Saída
                        </span>

                        <strong
                            id="resumoSaida"
                            class="text-danger">

                            - 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>


            {{-- ALERTA --}}
            <div class="alert alert-warning border-0 mt-4">

                <i class="fas fa-exclamation-triangle mr-2"></i>

                Confirme o valor antes de efetuar a saída.
                Depois de confirmada, a operação ficará registada no caixa.

            </div>

        </div>

    </div>

</section>


@push('styles')

<style>

    /* ==============================
       ÍCONE DO CABEÇALHO
    ============================== */

    .saida-header-icon {

        width: 55px;
        height: 55px;

        border-radius: 14px;

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

        background: #fff0f0;

        color: #dc3545;

        font-size: 24px;

    }


    /* ==============================
       SALDO
    ============================== */

    .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
    ============================== */

    .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: #dc3545;

    }


    /* ==============================
       FORMULÁRIO
    ============================== */

    .form-control {

        border-radius: 8px;

    }


    .btn {

        border-radius: 8px;

    }

</style>

@endpush


@push('scripts')

<script>

    /*
    |--------------------------------------------------------------------------
    | SALDO ATUAL
    |--------------------------------------------------------------------------
    */

    const saldoAtual = 15000;


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

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

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

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

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

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


    /*
    |--------------------------------------------------------------------------
    | CALCULAR NOVO SALDO
    |--------------------------------------------------------------------------
    */

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

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

        let novo = saldoAtual - saida;


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


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


        /*
        | Não permitir saída superior ao saldo
        */

        if (saida > saldoAtual) {

            novoSaldo.innerText = 'Saldo insuficiente';

        }

    });


    /*
    |--------------------------------------------------------------------------
    | ALTERAR CAMPOS CONFORME TIPO
    |--------------------------------------------------------------------------
    */

    tipoSaida.addEventListener('change', function () {

        let tipo = this.value;


        // Despesa
        if (tipo === 'despesa') {

            campoCategoria.style.display = 'block';

            campoVenda.style.display = 'none';

        }


        // Sangria
        else if (tipo === 'sangria') {

            campoCategoria.style.display = 'none';

            campoVenda.style.display = 'none';

        }


        // Devolução
        else if (tipo === 'devolucao') {

            campoCategoria.style.display = 'none';

            campoVenda.style.display = 'block';

        }


        else {

            campoCategoria.style.display = 'block';

            campoVenda.style.display = 'none';

        }

    });

</script>

@endpush

@endsection