@extends('layouts.app')
@section('title', __('tracker::lang.Schedule'))
@section('content')
@section('css')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
    <style>
        #map {
            height: 500px; /* Adjust as needed */
            width: 100%;
        }
    </style>
	@php
		$trips = \Modules\Tracker\Entities\Trip::with([
			'getCustomer',
			'getUser',
			'getSchedule'
		])->latest()->limit(100)->get();
	@endphp
@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.Schedule')
    </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="col-md-12">
							<div class="box-tools pull-right">

							</div>
						</div>
					</div>

					<div id="calendar">
						
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<div class="modal fade" id="action_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
<div class="modal fade " tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">

@stop
@section('javascript')
	<script>
		$(document).ready(function() {

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

		@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 () {
			$('.datepicker').datepicker({
				format: 'mm/dd/yyyy', // Adjust the format as needed
				startDate: new Date(), // Disallow previous dates
				autoclose: true
			});
		});

		$(document).ready(function(){
			//on button click show modal
			$('button.add_routes').click( function(){
				$('div.routes').modal('show');
			});

			//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");
							$('.save_routes').prop('disabled', false);
							reload_calendar();
							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.schedule') }}',
				// 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' );
			}

			//on click show reminder
			$(document).on('click', '.btn-modal', function() {
				var url = $(this).data('href'); // Get the ID from the button
				$.ajax({
					url: url, // Adjust the route based on your Laravel routes
					type: 'GET',
					success: function(response) {
						$('.view_modal').html(response).modal('show');
					},
					error: function(xhr) {
						console.log('Error:', xhr);
					}
				});
			});

			//call function when modal opened
			$(".view_modal").on('shown.bs.modal', function(){
				$("form#update_routes_repeat").validate();
			});

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

			//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);
						}
					}
				});
			});
		});
	</script>
@endsection