@extends('adminlte::page')

@section('title', 'Relatório de Movimentação do Estoque')

@section('content_header')
    <div class="row">
        <div class="col-md-12 col-12">
            <h1>Relatório de Movimentação do Estoque</h1>
        </div>
    </div>
@stop

@section('content')
    @if(Session::has('success'))
        @php
            $data = Session::get('success');
        @endphp

        @if (is_array($data))
            @foreach ($data as $msg)
                <div class="alert alert-success" role="alert">
                    <i class="fa fa-check"></i>
                    {{ $msg }}
                </div>
            @endforeach
        @else
            <div class="alert alert-success" role="alert">
                <i class="fa fa-check"></i>
                {{ $data }}
            </div>
        @endif
    @endif

    @if(Session::has('error'))
        @php
            $data = Session::get('error');
        @endphp

        @if (is_array($data))
            @foreach ($data as $msg)
                <div class="alert alert-danger" role="alert">
                    <i class="fa fa-times"></i>
                    {{ $msg }}
                </div>
            @endforeach
        @else
            <div class="alert alert-danger" role="alert">
                <i class="fa fa-times"></i>
                {{ $data }}
            </div>
        @endif
    @endif
    <form id="formEnvioDados" method="POST" action="{{ route('relatorio.movimentacao_estoque_pdf') }}" target="_blank">
        @method('GET')
        @csrf
        <div class="card">
            <div class="card-header">
                <div class="row mb-0">
                    <div class="col-md-10 col-12">
                        <h4>Relatório</h4>
                    </div>
                    <div class="col-md-2 col-12 text-right" style="text-align: right;">
                        <button type="submit" id="btnSalvar" class="btn btn-primary ">
                            <i class="fas fa-print"></i>{{ __(' Gerar') }}
                        </button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-4">
                        <label for="data_inicial" class="col-form-label text-md-end" id="data_inicial">{{ __('Inicial') }}</label>
                        <input id="data_inicial" type="date" class="form-control @error('data_inicial') is-invalid @enderror" name="data_inicial" value="{{old('data_inicial')}}" autocomplete="data_inicial" autofocus>
                    </div>
                    <div class="col-md-4">
                        <label for="data_final" class="col-form-label text-md-end">{{ __('Final') }}</label>
                        <input id="data_final" type="date" class="form-control @error('data_final') is-invalid @enderror" name="data_final" value="{{ old('data_final') }}" autocomplete="data_final" autofocus>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <label for="nome_produto" class="col-form-label text-md-end">{{ __('Mercadoria') }}</label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-12 col-sm-3">
                        <div class="col-md-4">
                            <label for="referencia" class="col-form-label text-md-end">{{ __('Referência') }}</label>
                        </div>
                        <div class="col-12 d-flex">
                            <input id="referencia" type="number" class="form-control @error('referencia') is-invalid @enderror" name="referencia" value="{{ old('referencia')}}" autocomplete="referencia" autofocus>
                            <button class="btn btn-primary" id="btnConsulta_produto" type="button" style="border-radius: 0rem;">
                                <i class="fa fa-search" aria-hidden="true"></i>
                            </button>
                        </div>  
                    </div>
                    <div class="col-md-9 col-12 col-sm-9">
                        <label for="select_produto" class="col-form-label text-md-end">{{ __('Produto') }}</label>
                        <select id="select_produto" type="text" class="custom-select @error('select_produto') is-invalid @enderror" name="select_produto" value="{{ old('select_produto') }}" autocomplete="select_produto" autofocus>
                        </select>
                    </div>      
                </div>
            </div>
        </div>
    </form>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css" rel="stylesheet" />

    <style>

        .select2-container {
            width: 100% !important;
        }

        .select2-selection--single {
            border: 1px solid #ced4da;
            border-radius: 4px;
            padding: 10px;
            height: 40px !important;
            box-sizing: border-box; 
        }

        .select2-selection__arrow {
            height: 38px; 
        }

        .select2-selection__rendered {
            color: #495057; 
            line-height: 40px; 
        }

        .select2-container--default .select2-selection--single .select2-selection__placeholder {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 14px;
            color: #6c757d;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .select2-container--default.select2-container--focus .select2-selection--single {
            border-color: #80bdff; 
        }
        
        .campo-obrigatorio-faltando {
            border: 2px solid red; /* Estilo de borda para destacar */
        }
    </style>

@stop

@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/i18n/pt-BR.js"></script>
    <script>
        
        $('#select_produto').select2({
            theme: 'default',
            language: "pt-BR",
            width: '100%',
            ajax: {
                url: '/buscar-productname',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term
                    };
                },
                processResults: function (data) {
                    return {
                        results: data.results
                    };
                },
                cache: true
            },
            minimumInputLength: 1,
            placeholder: 'Digite o nome do produto'
        }).on('select2:select', function (e) {
            var codigoProduto = e.params.data.id;
            $('#referencia').val(codigoProduto);
        });

            
        $('#referencia').on('change', function() {
            var codigo = $(this).val();

            // Consulte o código do produto
            $.ajax({
                url: '/buscar-codproduct',
                data: {
                    referencia: codigo
                },
                success: function(data) {
                    console.log(data);
                    // Supondo que seu backend retorne o ID e o nome do produto
                    var produto = data.results[0];
                    if (produto) {
                        // Crie uma nova opção no Select2 e selecione-a
                        var novaOpcao = new Option(produto.nome, produto.id, true, true);
                        $('#select_produto').append(novaOpcao).trigger('change');

                    }
                }
            });
        });

        $(document).on('select2:open', (e) => {
            const selectId = e.target.id;
            $(".select2-search__field[aria-controls='select2-" + selectId + "-results']").each(function (key, value) {
                value.focus();
            });
        })

           
    </script>
@stop