Ajustando o css do index para agendamento

resources/views/admin/pages/titulos/index.blade.php

@@ -16,6 +16,8 @@
     </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="/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>
@@ -46,34 +48,56 @@
                     @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="col-md-4"></div>
-                        <div class="form-group col-md-4">
-                            <hr>
+                        
+                        <div class="form-group ">
+                            
                             <strong>
-                                <h4>AGENDAMENTO</h4>
+                                <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 class="data form-control" type="text" id="datepicker" name="data">
+                            <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 class="ui-timepicker-input" type="text" id="timepicker" name="hora"><br>
-                            <hr>
+                            <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,
@@ -86,7 +110,7 @@
                 });
 
                 $('#timepicker').timepicker({
-                    timeFormat: 'h:mm p',
+                    timeFormat: 'hh:mm p',
                     interval: 30,
                     minTime: '08',
                     maxTime: '5:00pm',
@@ -97,7 +121,8 @@
                     scrollbar: true
                 });
                 $('#form').trigger("reset");
+
             </script>
-        </div>
-    </div>
+
+
 @endsection