@extends('layouts.app')
@section('title', 'calander')

@section('content')
<style>
.fc-event {
    border-radius: 0;
    border: none;
     color: black !important; */
    font-size: 0.8571rem;
    margin: 1px -1px 0;
    padding: 5px;
    cursor: move;
    text-align: center;
}

</style>
  	<!-- Main content -->
      <section class="content">
      <div class="row">  
<div class="col-12">
  <div class="box">

   <div class="box-body">   
    <h4 class="box-title text-info mb-0"><i class="fa fa-list"></i> Calender</h4>
          <hr class="my-15"> 
		    <div class="row">	
			  <div class="col-xl-9 col-lg-8 col-12">
				  <div class="box">
					  <div class="box-body"id="cal">
                      {!! $calendar->calendar() !!}
                        {!! $calendar->script() !!}
					  </div>
				  </div> 
			  </div>
			  <div class="col-xl-3 col-lg-4 col-12"> 
				<div class="box no-border no-shadow">
					
					<div class="box-body p-0">
					  <!-- the events -->
			
					  <div class="event-fc-bt mx-15 my-20">
						<!-- checkbox -->
				
						<a href="#" data-bs-toggle="modal" data-bs-target="#add-new-events" class="btn btn-success w-p100 my-10">
							<i class="ti-plus"></i> Add New Event
						</a>
                        <!-- <a href="{{url('display-events')}}"  class="btn btn-success w-p100 my-10">
							<i class="ti-plus"></i> Edit Event
						</a> -->
					  </div>
				   </div>
			    </div>
			  </div> 
			</div>
		</section>
        <div class="modal fade none-border" id="add-new-events">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title"><strong>Add</strong> a Event</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                    <form>
                    @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label">Title</label>
                                    <input class="form-control form-white" placeholder="Enter Title" type="text" name="title"required=""/>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Choose  Color</label>
                                    <select class="form-select form-white" data-placeholder="Choose a color..." name="color"id="colorSelect">
                                        <option value="#00FF00">Green</option>
                                        <option value="#FF0000">Red</option>
                                        <option value="#0000FF">Blue</option>
                                        <option value="#FFFF00">Yellow</option>
                                    </select>
                                    <!-- <input class="form-control form-white" placeholder="Enter Title" type="color" name="color" /> -->

                                </div>
                            </div>
                                <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label">Start Date</label>
                                    <input class="form-control form-white" type="datetime-local" name="start_date" />
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">End date</label>
                                    <input class="form-control form-white"  type="datetime-local" name="end_date" />

                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-success save-category">Save</button>
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                        </div>
                    </form>
                </div>
            </div>
	    </div>
        <div class="modal fade none-border" id="eventDetailsModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    
                    <div class="modal-header">
                
                
                       <input type="text" id="eventIdInput" value="{{ $eventId }}">

                        <h4 class="modal-title"><strong>Event Details</strong></h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <!-- Display Event Details Here -->
                        <p><strong>Title:</strong> <span id="eventTitle"></span></p>         
                        
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="editEventBtn">Edit Event</button>
                        <button type="button" class="btn btn-danger" id="deleteEventBtn">Delete Event</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade none-border" id="edit-events">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title"><strong>Edit</strong> a Event</h4>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                            <form>
                            @csrf
                            <input type="hidden" class="form-control" name="eve_id" value="{{$eventId}}" id ="eve_id" required>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="form-label">Title</label>
                                            <input class="form-control form-white" placeholder="Enter Title" type="text" name="title" id="editTitle"/>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Choose  Color</label>
                                            <select class="form-select form-white" data-placeholder="Choose a color..." name="color"id="editColor">
                                                <option value="#00FF00">Green</option>
                                                <option value="#FF0000">Red</option>
                                                <option value="#0000FF">Blue</option>
                                                <option value="#FFFF00">Yellow</option>
                                            </select>
                                            <!-- <input class="form-control form-white" placeholder="Enter Title" type="color" name="color" /> -->

                                        </div>
                                    </div>
                                        <div class="row">
                                        <div class="col-md-6">
                                            <label class="form-label">Start Date</label>
                                            <input class="form-control form-white" type="datetime-local" name="start_date"id="editStart" />
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">End date</label>
                                            <input class="form-control form-white"  type="datetime-local" name="end_date"id="editEnd" />

                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-success editCalender">Save</button>
                                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
        </div>
        <div class="modal fade" id="delete" tabindex="-1" aria-labelledby="deleteLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="myModalLabel">Confirm Delete</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                        <div class="modal-body">
                        <p>You are about to delete <b><i class="title"></i></b>Event.</p>
                        <p>Do you want to proceed?</p>
                        <input type="hidden" class="form-control" name="event_id"  id="event_id"value="{{$eventId}}">
                        
                        </div>
                        <div class="modal-footer">
                        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                        <button type="submit"name="submit" class="btn btn-danger btn-sm deleteEvent">Delete</button>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
</div>
</div>

 
<script>
$(document).on("click", ".save-category", function (event) {
    var el = this;
    var title = $('input[name="title"]').val();
    var color = $('select[name="color"]').val();
    var startDate = $('input[name="start_date"]').val();
    var endDate = $('input[name="end_date"]').val();
    if (!title || !color || !startDate || !endDate) {
        toastr.error('Please fill all fields');
        return false; // Stop further execution
    }
    if (endDate < startDate) {
        toastr.error('End date cannot be less than start date');
        event.preventDefault(); // Prevent the default form submission
        event.stopPropagation(); // Stop event propagation to prevent modal from closing
        return false; // Stop further execution
    }

    $.ajax({
        url: 'add-events',
        type: 'post',
        data: {
            _token: "{{ csrf_token() }}",
            title: title,
            color: color,
            start_date: startDate,
            end_date: endDate
        },
        success: function (response) {
            toastr.success('Event has been added successfully');
            window.location.reload(1);
        },
        error: function (xhr, status, error) {
            toastr.error('Error occurred while adding event');
            console.error(xhr.responseText);
        }
    });
});

</script>

<script>
 

// Click event handler for the events
$('#cal').on('click', '.fc-event', function () {
    // var eventId = $(this).data('eventid'); 
    // alert(eventId);
    // var eventId = $(this).data('id'); 
    // alert(eventId);
   
    var eventTitle = $(this).find('.fc-title').text();
    var eventColor = $(this).css('background-color');
    var eventStartDate = $(this).find('.fc-time').text();
    var eventEndDate = ''; // Assuming end date is not displayed in the event HTML

    // Update modal with event details
    $('#eventTitle').text(eventTitle);
    $('#eventColor').text(eventColor);
    $('#eventStartDate').text(eventStartDate);
    $('#eventEndDate').text(eventEndDate);

    // Show event details modal
    $('#eventDetailsModal').modal('show');
});

        $('#editEventBtn').on('click', function () {
            // Implement edit event logic here (e.g., redirect to edit page)
            $('#eventDetailsModal').modal('hide');
            $('#edit-events').modal('show');
            var edit_id = $("#eve_id").val();
    $.ajax({
        url: 'edit-events/' + edit_id,
        type: 'get', // Assuming you need to fetch event details using 'get' method
        success: function(response) {
            // Populate modal inputs with event details
            console.log(response);
            // alert(response)
            $('#editTitle').val(response.title);
            $('#editColor').val(response.color);
            $('#editStart').val(response.start_date);
            $('#editEnd').val(response.end_date);

            // Show the modal
            $('#edit-events').modal('show');
        },
        error: function(xhr, status, error) {
            // Handle errors if any
            console.log(xhr.responseText);
        }
    });

        });
               // Delete event button click handler
               $('#deleteEventBtn').on('click', function () {
            // Implement delete event logic here (e.g., confirm deletion and send AJAX request)
            $('#eventDetailsModal').modal('hide');
            $('#delete').modal('show');
        });
        $(document).on("click", ".deleteEvent", function () {
            // if (confirm("Are you sure you want to delete this record?")) {
             var event = $("#event_id").val();
            // var eventId = $(this).data('id');
            var el = this;
            $.ajax({
                url: 'delete-events/' + event,
                type: 'get',
                success: function (response) {
                    toastr.success('Event has been deleted successfully');
                    window.location.reload(1);
                }
            });
        });
    </script>
    <script>
        $(document).on("click", ".editCalender" , function() {
    var edit_id = $("#eve_id").val();
    var startDate = $('#editStart').val();
    var endDate =  $('#editEnd').val()

    if (endDate < startDate) {
        toastr.error('End date cannot be less than start date');
        event.preventDefault(); // Prevent the default form submission
        event.stopPropagation(); // Stop event propagation to prevent modal from closing
        return false; // Stop further execution
    }
$.ajax({
   url: 'edit-events/'+edit_id,
   type: 'post',
   data: {
        _token: "{{ csrf_token() }}", // Add the CSRF token
        title: $('#editTitle').val(), // Get input values by ID
        color: $('#editColor').val(),
        start_date: startDate,
        end_date: endDate
    },
   success: function(response){
       console.log(response);
       toastr.success('Event has been updated successfully');
       window.location.reload(1);


   }
});
});



        </script>
@endsection