@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 Compra | Ficha cadastral</h5>
        </div>
        <form method="POST" action="{{route("purchase.save")}}" enctype="multipart/form-data"
              id="purchase_forms">
            @csrf
            <div class="row">
                <div class="col-3 mb-2">
                    <label class="form-label" for="purchase_number">N° Compra</label>
                    <input type="text" class="form-control" name="purchase_number" id="purchase_number">
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="purchase_type">Tipo</label>
                    <select class="form-select" name="purchase_type" id="purchase_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="purchase_status">Situação</label>
                    <select class="form-select" name="purchase_status" id="purchase_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>
            <hr>
            <div class="row">
                <div class="col-3 mb-2">
                    <label class="form-label" for="purchase_emission">Emissão</label>
                    <input type="date" class="form-control" name="purchase_emission" id="purchase_emission" required>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="purchase_delivery">Previsão de entrega</label>
                    <input type="date" class="form-control" name="purchase_delivery" id="purchase_delivery">
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="purchase_validity">Validade</label>
                    <input type="date" class="form-control" name="purchase_validity" id="purchase_validity">
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-6 mb-2">
                    <label class="form-label" for="provider_id">Vendedor (Fornecedor)</label>
                    <select class="form-select" name="provider_id" id="provider_id" required>
                        <option value="">Selecione o fornecedor</option>
                        @foreach($providers as $provider)
                            <option value="{{$provider->provider_id}}">{{$provider->provider_name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-6 mb-2">
                    <label class="form-label" for="provider_name">Nome (Razão Social)</label>
                    <input type="text" class="form-control" id="provider_name" disabled>
                </div>
                <div class="col-6 mb-2">
                    <label class="form-label" for="provider_fantasy_name">Nome Fantasia</label>
                    <input type="text" class="form-control" id="provider_fantasy_name" disabled>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="provider_document">CNPJ</label>
                    <input type="text" class="form-control" id="provider_document" disabled>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="provider_IERG">IE</label>
                    <input type="text" class="form-control" id="provider_IERG" disabled>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="provider_IM">IM</label>
                    <input type="text" class="form-control" id="provider_IM" disabled>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="provider_phone">Telefone</label>
                    <input type="text" class="form-control" id="provider_phone" disabled>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="provider_cellphone">Celular</label>
                    <input type="text" class="form-control" id="provider_cellphone" disabled>
                </div>
                <div class="col-3 mb-2">
                    <label class="form-label" for="provider_email">E-mail</label>
                    <input type="text" class="form-control" id="provider_email" disabled>
                </div>
                <div class="col-12 mb-1">
                    <label class="form-label" for="provider_observations">Observações</label>
                    <input type="text" class="form-control" id="provider_observations" disabled>
                </div>
                <div class="col-2 mb-1">
                    <label class="form-label" for="provider_cep">CEP</label>
                    <input type="text" class="form-control" id="provider_cep" disabled>
                </div>
                <div class="col-6 mb-1">
                    <label class="form-label" for="provider_address">Logradouro</label>
                    <input type="text" class="form-control" id="provider_address" disabled>
                </div>
                <div class="col-1 mb-1">
                    <label class="form-label" for="provider_address_number">N°</label>
                    <input type="text" class="form-control" id="provider_address_number" disabled>
                </div>
                <div class="col-3 mb-1">
                    <label class="form-label" for="provider_complement">Complemento</label>
                    <input type="text" class="form-control" id="provider_complement" disabled>
                </div>
                <div class="col-4 mb-1">
                    <label class="form-label" for="provider_neighborhood">Bairro</label>
                    <input type="text" class="form-control" id="provider_neighborhood" disabled>
                </div>
                <div class="col-4 mb-1">
                    <label class="form-label" for="provider_city">Cidade</label>
                    <input type="text" class="form-control" id="provider_city" disabled>
                </div>
                <div class="col-4 mb-1">
                    <label class="form-label" for="provider_state">Estado</label>
                    <input type="text" class="form-control" id="provider_state" disabled>
                </div>
            </div>
            <hr>
            <h5 class="text-dark mb-4">Adicionar Itens</h5>
            <div class="row">
                <div class="col-6 mb-2">
                    <label for="warehouse_id">Itens</label>
                    <select class="form-select" id="warehouse_id">
                        <option value="">Selecione um item</option>
                        @foreach($warehouses as $warehouse)
                            <option value="{{$warehouse->warehouse_id}}">
                                {{$warehouse->warehouse_internalID}} | {{$warehouse->warehouse_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-cost" 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="addWarehouse()">Adicionar para compra</a>
                </div>
            </div>
            <div class="row">
                <h5 class="card-title fw-semibold mb-4">Lista de compras</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="items_body">
                            </tbody>
                        </table>
                    </div>
                </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">
                            <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_warehouse"></div>
            <div id="hidden_inputs_payments"></div>
            <div class="row">
                <div class="col-12 text-end">
                    <button class="btn btn-primary">Salvar</button>
                </div>
            </div>
        </form>
    </div>


    <input type="hidden" id="purchase_provider_path" value="{{route("purchase.provider.load")}}">
    <input type="hidden" id="purchase_warehouse_path" value="{{route("purchase.warehouse.load")}}">
@endsection
@section('customJS')
    <script src="{{asset("_js/dashboard/purchases/forms.js")}}"></script>
@endsection