@extends('layouts.admin-Lti')
@section('title', '-Ajuste 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>Ajuste</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="ajuste-header-icon mr-3">
                    <i class="fas fa-sliders-h"></i>
                </div>

                <div>

                    <h4 class="mb-1 font-weight-bold">
                        Ajuste de Caixa
                    </h4>

                    <p class="text-muted mb-0">
                        Registe uma diferença identificada durante a conferência 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-edit text-warning mr-2"></i>

                        Dados do Ajuste

                    </h5>

                    <small class="text-muted">
                        Informe a diferença e justifique o motivo do ajuste.
                    </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 AJUSTE --}}
                            <div class="col-md-6 mb-3">

                                <label class="font-weight-bold">
                                    Tipo de Ajuste
                                </label>

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

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

                                    <option value="positivo">
                                        Ajuste Positivo (+)
                                    </option>

                                    <option value="negativo">
                                        Ajuste Negativo (-)
                                    </option>

                                </select>

                            </div>


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

                                <label class="font-weight-bold">
                                    Valor da Diferença
                                </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>


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

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

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

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

                                    <option value="erro_registo">
                                        Erro de registo
                                    </option>

                                    <option value="diferenca_contagem">
                                        Diferença na contagem
                                    </option>

                                    <option value="troco">
                                        Erro no troco
                                    </option>

                                    <option value="movimento_nao_registado">
                                        Movimento não registado
                                    </option>

                                    <option value="outro">
                                        Outro
                                    </option>

                                </select>

                            </div>


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

                                <label class="font-weight-bold">
                                    Saldo Esperado
                                </label>

                                <div class="input-group">

                                    <input
                                        type="text"
                                        class="form-control"
                                        value="15.000,00"
                                        readonly>

                                    <div class="input-group-append">

                                        <span class="input-group-text">
                                            MT
                                        </span>

                                    </div>

                                </div>

                            </div>


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

                                <label class="font-weight-bold">
                                    Saldo Contado
                                </label>

                                <div class="input-group">

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

                                    <div class="input-group-append">

                                        <span class="input-group-text">
                                            MT
                                        </span>

                                    </div>

                                </div>

                            </div>


                            {{-- REFERÊNCIA --}}
                            <div class="col-md-12 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.: AJ-000125">

                            </div>


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

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

                                    Justificação do Ajuste

                                </label>

                                <textarea
                                    name="descricao"
                                    class="form-control"
                                    rows="4"
                                    required
                                    placeholder="Explique detalhadamente por que existe esta diferença..."></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-warning px-4">

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

                                Confirmar Ajuste

                            </button>

                        </div>

                    </form>

                </div>

            </div>

        </div>


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


            {{-- SALDO ATUAL --}}
            <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>


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

                <div class="card-body">

                    <h6 class="font-weight-bold mb-3">

                        <i class="fas fa-balance-scale mr-2"></i>

                        Conferência

                    </h6>


                    <div class="resumo-linha">

                        <span>
                            Saldo esperado
                        </span>

                        <strong>
                            15.000,00 MT
                        </strong>

                    </div>


                    <div class="resumo-linha">

                        <span>
                            Saldo contado
                        </span>

                        <strong id="resumoContado">
                            0,00 MT
                        </strong>

                    </div>


                    <hr>


                    <div class="diferenca-box">

                        <small>
                            Diferença encontrada
                        </small>

                        <h3 id="diferenca">
                            0,00 MT
                        </h3>

                    </div>

                </div>

            </div>


            {{-- AVISO --}}
            <div class="alert alert-warning border-0">

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

                <strong>Atenção!</strong>

                <p class="mb-0 mt-2">

                    O ajuste deve ser utilizado somente para
                    corrigir diferenças identificadas na conferência
                    do caixa.

                </p>

            </div>

        </div>

    </div>

</section>


@push('styles')

<style>

    /* ==============================
       CABEÇALHO
    ============================== */

    .ajuste-header-icon {

        width: 55px;
        height: 55px;

        border-radius: 14px;

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

        background: #fff7e6;

        color: #f39c12;

        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;

    }


    /* ==============================
       DIFERENÇA
    ============================== */

    .diferenca-box {

        text-align: center;

        padding: 15px;

        border-radius: 10px;

        background: #fff8e8;

    }


    .diferenca-box small {

        color: #856404;

    }


    .diferenca-box h3 {

        margin: 5px 0 0;

        font-weight: 700;

        color: #f39c12;

    }


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

    .form-control {

        border-radius: 8px;

    }


    .btn {

        border-radius: 8px;

    }

</style>

@endpush


@push('scripts')

<script>

    const saldoEsperado = 15000;

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

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

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


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

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


        let diferencaValor =
            contado - saldoEsperado;


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


        if (diferencaValor > 0) {

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

        }

        else if (diferencaValor < 0) {

            diferenca.innerText =
                '- ' +
                Math.abs(diferencaValor).toLocaleString('pt-PT', {
                    minimumFractionDigits: 2
                }) +
                ' MT';

        }

        else {

            diferenca.innerText =
                '0,00 MT';

        }

    });

</script>

@endpush

@endsection