@extends('layouts.app')

@section('title', 'Orçamento de locação')

@section('content')
<style>
    .btn-mt-input{ margin-top: 26px; }
    .row-mt{ margin-top: 15px; }
    .row-mt-2{ margin-top: 30px; }
    .fa-2x{ font-size: 1.35em !important; }
    .select2-container .select2-selection--single{ height: 33px; }
    .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 30px; }
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 30px; right: 1px; background: #ccc; border: 1px solic #ccc; border-bottom-right-radius: 3px; border-top-right-radius: 3px;}
    .section-page{ margin-top: 45px; margin-left: 8px; width: 100%;}
    .img-prodcomp{ width: 326px; height: 326px; }    
    .bg-caption{ border: 1px solid #C4C4C4; }
    .text-small{ font-size: 9px; }
</style>
<header class="page-header">
    <h2>Movimentações</h2>

    <div class="right-wrapper pull-right">
        <ol class="breadcrumbs">
            <li><span>Locações</span></li>
            <li><a href="{{ route('orcamento-locacao.index') }}">Orçamento de locação</a></li>
        </ol>

        <a class="sidebar-right-toggle"><i class="fa fa-chevron-left"></i></a>
    </div>
</header>

<div class="section-page">
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="row">
                <div class="col-md-8">
                    <h4>Novo orçamento de locação</h4> 
                </div>
                <div class="col-md-4 text-right">
                    <a href="{{ route('orcamento-locacao.index') }}" class="btn btn-danger">
                        <i class="fa fa-arrow-circle-left fa-fw"></i>
                        Voltar
                    </a>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <div class="panel">
                <div class="panel-body">
                    <form id="form-orcloc" action="{{ route('store.orcamento-locacao') }}" method="post" class="form">@csrf

                        <div class="row form-group">
                            <div class="col-md-2">
                                <label for="cd_orcloc">Cód orçamento</label>
                                <input type="text" id="cd_orcloc" class="form-control" disabled>
                            </div>
                            <div class="col-md-2">
                                <label for="dt_orcloc">Data orçamento</label>
                                <input type="text" name="dt_orcloc" id="dt_orcloc" class="form-control datepicker" value="{{ \Carbon\Carbon::today()->format('d/m/Y') }}" readonly>
                            </div>
                            <div class="col-md-2">
                                <label for="hr_orcloc">Hora orçamento</label>
                                <input type="text" name="hr_orcloc" id="hr_orcloc" class="form-control hora-orc" value="{{ \Carbon\Carbon::now()->format('H:i:s') }}" readonly>
                            </div>
                            <div class="col-md-2">
                                <label for="ds_baixa">G. loc</label>
                                <select name="ds_baixa" id="ds_baixa" class="form-control" disabled>
                                    <option value="N">NÃO</option>
                                    <option value="S">SIM</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label for="controleano">Nrº orçamento</label>
                                <input type="text" id="controleano" class="form-control" disabled>
                            </div>
                            <div class="col-md-2">
                                <label for="gr_cancelado">Cancelar</label>
                                <select name="gr_cancelado" id="gr_cancelado" class="form-control" disabled>
                                    <option value="N">NÃO</option>
                                    <option value="S">SIM</option>
                                </select>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-4">
                                <label for="id_parceiro">Parceiro</label>
                                <select name="id_parceiro" id="id_parceiro" class="form-control" onclick="select2Clientes('id_parceiro');" style="width: 100% !important;" required>
                                    <option value="" selected disabled>Selecione ...</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="id_contato">
                                    Contato
                                    <button id="btn-modal-contato-parceiro" type="button" class="btn btn-info btn-sm modal-call" data-width="modal-md" data-url="{{ route('modal.contatos.parceiros') }}" style="padding: 0 8px;">
                                        <i class="fa fa-plus"></i>
                                    </button>
                                </label>
                                <select name="id_contato" id="id_contato" class="form-control">
                                    <option value="" selected disabled>Selecione ...</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="id_funcionario">Locador</label>
                                <select name="id_funcionario" id="id_funcionario" class="form-control" required>
                                    @foreach ($locador as $item)
                                    <option value="{{ $item->id }}">{{ $item->nm_funcionario }} - Ativo: {{ $item->ds_ativo == "S" ? "SIM" : "NÃO" }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-2">
                                <label for="tp_operacao">Tipo</label>
                                <select name="tp_operacao" id="tp_operacao" class="form-control">
                                    <option value="O">ORÇAMENTO</option>
                                    <option value="R">RESERVA</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label for="dt_aprovacao">Aprovado dia</label>
                                <input type="text" id="dt_aprovacao" class="form-control datepicker" placeholder="___/___/_____" disabled>
                            </div>
                            <div class="col-md-2">
                                <label for="dt_impfaturaposterior">Faturamento a partir</label>
                                <input type="text" id="dt_impfaturaposterior" name="dt_impfaturaposterior" class="form-control datepicker" placeholder="___/___/_____">
                            </div>
                            <div class="col-md-4">
                                <label for="id_usuario">Usuário</label>
                                <input type="text" id="id_usuario" class="form-control" disabled>
                            </div>
                            <div class="col-md-2">
                                <label for="dt_log">Data / hora log</label>
                                <input type="text" id="dt_log" class="form-control" disabled>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-10"></div>
                            <div class="col-md-2 text-right">
                                <button type="submit" class="btn btn-success btn-block">
                                    <i class="fa fa-check fa-fw"></i>
                                    Salvar
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".uf").mask("AA");
        $(".placa").mask("AAA-0000");
        $(".cinco-zeros").mask("00000");
        $(".cep").mask("00000-000");
        $(".hora-orc").mask("00:00:00");
        $('.valor').mask('#.##0,00', { reverse: true });

        $("#id_cidade").on("change", function(){
            var id_cidade = $(this).children(":selected").val();

            $.ajax({
                url: "{{ route('filtra.enderecos') }}",
                method: 'post',
                data: { id_cidade:id_cidade, _token: $("meta[name='csrf-token']").attr("content") },
                dataType: 'json',
                success: function(result){
                    $("#id_endereco").empty(); //limpa o selectbox para a escolha da próxima cidade
                    $("#id_endereco").append('<option value="" selected disabled> SELECIONE O ENDEREÇO </option>');
                    $.each(result, function (key, value) {
                        $("#id_endereco").append('<option value="'+value.id+'"> '+value.ds_log+' ' + value.ds_endereco + ' </option>');
                    });
                }
            });
        });

        $("#form-orcloc #id_parceiro").on("change", function(){
            var id_parceiro = $(this).children(":selected").val();

            $("#form-orcloc #btn-modal-contato-parceiro").removeAttr("data-id").attr("data-id", id_parceiro);

            $.ajax({
                url: "{{ route('filtra.contatos.parceiros') }}",
                method: 'post',
                data: { id_parceiro:id_parceiro, _token: $("meta[name='csrf-token']").attr("content") },
                dataType: 'json',
                success: function(result){
                    $("#form-orcloc #id_contato").empty(); //limpa o selectbox para a escolha da próxima cidade
                    $("#form-orcloc #id_contato").append('<option value="" selected disabled> SELECIONE O CONTATO </option>');
                    $.each(result['contatos'], function (key, value) {
                        $("#form-orcloc #id_contato").append('<option value="'+value.id+'">' + value.ds_contato + '</option>');
                    });
                }
            });
        });
    });

    function filtraTabelaItensOrcloc(orcloc_id, periodo_orcloc_id, route){
        var _token = $("meta[name='csrf-token']").attr("content");

        $.ajax({
            url: route,
            method: 'post',
            data: { orcloc_id:orcloc_id, periodo_orcloc_id:periodo_orcloc_id, _token:_token },
            dataType: 'json',
            success: function(res){ 
                $("#tbody-grupos").html(res['table']);
            }
        });
    }

    function select2Clientes(id_input){
        $("#"+id_input).select2({
            placeholder: "Busque pelo nome fantasia ...",
            language: {
                inputTooShort: function() {
                    return "Digite 3 ou mais caracteres";
                },
            },
            ajax: {
                url: "{{ route('select2.clientes') }}",
                dataType: 'json',
                data: function (params) {
                    return {
                        q: $.trim(params.term)
                    };
                },
                processResults: function (data) {
                    return {
                        results:  $.map(data, function (item) {
                            return {
                                text: item.text,
                                id: item.id
                            }
                        })
                    };
                },
                cache: true
            }
        });
    }

    function select2Funcionarios(id_input){
        $("#"+id_input).select2({
            placeholder: "Busque pelo nome do funcionário ...",
            language: {
                inputTooShort: function() {
                    return "Digite 3 ou mais caracteres";
                },
            },
            ajax: {
                url: "{{ route('select2.funcionarios') }}",
                dataType: 'json',
                data: function (params) {
                    return {
                        q: $.trim(params.term)
                    };
                },
                processResults: function (data) {
                    return {
                        results:  $.map(data, function (item) {
                            return {
                                text: item.text,
                                id: item.id
                            }
                        })
                    };
                },
                cache: true
            }
        });
    }

    function select2cidades(id_input) {
        $("#"+id_input).select2({
            placeholder: "Busque pela cidade ...",
            language: {
                inputTooShort: function() {
                    return "Digite 3 ou mais caracteres";
                },
            },
            ajax: {
                url: "{{ route('select2.cidades') }}",
                dataType: 'json',
                data: function (params) {
                    return {
                        q: $.trim(params.term)
                    };
                },
                processResults: function (data) {
                    return {
                        results:  $.map(data, function (item) {
                            return {
                                text: item.text,
                                id: item.id
                            }
                        })
                    };
                },
                cache: true
            }
        });
    }

    function select2bairros(id_input) {
        $("#"+id_input).select2({
            placeholder: "Busque pela bairro ...",
            language: {
                inputTooShort: function() {
                    return "Digite 3 ou mais caracteres";
                },
            },
            ajax: {
                url: "{{ route('select2.bairros') }}",
                dataType: 'json',
                data: function (params) {
                    return {
                        q: $.trim(params.term)
                    };
                },
                processResults: function (data) {
                    return {
                        results:  $.map(data, function (item) {
                            return {
                                text: item.text,
                                id: item.id
                            }
                        })
                    };
                },
                cache: true
            }
        });
    }

    @if(session('message'))
        getMessage("{{ session('titulo') }}", "{{ session('message') }}", "{{ session('tipo') }}");
    @endif
</script>
@endsection