@extends('layouts.app')
@section('title', __('tracker::lang.Trip Routes'))
@section('content')
@section('css')
@endsection
@include('tracker::layouts.nav')
	<!-- Content Header (Page header) -->
	<section class="content-header no-print">
		<h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
			@lang('tracker::lang.Trip Routes')
		</h1>
	</section>

	<!-- Main content -->
	<section class="content">
		<div class="row">
			<div class="col-md-12">
				<div class="box box-solid">
					<div class="box-body">
						<div class="row">
							<div class="box-tools pull-left">
								<button class="tw-dw-btn tw-bg-gradient-to-r tw-from-indigo-600 tw-to-blue-500 tw-font-bold tw-text-white tw-border-none tw-rounded-full btn-modal"
										data-href="{{ route('trip-routes.create') }}" data-container=".trip_routes_modal">
									<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
									stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
									class="icon icon-tabler icons-tabler-outline icon-tabler-plus">
										<path stroke="none" d="M0 0h24v24H0z" fill="none" />
										<path d="M12 5l0 14" />
										<path d="M5 12l14 0" />
									</svg> @lang('tracker::lang.Add Routes')
								</button>
							</div>
						</div>
						<br>

						<div class="row">
							<div class="col-md-12">
								<div class="table-responsive">
									<table class="table table-bordered table-striped" id="task_table">
										<thead>
											<tr>
												<th>@lang('tracker::lang.Title')</th>
												<th>@lang('lang.location')</th>
												<th>@lang('tracker::lang.Start Date')</th>
												<th>@lang('tracker::lang.End Date')</th>
												<th>@lang('business.country')</th>
												<th>@lang('business.state')</th>
												<th>@lang('business.city')</th>
												<th>@lang('tracker::lang.repeat')</th>
												<th>@lang('tracker::lang.Action')</th>
											</tr>
										</thead>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div id="editModalContainer"></div>
		<div id="viewModalContainer"></div>
		<div class="modal fade trip_routes_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"></div>

	</section>
@stop

@section('javascript')
	<script src="{{ asset('modules/locations/js/app.js?v=' . time()) }}"></script>

	<script type="text/javascript">
		$(document).on('shown.bs.modal', '.trip_routes_modal', function(e) {
			initAutocomplete();
		});
	</script>

	<script>
		$(document).on('click', '.restore_routes', function(e) {
			e.preventDefault();
			var url = $(this).data('href');

			$(this).removeClass('btn-success').addClass('btn-primary');
			$(this).find('i').attr('class', 'fas fa-sync-alt fa-spin');

			$.ajax({
				url: url,
				method: 'POST', // Laravel will treat it as PUT
				success(response) {
					if (response.success) {
						toastr.success(response.msg);
						task_table.ajax.reload(null, false);
					} else {
						$(this).removeClass('btn-primary').addClass('btn-danger');
						$(this).find('i').attr('class', 'fas fa-sync-alt fa-spin');
						toastr.error(response.msg || 'Error updating.');
					}
				},
				error(xhr) {
					$(this).removeClass('btn-primary').addClass('btn-danger');
					$(this).find('i').attr('class', 'fas fa-sync-alt fa-spin');
					toastr.error(response.msg || 'Error updating.');
				}
			});

		});
	</script>
	
	<script>
		$(document).ready(function() {
			// إعداد CSRF token للطلبات
			$.ajaxSetup({
				headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				}
			});

			setTimeout(function(){
				task_table = $('#task_table').DataTable({
					processing: true,
					serverSide: true,
					ajax: {
						url: "{{ route('trip-routes.index') }}",
					},
					columnDefs: [
						{ targets: [3, 4], orderable: false, searchable: false },
					],
					columns: [
						{ data: 'title', name: 'title'},
						{ data: 'location', name: 'location'},
						{ data: 'start_date', name: 'start_date'},
						{ data: 'end_date', name: 'end_date'},
						{ data: 'country', name: 'country'},
						{ data: 'state', name: 'state'},
						{ data: 'city', name: 'city'},
						{ data: 'schedule_repeat', name: 'schedule_repeat'},
						{ data: 'action', name: 'action'},
					],
				});
			}, 500);
		
			$(document).on('click', '.btn-modal', function (e) {
				e.preventDefault();

				let href = $(this).data('href');
				let container = $(this).data('container') || '#editModalContainer';

				// ✅ اغلق أي مودال مفتوح حاليًا
				$('.modal').modal('hide');

				// ✅ امسح الـ container
				$(container).empty();

				// ✅ أضف لودر مؤقت داخل الـ container
				$(container).html(`
					<div class="text-center py-5">
						<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
							<span class="sr-only">Loading...</span>
						</div>
						<div class="mt-3">جارٍ تحميل البيانات...</div>
					</div>
				`);

				$.ajax({
					url: href,
					dataType: 'html',
					success: function (result) {
						$(container).html(result);

						const modalEl = $(container).find('.modal');
						if (modalEl.length) {
							$('body').removeClass('modal-open');
							$('.modal-backdrop').remove();

							modalEl.modal({
								backdrop: 'static',
								keyboard: true,
								focus: true
							});

							modalEl.on('shown.bs.modal', function () {
								$('.select2').select2({ dropdownParent: modalEl });
								$('.datepicker').datepicker({ format: 'mm/dd/yyyy', autoclose: true });
							});

							modalEl.on('hidden.bs.modal', function () {
								modalEl.remove();
								$(container).empty();
							});
						}
					},
					error: function () {
						$(container).empty(); // إزالة اللودر
						toastr.error('حدث خطأ أثناء تحميل البيانات.');
					}
				});
			});
		});

		@php
			$fullcalendar_lang_file = session()->get('user.language', config('app.locale') ) . '.js';
		@endphp
		<!-- TODO -->
		@if(file_exists(public_path() . '/plugins/fullcalendar/locale/' . $fullcalendar_lang_file))
			<!-- <script src="{{ asset('plugins/fullcalendar/locale/' . $fullcalendar_lang_file . '?v=' . $asset_v) }}"></script> -->
		@endif
	</script>

	<script type="text/javascript">
		$(document).ready(function(){
			//call function when modal opened
			$(".routes").on('shown.bs.modal', function(){
				//routes_form validate
				routes_form_validator = $("form#routes_form").validate();

				//date-picker
				$('form#routes_form .datepicker').datepicker({
						autoclose: true,
						format:datepicker_date_format,
				});

				//time
				$('form#routes_form input#time').datetimepicker({
						format: moment_time_format,
						ignoreReadonly: true,
				});

				$('form#routes_form input#end_time').datetimepicker({
						format: moment_time_format,
						ignoreReadonly: true,
				});
			});

			//on hide reset routes_form
			$('.routes').on('hidden.bs.modal', function(){
				routes_form_validator.destroy();
				$("form#routes_form")[0].reset();
			});

			//saving reminder
			$(document).on("submit", "form#routes_form", function(e){
				e.preventDefault();
				var data = $("form#routes_form").serialize();
				var url = $("form#routes_form").attr("action");
				
				$('.save_routes').prop('disabled', false);
				
				$.ajax({
					method: "POST",
					url: url,
					data: data,
					// dataType: "json",
					success: function(result){
						if(result.success == true){
							$('.routes').modal("hide");
							$('.trip_routes_modal').modal('hide');

							$('.save_routes').prop('disabled', false);
							reload_calendar();
            				task_table.ajax.reload();
							toastr.success(result.msg);
						} else {
							toastr.error(result.msg);
						}
					}
				});
			});

			//full calender
			clickCount = 0;
			$("#calendar").fullCalendar({
				header:{
					left: 'prev,next today',
					center: 'title',
					// right: 'month,agendaWeek,agendaDay'
					right: 'month'
				},
				eventLimit: true,
				events: '{{ route('trip-routes.index') }}',
				// timeFormat: 'h(:mm)t', // like '7p'
				eventRender:function(event, element){
					var eventname_html = event.title;
					element.find('.fc-title').html(eventname_html);
					element.attr('data-href', event.url);
					element.attr('data-container', '.view_modal');
					element.addClass('btn-modal');
				},
				dayClick: function(date, jsEvent, view){
					clickCount++;
					if(clickCount == 2){
						$('.routes').modal("show");
					}
					var clickTimer = setInterval(function(){
							clickCount = 0;
							clearInterval(clickTimer);
					}, 500);
				}
			});

			//reload_calendar
			function reload_calendar()
			{
				$('#calendar').fullCalendar( 'refetchEvents' );
			}
		
			//delete reminder
			$(document).on('click', '.delete', function(){
				const url = $(this).data('href');
				swal({
				title: LANG.sure,
				icon: "warning",
				buttons: true,
				dangerMode: true,
				}).then((confirmed) => {
				if (!confirmed) return;
				$.ajax({
					method: "DELETE",
					url: url,
					dataType: "json",
					success(result) {
					reload_calendar();
					if (result.success) {
						$('.view_modal').modal('hide');
						toastr.success(result.msg);
            			task_table.ajax.reload();
					} else {
						toastr.error(result.msg);
					}
					},
					error(xhr) {
					toastr.error("Failed to delete.");
					}
				});
				});
			});

			//update reminder_repeat
			$(document).on('submit', 'form#update_routes_repeat', function(e){
				e.preventDefault();
				var url = $("form#update_routes_repeat").attr("action");
				var data = $("form#update_routes_repeat").serialize();
				$.ajax({
					method: "PUT",
					url: url,
					data: data,
					dataType: "json",
					success: function(result){
						if(result.success == true){
							$('.view_modal').modal('hide');
							reload_calendar();
							toastr.success(result.msg);
						} else {
							toastr.error(result.msg);
						}
					}
				});
			});
			
			$(document).on('click', '.action_is_closed', function(e){
				e.preventDefault();
				var url = $(this).data('href');
				swal({
				title: LANG.sure,
				icon: "warning",
				buttons: true,
				dangerMode: true,
				}).then((confirmed) => {
					if (confirmed) {
						$.ajax({
							method: "POST",
							url: url,
							dataType: "json",
							success: function(result){
								if(result.success == true){
									toastr.success(result.msg);
									task_table.ajax.reload();
								} else {
									toastr.error(result.msg);
								}
							}
						});
					}	
				});
			});
		
		});
	</script>
	
	<script>
		$(function () {
			const modalId = '#viewCustomersModal';

			if (!$(modalId).hasClass('show')) {
				$(modalId).modal({
					backdrop: 'static',
					keyboard: true
				});
			}

			$(modalId).on('shown.bs.modal', function () {
				$('.select2').select2({ dropdownParent: $(modalId) });
				$('.datepicker').datepicker({ format: 'mm/dd/yyyy', autoclose: true });
			});
		});
	</script>
@endsection