@extends('adminlte::page')

@section('title', 'Pesquisa de Titulos')

@section('content_header')

@endsection

@section('content')
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css"
        rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
    <div class="header_listagem small-box bg-gradient-success">
    </div>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
    <img style="display: flex;margin-right: auto;margin-left: auto;" src="{{ asset('img/logo-idace.png') }}"/>
    <h1 style="text-align:center;margin-top: 50px;margin-bottom: 50px;">AGENDAMENTO DE TÍTULOS</h1>
    <div class="card card-outline card-success">
        <div class="card-header">
            <h3 class="card-title"><b>Listagem dos Títulos</b></h3>
        </div>
        <div class="card-body">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>MUNICÍPIO</th>
                        <th>PROPRIETÁRIO</th>
                        <th>LOTE</th>
                        <th>CPF</th>
                        <th>STATUS</th>
                        <th width="100">AÇÕES</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($pessoasLote as $pessoaLote)
                        <tr>
                            <td>{{ $pessoaLote->lote->municipio->nome }}</td>
                            <td>{{ $pessoaLote->pessoa->nome }}</td>
                            <td>{{ $pessoaLote->lote->numero }}</td>
                            <td>{{ $documentoPessoa->cpf }}</td>
                            <td>{{ $tramite->nome }}</td>
                            <td><a href="{{ route('titulos.show', $pessoaLote->lote->id) }}"
                                    class="badge bg-green">DETALHES</a></td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            
            
        </div>
    </div>



    <div class="card card-outline card-success half">
        <div class="card-header">
            <h3 class="card-title"></h3>
        </div>
        <div class="card-body">
            
                
           
            <div class="container">
                <form method="post" id="form"
                    action="{{ route('datepicker', [$pessoaLote->pessoa->nome, $documentoPessoa->cpf, $agendamento->id]) }}"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        
                        <div class="form-group ">
                            
                            <strong>
                                <h4 style="text-align:center">Escolha uma data para agendamento</h4>
                            </strong>
                            <input class="text form-control" type="hidden" id="datepicker1" name="id"
                                value="{{ $agendamento->id }}">
                            <strong>DATA: </strong><br>
                            <input style="margin-top: 5px;" class="data form-control" type="text" id="datepicker" name="data">
                            <input class="text form-control" type="hidden" id="datepicker1" name="detentor"
                                value="{{ $pessoaLote->pessoa->nome }}">
                            <input class="text form-control" type="hidden" id="datepicker1" name="cpf"
                                value="{{ $documentoPessoa->cpf }}"><br>
                            <strong>HORA: </strong><br>
                            <input style="margin-top: 5px;margin-bottom: 20px;" class="form-control" type="text" id="timepicker" name="hora"><br>
                          
                            <button type="submit" class="btn btn-success" class="badge bg-green">AGENDAR</a></button>
                        </div>
                    </div>
                </form>
            </div>
            
        </div>
    </div>




    <script type="text/javascript">
                $('#datepicker').datepicker({
                    autoclose: true,
                    format: 'dd/mm/yyyy'
                });
                $('#datepicker1').datepicker();

                $(document).ready(function() {
                    $('input.timepicker').timepicker({});
                });

                $('#timepicker').timepicker({
                    timeFormat: 'hh:mm p',
                    interval: 30,
                    minTime: '08',
                    maxTime: '5:00pm',
                    defaultTime: '11',
                    startTime: '08:00',
                    dynamic: false,
                    dropdown: true,
                    scrollbar: true
                });
                $('#form').trigger("reset");

            </script>


@endsection
