@extends('admin.layouts.app')

@push('styles')
@endpush

@section('title', 'Nova Movimentação')

@section('content')
    <main class="page-content">
        @can('escrever-movimentacoes')
            <!--breadcrumb-->
            <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
                <div class="breadcrumb-title pe-3">Movimentações</div>
                <div class="ps-3">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0 p-0">
                            <li class="breadcrumb-item"><a href="{{ route('inicio') }}"><i class="bx bx-home-alt"></i></a></li>
                            <li class="breadcrumb-item"><a href="{{ route('movimentacoes.index') }}">Movimentações</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Nova Movimentação</li>
                        </ol>
                    </nav>
                </div>
            </div>
            <!--end breadcrumb-->

            <div class="card shadow-sm radius-10 border-0">
                <div class="card-body">
                    <form action="{{ route('movimentacoes.store') }}" method="POST">
                        @csrf

                        @php
                            $tiposOptions = ['entrada' => 'Entrada', 'saida' => 'Saída'];
                            $itensOptions = $itens->where('estado', 'activo')->mapWithKeys(function($item) {
                                return [$item->id => $item->nome . ' (' . $item->numero_item . ')'];
                            })->toArray();
                            $fornecedoresOptions = $fornecedores->mapWithKeys(function($f) {
                                $total = $f->total_pago_ano_corrente ?? 0;
                                $label = $f->nome . ' (Total ' . date('Y') . ': ' . number_format($total, 2, ',', '.') . ' Kz)';
                                return [$f->id => $label];
                            })->toArray();
                            $depositosOptions = $depositos->pluck('nome', 'id')->toArray();
                        @endphp

                        <div class="row">
                            <div class="col-md-6">
                                <x-admin.components.form-group
                                    label="Tipo"
                                    name="tipo"
                                    type="select"
                                    :required="true"
                                    :options="$tiposOptions"
                                />
                            </div>
                            <div class="col-md-6">
                                <x-admin.components.form-group
                                    label="Item"
                                    name="item_id"
                                    type="select"
                                    :required="true"
                                    :options="$itensOptions"
                                />
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <x-admin.components.form-group
                                    label="Quantidade"
                                    name="quantidade"
                                    type="number"
                                    :required="true"
                                    placeholder="0"
                                />
                            </div>
                            <div class="col-md-4">
                                <x-admin.components.form-group
                                    label="Preço Unitário (Kz)"
                                    name="preco_unitario"
                                    type="number"
                                    :required="true"
                                    placeholder="0.00"
                                />
                            </div>
                            <div class="col-md-4">
                                <x-admin.components.form-group
                                    label="Data da Movimentação"
                                    name="data_mov"
                                    type="datetime-local"
                                    :required="true"
                                />
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6" id="fornecedor-field">
                                <x-admin.components.form-group
                                    label="Fornecedor"
                                    name="fornecedor_id"
                                    type="select"
                                    :options="$fornecedoresOptions"
                                    help="Só são listados fornecedores abaixo do limite anual de {{ number_format(config('app.fornecedor_limite_anual'), 2, ',', '.') }} Kz e que não tenham o estado 'SUSPENSO' na AGT."
                                />
                            </div>
                            <div class="col-md-6" id="deposito-field">
                                <x-admin.components.form-group
                                    label="Depósito"
                                    name="deposito_id"
                                    type="select"
                                    :required="true"
                                    :options="$depositosOptions"
                                    help="Depósito onde a movimentação ocorre"
                                />
                            </div>
                        </div>

                        <x-admin.components.form-group
                            label="Justificativa"
                            name="justificativa"
                            type="textarea"
                            rows="4"
                            placeholder="Digite a justificativa da movimentação"
                        />

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save"></i> Salvar
                            </button>
                            <a href="{{ route('movimentacoes.index') }}" class="btn btn-secondary">
                                <i class="bi bi-x-circle"></i> Cancelar
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        @else
            <div class="alert alert-danger">
                Não tem permissão para criar movimentações.
            </div>
        @endcan
    </main>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        function updateFornecedorField() {
            const tipo = $('select[name="tipo"]').val();

            if (tipo === 'entrada') {
                // Mostrar campo e tornar obrigatório
                $('#fornecedor-field').show();
                $('select[name="fornecedor_id"]').prop('required', true);
                $('#deposito-field').removeClass('col-md-12').addClass('col-md-6');
            } else if (tipo === 'saida') {
                // Esconder campo e remover obrigatoriedade
                $('#fornecedor-field').hide();
                $('select[name="fornecedor_id"]').prop('required', false).val('');
                $('#deposito-field').removeClass('col-md-6').addClass('col-md-12');
            }
        }

        // Executar ao carregar a página
        updateFornecedorField();

        // Executar ao mudar o tipo
        $('select[name="tipo"]').on('change', updateFornecedorField);
    });
</script>
@endpush