@extends('template')
 @section('title', 'Pesan Baru')
 @section('konten')
     <div class="main-panel">
         <div class="content">
             <div class="page-inner">
                 <div class="page-header">
                     <h4 class="page-title">Pesan Baru</h4>
                     <ul class="breadcrumbs">
                         <li class="nav-home">
                             <a href="/dashboard">
                                 <i class="flaticon-home"></i>
                             </a>
                         </li>
                         <li class="separator">
                             <i class="flaticon-right-arrow"></i>
                         </li>
                         <li class="nav-item">
                             Pesan Baru
                         </li>
                     </ul>
                 </div>
                 <div class="row">
                     <div class="col-md-12">
                         <div class="card">
                             <div class="card-header">
                                 <ul class="nav nav-pills nav-success" id="pills-tab" role="tablist">
									<li class="nav-item submenu">
										<a class="nav-link active show" href="/data_kontak">Pesan Baru</a>
									</li>
									<li class="nav-item submenu">
										<a class="nav-link" href="pesan_terbalas">Pesan Terbalas</a>
									</li>
								</ul>
                             </div>
                             <div class="card-body">
                                 <div class="table-responsive">
                                     <table id="basic-datatables" class="display table table-striped table-hover">
                                         <thead>
                                             <tr>
                                                 <th>No</th>
                                                 <th>Nama</th>
                                                 <th>Email</th>
                                                 <th>Pesan</th>
                                                 <th>Tanggal</th>
												 <th>Aksi</th>
                                             </tr>
                                         </thead>

                                         <tbody>
                                                                                          @foreach ($datakontak as $data)
                                                 <tr>
                                                     <th>{{ $no++ }}</th>
                                                     <td>{{ $data->nama }}</td>
                                                     <td>{{ $data->email }}</td>
                                                     <td>{{ $data->pesan }}</td>
                                                     <td>{{ date('d-m-Y', strtotime($data->tanggal)) }}</td>
													 <td>
														<div class="form-button-action">
															<button onclick="kirimEmail({{$data->id_kontak}})" type="button" data-toggle="tooltip" title="" class="btn btn-link btn-primary btn-lg" data-original-title="Kirim Email">
																<i class="fas fa-envelope fa-lg"></i>
															</button>
														</div>
													 </td>
                                                 </tr>
                                             @endforeach
                                         </tbody>
                                     </table>
                                 </div>
                             </div>
                         </div>
                     </div>


                 </div>
             </div>
         </div>
         <footer class="footer">
             <div class="container-fluid">
                 <nav class="pull-left">
                     <ul class="nav">

                     </ul>
                 </nav>
                 <div class="copyright ml-auto">
                     &copycopyright 2026 - Perumda Air Minum Tirta Bahari
                 </div>
             </div>
         </footer>
     </div>
	 <div class="modal fade" id="formKirimEmail" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header no-bd">
						<h4 class="modal-title" style="color: rgb(25, 141, 236)">
							Kirim Email
						</h4>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<form method="POST" action="/send_email">
						@csrf
						<div class="modal-body">
							<div class="row">
								<div class="col-md-12">
									<input name="id_kontak" id="id_kontak" type="hidden" class="form-control" required>
									<div class="form-group">
										<label>Email Penerima</label>
										<input name="email" id="email" type="text" class="form-control" readonly>
									</div>
									<div class="form-group">
										<label>Pesan</label>
										<textarea name="pesan" id="pesan" rows="3" class="form-control" placeholder="Pesan" readonly></textarea>
									</div>
									<div class="form-group">
										<label>Balas Pesan</label>
										<textarea name="balas_pesan" rows="3" class="form-control" placeholder="Pesan" required></textarea>
									</div>
								</div>
							</div>
						</div>
						<hr>
						<div class="modal-footer no-bd">
							<button type="submit" class="btn btn-primary btn-round">Kirim Email</button>
							<button type="button" class="btn btn-danger btn-round" data-dismiss="modal">Close</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		<script>
			function kirimEmail(id) {
				$.ajax({
					url: "{{ url('/detail_kontak') }}" + '/' + id ,
					type: "GET",
					dataType: "JSON",
					success: function(data) {
						$('#formKirimEmail').modal('show');
						$('#id_kontak').val(data.id_kontak);
						$('#email').val(data.email);
						$('#pesan').val(data.pesan);
					},
					error : function() {
					alert("Tidak Ada Data");
					}
				});
    		}
		</script>
 @endsection