@extends('theme::layouts.app')


@section('content')
	
	<div class="dashboard-title-flex space-between">
		<h2 class="dashboard-title">{{ __("Enquiry box") }}</h2>
	</div>

	<div class="tabs-navigation blue-tabs tab-paddx-20">
		<ul>
			<li class="active"><a href="#" class="js-tab-navigate paddingx-20" data-id="#comsec-enquiry"><img class="dashboard-detail-image max-25" src="{{ asset('themes/tailwind/images/user-2.svg') }}"> {{ __("Company Secretary Enquiry") }} </a></li>
			<li><a href="#" class="js-tab-navigate " data-id="#general-enquiry"><img class="dashboard-detail-image max-25" src="{{ asset('themes/tailwind/images/access-log.svg') }}"> {{ __("General Enquiry") }} </a></li>
		</ul>
	</div>

	<div class="tabs-content enquiry-box">
		<div class="tabs-content-item" id="comsec-enquiry">
			@if ($companySecretaryEnquiries->count())
				<div class="flex">
					<div class="accordion-box">
						<div class="accordion-title">
							<span class="text-uppercase">{{ __("Recent") }}</span>
							<button class="accordion-button">
								{{-- <img src="http://127.0.0.1:8000/themes/tailwind/images/arrow-down.svg"> --}}
							</button>
						</div>
						<div class="accordion-items list-items">
							@foreach ($companySecretaryEnquiries as $enquiry)
								<div class="topic-list" data-show-url="{{ route('cms.enquiries.show', $enquiry->id) }}" data-update-url="{{ route('cms.enquiries.update-reply', $enquiry->id) }}">
									<div class="topic-head">
										<h6>{{ __("Client") }}: {{ isset($enquiry->user->company->name) ? $enquiry->user->company->name : '-' }}</h6>
										<time>{{ date('d/m/Y', strtotime($enquiry->created_at)) }}</time>
									</div>
									<div class="topic-head">
										<h4>{{ $enquiry->title }}</h4>
									</div>
									<div class="topic-body">
										<p>{!! $enquiry->message !!}</p>
										{{-- <span class="number-item">4</span> --}}
									</div>
								</div>
							@endforeach
						</div>
					</div>
					<div class="enquiry-inside" style="display: none;">
						<form class="update-reply-frm" action="#" method="POST">
							<div class="flex other-service-request">
								<h3 class="enquiry-title"></h3>
								<h5>{{ __("Client") }}: <span class="enquiry-company-name"></span></h5>
								<h5>{{ __("Submitted date") }} <span class="enquiry-submitted-date"></span></h5>
							</div>
							<div class="other-service-content enquiry-message"></div>
							<div class="other-service-input">
								<textarea class="enquiry-reply" name="reply" required></textarea>
								<button type="submit" class="btn primary-button btn-normal">{{ __("Reply") }}</button>
							</div>
						</form>
					</div>
				</div>
			@else
				<div class="empty-state-wrapper">
					<img class="img-fluid mx-auto" src="{{ asset('themes/tailwind/images/empty-state-white-img.png') }}">
					<span class="empty-text d-block text-center w-100">{{ __("It's empty here...") }}</span>
				</div>
			@endif
		</div>
		<div class="tabs-content-item" id="general-enquiry" style="display: none;">
			@if ($generalEnquiries->count())
				<div class="flex">
					<div class="accordion-box">
						<div class="accordion-title">
							<span>{{ __("RECENT") }}</span>
							<button class="accordion-button">
								{{-- <img src="http://127.0.0.1:8000/themes/tailwind/images/arrow-down.svg"> --}}
							</button>
						</div>
						<div class="accordion-items list-items">
							@foreach ($generalEnquiries as $enquiry)
								<div class="topic-list" data-show-url="{{ route('cms.enquiries.show', $enquiry->id) }}" data-update-url="{{ route('cms.enquiries.update-reply', $enquiry->id) }}">
									<div class="topic-head">
										<h6>{{ __("Client") }}: {{ isset($enquiry->user->company->name) ? $enquiry->user->company->name : '-' }}</h6>
										<time>{{ date('d/m/Y', strtotime($enquiry->created_at)) }}</time>
									</div>
									<div class="topic-head">
										<h4>{{ $enquiry->title }}</h4>
									</div>
									<div class="topic-body">
										<p>{!! $enquiry->message !!}</p>
										{{-- <span class="number-item">4</span> --}}
									</div>
								</div>
							@endforeach
						</div>
					</div>
					<div class="enquiry-inside" style="display: none;">
						<form class="update-reply-frm" action="#" method="POST">
							<div class="flex other-service-request">
								<h3 class="enquiry-title"></h3>
								<h5>{{ __("Client") }}: <span class="enquiry-company-name"></span></h5>
								<h5>{{ __("Submitted date") }} <span class="enquiry-submitted-date"></span></h5>
							</div>
							<div class="other-service-content enquiry-message"></div>
							<div class="other-service-input">
								<textarea class="enquiry-reply" name="reply" required></textarea>
								<button type="submit" class="btn primary-button btn-normal">{{ __("Reply") }}</button>
							</div>
						</form>
					</div>
				</div>
			@else
				<div class="empty-state-wrapper">
					<img class="img-fluid mx-auto" src="{{ asset('themes/tailwind/images/empty-state-white-img.png') }}">
					<span class="empty-text d-block text-center w-100">{{ __("It's empty here...") }}</span>
				</div>
			@endif
		</div>
	</div>

@endsection

@section('script')
<script>
	$(document).ready( function () {
		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			}
		});

	    $(".js-side-nav").click(function(e){
	    	e.preventDefault();
	    	var id = jQuery(this).data('id');
	    	jQuery(this).closest('.side-nav-tabs').next().find('.js-content-tab').hide();
	    	jQuery(id).show();
	    	jQuery(this).closest('.side-nav-tabs').find('li').removeClass('active');
	    	jQuery(this).parent().addClass('active');
	    });

	    $(".js-tab-navigate").click(function(e){
	    	e.preventDefault();
	    	var id = jQuery(this).data('id');
	    	jQuery(this).closest('.tabs-navigation').next().find('.tabs-content-item').hide();
	    	jQuery(id).show();
	    	jQuery(this).closest('.tabs-navigation').find('li').removeClass('active');
	    	jQuery(this).parent().addClass('active');
	    });

		$(document).on('click', '.topic-list', function(e) {
			var showUrl = $(this).attr('data-show-url');
			var updateUrl = $(this).attr('data-update-url');
			var mainWrapper = $(this).parents('.tabs-content-item').first();

			if (showUrl && updateUrl) {
				mainWrapper.find('.topic-list').removeClass('active');
				$(this).addClass('active');

				$.ajax({
					url: showUrl,
					type: "post",
					data: {},
					dataType: 'json',
					success:function(data) {
						if (data.success) {
							mainWrapper.find('.enquiry-inside').show();
							mainWrapper.find('.enquiry-inside form').attr('action', updateUrl);
							mainWrapper.find('.enquiry-inside .enquiry-title').html(data.enquiry.name);
							mainWrapper.find('.enquiry-inside .enquiry-company-name').html(data.enquiry.company_name);
							mainWrapper.find('.enquiry-inside .enquiry-submitted-date').html(data.enquiry.submitted_date);
							mainWrapper.find('.enquiry-inside .enquiry-message').html(data.enquiry.message);
							mainWrapper.find('.enquiry-inside .enquiry-reply').val(data.enquiry.reply);
						}
					}
				});
			}
		});
		$('#comsec-enquiry .topic-list:first').click();
		$('#general-enquiry .topic-list:first').click();
		
		$('.update-reply-frm').submit(function(e) {
			e.preventDefault();
			var action = $(this).attr('action');
			var button = $(this).find('button[type="submit"]');
			var buttonHtml = button.html();

			if (!button.is(':disabled') && action) {
				button.attr('disabled', 'disabled');
				button.html('<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>');

				$.ajax({
					url: action,
					type: "post",
					data: $(this).serialize(),
					dataType: 'json',
					success:function(data) {
						button.removeAttr('disabled');
						button.html(buttonHtml);

						if (data.success) {
							popToast('success', data.message);
						}
						else {
							popToast('danger', data.message);
						}
					}
				});
			}
		});
	} );
</script>
@endsection