@extends('usuarios.funcionarios.master.layout2')
@section('conteudo')

<link href="{{url('css/animate.min.css')}}" rel="stylesheet">


        <div class="">
                <div class="page-title">
                    <div class="title_left">
                        <h3>
                        Pedidos destruição- Detalhes
                        </h3>
                    </div>

                    <div class="title_right">
                        <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search for...">
                                <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>



                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div class="x_title">
                                @php $meu_nomeEmpresa=\App\Models\Cliente::find($dados->cliente_id)->trazerPessoa; @endphp
                               <h2>Cliente: {{$meu_nomeEmpresa->nome}}<small></small></h2>
                                <ul class="nav navbar-right panel_toolbox">
                                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                    </li>
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Settings 1</a>
                                            </li>
                                            <li><a href="#">Settings 2</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a class="close-link"><i class="fa fa-close"></i></a>
                                    </li>
                                </ul>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">


                                <div id="wizard_verticle" class="form_wizard wizard_verticle">
                                        <ul class="list-unstyled wizard_steps">
                                            <li>
                                                <a href="#step-11">
                                                    <span class="step_no">1</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#step-22">
                                                    <span class="step_no">2</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#step-33">
                                                    <span class="step_no">3</span>
                                                </a>
                                            </li>
                                            {{-- <li>
                                                <a href="#step-44">
                                                    <span class="step_no">4</span>
                                                </a>
                                            </li> --}}
                                        </ul>
                                

                                    {{-- Conetudo --}}
                                    
                                    <div id="step-11">
                                        <form class="form-horizontal form-label-left" novalidate>

                                            <p>
                                            </p>
                                            <span class="section">Informações do Cliente</span>
                                            
                                            <div class="item form-group">
                                                <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Solicitado Por <span class="required">*</span>
                                                </label>
                                                <div class="col-md-6 col-sm-6 col-xs-12">
                                                    <input  class="form-control col-md-7 col-xs-12 meuinput" value="{{$dados->nome}}" data-validate-length-range="6" data-validate-words="2" name="name" placeholder="both name(s) e.g Jon Doe" required="required" type="text">
                                                </div>
                                            </div>
                                            <div class="item form-group">
                                                <label class="control-label col-md-3 col-sm-3 col-xs-12 meuinput" for="email">Email <span class="required">*</span>
                                                </label>
                                                <div class="col-md-6 col-sm-6 col-xs-12">
                                                    <input  type="email" name="email" value="{{$dados->email}}"  required="required" class="form-control col-md-7 col-xs-12 meuinput">
                                                </div>
                                            </div>
                                            <div class="item form-group">
                                                <label class="control-label col-md-3 col-sm-3 col-xs-12"  for="email">Categoria <span class="required">*</span>
                                                </label>
                                                <div class="col-md-6 col-sm-6 col-xs-12">
                                                    <input  type="text"  name="confirm_email" value="{{$dados->categoria}}" data-validate-linked="email" required="required" class="form-control col-md-7 col-xs-12 meuinput ">
                                                </div>
                                            </div>
                                            <div class="item form-group">
                                                <label class="control-label col-md-3 col-sm-3 col-xs-12 meuinput" for="number">Serie Documental/Sector <span class="required">*</span>
                                                </label>
                                                <div class="col-md-6 col-sm-6 col-xs-12">
                                                    @if(empty($departamento))
                                                    <input  type="text"  name="number" required="required"  value="Nenhum" data-validate-minmax="10,100" class="form-control col-md-7 col-xs-12 meuinput" >
                                                    @else
                                                    <input  type="text"  name="number" required="required"  value="{{$departamento->departamento}}" data-validate-minmax="10,100" class="form-control col-md-7 col-xs-12 meuinput">
                                                    @endif
                                                </div>
                                            </div>
        
                                            <p>
                                            </p>
                                        </form>
                                    </div>
                                    <div id="step-22">
                                        <span class="section">Informação da Solicitação</span>

                                    <div class="item form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="website">Assunto <span class="required">*</span>
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input type="text" id="website" name="website" value="{{$dados->tema}}" required="required" placeholder="www.website.com" class="form-control col-md-7 col-xs-12 meuinput">
                                        </div>
                                    </div>
                                    <div class="item form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="occupation">Data da Recepçao <span class="required">*</span>
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input  type="text" name="occupation" value="{{$dados->created_at}}" data-validate-length-range="5,20" class="optional form-control col-md-7 col-xs-12 meuinput">
                                        </div>
                                    </div>
                                    {{-- <div class="item form-group">
                                        <label for="password" class="control-label col-md-3">Estado</label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input  type="text" name="password" value="em tratamento" data-validate-length="6,8" class="form-control col-md-7 col-xs-12 meuinput" required="required">
                                        </div>
                                    </div> --}}

                                <div class="col-md-12">
                                  <div class="x_panel">
                                    <div class="x_content">
                                        <div class="col-md-2">
                                            <p>Tempo de Espera</p>
                                            <input class="knob" data-width="100" data-height="120" data-min="-100" data-displayPrevious=true data-fgColor="#26B99A" value="44">
                                        </div>
                                        <div class="col-md-2">
                                            <p>Eficacia</p>
                                            <input class="knob" data-width="100" data-height="120" data-cursor=true data-fgColor="#34495E" value="29">
                                        </div>
                                    </div>
                                  </div>
                                </div>


                                    </div>
                                    <div id="step-33">
                                      <form>
                                        <span class="section">Finalizar Auto </span>

                                        <div class="item form-group">
                                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="website">Forma de Expedição <span class="required">*</span>
                                            </label>
                                            <div class="col-md-6 col-sm-6 col-xs-12">
                                                <input type="text" id="website" name="form_expedicao " required="required" placeholder="" class="form-control col-md-7 col-xs-12">
                                            </div>
                                        </div>
                                        <div class="item form-group">
                                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="website">Local da Descarga <span class="required">*</span>
                                            </label>
                                            <div class="col-md-6 col-sm-6 col-xs-12">
                                                <input type="text" id="website" name="form_descarga" required="required" placeholder="zango 3" class="form-control col-md-7 col-xs-12">
                                            </div>
                                        </div>
                                        <div class="item form-group">
                                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="occupation">Matricula do Veiculo <span class="required">*</span>
                                            </label>
                                            <div class="col-md-6 col-sm-6 col-xs-12">
                                                <input  type="text" name="form_matricula"  data-validate-length-range="5,20" placeholder="LD-22-33-AL" class="optional form-control col-md-7 col-xs-12">
                                            </div>
                                        </div>
                                        <div class="item form-group">
                                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="occupation">Hora de Saida<span class="required">*</span>
                                            </label>
                                            <div class="col-md-6 col-sm-6 col-xs-12">
                                                <input  type="date" name="form_hora_siada" data-validate-length-range="5,20" class="optional form-control col-md-7 col-xs-12">
                                            </div>
                                        </div>
                                         <div class="item form-group">
                                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="occupation">Hora de chegada<span class="required">*</span>
                                            </label>
                                            <div class="col-md-6 col-sm-6 col-xs-12">
                                                <input  type="date" name="form_hora_chegada" data-validate-length-range="5,20" class="optional form-control col-md-7 col-xs-12">
                                            </div>
                                        </div>
                                        <div class="item form-group">
                                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="occupation">Entregue por<span class="required">*</span>
                                            </label>
                                            <div class="col-md-6 col-sm-6 col-xs-12">
                                                <input  type="text" name="form_entregue_por"  data-validate-length-range="5,20" class="optional form-control col-md-7 col-xs-12">
                                            </div>
                                        </div>
                                        <div class="item form-group">
                                            <label for="password" class="control-label col-md-3">Nota</label>
                                            <div class="col-md-6 col-sm-6 col-xs-12">
                                                <textarea  data-validate-length="6,8" class="form-control col-md-7 col-xs-12" required="required"></textarea>
                                            </div>
                                        </div>
                                        
                                     </form>  
                                    </div>
                                    {{-- <div id="step-44">
                                        <h2 class="StepTitle">Step 4 Content</h2>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                        <p>
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                        <p>
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                        </p>
                                    </div> --}}

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
            

            <script src="{{url('js/knob/jquery.knob.min.js')}}"></script>
            <script src="{{url('js/chartjs/chart.min.js')}}"></script>
            <script type="text/javascript" src="{{url('js/jquery.smartWizard.js')}}"></script>

    <script type="text/javascript">
       $(".meuinput").prop('disabled',true)


        //fatias
        $(document).ready(function () {
            // Smart Wizard 	
            $('#wizard').smartWizard();

            function onFinishCallback() {
                $('#wizard').smartWizard('showMessage', 'Finish Clicked');
                //alert('Finish Clicked');
            }
        });

        $(document).ready(function () {
            // Smart Wizard	
            $('#wizard_verticle').smartWizard({
                transitionEffect: 'slide'
            });

        });













        //define chart clolors ( you maybe add more colors if you want or flot will add it automatic )
        var chartColours = ['#96CA59', '#3F97EB', '#72c380', '#6f7a8a', '#f7cb38', '#5a8022', '#2c7282'];
    
        //generate random number for charts
        randNum = function () {
            return (Math.floor(Math.random() * (1 + 40 - 20))) + 20;
        }
    
        $(function () {
            var d1 = [];
            //var d2 = [];
    
            //here we generate data for chart
            for (var i = 0; i < 30; i++) {
                d1.push([new Date(Date.today().add(i).days()).getTime(), randNum() + i + i + 10]);
                //    d2.push([new Date(Date.today().add(i).days()).getTime(), randNum()]);
            }
    
            var chartMinDate = d1[0][0]; //first day
            var chartMaxDate = d1[20][0]; //last day
    
            var tickSize = [1, "day"];
            var tformat = "%d/%m/%y";
    
            //graph options
            var options = {
                grid: {
                    show: true,
                    aboveData: true,
                    color: "#3f3f3f",
                    labelMargin: 10,
                    axisMargin: 0,
                    borderWidth: 0,
                    borderColor: null,
                    minBorderMargin: 5,
                    clickable: true,
                    hoverable: true,
                    autoHighlight: true,
                    mouseActiveRadius: 100
                },
                series: {
                    lines: {
                        show: true,
                        fill: true,
                        lineWidth: 2,
                        steps: false
                    },
                    points: {
                        show: true,
                        radius: 4.5,
                        symbol: "circle",
                        lineWidth: 3.0
                    }
                },
                legend: {
                    position: "ne",
                    margin: [0, -25],
                    noColumns: 0,
                    labelBoxBorderColor: null,
                    labelFormatter: function (label, series) {
                        // just add some space to labes
                        return label + '&nbsp;&nbsp;';
                    },
                    width: 40,
                    height: 1
                },
                colors: chartColours,
                shadowSize: 0,
                tooltip: true, //activate tooltip
                tooltipOpts: {
                    content: "%s: %y.0",
                    xDateFormat: "%d/%m",
                    shifts: {
                        x: -30,
                        y: -50
                    },
                    defaultTheme: false
                },
                yaxis: {
                    min: 0
                },
                xaxis: {
                    mode: "time",
                    minTickSize: tickSize,
                    timeformat: tformat,
                    min: chartMinDate,
                    max: chartMaxDate
                }
            };
            var plot = $.plot($("#placeholder33x"), [{
                label: "Email Sent",
                data: d1,
                lines: {
                    fillColor: "rgba(150, 202, 89, 0.12)"
                }, //#96CA59 rgba(150, 202, 89, 0.42)
                points: {
                    fillColor: "#fff"
                }
            }], options);
        });
    </script>
        <script>
            $(function ($) {
    
                $(".knob").knob({
                    change: function (value) {
                        //console.log("change : " + value);
                    },
                    release: function (value) {
                        //console.log(this.$.attr('value'));
                        console.log("release : " + value);
                    },
                    cancel: function () {
                        console.log("cancel : ", this);
                    },
                    /*format : function (value) {
                     return value + '%';
                     },*/
                    draw: function () {
    
                        // "tron" case
                        if (this.$.data('skin') == 'tron') {
    
                            this.cursorExt = 0.3;
    
                            var a = this.arc(this.cv) // Arc
                                ,
                                pa // Previous arc
                                , r = 1;
    
                            this.g.lineWidth = this.lineWidth;
    
                            if (this.o.displayPrevious) {
                                pa = this.arc(this.v);
                                this.g.beginPath();
                                this.g.strokeStyle = this.pColor;
                                this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d);
                                this.g.stroke();
                            }
    
                            this.g.beginPath();
                            this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
                            this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d);
                            this.g.stroke();
    
                            this.g.lineWidth = 2;
                            this.g.beginPath();
                            this.g.strokeStyle = this.o.fgColor;
                            this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
                            this.g.stroke();
    
                            return false;
                        }
                    }
                });
    
                // Example of infinite knob, iPod click wheel
                var v, up = 0,
                    down = 0,
                    i = 0,
                    $idir = $("div.idir"),
                    $ival = $("div.ival"),
                    incr = function () {
                        i++;
                        $idir.show().html("+").fadeOut();
                        $ival.html(i);
                    },
                    decr = function () {
                        i--;
                        $idir.show().html("-").fadeOut();
                        $ival.html(i);
                    };
                $("input.infinite").knob({
                    min: 0,
                    max: 20,
                    stopper: false,
                    change: function () {
                        if (v > this.cv) {
                            if (up) {
                                decr();
                                up = 0;
                            } else {
                                up = 1;
                                down = 0;
                            }
                        } else {
                            if (v < this.cv) {
                                if (down) {
                                    incr();
                                    down = 0;
                                } else {
                                    down = 1;
                                    up = 0;
                                }
                            }
                        }
                        v = this.cv;
                    }
                });
            });
        </script>
    

@endsection
