@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">
                
				<form id="download-form" action="{{ route('contactus.download') }}" method="POST" style="margin-bottom: 10px;">
						@csrf
						<!-- <button type="button" class="btn btn-success md-4" onclick="downloadSelected()">Download Selected</button> -->
						<select name="category" id="category" class="form-control col-md-2 mb-2">
							<option value="other">Other</option>
							<option value="oci">OCI</option>
							<option value="passport">Passport</option>
							<option value="visa">Visa</option>
							<option value="pcc">Pcc</option>
							<option value="pancard">Pancard</option> 
						</select>
						@php $pay_filter = "";
							if(isset($_GET['category'])){
								$pay_filter = $_GET['category'];
							}
						@endphp
						<select name="filter_cat" id="filter_cat" onchange="data_filter();" class="form-control col-md-2 mb-2">
							<option value="{{ route('contactus.listing', ['category' => 'with']) }}" @if($pay_filter == "" or $pay_filter == "with") selected @endif>With User Time</option>
							<option value="{{ route('contactus.listing', ['category' => 'without']) }}" @if($pay_filter == "" or $pay_filter == "without") selected @endif>Without User Time</option>
						</select> 

						<button type="button" class="btn btn-danger" onclick="uncheckAll()">Uncheck All</button>
						<button type="button" class="btn btn-primary" onclick="moveSelected()">Move</button>
						<input type="hidden" name="selected_ids" id="selected-ids">
				</form>
				<a href="{{ route('contactus.listing', ['id' => 0]) }}" class="btn btn-primary">N/A</a>
				<a href="{{ route('contactus.verified', ['status' => 'verify']) }}" class="btn btn-primary">Verified</a>
				<a href="{{ route('contactus.verified', ['status' => 'flag']) }}" class="btn btn-primary">Flag</a>
				<a href="{{ route('contactus.listing', ['id' => 'name']) }}" class="btn btn-primary">With Name</a>
				<a href="{{ route('contactus.listing', ['id' => 'message']) }}" class="btn btn-primary">With Message</a>


									<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 style="width:150px;">Source URL</th>
											<th>Total Requests</th>
											<th>Verify</th>
											<th>Flag</th>
											<th>Send Mail</th>
											<th>Action</th>
										</tr>
										  
											@foreach ($store as $contact1)
											@php 
												$contact = $contact1->first();
											//echo "<pre>"; print_r($contact); exit; @endphp
												<tr id="ele_tag_{{$k}}">
													<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 ?? '';
															$words = explode(' ', $message);
															$shortMessage = implode(' ', array_slice($words, 0, 10));
														@endphp
														<span class="short-message-{{$contact->id}}">
															{{ $shortMessage }} @if(count($words) > 10)... 
															<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);
																}
															@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 style="width:150px;word-break:break-all;font-size:14px;">{{ $cleanPath }}</td>
													<td @if(count($contact->appointments) > 1) style="width:150px;word-break:break-all;font-size:14px;cursor:pointer;" onclick="show_bw({{$k}},'{{$contact->email}}');" @else style="width:150px;word-break:break-all;font-size:14px;" @endif >@if(count($contact->appointments) > 1) <span style="color:blue;color: #6161f1;font-weight: bold;">{{ count($contact->appointments) }}</span> @else {{ count($contact->appointments) }} @endif</td>
													<td>
														<input type="checkbox" data-id="{{ $contact->id }}" name="is_verify" class="js-switch" {{ $contact->is_verified == 1 ? 'checked' : '' }}>
                          </td>
                          <td>
														<input type="checkbox" data-id="{{ $contact->id }}" name="is_flag" class="js-switch" {{ $contact->is_verified == 2 ? 'checked' : '' }}>
                          </td>
													<td>
														<div class="item">
															<a href="{{route('contactus.emails', $contact->id)}}" class="btn btn-sm btn-primary" title="Send Mail">
																<i class="fa fa-envelope"></i>
															</a>
														</div>
													</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++; $k++; @endphp
												</tr>
											@endforeach
									</table>
						</div>
                <!-- /.card-body -->

						<div class="box-footer clearfix">
						{{-- $store->appends(request()->query())->links() --}}
						{!! $store->links('pagination::bootstrap-5') !!}
						</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 src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <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>
let isUpdating = false;

document.querySelectorAll('input.js-switch[name="is_verify"]').forEach(function(el) {
    new Switchery(el, {
        size: 'small',
        color: '#28a745',        
        secondaryColor: '#6c757d' 
    });
    applyThirdColor(el);
});

document.querySelectorAll('input.js-switch[name="is_flag"]').forEach(function(el) {
    new Switchery(el, {
        size: 'small',
        color: '#dc3545',         
        secondaryColor: '#6c757d' 
    });
    applyThirdColor(el);
});

function applyThirdColor(el) {
    if (!el.checked && el.nextSibling) {
        el.nextSibling.style.backgroundColor = '#6c757d';
        el.nextSibling.style.borderColor = '#6c757d';
    }
}

$('.js-switch').change(function () {  
    if (isUpdating) return;
    isUpdating = true;

    const id = $(this).data('id');
    const $verify = $('input[name="is_verify"][data-id="' + id + '"]');
    const $flag = $('input[name="is_flag"][data-id="' + id + '"]');

    let status = 0;

    if ($verify.is(':checked')) {
        status = 1;
        $flag.prop('checked', false);
        $flag.next('.switchery').removeClass('checked');
    } else if ($flag.is(':checked')) {
        status = 2;
        $verify.prop('checked', false);
        $verify.next('.switchery').removeClass('checked');
    }

    // Update styles
    applyThirdColor($verify[0]);
    applyThirdColor($flag[0]);

    // Ajax update
    $.ajax({
        type: "POST",
        url: '/admin/update-contact/' + id,
        data: {
            is_published: status,
            _token: '{{ csrf_token() }}'
        },
        success: function (data) {
            toastr.success(data.message || 'Status updated');
        },
        error: function (xhr) {
            toastr.error('Failed to update status');
            console.log(xhr.responseText);
        },
        complete: function () {
            isUpdating = false;
        }
    });
});
</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>

<script>
	function show_bw(row_id,email) {  
        $(".dynamic_ele").remove(); 
        if (email) {
          $.ajax({
            url: '/admin/contactus-queries?email='+email,
            type: 'get',
            data: {
              _token: '{{ csrf_token() }}',
            },
            success: function (response) { 
              $("#ele_tag_"+row_id).after(response); 
            },
            error: function () {
              toastr.error('Failed to update contact status.'); 
            }
          });
        }  
    }


	function data_filter(){
		var f_url = $("#filter_cat").val();
		window.location.href = f_url; 
	}
</script>

@stop



@stop