@extends('template.template')

@section('content')

@php
    use App\Models\Venda;
    if(isset($_GET['id']) && $_GET['id']){

        $venda = Venda::find($_GET['id']);
    }
@endphp
    <style>
        select {
            width: 100%;
            height: 43px !important;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <div class="dashboard-wrapper">
        <div class="container-fluid dashboard-content">
            <div class="row">
                <div class="col-xl-12">
                    <div class="row">
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                            <div class="page-header" id="top">
                                <h2 class="pageheader-title">Cadastrar venda</h2>
                                {{-- <div class="page-breadcrumb">
                                    <nav aria-label="breadcrumb">
                                        <ol class="breadcrumb">
                                            <li class="breadcrumb-item"><a
                                                    href="https://www.tecnopartes.com.br/comissao/vendedor/index-do-vendedor.php"
                                                    class="breadcrumb-link">Início</a></li>
                                            <li class="breadcrumb-item active" aria-current="page">Cadastrar venda</li>
                                        </ol>
                                    </nav>
                                </div> --}}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">

                            <div class="card">
                                <h5 class="card-header">Novo cadastro de venda</h5>
                                <div class="card-body">
                                    <h4>Preencha corretamente</h4>
                                    <form method="POST" action="{{ route('venda_create') }}" id="vendaForm">
                                        @csrf
                                        <input type="hidden" name="id" value="{{$venda->id ?? ''}}">
                                        <div class="form-group">

                                            <div class="input-group mb-3">
                                                <span class="input-group-prepend">
                                                    <span class="input-group-text">Data da venda</span>
                                                </span>
                                                <input required type="date" name="date" value="{{$venda->date ?? ''}}" placeholder="abrir calendario"
                                                    class="form-control">
                                            </div>

                                            <div class="input-group mb-3">
                                                <span class="input-group-prepend">
                                                    <span class="input-group-text">Nome do cliente</span>
                                                </span>
                                                <input type="text" name="client_name" value="{{$venda->client_name ?? ''}}" required
                                                    placeholder="Preencha o nome do cliente" class="form-control">
                                            </div>

                                            <div class="input-group mb-3"><span class="input-group-prepend"><span
                                                        class="input-group-text">Nº da nota fiscal</span></span>
                                                <input type="text" name="invoice" value="{{$venda->invoice ?? ''}}" required placeholder="Preencha a nota fiscal"
                                                    class="form-control">
                                            </div>

                                            <div class="input-group mb-3"><span class="input-group-prepend"><span
                                                        class="input-group-text">Tipo de produto</span></span>
                                                <select required name="product_type" value="{{$venda->product_type ?? ''}}" class="form-control">
                                                    <option {{isset($venda) && $venda->product_type == 'PRODUCT' ? 'selected' : ''}} value="PRODUCT">Produto</option>
                                                    <option {{isset($venda) && $venda->product_type == 'FRAME' ? 'selected' : ''}} value="FRAME">Quadro</option>
                                                    <option {{isset($venda) && $venda->product_type == 'PRODUCT_FRAME' ? 'selected' : ''}} value="PRODUCT_FRAME">Produto e quadro</option>
                                                </select>
                                            </div>

                                            <div class="input-group mb-3 product_value_container">
                                                <div class="input-group-prepend"><span class="input-group-text">Valor do
                                                        produto R$</span>
                                                </div>
                                                <input type="text" value="{{$venda->product_value ?? ''}}" name="product_value" id="product_value"
                                                    placeholder="0,00" class="form-control">
                                            </div>

                                            <div class="input-group mb-3 frame_value_container">
                                                <div class="input-group-prepend"><span class="input-group-text">Valor do
                                                        quadro R$</span>
                                                </div>
                                                <input type="text" value="{{$venda->frame_value ?? ''}}" name="frame_value" placeholder="0,00"
                                                    id="frame_value" class="form-control">
                                            </div>

                                            <div class="input-group mb-3 product_value_container">
                                                <div class="input-group-prepend"><span class="input-group-text">Comissão
                                                        R$</span>
                                                </div>
                                                <input required type="text" value="{{$venda->commission ?? ''}}" name="commission" readonly placeholder="0,00"
                                                    class="form-control">
                                            </div>


                                            <div class="input-group mb-3"><span class="input-group-prepend"><span
                                                        class="input-group-text">Empresa de saída</span></span>
                                                <select required name="company" id="select_company" class="form-control" value="{{$venda->company ?? ''}}">
                                                    <option id="" value=""></option>
                                                    <option {{isset($venda) && $venda->company == 'Tecno RJ' ? 'selected' : ''}} id="withnote" value="Tecno RJ">Tecno RJ</option>
                                                    <option {{isset($venda) && $venda->company == 'Tecnopartes RJ' ? 'selected' : ''}} id="nonote" value="Tecnopartes RJ">Tecnopartes RJ</option>
                                                </select>
                                            </div>

                                            <div class="input-group mb-3"><span class="input-group-prepend"><span
                                                        class="input-group-text">Forma de pagamento</span></span>
                                                <select required name="payment_method" class="form-control">
                                                    <option {{isset($venda) && $venda->select_company == 'Boleto'  ? 'selected' : ''}} value="Boleto">Boleto</a>
                                                    <option {{isset($venda) && $venda->select_company == 'Pix (Bradesco)'  ? 'selected' : ''}} value="Pix (Bradesco)">Pix (Bradesco)</a>
                                                    <option {{isset($venda) && $venda->select_company == 'Pix (Itaú)'  ? 'selected' : ''}} value="Pix (Itaú)">Pix (Itaú)</a>
                                                    <option {{isset($venda) && $venda->select_company == 'Dinheiro'  ? 'selected' : ''}} value="Dinheiro">Dinheiro</a>
                                                    <option {{isset($venda) && $venda->select_company == 'Transferência bancária'  ? 'selected' : ''}} value="Transferência bancária">Transferência bancária</a>
                                                    <option {{isset($venda) && $venda->select_company == 'Débito (Stone)'  ? 'selected' : ''}} value="Débito (Stone)">Débito (Stone)</a>
                                                    <option {{isset($venda) && $venda->select_company == 'Crédito (Stone)'  ? 'selected' : ''}} value="Crédito (Stone)">Crédito (Stone)</a>
                                                    <option {{isset($venda) && $venda->select_company == 'Link (Stone)'  ? 'selected' : ''}} value="Link (Stone)">Link (Stone)</a>
                                                    <option {{isset($venda) && $venda->select_company == 'Débito (Rede)'  ? 'selected' : ''}} value="Débito (Rede)">Débito (Rede)</a>
                                                    <option {{isset($venda) && $venda->select_company == 'Crédito (Rede)'  ? 'selected' : ''}} value="Crédito (Rede)">Crédito (Rede)</a>
                                                    <option {{isset($venda) && $venda->select_company == 'Link (Rede)'  ? 'selected' : ''}} value="Link (Rede)">Link (Rede)</a>
                                                </select>
                                            </div>


                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend"><span
                                                        class="input-group-text">Condição</span>
                                                </div>
                                                <input required type="text" name="condition" value="{{$venda->condition ?? ''}}"
                                                    placeholder="Preencher com a condição. Ex.: 28/42 dias, 4x sem juros, 5x com juros"
                                                    class="form-control">
                                            </div>

                                            <div class="input-group mb-3">
                                                <div class="d-flex" style="width:700px; height: 30px;">
                                                    <input style="width:20px;" type="checkbox" id="installment" name="installment" {{isset($venda) && $venda->installment ? 'checked' : false}} class="form-control">
                                                    <label style=" height: 30px; margin-left:10px; display:flex; flex-direction: column; justify-content:center;" for="installment">Compra parcelada?</label>
                                                </div>
                                            </div>

                                            <div class="input-group mb-3" id="parcelaNumber">
                                                <div class="input-group-prepend"><span
                                                        class="input-group-text">Número de parcelas</span>
                                                </div>
                                                <input type="number" name="installment_number" value="{{$venda->installment_number ?? ''}}"
                                                    placeholder="Preencher com o número de parcelas. Exe: 12"
                                                    class="form-control">
                                            </div>

                                            <div class="col-xl-12" style="padding: 10px 0 0 0">
                                                <p class="text-left">
                                                    <button type="submit"
                                                        class="btn btn-space btn-primary">Salvar</button>
                                                    <a href="{{isset($user) && $user->is_admin ? route('admin') : route('vendedor') }}"
                                                        class="btn btn-space btn-secondary">Cancelar</a>
                                                </p>
                                            </div>

                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {

            var tipoProdutoSelect = document.querySelector('select[name="product_type"]');
            var invoiceInput = document.querySelector('input[name="invoice"]');
            var companySelect = document.getElementById('select_company');

            // Ocultar campos e opções inicialmente
            var valorProdutoInput = document.querySelector('.product_value_container');
            var valorQuadroInput = document.querySelector('.frame_value_container');
            var opcaoBoleto = document.querySelector('option[value="Boleto"]');
            var opcaoPixBradesco = document.querySelector('option[value="Pix (Bradesco)"]');
            var opcaoPixItau = document.querySelector('option[value="Pix (Itaú)"]');
            var opcaoDebStone = document.querySelector('option[value="Débito (Stone)"]');
            var opcaoCredStone = document.querySelector('option[value="Crédito (Stone)"]');
            var opcaoDebRede = document.querySelector('option[value="Débito (Rede)"]');
            var opcaoCredRede = document.querySelector('option[value="Crédito (Rede)"]');
            var opcaoLinkStone = document.querySelector('option[value="Link (Stone)"]');
            var opcaoLinkRede = document.querySelector('option[value="Link (Rede)"]');



            var installmentCheckbox = document.querySelector('input[name="installment"]');
            var installmentNumberInput = document.querySelector('#parcelaNumber');

            var productValueInput = document.querySelector('input[name="product_value"]');
            var productFrameInput = document.querySelector('input[name="frame_value"]');

            valorProdutoInput.style.display = 'flex';
            valorQuadroInput.style.display = 'none';
            opcaoBoleto.style.display = 'none';
            opcaoPixBradesco.style.display = 'none';
            opcaoPixItau.style.display = 'none';
            opcaoDebStone.style.display = 'none';
            opcaoCredStone.style.display = 'none';
            opcaoDebRede.style.display = 'none';
            opcaoCredRede.style.display = 'none';
            opcaoLinkStone.style.display = 'none';
            opcaoLinkRede.style.display = 'none';

            installmentNumberInput.style.display = installmentCheckbox.checked ? 'flex' : 'none';

            installmentCheckbox.addEventListener('change', function() {
                installmentNumberInput.style.display = this.checked ? 'flex' : 'none';
            });

            tipoProdutoSelect.addEventListener('change', carregarInputs);

            carregarInputs();

            function carregarInputs() {
                var tipo = tipoProdutoSelect.value;
                if (tipo === 'PRODUCT') {
                    valorProdutoInput.style.display = 'flex';
                    valorQuadroInput.style.display = 'none';
                    productFrameInput.value = 0;
                } else if (tipo === 'FRAME') {
                    valorProdutoInput.style.display = 'none';
                    valorQuadroInput.style.display = 'flex';
                    productValueInput.value = 0;
                } else {
                    valorProdutoInput.style.display = 'flex';
                    valorQuadroInput.style.display = 'flex';
                }
            }

            // Mostrar opções de empresa conforme valor da nota fiscal
            invoiceInput.addEventListener('change', function() {
                var valorNota = invoiceInput.value;
                if (valorNota === '0') {
                    document.querySelector('option#withnote').style.display = 'none';
                    document.querySelector('option#nonote').selected = true;
                } else {
                    document.querySelector('option#withnote').style.display = 'block';
                }
            });

            // Mostrar opções de pagamento conforme valor da nota fiscal
            invoiceInput.addEventListener('change', function() {
                var valorNota = invoiceInput.value;
                if (valorNota === '0') {
                    opcaoPixBradesco.style.display = 'block';
                    opcaoCredStone.style.display = 'block';
                    opcaoLinkStone.style.display = 'block';
                    opcaoDebStone.style.display = 'block';
                } else {
                    opcaoPixItau.style.display = 'block';
                    opcaoBoleto.style.display = 'block';
                    opcaoDebRede.style.display = 'block';
                    opcaoCredRede.style.display = 'block';
                    opcaoPixItau.style.display = 'block';
                    opcaoLinkRede.style.display = 'block';
                }
            });

            // Calcular comissão
            var comissionInput = document.querySelector('input[name="commission"]');
            var valorNotaInput = document.querySelector('input[name="invoice"]');
            var submitButton = document.querySelector('button[type="submit"]');

            const calcular_comissao = () => {
                var productValue = parseFloat(productValueInput.value.replace('R$', '').replace('.', '')
                    .replace(',', '.')) || 0;
                var productFrame = parseFloat(productFrameInput.value.replace('R$', '').replace('.', '')
                    .replace(',', '.')) || 0;
                var comission = 0;

                if (productValue > 0) {
                    comission += productValue * 0.05;
                }

                if (productFrame > 0) {
                    comission += productFrame * 0.10;
                }

                comissionInput.value = comission.toFixed(2);


                var valorNota = parseFloat(valorNotaInput.value) || 0;
                if (valorNota > 0) {
                    comissionInput.value = (comissionInput.value * 0.88).toFixed(2);

                }
            }
            invoiceInput.addEventListener('change', calcular_comissao)
            productValueInput.addEventListener('change', calcular_comissao)
            productFrameInput.addEventListener('change', calcular_comissao)

            function applyCurrencyMask(inputElement) {
                inputElement.addEventListener('input', mascara);
            }

            const mascara = (event) => {
                    let value = event.target.value;
                    value = value.replace(/\D/g, '');
                    value = (value / 100).toLocaleString('pt-BR', {
                        style: 'currency',
                        currency: 'BRL'
                    });
                    event.target.value = value.replace('R$', '');
                }

            applyCurrencyMask(productValueInput);
            applyCurrencyMask(productFrameInput);

            setTimeout(() => {
                events = [productValueInput, productFrameInput];
                for(let i = 0; i <2; i++) {
                    let event = events[i]
                    let value = event.value

                    value = value.replace(/\D/g, '');
                        value = (value / 100).toLocaleString('pt-BR', {
                            style: 'currency',
                            currency: 'BRL'
                        });
                        event.value = value.replace('R$', '');
                }
            }, 100);
        });
    </script>
@endsection