@extends('admin.layout.layout')

@section('title') Create 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">Add 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">Add 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.store') }}">
    @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" style="display: none;">
        <label>Preview</label><br>
        <img id="imagePreview" class="img-thumbnail" style="max-width: 300px;" src="/path/to/default.jpg" />
    </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">
        <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)" />
        <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">
        <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">
        <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" 
               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"></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" ></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">Yes</option>
            <option value="no">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">Yes</option>
            <option value="no">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" 
               placeholder="Enter link">
        <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)" />
        <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" 
               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"></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">Active</option>
            <option value="inactive">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() {
	
		    let croppieInstance;
    let hasCropped = false;
    const defaultImage = '/path/to/default.jpg';

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

    // On image selection
    $('#imageInput').on('change', function (e) {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = function (e) {
            croppieInstance.bind({ url: e.target.result });
            hasCropped = false;
            $('#croppedImageData').val('').prop('disabled', true);
        };
        reader.readAsDataURL(file);
    });

    // Crop image
    $('#cropButton').on('click', function () {
        if (!croppieInstance) return;

        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).show();
            $('#previewWrapper').show();
            hasCropped = true;
        });
    });

    // Reset image
    $('#resetImageButton').on('click', function () {
        if (croppieInstance) {
            croppieInstance.bind({ url: defaultImage });
        }
        $('#imageInput').val('');
        $('#croppedImageData').val('').prop('disabled', true);
        $('#imagePreview').attr('src', defaultImage);
        $('#previewWrapper').show();
        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();

            if (!hasCropped) {
                toastr.warning("Please crop the image before submitting.");
                return;
            }

            const btn = $('#submitButton').prop('disabled', true).text('Uploading...');
            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');
                        $('#formToProcess')[0].reset(); 
						setTimeout(function() {
						window.location.href = "{{ route('admin.events.index') }}";
					}, 1500);
                    } 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