@extends('layouts.app')

@section('title', 'Inserir patrimônios')

@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; }
</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('locacoes-patrimonios.index') }}">Locações de patrimônios</a></li>
            <li><a href="{{ route('locacoes-patrimonios.edit', ['id' => $locacao_id]) }}">Locação {{ $locacao_id }}</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>Inserir patrimônios</h4> 
                </div>
                <div class="col-md-4 text-right">
                    <a href="{{ route('locacoes-patrimonios.edit', ['id' => $locacao_id]) }}" class="btn btn-danger btn-sm">
                        <i class="fa fa-arrow-circle-left fa-fw"></i>
                        Voltar
                    </a>
                </div>
            </div>
        </div>
        <div class="panel-body">

            <div class="row">
                <div class="col-md-6">
                    <form id="form-pesquisa-patrimonio" action="" method="post" class="form">@csrf
                        <div class="row form-group">
                            <div class="col-md-8">
                                <label for="">Código de barra</label>
                                <input type="text" name="" id="" class="form-control">
                            </div>
                            <div class="col-md-4">
                                <div class="checkbox">
                                    <label>
                                      <input type="checkbox" id="" name=""> Confirmar automaticamente
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-6">
                                <label for="id_grupo">Grupo</label>
                                <select name="id_grupo" id="id_grupo" class="form-control js-single">
                                    <option value="0" selected disabled>Selecione o grupo</option>
                                    @foreach ($grupos as $item)
                                        <option value="{{ $item->id }}">{{ $item->ds_grupo }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="id_subgrupo">Sub grupo</label>
                                <select name="id_subgrupo" id="id_subgrupo" class="form-control">
                                    <option value="0" selected disabled>Selecione o grupo</option>
                                </select>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-12">
                                <label for="id_patrimonio">Patrimônio</label>
                                <select name="id_patrimonio" id="id_patrimonio" class="form-control">
                                    <optgroup label="Nrº patrimônio - Patrimônio">
                                        <option value="0" selected disabled>Selecione o subgrupo</option>
                                    </optgroup>
                                </select>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-9">
                                <label for="">Local</label>
                                <input type="text" name="" id="" class="form-control">
                            </div>
                            <div class="col-md-3">
                                <button type="button" class="btn btn-sm btn-info btn-block" style="margin-top: 27px;">
                                    Copiar último local
                                </button>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-3">
                                <label for="">Data inical locação</label>
                                <input type="text" name="" id="" class="form-control" value="{{ \Carbon\Carbon::parse($periodo->dt_iniloc)->format("d/m/Y") }}" readonly>
                            </div>
                            <div class="col-md-3">
                                <label for="">Hora inical</label>
                                <input type="text" name="" id="" class="form-control" value="{{ \Carbon\Carbon::parse($periodo->hr_iniloc)->format("H:i:s") }}" readonly>
                            </div>
                            <div class="col-md-3">
                                <label for="">Data fim locação</label>
                                <input type="text" name="" id="" class="form-control" value="{{ \Carbon\Carbon::parse($periodo->dt_fimloc)->format("d/m/Y") }}" readonly>
                            </div>
                            <div class="col-md-3">
                                <label for="">Hora final</label>
                                <input type="text" name="" id="" class="form-control" value="{{ \Carbon\Carbon::parse($periodo->hr_fimloc)->format("H:i:s") }}" readonly>
                            </div>                            
                        </div>
                        <div class="row form-group">
                            <div class="col-md-12 text-right">
                                <button type="submit" class="btn btn-sm btn-info">
                                    <i class="fa fa-check fa-fw"></i>
                                    Aplicar
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-md-6">
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered">
                            <thead>
                                <tr>
                                    <th>Qtde total patrimônio</th>
                                    <th>Qtde já locada</th>
                                    <th>Qtde falta</th>
                                    <th>Patrimônio</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>

            <hr class="divider">
            
            <div class="panel-body">
                <div class="tabs">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#patrimonio-disponivel" data-toggle="tab">Patrimônios disponíveis</a>
                        </li>
                        <li>
                            <a href="#patrimonio-indisponivel" data-toggle="tab">Patrimônios indisponíveis</a>
                        </li>
                        <li>
                            <a href="#patrimonio-uso" data-toggle="tab">Patrimônio em uso</a>
                        </li>
                    </ul>
    
                    <div class="tab-content">        
                        {{-- Patrimônios disponíveis --}}
                        <div id="patrimonio-disponivel" class="tab-pane active">
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <div class="table-responsive">
                                        <table class="table table-hover table-bordered">
                                            <caption class="text-danger text-bold text-center">Reservas do cliente</caption>
                                            <thead>
                                                <tr>
                                                    <th width="11%">Nrº patrimônio</th>
                                                    <th>Patrimônio</th>
                                                    <th>Data / Hora início locação</th>
                                                    <th>Data / Hora fim locação</th>
                                                    <th>Cód reserva</th>
                                                    <th>Estado</th>
                                                    <th>Complemento</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <div class="row row-mt">
                                        <div class="col-md-6">
                                            <div class="table-responsive">
                                                <table class="table table-hover table-bordered">
                                                    <caption class="text-danger text-bold text-center">Patrimônios liberados para o período informado</caption>
                                                    <thead>
                                                        <tr>
                                                            <th  width="21%">Nrº patrimônio</th>
                                                            <th>Patrimônio</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody></tbody>
                                                </table>
                                            </div>
                                            <div class="row row-mt">
                                                <div class="col-md-12 text-danger text-center">
                                                    <span>Se na grade acima o patrimônio estiver em vermelho quer dizer que ainda está no cliente, não foi devolvido.</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="table-responsive">
                                                <table class="table table-hover table-bordered">
                                                    <caption class="text-danger text-bold text-center">Patrimônios já inseridos para este período</caption>
                                                    <thead>
                                                        <tr>
                                                            <th  width="21%">Nrº patrimônio</th>
                                                            <th>Patrimônio</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody></tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
    
                        {{-- Patrimônios indisponíveis --}}
                        <div id="patrimonio-indisponivel" class="tab-pane">
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <div class="table-responsive">
                                        <table class="table table-hover table-bordered">
                                            <thead>
                                                <tr>
                                                    <th>Tipo</th>
                                                    <th>Código</th>
                                                    <th width="11%">Nrº patrimônio</th>
                                                    <th>Patrimônio</th>
                                                    <th>Data / Hora início locação</th>
                                                    <th>Data / Hora fim locação</th>
                                                    <th>Nome fantasia</th>
                                                    <th>Razão social</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
    
                        {{-- Patrimônio em uso --}}
                        <div id="patrimonio-uso" class="tab-pane">
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <div class="table-responsive">
                                        <table class="table table-hover table-bordered">
                                            <thead>
                                                <tr>
                                                    <th width="11%">Nrº patrimônio</th>
                                                    <th>Patrimônio</th>
                                                    <th>Funcionário</th>
                                                    <th>Data entrega</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>        
                    </div>
                </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(){
        $("#form-pesquisa-patrimonio #id_subgrupo").on("change", function(){
            var subgrupo_id    = $(this).children("option:selected").val();
            var _token      = $("meta[name='csrf-token']").attr("content");

            $.ajax({
                url: "{{ route('seleciona.patrimonio.locacao') }}",
                method: 'post',
                data: { subgrupo_id:subgrupo_id, _token:_token },
                dataType: 'json',
                success: function(result){
                    $("#form-pesquisa-patrimonio #id_patrimonio").empty(); //limpa o selectbox para a escolha do próximo sub grupo
                    $("#form-pesquisa-patrimonio #id_patrimonio").append(
                        '<optgroup label="Nrº patrimônio - Patrimônio"><option value="" selected disabled> Selecione o patrimônio... </option></optgroup>');
                    $.each(result, function (key, value) {
                        $("#form-pesquisa-patrimonio #id_patrimonio").append('<option value="'+value.id+'">'+ value.nr_patrimonio +' - '+ value.ds_patrimonio +' </option>');
                    });

                    if( result['tipo'] == "error" ){
                        getMessage(result['titulo'], result['msg'], result['tipo']);
                    }
                }
            });
        });

        $("#form-pesquisa-patrimonio #id_grupo").on("change", function(){
            var grupo_id    = $(this).children("option:selected").val();
            var _token      = $("meta[name='csrf-token']").attr("content");

            $.ajax({
                url: "{{ route('filtra.subgrupo.orcamento-locacao') }}",
                method: 'post',
                data: { grupo_id:grupo_id, _token:_token },
                dataType: 'json',
                success: function(result){
                    $("#form-pesquisa-patrimonio #id_subgrupo").empty(); //limpa o selectbox para a escolha do próximo sub grupo
                    $("#form-pesquisa-patrimonio #id_subgrupo").append('<option value="" selected disabled> Selecione o subgrupo... </option>');
                    $.each(result, function (key, value) {
                        $("#form-pesquisa-patrimonio #id_subgrupo").append('<option value="'+value.id+'" data-subgrupo_tpservico="'+value.tp_servico+'"> ' + value.ds_subgrupo + ' </option>');
                    });

                    if( result['tipo'] == "error" ){
                        getMessage(result['titulo'], result['msg'], result['tipo']);
                    }
                }
            });
        });
    });

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