@extends('padrao')
@section('content')
<div class="row clearfix">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card">
            <div class="header">
                <h2>
                    <strong>@yield('tipo')</strong> ORDEM DE SERVIÇO
                </h2>
            </div>
            <div class="body">
                <form id="form_validation" method="POST" @yield('action')>
                    {{ csrf_field() }}
                    <div class="row clearfix">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane fade in active show" id="home_with_icon_title">
                                    <div class="row clearfix">
                                        <div class="col-sm-1">
                                            <div class="form-group form-float">
                                                <div class="form-line">
                                                    <input type="text" readonly name="id" class="form-control"
                                                        value="{{ old('id',(isset($ordem_servico)) ? $ordem_servico->id : '') }}">
                                                    <label class="form-label">ID</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-0">
                                            <div class="form-group form-float">
                                                <div class="form-line">
                                                    <input id="id_tecnico" type="hidden" readonly name="id_tecnico"
                                                        class="form-control"
                                                        value="{{ old('id_tecnico',(isset($ordem_servico)) ? $ordem_servico->id_tecnico : '') }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-5">
                                            <div class="form-group form-float">
                                                <div class="form-line">
                                                    <input id="nome_tecnico"
                                                        style="display:inline; width: calc(100% - 40px)" type="text"
                                                        name="tecnico_nome"
                                                        value="{{ old('tecnico_nome', (isset($ordem_servico)) ? $ordem_servico->tecnico_nome : '') }}"
                                                        class="form-control" readonly>
                                                    <label class="form-label">Técnico</label>
                                                    <button type="button"
                                                        class="btn btn-primary btn-circle waves-effect waves-circle waves-float btn-search"
                                                        data-toggle="modal" data-target=".bd-tecnico-modal-lg">
                                                        <i class="material-icons">search</i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-0">
                                            <div class="form-group form-float">
                                                <div class="form-line">
                                                    <input id="id_cliente" type="hidden" readonly name="id_cliente"
                                                        class="form-control"
                                                        value="{{ old('id_cliente',(isset($ordem_servico)) ? $ordem_servico->id_cliente : '') }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group form-float">
                                                <div class="form-line">
                                                    <input id="razao_cliente"
                                                        style="display:inline; width: calc(100% - 40px)" type="text"
                                                        name="razao_nome"
                                                        value="{{ old('razao_nome', (isset($ordem_servico)) ? $ordem_servico->razao_nome : '') }}"
                                                        class="form-control" readonly>
                                                    <label class="form-label">Razão social / Cliente</label>
                                                    <button type="button"
                                                        class="btn btn-primary btn-circle waves-effect waves-circle waves-float btn-search"
                                                        data-toggle="modal" data-target=".bd-cliente-modal-lg">
                                                        <i class="material-icons">search</i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group form-float">
                                                <div class="form-line">
                                                    <input name="data_inicio" type="date"
                                                        class="form-control" placeholder="Selecione a data"
                                                        value="{{ old('data_inicio', (isset($ordem_servico)) ? date('Y-m-d', strtotime($ordem_servico->data_inicio)) : date('Y-m-d')) }}">
                                                    <label class="form-label"
                                                        style="top: -10px;left: 0;font-size: 12px;">Data
                                                        Abertura</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group form-float">
                                                <div class="form-line">
                                                    <input name="data_entrega" type="date"
                                                        class="form-control" placeholder="Selecione a data"
                                                        value="{{ old('data_entrega', (isset($ordem_servico)) ? date('Y-m-d', strtotime($ordem_servico->data_entrega)) : date('Y-m-d')) }}">
                                                    <label class="form-label"
                                                        style="top: -10px;left: 0;font-size: 12px;">Data Entrega</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group form-float">
                                                <div class="form-line">
                                                    <input type="text" name="valor" class="form-control money2"
                                                        value="{{ old('valor', (isset($ordem_servico)) ? $ordem_servico->valor : '') }}">
                                                    <label class="form-label">Valor</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group form-float">
                                                <div class="form-line">
                                                    <textarea name="diagnostico" rows="3"
                                                        class="form-control no-resize">{{ old('diagnostico', (isset($ordem_servico)) ? $ordem_servico->diagnostico : '') }}</textarea>
                                                    <label class="form-label"
                                                        style="top: -10px;left: 0;font-size: 12px;">Diagnóstico
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group form-float">
                                                <div class="form-line">
                                                    <textarea name="solucao" rows="3"
                                                        class="form-control no-resize">{{ old('solucao', (isset($ordem_servico)) ? $ordem_servico->solucao : '') }}</textarea>
                                                    <label class="form-label"
                                                        style="top: -10px;left: 0;font-size: 12px;">Solução
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group form-float">
                                                <div class="form-line">
                                                    <textarea name="pecas_trocadas" rows="3"
                                                        class="form-control no-resize">{{ old('pecas_trocadas', (isset($ordem_servico)) ? $ordem_servico->pecas_trocadas : '') }}</textarea>
                                                    <label class="form-label"
                                                        style="top: -10px;left: 0;font-size: 12px;">Peças Trocadas
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group form-float">
                                                <div class="form-line">
                                                    <textarea name="observacao" rows="3"
                                                        class="form-control no-resize">{{ old('Observação', (isset($ordem_servico)) ? $ordem_servico->observacao : '') }}</textarea>
                                                    <label class="form-label"
                                                        style="top: -10px;left: 0;font-size: 12px;">Observação
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="pull-right">
                                @yield('botoes')
                            </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
    <div class="modal fade bd-cliente-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" style="max-width: 80%;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myLargeModalLabel">Filtro cliente</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row clearfix">
                        <div class="col-sm-9">
                            <div class="form-group form-float">
                                <div class="form-line">
                                    <input id="filtro_cliente" type="text" class="form-control" value="">
                                    <label class="form-label">Filtro ex: Razão social, nome ou cnpj</label>
                                </div>
                            </div>
                        </div>
                        <div class="pull-right">
                            <button class="btn btn-primary waves-effect"> <i class="material-icons">search</i>
                                <span>BUSCAR</span></button>
                        </div>
                    </div>
                    <table id="table_cliente" class="table table-bordered table-striped table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th class="select-filter">Razão social</th>
                                <th class="select-filter">CNPJ/CPF</th>
                                <th>Municipio</th>
                                <th>Bairro</th>
                                <th style="width:50px"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (isset($clientes))
                            @foreach ($clientes as $cliente)
                            <tr>
                                <td scope="row" class="id_cliente"> {{$cliente->id}} </td>
                                <td class="razao_cliente"> {{$cliente->razao_nome}} </td>
                                <td> {{Str::formatBRCNPJ($cliente->cpf_cnpj)}} </td>
                                <td> {{$cliente->nome}} </td>
                                <td> {{$cliente->bairro}} </td>
                                <td style="width:50px">
                                    <button
                                        class="btn btn-primary btn-circle waves-effect waves-circle waves-float selecionar_cliente">
                                        <i class="material-icons"> done</i>
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
    <div class="modal fade bd-tecnico-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" style="max-width: 80%;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myLargeModalLabel">Filtro técnico</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row clearfix">
                        <div class="col-sm-9">
                            <div class="form-group form-float">
                                <div class="form-line">
                                    <input id="filtro_tecnico" type="text" class="form-control">
                                    <label class="form-label">Filtro ex: Nome, CPF ou Função</label>
                                </div>
                            </div>
                        </div>
                        <div class="pull-right">
                            <button class="btn btn-primary waves-effect"> <i class="material-icons">search</i>
                                <span>BUSCAR</span></button>
                        </div>
                    </div>
                    <table id="table_tecnico" class="table table-bordered table-striped table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th class="select-filter">Nome</th>
                                <th class="select-filter">CPF</th>
                                <th>Função</th>
                                <th style="width:50px"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (isset($tecnicos))
                            @foreach ($tecnicos as $tecnico)
                            <tr>
                                <td scope="row" class="id_tecnico">{{$tecnico->id}}</td>
                                <td class="nome_tecnico"> {{$tecnico->nome}}</td>
                                <td> {{($tecnico->cpf)}}</td>
                                <td> {{$tecnico->funcao}}</td>
                                <td style="width:50px">
                                    <button
                                        class="btn btn-primary btn-circle waves-effect waves-circle waves-float selecionar_tecnico">
                                        <i class="material-icons"> done</i>
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<form id="form_validation" method="POST" action="{{route('cancelar_ordem_servico')}}">
    {{ csrf_field() }}
    <input type="hidden" readonly name="id" class="form-control"
        value="{{ old('id',(isset($ordem_servico)) ? $ordem_servico->id : '') }}">
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <div class="modal fade bd-cancelamento-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg" style="max-width: 80%;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="myLargeModalLabel">Cancelar Ordem de Serviço</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row clearfix">
                            <div class="col-sm-12">
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <textarea class="form-control no-resize" name="motivo_cancelamento"
                                            rows="3"></textarea>
                                        <label class="form-label" style="top: -10px;left: 0;font-size: 12px;">Motivo do
                                            Cancelamento:
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="pull-right">
                                <button class="btn btn-warning waves-effect" type="submit"> <i
                                        class="material-icons">cancel</i>
                                    <span>CANCELAR</span></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<form id="form_validation" method="POST" action="{{route('finalizar_ordem_servico')}}">
    {{ csrf_field() }}
    <input type="hidden" readonly name="id" class="form-control"
        value="{{ old('id',(isset($ordem_servico)) ? $ordem_servico->id : '') }}">
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <div class="modal fade bd-finalizar-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg" style="max-width: 80%;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="myLargeModalLabel">Finalizar Ordem de Serviço</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row clearfix">
                            <div class="col-sm-12">
                                <div class="form-group form-float">
                                    <div class="form-line">
                                        <textarea class="form-control no-resize" name="observacao_encerramento"
                                            rows="3"></textarea>
                                        <label class="form-label" style="top: -10px;left: 0;font-size: 12px;">Motivo da
                                            finalização:
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="pull-right">
                                <button class="btn btn-warning waves-effect" type="submit"> <i
                                        class="material-icons">event_available</i>
                                    <span>FINALIZAR</span></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection
@section('js')
<script>
$.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
       
        if (settings.nTable.id === "table_cliente") {
            var filtro = $('#filtro_cliente').val().toLowerCase();

            var nome = data[1].toLowerCase();
            var cnpj = data[2].toLowerCase().replace('.', '').replace('/', '').replace('-', '');
            if ((nome.indexOf(filtro) != -1) || (cnpj.indexOf(filtro) != -1)) {
                return true;
            }
            return false;
        }

        if (settings.nTable.id === "table_tecnico") {
            var filtro = $('#filtro_tecnico').val().toLowerCase();

            var nome_tecnico = data[1].toLowerCase();
            var cpf = data[2].toLowerCase().replace('.', '').replace('-', '');
            if ((nome_tecnico.indexOf(filtro) != -1) || (cpf.indexOf(filtro) != -1)) {
                return true;
            }

            return false;

        }
    }
);

var table_cliente = $('#table_cliente').DataTable({
    responsive: true,
    searching: true,
    dom: 'lrtip',
    ordering: false,
    lengthChange: false,
    pageLength: 10,
    autoWidth: false,
    language: {
        emptyTable: "Não há registros",
        info: "Exibindo _START_ - _END_ de _TOTAL_ ",
        infoEmpty: "Exibindo 0 registros",
        paginate: {
            previous: "Anterior",
            first: "Primeira",
            last: "Última",
            next: "Próxima",
        }
    }
});

$('#filtro_cliente').on('keyup', function() {
    table_cliente.draw();
});

$('.selecionar_cliente').on('click', function() {
    let id_cliente = $(this).closest("tr").find(".id_cliente").text();
    let razao_cliente = $(this).closest("tr").find(".razao_cliente").text();
    $('#razao_cliente').val(razao_cliente).trigger("focus");
    $('#id_cliente').val(id_cliente).trigger("focus");
    $('.bd-cliente-modal-lg').modal('hide');
});


var table_tecnico = $('#table_tecnico').DataTable({
    responsive: true,
    searching: true,
    dom: 'lrtip',
    ordering: false,
    lengthChange: false,
    pageLength: 10,
    autoWidth: false,
    language: {
        emptyTable: "Não há registros",
        info: "Exibindo _START_ - _END_ de _TOTAL_ ",
        infoEmpty: "Exibindo 0 registros",
        paginate: {
            previous: "Anterior",
            first: "Primeira",
            last: "Última",
            next: "Próxima",
        }
    }
});

$('#filtro_tecnico').on('keyup', function() {
    table_tecnico.draw();
});

$('.selecionar_tecnico').on('click', function() {
    let id_tecnico = $(this).closest("tr").find(".id_tecnico").text();
    let nome_tecnico = $(this).closest("tr").find(".nome_tecnico").text();
    $('#nome_tecnico').val(nome_tecnico).trigger("focus");
    $('#id_tecnico').val(id_tecnico).trigger("focus");
    $('.bd-tecnico-modal-lg').modal('hide');
});
@if(isset($ordem_servico) && $ordem_servico->status != 1)
    $('input').attr('readonly', 'readonly');
    $('textarea').attr('readonly', 'readonly');
    $('.btn-search').attr('disabled', 'disabled');
@endif
</script>

@endsection