@extends('adminlte::page')

@section('title', 'Contact us')

@section('content_header')
    <h1>Contact us</h1>
@stop
@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <!-- /.card-header -->
                <div class="card-body table-responsive">


									<table class="table table-bordered">
										<tr>
											<th >Serial No</th>
											<th >Reason</th>
											<th>Name</th>
											<th>Email</th>
											<th>Mobile number</th>
											<th>Message</th>
											<th>Added at</th>
											<th>User time</th>
											<th>Source URL</th>
											<th>Action</th>
										</tr>
										 
											@foreach ($store as $contact)
												<tr>
													<td>{{ $no }}</td>
													<td>
															@if(isset($contact->reason->name) && !empty($contact->reason->name))
																	{{ $contact->reason->name }}
															@else
																	N/A
															@endif
													</td>
													<td>{{$contact->first_name }} {{$contact->last_name }}</td>
													<td>{{$contact->email }}</td>
													<td>+{{$contact->country_code }} {{$contact->mobile_no }}</td>
													<td>
														@php
															$message = $contact->message ?? 'Null';
															$words = explode(' ', $message);
															$shortMessage = implode(' ', array_slice($words, 0, 30));
														@endphp
														<span class="short-message-{{$contact->id}}">
															{{ $shortMessage }} @if(count($words) > 30)... 
															<a href="javascript:void(0);" onclick="showFullMessage({{ $contact->id }})">Read More</a>
															@endif
														</span>
														<span class="full-message-{{$contact->id}}" style="display: none;">
															{{ $message }}
															<a href="javascript:void(0);" onclick="hideFullMessage({{ $contact->id }})">Show Less</a>
														</span>
													</td>
													<td>{{ \Carbon\Carbon::parse($contact->created_at)->format('d/m/Y h:i A') }}</td>
													<td>
														@if ($contact->user_time)
															@php
																try {
																	$dt = \Carbon\Carbon::createFromFormat('n/j/Y, g:i:s A', $contact->user_time);
																} catch (\Exception $e) {
																	$dt = \Carbon\Carbon::parse($contact->user_time); // fallback for standard format
																}
															@endphp
															{{ $dt->format('h:i A') }}
														@endif
													</td>
													@php
														$url = $contact->current_url;
														$cleanPath = $url;

														$baseUrls = [
																'https://visament.com',
																'http://172.105.63.118/visament_working_dir/public',
														];

														foreach ($baseUrls as $base) {
																if (Str::startsWith($url, $base)) {
																		$cleanPath = Str::replaceFirst($base, '', $url);
																		break;
																}
														}
												@endphp
													<td >{{ $cleanPath }}</td>
													<td>
														<div class="item">
															<button 
																class="btn btn-sm btn-primary open-remark-modal" 
																data-id="{{$contact->id}}" 
																data-remark="{{$contact->remark ?? ''}}"
																title="Add Remark"
															>
																<i class="fa fa-comment"></i>
															</button>
														</div>
													</td>

													{{--<td>
															<a href="{{route('contactus.delete',$contact->id)}}" onclick="return confirm('Are you sure?')">
																	Delete
															</a>
													</td>--}}
													 @php $no++; @endphp
												</tr>
											@endforeach
									</table>
						</div>
                <!-- /.card-body -->

						<div class="box-footer clearfix">
						{{ $store->appends(request()->query())->links() }}
						</div>
				</div>
		</div>
		<!-- /.col -->
</div>

	  <!-- Remark Modal -->
		<div class="modal fade" id="remarkModal" tabindex="-1" role="dialog" aria-labelledby="remarkModalLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<form id="remarkForm" method="POST" action="{{ route('contact-us.remark') }}">
					@csrf
					<input type="hidden" name="application_id" id="remarkApplicationId">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title">Add Remark</h5>
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<span>&times;</span>
							</button>
						</div>
						<div class="modal-body">
							<textarea name="remark" id="remarkText" class="form-control" rows="4" placeholder="Write remark..."></textarea>
						</div>
						<div class="modal-footer">
							<button type="submit" class="btn btn-success">Save Remark</button>
						</div>
					</div>
				</form>
			</div>
		</div>

@section('css')
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

@stop


@section('js')

    <script>
      $(document).ready(function () {
        $('.open-remark-modal').on('click', function () {
          let id = $(this).data('id');
          let remark = $(this).data('remark');

          $('#remarkApplicationId').val(id);
          $('#remarkText').val(remark);

          $('#remarkModal').modal('show');
        });
      });
    </script>

<script>
			document.addEventListener("DOMContentLoaded", function () {
					let selectedContacts = JSON.parse(localStorage.getItem("selectedContacts")) || [];

					function updateCheckboxes() {
							document.querySelectorAll(".contact-checkbox").forEach((checkbox) => {
									if (selectedContacts.includes(checkbox.value)) {
											checkbox.checked = true;
									}

									checkbox.addEventListener("change", function () {
											if (this.checked) {
													if (!selectedContacts.includes(this.value)) {
															selectedContacts.push(this.value);
													}
											} else {
													selectedContacts = selectedContacts.filter((id) => id !== this.value);
											}

											localStorage.setItem("selectedContacts", JSON.stringify(selectedContacts));
									});
							});
					}

					updateCheckboxes();

					window.addEventListener("pageshow", updateCheckboxes);
			});

			// Download selected contacts
			// function downloadSelected() {
			// 		let selectedIds = JSON.parse(localStorage.getItem("selectedContacts")) || [];

			// 		if (selectedIds.length === 0) {
			// 				alert("Please select at least one contact.");
			// 				return;
			// 		}

			// 		document.getElementById("selected-ids").value = selectedIds.join(",");
			// 		document.getElementById("download-form").submit();
			// }
			function moveSelected() {
					let selectedIds = JSON.parse(localStorage.getItem("selectedContacts")) || [];

					if (selectedIds.length === 0) {
							alert("Please select at least one contact.");
							return;
					}

					document.getElementById("selected-ids").value = selectedIds.join(",");
					document.getElementById("download-form").submit();
			}

			function showFullMessage(id) {
					document.querySelector('.short-message-' + id).style.display = 'none';
					document.querySelector('.full-message-' + id).style.display = 'inline';
			}

			function hideFullMessage(id) {
					document.querySelector('.short-message-' + id).style.display = 'inline';
					document.querySelector('.full-message-' + id).style.display = 'none';
			}
			function uncheckAll() {
					localStorage.removeItem("selectedContacts"); 
					document.querySelectorAll(".contact-checkbox").forEach((checkbox) => {
							checkbox.checked = false; 
					});
			}
	</script>

@stop



@stop