{% extends 'base.html.twig' %}

{% block body %}
<div class="page-content header-clear">
    <div class="divider divider-margins"></div>
    <div class="content mb-0">
        <div id="photos"></div>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#uploadForm').submit(function(e) {
                    e.preventDefault();
                    var formData = new FormData(this);
                    $.ajax({
                        url: '{{ path('api_upload_photo') }}',  // Assuming we've updated the route for POST
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            //$('#upload-success').toggle();
                            alert("Upload Successful");
                            window.location.href = '{{ path('eventTimeline') }}';
                            //location.reload();
                        },
                        error: function(xhr, status, error) {
                            alert('Upload failed: ' + xhr.responseJSON.message);
                        }
                    });
                });

                //Trigger Camera

                //upload file automatically
                $('#file-upload').change(function() {
                    $('#eventId').val('{{ event.id }}');
                    $('#submit').trigger('click');
                    $('#file-upload').val('');
                });

                $(document).on('click', '#takePhoto', function() {
                    $('#file-upload').trigger('click').val('');
                });
            });


        </script>
        <h1 class="text-center">Capture a memory</h1>
        <div class="file-data pb-5">
            <div class="file-data pb-5">
                <form method="post" enctype="multipart/form-data" id="uploadForm">
                    <div class="row">
                        <div class="col-md-12 text-center" >
                            <!--<a href="#" id="takePhoto" class="btn btn-success btn-full">OPEN CAMERA</a>-->
                            <input type="file" id="file-upload" placeholder="Capture Photo" name="photo" style="width: 100%;background-color: #198754 !important;" accept="image/*;capture=camera" capture="environment">
                            <h3 style="padding: 20px;">Click the green bar above to launch camera</h3>
                            <input type="hidden" id="eventId" value="{{ event.id }}">
                        </div>
                        <div class="col-md-12 text-center" >
                            <!--<h3 style="padding: 20px;">If the photo does not automatically upload, click submit below.</h3>-->
                            <button class="btn btn-full btn-primary" style="height:0px;width:0px;" id="submit"></button>
                        </div>
                        <div class="col-md-12">
                            <a href="#" data-menu="upload-success">
                                <span>Success Modal</span>
                            </a>
                            <div id="upload-success" class="menu menu-box-modal bg-green-dark"
                                 data-menu-height="315"
                                 data-menu-width="350"
                                 data-menu-effect="menu-over">
                                <h1 class="text-center mt-4"><i class="fa fa-3x fa-check-circle scale-box color-white shadow-xl rounded-circle"></i></h1>
                                <h1 class="text-center mt-3 font-700 color-white">All's Good</h1>
                                <p class="boxed-text-l color-white opacity-70">
                                    The memory has uploaded successfully.
                                </p>
                                <a href="#" class="close-menu btn btn-m btn-center-m button-s shadow-l text-uppercase font-600 bg-white color-black">Great, Thanks!</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="divider divider-margins"></div>
{% endblock %}

{% block javascripts %}

{% endblock %}