@extends('dashboard._theme_dashboard')

@section('content')
    <div class="container-fluid">
        <div class="d-sm-flex justify-content-between align-items-center mb-4">
            <h5 class="text-dark mb-0">Nova Venda</h5>
        </div>
        <form method="POST" action="{{route("sales.save")}}" enctype="multipart/form-data"
              id="sale_forms">
            @csrf
            <div class="row">
                <div class="col-3 mb-2">
                    <label class="form-label" for="sale_number">N°</label>
                    <input type="text" class="form-control" id="sale_number" name="sale_number">
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="sale_type">Tipo</label>
                    <select class="form-select" name="sale_type" id="sale_type">
                        <option value="Orçamento">Orçamento</option>
                        <option value="Pedido">Pedido</option>
                    </select>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="sale_status">Situação</label>
                    <select class="form-select" name="sale_status" id="sale_status">
                        <option value="Aguardando">Aguardando</option>
                        <option value="Aprovado">Aprovado</option>
                        <option value="Cancelado">Cancelado</option>
                        <option value="Concluído">Concluído</option>
                    </select>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="sale_emission">Emissão</label>
                    <input type="date" class="form-control" name="sale_emission" id="sale_emission" required>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="sale_delivery">Previsão de entrega</label>
                    <input type="date" class="form-control" name="sale_delivery" id="sale_delivery" required>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="sale_validity">Validade</label>
                    <input type="date" class="form-control" name="sale_validity" id="sale_validity" required>
                </div>
                <div class="col-6 mb-2">
                    <label class="form-label" for="seller_id">Vendedor</label>
                    <select class="form-select" name="seller_id" id="seller_id" required>
                        <option>Selecione um vendedor</option>
                        @foreach($sellers as $item)
                            <option value="{{$item->seller_id}}">{{$item->seller_name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-6 mb-2">
                    <label class="form-label" for="client_id">Cliente</label>
                    <select class="form-select" name="client_id" id="client_id" required>
                        <option value="">Selecione o cliente</option>
                        @foreach($clients as $client)
                            <option value="{{$client->client_id}}">{{$client->client_name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-6 mb-2">
                    <label class="form-label" for="buyer_id">Responsáveis por compras (Contato)</label>
                    <select class="form-select" name="buyer_id" id="buyer_id">
                        <option value="">Selecione o contato</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-6 mb-2">
                    <label class="form-label" for="client_name">Razão social/Nome</label>
                    <input type="text" class="form-control" id="client_name" disabled>
                </div>
                <div class="col-6 mb-2">
                    <label class="form-label" for="client_fantasy_name">Nome fantasia</label>
                    <input type="text" class="form-control" id="client_fantasy_name" disabled>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="client_document">CPF/CNPJ</label>
                    <input type="text" class="form-control" id="client_document" disabled>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="client_IERG">IE/RG</label>
                    <input type="text" class="form-control" id="client_IERG" disabled>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="client_IM">IM</label>
                    <input type="text" class="form-control" id="client_IM" disabled>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="client_email">E-mail Principal</label>
                    <input type="email" class="form-control" id="client_email" disabled>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="client_phone">Telefone</label>
                    <input type="text" class="form-control phone-mask" id="client_phone" disabled>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="client_cellphone">Celular</label>
                    <input type="text" class="form-control phone-mask" id="client_cellphone" disabled>
                </div>
                <div class="col-12 mb-2">
                    <label class="form-label" for="client_observations">Observações</label>
                    <input type="text" class="form-control" id="client_observations" disabled>
                </div>
                <div class="col-2 mb-2">
                    <label class="form-label" for="client_cep">CEP</label>
                    <input type="text" class="form-control" id="client_cep" disabled>
                </div>
                <div class="col-6 mb-2">
                    <label class="form-label" for="client_address">Logradouro</label>
                    <input type="text" class="form-control" id="client_address" disabled>
                </div>
                <div class="col-1 mb-2">
                    <label class="form-label" for="client_address_number">N°</label>
                    <input type="text" class="form-control" id="client_address_number" disabled>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="client_complement">Complemento</label>
                    <input type="text" class="form-control" id="client_complement" disabled>
                </div>
                <div class="col-4 mb-1">
                    <label class="form-label" for="client_neighborhood">Bairro</label>
                    <input type="text" class="form-control" id="client_neighborhood" disabled>
                </div>
                <div class="col-4 mb-1">
                    <label class="form-label" for="client_city">Cidade</label>
                    <input type="text" class="form-control" id="client_city" disabled>
                </div>
                <div class="col-4 mb-1">
                    <label class="form-label" for="client_state">Estado</label>
                    <input type="text" class="form-control" id="client_state" disabled>
                </div>
            </div>
            <hr>
            <h5 class="text-dark mb-2">Dados Fiscais</h5>
            <div class="row">
                <div class="col-3 mb-1">
                    <label class="form-label" for="sale_fiscal_email">E-mail NFe</label>
                    <input type="text" class="form-control" id="sale_fiscal_email" name="sale_fiscal_email">
                </div>
                <div class="col-3">
                    <label class="form-label" for="sale_fiscal_iss">ISS Retido?</label>
                    <select class="form-select" name="sale_fiscal_iss" id="sale_fiscal_iss">
                        <option value="Sim">Sim</option>
                        <option value="Não">Não</option>
                    </select>
                </div>
                <div class="col-3">
                    <label class="form-label" for="sale_fiscal_costumer_type">Tipo de consumidor</label>
                    <select class="form-select" name="sale_fiscal_costumer_type" id="sale_fiscal_costumer_type">
                        <option value="Final">Final</option>
                        <option value="Revenda">Revenda</option>
                    </select>
                </div>
                <div class="col-3 mb-1">
                    <label class="form-label" for="sale_fiscal_nfe">N° NFe</label>
                    <input type="text" class="form-control" id="sale_fiscal_nfe" name="sale_fiscal_nfe">
                </div>
                <div class="col-3 mb-1">
                    <label class="form-label" for="sale_fiscal_access_key">Chave Acesso</label>
                    <input type="text" class="form-control" id="sale_fiscal_access_key" name="sale_fiscal_access_key">
                </div>
            </div>
            <hr>
            <h5 class="text-dark mb-2">Adicionais para venda</h5>
            <div class="row">
                <div class="col-3 mb-1">
                    <label class="form-label" for="sale_archives">Arquivos / Projeto</label>
                    <input type="file" class="form-control" id="sale_archives" name="sale_archives[]" multiple>
                </div>
                <div class="col-3 mb-1">
                    <label class="form-label" for="sale_emails">Arquivos Complementares</label>
                    <input type="file" class="form-control" id="sale_emails" name="sale_emails[]" multiple>
                </div>
                <div class="col-3 mb-1">
                    <label class="form-label" for="sale_others_archives">Outros arquivos</label>
                    <input type="file" class="form-control" id="sale_others_archives" name="sale_others_archives[]"
                           multiple>
                </div>
                <div class="col-3 mb-1">
                    <label class="form-label" for="sale_type_id">Tipo de projeto</label>
                    <div class="input-group flex-nowrap">
                        <select class="form-select" name="sale_type_id" id="sale_type_id" required>
                            <option value="">Escolha um tipo</option>
                            @foreach($types as $item)
                                <option value="{{$item->sale_type_id}}">{{$item->sale_type_name}}</option>
                            @endforeach
                        </select>
                        <span class="input-group-text" id="addon-wrapping">
                        <a data-bs-toggle="offcanvas" href="#sale_type_canvas" role="button">
                            <i class="fal fa-plus-circle"></i>
                        </a>
                    </span>
                    </div>
                </div>
            </div>
            <hr>

            <h5 class="text-dark mb-4">Adicionar Itens</h5>
            <div class="row">
                <div class="col-6 mb-2">
                    <label for="product_id">Produto</label>
                    <select class="form-select" id="product_id">
                        <option value="">Selecione um produto</option>
                        @foreach($products as $product)
                            <option value="{{$product->product_id}}">
                                {{$product->product_internalID}} | {{$product->product_description}}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="item_amount">Qtde.</label>
                    <input type="text" class="form-control" id="item_amount">
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="item_unity_value">Unit.(R$)</label>
                    <input type="text" class="form-control money-mask-decimal" id="item_unity_value">
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="item_discount">Desc.(R$)</label>
                    <input type="text" class="form-control money-mask" id="item_discount">
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="item_total_value">Total.(R$)</label>
                    <input type="text" class="form-control money-mask" id="item_total_value">
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="item_delivery">Previsão de entrega</label>
                    <input type="date" class="form-control" id="item_delivery">
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="item_nfe">N° NFe</label>
                    <input type="text" class="form-control" id="item_nfe">
                </div>
                <div class="col-12 mt-2 text-center">
                    <a class="btn btn-primary" onclick="addProduct()">Adicionar para venda</a>
                </div>
            </div>
            <div class="row mb-3">
                <h5 class="card-title fw-semibold mb-4">Lista de vendas</h5>
                <div class="col">
                    <div style="margin: 10px;"></div>
                    <div class="table-responsive">
                        <table class="table">
                            <thead class="text-dark fs-4">
                            <tr>
                                <th class="border-bottom-0">
                                    <h6 class="fw-semibold mb-0">ID Interno</h6>
                                </th>
                                <th class="border-bottom-0">
                                    <h6 class="fw-semibold mb-0">Descrição</h6>
                                </th>
                                <th class="border-bottom-0">
                                    <h6 class="fw-semibold mb-0">Qtde</h6>
                                </th>
                                <th class="border-bottom-0">
                                    <h6 class="fw-semibold mb-0">Vlr. Unit. (R$)</h6>
                                </th>
                                <th class="border-bottom-0">
                                    <h6 class="fw-semibold mb-0">Vlr. Desc. (R$)</h6>
                                </th>
                                <th class="border-bottom-0">
                                    <h6 class="fw-semibold mb-0">Vlr. Total. (R$)</h6>
                                </th>
                                <th class="border-bottom-0">
                                    <h6 class="fw-semibold mb-0">Prev. entrega</h6>
                                </th>
                                <th class="border-bottom-0">
                                    <h6 class="fw-semibold mb-0">N° NFe</h6>
                                </th>
                                <th class="border-bottom-0">
                                    <h6 class="fw-semibold mb-0">Remover</h6>
                                </th>
                            </tr>
                            </thead>
                            <tbody id="products_body">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-3 mb-2">
                    <label class="form-label" for="sale_freight">Frete?</label>
                    <select class="form-select" name="sale_freight" id="sale_freight">
                        <option value="Sim">Sim</option>
                        <option value="Não">Não</option>
                    </select>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="sale_freight_value">Frete / Envio (R$)</label>
                    <input type="text" class="form-control money-mask" id="sale_freight_value"
                           name="sale_freight_value">
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="sale_tracking">Rastreio</label>
                    <input type="text" class="form-control" id="sale_tracking" name="sale_tracking">
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="sale_transport_id">Tipo Transporte</label>
                    <div class="input-group flex-nowrap">
                        <select class="form-select" name="sale_transport_id" id="sale_transport_id" required>
                            <option value="">Escolha um tipo</option>
                            @foreach($transport as $item)
                                <option value="{{$item->sale_transport_id}}">{{$item->sale_transport_name}}</option>
                            @endforeach
                        </select>
                        <span class="input-group-text" id="addon-wrapping">
                        <a data-bs-toggle="offcanvas" href="#sale_transport_canvas" role="button">
                            <i class="fal fa-plus-circle"></i>
                        </a>
                    </span>
                    </div>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="sale_carrier">Transportadora</label>
                    <div class="input-group flex-nowrap">
                        <select class="form-select" name="sale_carrier" id="sale_carrier">
                            <option value="">Escolha um fornecedor</option>
                            @foreach($provider as $item)
                                <option value="{{$item->provider_id}}">{{$item->provider_name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="sale_other_costs">Outros Custos (R$)</label>
                    <input type="text" class="form-control money-mask" id="sale_other_costs" name="sale_other_costs">
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="sale_total_discount">Desc. Total (R$)</label>
                    <input type="text" class="form-control money-mask" id="sale_total_discount"
                           name="sale_total_discount">
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="sale_total_value">Total do pedido (R$)</label>
                    <input type="text" class="form-control money-mask" id="sale_total_value" name="sale_total_value"
                           required>
                </div>
                <div class="col-12 mb-2">
                    <label class="form-label" for="sale_observations">Observações</label>
                    <input type="text" class="form-control" id="sale_observations" name="sale_observations">
                </div>
            </div>
            <hr>
            <h5 class="text-dark mb-4">Forma de pagamento</h5>
            <div class="row">
                <div class="col-3 mb-2">
                    <label class="form-label" for="payment_id">Forma de pagamento</label>
                    <select class="form-select" id="payment_id">
                        <option value="">Selecione uma opção</option>
                        @foreach($payments as $item)
                            <option value="{{$item->payment_id}}">{{$item->payment_name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="purchase_payment_installments">Parcelamento?</label>
                    <select class="form-select" id="purchase_payment_installments">
                        <option value="Não">Não</option>
                        <option value="Sim">Sim</option>
                    </select>
                </div>
                <div class="col-3 mb-2 d-none" id="installments_amount_div">
                    <label class="form-label" for="purchase_payment_installments_amount">Qtde. Parcelas</label>
                    <input type="number" class="form-control" id="purchase_payment_installments_amount">
                </div>
                <div class="col-3 mb-2 d-none" id="installments_due_div">
                    <label class="form-label" for="purchase_payment_installments_due">Venc. Parcelas(Dia)</label>
                    <input type="number" min="1" max="31" step="1"
                           class="form-control" id="purchase_payment_installments_due">
                </div>
                <div class="col-3 mb-2 d-block" id="purchase_payment_due_div">
                    <label class="form-label" for="purchase_payment_due">Vencimento</label>
                    <input type="date" class="form-control" id="purchase_payment_due">
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="purchase_payment_value">Valor Total (R$)</label>
                    <input type="text" class="form-control money-mask" id="purchase_payment_value">
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="purchase_payment_status">Situação do Pagamento</label>
                    <div class="input-group flex-nowrap">
                        <select class="form-select" id="purchase_payment_status">
                            <option value="Em aberto">Em aberto</option>
                            <option value="Quitado">Quitado</option>
                        </select>
                    </div>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="purchase_payment_date">Data Pgto.</label>
                    <input type="date" class="form-control" id="purchase_payment_date">
                </div>
                <div class="col-12 mt-2 text-center">
                    <a class="btn btn-primary" onclick="addpayment()">Adicionar forma de pagamento</a>
                </div>
            </div>
            <div class="row">
                <h5 class="card-title fw-semibold mb-4">Lista de pagamentos</h5>
                <div class="col">
                    <div style="margin: 10px;"></div>
                    <div class="table-responsive">
                        <table class="table" id="table_payments">
                            <thead class="text-dark fs-4">
                            <tr>
                                <th class="border-bottom-0">
                                    <h6 class="fw-semibold mb-0">Forma Pgto.</h6>
                                </th>
                                <th class="border-bottom-0">
                                    <h6 class="fw-semibold mb-0">Parcelas?</h6>
                                </th>
                                <th class="border-bottom-0">
                                    <h6 class="fw-semibold mb-0">Qtde. Parcelas</h6>
                                </th>
                                <th class="border-bottom-0">
                                    <h6 class="fw-semibold mb-0">Venc.</h6>
                                </th>
                                <th class="border-bottom-0">
                                    <h6 class="fw-semibold mb-0">Valor Total (R$)</h6>
                                </th>
                                <th class="border-bottom-0">
                                    <h6 class="fw-semibold mb-0">Situação</h6>
                                </th>
                                <th class="border-bottom-0">
                                    <h6 class="fw-semibold mb-0">Data Pgto.</h6>
                                </th>
                                <th class="border-bottom-0">
                                    <h6 class="fw-semibold mb-0">Editar</h6>
                                </th>
                            </tr>
                            </thead>
                            <tbody id="payments_body">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div id="hidden_inputs_products"></div>
            <div id="hidden_inputs_payments"></div>
            <div class="row">
                <div class="col-12 text-end">
                    <button class="btn btn-primary submit-forms">Salvar</button>
                </div>
            </div>
        </form>
    </div>

    <div class="offcanvas offcanvas-end" tabindex="-1" id="sale_type_canvas">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">Tipo de projeto</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <form method="POST" action="{{route("sale.type.save")}}" enctype="multipart/form-data"
                  id="sale_type_forms">
                @csrf
                <div class="row">
                    <div class="col-12 mb-2">
                        <label class="form-label" for="sale_type_name">Nome</label>
                        <input type="text" class="form-control" name="sale_type_name" id="sale_type_name" required>
                    </div>
                    <div class="col-12 mb-2 text-center">
                        <button type="submit" class="btn btn-primary submit-forms">Adicionar</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="offcanvas offcanvas-end" tabindex="-1" id="sale_transport_canvas">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">Tipo de transporte</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <form method="POST" action="{{route("sale.transport.save")}}" enctype="multipart/form-data"
                  id="sale_transport_forms">
                @csrf
                <div class="row">
                    <div class="col-12 mb-2">
                        <label class="form-label" for="sale_transport_name">Nome</label>
                        <input type="text" class="form-control" name="sale_transport_name" id="sale_transport_name"
                               required>
                    </div>
                    <div class="col-12 mb-2 text-center">
                        <button type="submit" class="btn btn-primary submit-forms">Adicionar</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <input type="hidden" id="sale_client_path" value="{{route("sale.client.load")}}">
    <input type="hidden" id="sale_product_path" value="{{route("sale.product.load")}}">
    <input type="hidden" id="sale_archive_save" value="{{route("sales.save.archives")}}">
@endsection
@section('customJS')
    <script src="{{asset("_js/dashboard/sales/forms.js")}}"></script>
@endsection