<?php
require_once __DIR__ . '/shared/location_picker.php';

// Use Master Page
include_once "master.php";
$master = new MasterPage;

// Get DB connection
require_once "library/database.php";
$connect = Database::getInstance();

// Get AtlasDetails for settings
$atlasDetails = $connect->getAtlasDetails();

if($atlasDetails->submissionsAllowed == 1) 
{
    $master->addLocalScript("js/map_picker.js");
    $master->addLocalScript("js/file_picker.js");
    $master->addLocalScript("js/submit_validation.js");
}

echo $master->renderTop("Submit an Entry");
?>

<?php if($atlasDetails->enablePreLaunchFeatures == 1) : ?>

<div class="container">

    

    <form enctype="multipart/form-data" action="register_process.php" method="post">
        <div class="card mt-2 mb-2">
            <div class="card-body">
                <p>The Memory Cloud Atlas is not accepting submissions until Cloud Appreciation Day.</p> 
                <p>Until then, you can register an email address to receive a reminder.</p>
                <div class="form-group mb-2">
                    <label for="InputEmail" class="form-label">Enter Email Address:</label>
                    <input 
                        class="form-control" 
                        id="InputEmail" 
                        name="InputEmail" 
                        type="email"
                        required>
                </div>
                <div class="clearfix">
                    <button type="submit" class="btn btn-secondary float-end">Send me a reminder</button>
                </div>
            </div>
        </div>
        
    </form>

</div>

<?php elseif($atlasDetails->submissionsAllowed == 1) : ?>

<input type="hidden" id="HiddenMapboxPublicToken" value="<?= $atlasDetails->mapboxPublicToken ?>" />
<input type="hidden" id="HiddenMapboxStyleUrl" value="<?= $master->days_helper->latest_day->mapboxStyleUrl ?>" />

<div class="container">

    <form enctype="multipart/form-data" action="submit_process.php" method="post">
        <div class="card mb-2">
            <div class="card-body">
                <div class="row">
                    <div class="col-md">
                        <div class="form-group mb-2">
                            <label for="InputName" class="form-label">Your Name <span class="small">(Required)</span></label>
                            <input 
                                class="form-control" 
                                id="InputName" 
                                name="InputName" 
                                required>
                            <p class="small">This is how your name will appear on the Atlas.</p>
                        </div>
                        <div class="form-group mb-2">
                            <label for="InputEmail" class="form-label">Your Email Address <span class="small">(Required)</span></label>
                            <input 
                                class="form-control" 
                                id="InputEmail" 
                                name="InputEmail" 
                                type="email"
                                required>
                            <p class="small">
                                This is only in case we need to contact you about your submission. It will not be used for any other purpose and will not be shared with any other party.
                            </p>
                        </div>
                        <?php renderLocationFields(); ?>
                    </div>
                    <div class="col-md">
                        <div class="form-group mb-2">
                            <label for="InputImageFile" class="form-label">Your picture <span class="small">(Required)</span></label>
                            <input 
                                class="form-control form-control-file" 
                                type="file" 
                                accept="image/avif, image/jpeg, image/png, image/webp"
                                name="InputImageFile" 
                                id="InputImageFile" 
                                required>
                            <p class="small">Max size: 5MB. <span id="SpanImageFileDetails"></span></p>
                        </div>

                        <img src="#" id="ImageFileDisplay" class="preview-closed mb-2" />

                        <div class="form-group mb-2">
                            <label for="InputDescription" class="form-label">
                                Describe your sky and how it makes you feel. 
                                We will add this to your entry on the Atlas.
                                You can add text:
                            </label>
                            <textarea class="form-control" id="InputDescription" name="InputDescription" rows="5" maxlength="3000"></textarea>
                        </div>
                        
                        <!-- <div class="form-group mb-2">
                            <label for="InputAudioFile" class="form-label">
                                And you can describe your sky in a voice recording:
                            </label>
                            <div class="input-group">
                                <input 
                                class="form-control form-control-file" 
                                type="file" 
                                accept="audio/*"
                                name="InputAudioFile" 
                                id="InputAudioFile" />
                                <button 
                                    class="btn btn-secondary" 
                                    type="button" 
                                    id="ButtonRecordAudio"
                                    data-bs-toggle="modal" 
                                    data-bs-target="#RecordAudioModal">
                                    &#128308; Record Now
                                </button>
                                
                            </div>
                            <p class="small">
                                You can either upload a pre-recorded file, or record something now. <br>
                                Max size: 5MB. <span id="SpanAudioFileDetails"></span>
                            </p>
                        </div> -->

                        <audio id="AudioFileDisplay" class="d-none mb-2" controls>
                            <source src="#" type="audio/mpeg">
                            Your browser does not support the audio element.
                        </audio>

                    </div>
                </div>
                <div class="clearfix">
                    <button type="submit" id="SubmitButton" class="btn btn-secondary float-end">Submit</button>
                </div>
            </div>
        </div>

        
        
    </form>

</div>

<?php renderLocationPickerModal(); ?>

<div class="modal" tabindex="-1" id="RecordAudioModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header content">
                <h5 class="modal-title">Record Audio Description</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <p>Record an audio description of your entry. You must accept the request to use your microphone.</p>

                <div class="text-center mb-1">

                    <button id="ButtonStartRecording" class="btn btn-outline-danger">
                        &#128308; Start Recording
                    </button>

                    <button id="ButtonStopRecording" class="btn btn-outline-danger d-none">
                        &#11035; Stop Recording
                    </button>

                    <p id="ParaOutput" class="mt-1 d-none">Here is your recording:</p>

                    <audio id="AudioRecordingOutput" class="d-none" controls></audio>
                </div>
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary done-button" data-bs-dismiss="modal">Done</button>
            </div>
        </div>
    </div>
</div>

<?php else: ?>

<div class="container content text-center">
    <h2>Closed</h2>
    <p>
        The Memory Cloud Atlas was open on Cloud Appreciation Day
        for people around the world to upload a photo of their sky.
    </p>
    <p>
        <a href="/explore.php">Explore the Memory Cloud Atlas</a> to see the skies they shared. 
    </p>
</div>

<?php endif; ?>

<?php
echo $master->renderBottom();
$connect = null;
?>
