@extends('admin.layout.layout')

@section('title') Update Event @endsection

@section('content')


<div class="page-content">
                    <div class="container-fluid">

                        <!-- start page title -->
                        <div class="row">
                            <div class="col-12">
                                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                                    <h4 class="mb-sm-0 font-size-18">Update Event</h4>

                                    <div class="page-title-right">
                                        <ol class="breadcrumb m-0">
                                            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                                            <li class="breadcrumb-item active">Update Event</li>
                                        </ol>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- end page title -->
						<div class="card">
                                    <div class="card-body">
									 <form id="formToProcess" method="POST" action="{{ route('admin.events.update', $event->id) }}">
    @csrf
						<div class="row">
						
                            <div class="col-xl-10">
                                
                                       
                                      
	
	<div class="mb-3">
        <label>Select Image</label>
        <input type="file" id="imageInput" class="form-control">
        <span class="text-danger error-message" id="image-error"></span>
    </div>
	
		<div class="img-wrapper">

    <div class="mb-3">
        <div id="croppieContainer"></div>
    </div>
<div class="d-flex justify-content-center gap-2">
    <button type="button" class="btn btn-success" id="cropButton">Crop Image</button>
    <button type="button" class="btn btn-secondary" id="resetImageButton">Reset Image</button>
  </div>
  
  <div class="d-flex justify-content-center">
    <div class="mb-3 mt-3" id="previewWrapper">
        <label>Preview</label><br>
        <img id="imagePreview" class="img-thumbnail" style="max-width: 300px;" src="{{asset('storage')}}/{{$event->image}}" />
    </div>
  </div>
    <input type="hidden" name="cropped_image" id="croppedImageData" disabled>
 </div>
                                          <div class="mb-3">
        <label for="name" class="form-label">Name</label>
        <input type="text" class="form-control" id="name" name="name" 
               placeholder="Enter Name" value="{{$event->name}}">
        <span class="text-danger error-message" id="name-error"></span>
    </div>
	
	<div class="mb-3">
        <label for="slug" class="form-label">Slug</label>
        <input type="text" class="form-control" id="slug" name="slug" 
               placeholder="Enter Slug" onkeypress="return /^[a-zA-Z0-9_-]$/.test(event.key)" value="{{$event->slug}}" />
        <span class="text-danger error-message" id="slug-error"></span>
    </div>
	


							<div class="mb-3">
        <label for="event_date" class="form-label">Event Date</label>
        <input type="date" class="form-control" id="event_date" name="event_date" 
               placeholder="Enter Event Date" value="{{$event->event_date}}">
        <span class="text-danger error-message" id="event_date-error"></span>
		</div>

						
							 <div class="mb-3">
        <label for="event_time" class="form-label">Event Time</label>
        <input type="text" class="form-control" id="event_time" name="event_time" 
               placeholder="Enter Event Time" value="{{$event->event_time}}">
        <span class="text-danger error-message" id="event_time-error"></span>
    </div>
	
	<div class="mb-3">
        <label for="event_venue" class="form-label">Event Venue</label>
        <input type="text" class="form-control" id="event_venue" name="event_venue" value="{{$event->event_venue}}"
               placeholder="Enter Event Venue">
        <span class="text-danger error-message" id="event_venue-error"></span>
    </div>
	
	
	<div class="row">
	<div class="col-xl-12">
	
	<div class="mb-3">
                                            <label for="summary">Summary</label>
                                            <textarea id="summary" name="summary" class="form-control valid" rows="5" placeholder="Enter Summary" aria-invalid="false">{{$event->summary}}</textarea>
											<span class="text-danger error-message" id="summary-error"></span>
                                        </div>

	</div>
	</div>
	
		<div class="row">
	<div class="col-xl-12">
	
	<div class="mb-3">
                                            <label for="description">Description</label>
                                           <textarea class="elm1" id="description" name="description" >{{$event->description}}</textarea>
											<span class="text-danger error-message" id="description-error"></span>
                                        </div>

	</div>
	</div>
	
	
		<div class="row">
	<div class="col-xl-6">
	
	<div class="mb-3">
        <label for="is_home" class="form-label">Select Home Status</label>
        <select id="is_home" class="form-select" name="is_home">
            <option value="">Choose...</option>
			 <option value="yes" {{ old('is_home', $event->is_home ?? '') == 'yes' ? 'selected' : '' }}>Yes</option>
            <option value="no" {{ old('is_home', $event->is_home ?? '') == 'no' ? 'selected' : '' }}>No</option>
			
        </select>
        <span class="text-danger error-message" id="is_home-error"></span>
    </div>

	</div>
	
		<div class="col-xl-6">
	
	<div class="mb-3">
        <label for="is_featured" class="form-label">Select Featured Status</label>
        <select id="is_featured" class="form-select" name="is_featured">
            <option value="">Choose...</option>
            <option value="yes" {{ old('is_featured', $event->is_featured?? '') == 'yes' ? 'selected' : '' }}>Yes</option>
            <option value="no" {{ old('is_featured', $event->is_featured?? '') == 'no' ? 'selected' : '' }}>No</option>
        </select>
        <span class="text-danger error-message" id="is_featured-error"></span>
    </div>

	</div>
	</div>
	
<div class="mb-3">
        <label for="link" class="form-label">Link</label>
        <input type="text" class="form-control" id="link" name="link" value="{{$event->link}}"
               placeholder="Enter link url">
        <span class="text-danger error-message" id="link-error"></span>
    </div>
	
	<div class="mb-3">
        <label for="event_priority" class="form-label">Event Priority</label>
        <input type="text" class="form-control" id="event_priority" name="event_priority" 
               placeholder="Enter Priority" onkeypress="return /^[0-9]$/.test(event.key)" value="{{$event->event_priority}}" />
        <span class="text-danger error-message" id="event_priority-error"></span>
    </div>
	
			 <div class="mb-3">
        <label for="seo_title" class="form-label">Seo Title</label>
        <input type="text" class="form-control" id="seo_title" name="seo_title" value="{{ old('seo_title', $event->seo_title ?? '') }}"
               placeholder="Seo Title">
    </div>
	
	<div class="mb-3">
                                            <label for="seo_meta">Seo Meta</label>
                                            <textarea id="seo_meta" name="seo_meta" class="form-control valid" rows="3" placeholder="Seo Meta" aria-invalid="false">{{$event->seo_meta}}</textarea>
                                        </div>
							
											 <div class="mb-3">
        <label for="status" class="form-label">Select Status</label>
        <select id="status" class="form-select" name="status">
            <option value="">Choose...</option>
           <option value="active" {{ old('status', $event->status ?? '') == 'active' ? 'selected' : '' }}>Active</option>
            <option value="inactive" {{ old('status', $event->status ?? '') == 'inactive' ? 'selected' : '' }}>Inactive</option>
        </select>
        <span class="text-danger error-message" id="status-error"></span>
    </div>


                                           
										   <div>
                                                <button id="submitButton" type="submit" class="btn btn-primary w-md">Submit</button>
                                            </div>
                                       
                                    </div>
                                    <!-- end card body -->

                              
							  </div>
							   </form>
                                <!-- end card -->
                            </div>
                            <!-- end col -->

 </div>
                        
                        
                    </div> <!-- container-fluid -->
                </div>

@endsection
@section('script')
<script>

$(document).ready(function() {
	
		            const existingImageUrl = $('#imagePreview').attr('src'); // Store original image URL
        let croppieInstance;
        let hasCropped = false;
        let hasNewImage = false; // Track if new image was selected

        // Initialize Croppie
        croppieInstance = new Croppie($('#croppieContainer')[0], {
           viewport: { width: 880, height: 350 },
        boundary: { width: 882, height: 352 },
            showZoomer: true,
            enableResize: false
        });

        // Hide croppie controls initially
        $('#cropButton, #resetImageButton').hide();

        // On image selection
        $('#imageInput').on('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;
            
            hasNewImage = true; // Flag that new image was selected
            hasCropped = false; // Reset crop status
            $('#cropButton, #resetImageButton').show(); // Show controls
            
            const reader = new FileReader();
            reader.onload = function(e) {
                croppieInstance.bind({ url: e.target.result });
                $('#croppedImageData').val('').prop('disabled', true);
            };
            reader.readAsDataURL(file);
        });

        // Crop image
        $('#cropButton').on('click', function() {
            croppieInstance.result({
                type: 'base64',
                size: { width: 880, height: 350 },
                format: 'jpeg',
                quality: 1
            }).then(function(base64) {
                $('#croppedImageData').val(base64).prop('disabled', false);
                $('#imagePreview').attr('src', base64);
                hasCropped = true;
            });
        });

        // Reset image
        $('#resetImageButton').on('click', function() {
            $('#imageInput').val('');
            $('#croppedImageData').val('').prop('disabled', true);
            $('#imagePreview').attr('src', existingImageUrl);
            $('#cropButton, #resetImageButton').hide();
            hasNewImage = false;
            hasCropped = false;
        });
	
	
    $('#formToProcess').validate({
        rules: {
            name: {
                required: true,
                maxlength: 191
            },
			event_date: {
                required: true
            },
			event_time: {
                required: true
            },
			event_venue: {
                required: true
            },
			summary: {
                required: true
            },
            status: {
                required: true,
            },
			cropped_image: { required: true }
        },
        messages: {
            name: {
                required: "Please enter  name",
                maxlength: "name should not exceed 191 characters"
            },
			event_date: {
                required: "Please enter  event date"
            },
			event_time: {
                required: "Please enter  event time"
            },
			event_venue: {
                required: "Please enter  event venue"
            },
			summary: {
                required: "Please enter  summary"
            },
            status: "Please select a valid status",
			cropped_image: "Please crop and select an image"
        },
        errorPlacement: function (error, element) {
            $('#' + element.attr('id') + '-error').html(error);
        },
        submitHandler: function (form, e) {
            e.preventDefault();
			const submitButton = $('#submitButton');
const btn = $('#submitButton').prop('disabled', true).text('Uploading...');
            // Only validate crop if new image was selected
                if (hasNewImage && !hasCropped) {
                    toastr.warning("Please crop the image before submitting.");
                    btn.prop('disabled', false).text('Submit');
                    return;
                }

            
            const formData = new FormData(form);

            $.ajax({
                url: $(form).attr('action'),
                method: $(form).attr('method'),
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $('.error-message').html('');
                },
                success: function(response) {
                    if (!response.error) {
                        toastr.success(response.message, 'Success');
						
                   
                    } else {
                        toastr.error(response.message, 'Error');
                    }
                },
                error: function(xhr) {
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        toastr.error(xhr.responseJSON.message, 'Server Error');
                    }
                    
                    if (xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(key, value) {
                            $('#' + key + '-error').html(value[0]);
                        });
                    }
                },
                complete: function() {
                    // Re-enable the button and restore text
                    submitButton.prop('disabled', false).text('Submit');
                }
            });
        }
    });
});
</script>
@endsection