<?php
session_start();

$pageSequence = $_SESSION['sequence'];
$toDiv = "contentZone" . $pageSequence;
$resultZoneDiv = "resultZone" . $pageSequence;
$_SESSION['sequence']++;

$currentBaseDir = dirname($_SERVER['PHP_SELF']);
include($_SESSION['basedir'] . "veriflog.php");
include($_SESSION['basedir'] . "core.php");

$toDiv = $_REQUEST['toDiv'];
$rpage = $_REQUEST['rpage'];
?>

<style type="text/css">
    #regForm {
        background-color: #ffffff;
        margin: 5px auto;
        padding: 40px;
        width: 80%;
        min-width: 300px;
    }

    input, textarea {
        padding: 10px;
        width: 50%;
        font-size: 17px;
        font-family: Raleway;
        border: 1px solid #aaaaaa;
    }

    input.invalid {
        background-color: #ffdddd;
    }

    .step {
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbbbbb;
        border: none;
        border-radius: 50%;
        display: inline-block;
        opacity: 0.5;
    }

    .step.active { opacity: 1; }
    .step.finish { background-color: #04AA6D; }
</style>

<section class="content">
    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-bd lobidrag">
                <div class="panel-heading">
                    <div class="btn-group">
                        <h4>Ajouter une campagne SMS</h4>
                    </div>
                </div>
                <div class="panel-body">
                    <form action="<?php echo $currentBaseDir; ?>/exec_sms_campaign.php"
                          method="post"
                          enctype="multipart/form-data"
                          id="regForm"
                          toDiv="<?php echo $toDiv; ?>"
                          returnPage="<?php echo $_SERVER['PHP_SELF']; ?>"
                          onsubmit="return false;">

                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Nom de la campagne</label>
                                <input type="text" name="campaignName" class="form-control" required>
                            </div>

                            <div class="form-group">
                                <label>Date de début</label>
                                <input type="date" name="startDate" class="form-control" required>
                            </div>

                            <div class="form-group">
                                <label>Date de fin</label>
                                <input type="date" name="endDate" class="form-control" required>
                            </div>

                            <div class="form-group">
                                <label>Heure de début</label>
                                <div style="display: flex; gap: 5px;">
                                    <input type="number" name="startHour" class="form-control" style="width: 70px;" min="0" max="23" step="1" required onblur="formatTwoDigits(this)">
                                    <span>:</span>
                                    <input type="number" name="startMinute" class="form-control" style="width: 70px;" min="0" max="59" step="1" required onblur="formatTwoDigits(this)">
                                    <span>:</span>
                                    <input type="number" name="startSecond" class="form-control" style="width: 70px;" min="0" max="59" step="1" required onblur="formatTwoDigits(this)">
                                </div>
                            </div>

                            <div class="form-group">
                                <label>Heure de fin</label>
                                <div style="display: flex; gap: 5px;">
                                    <input type="number" name="endHour" class="form-control" style="width: 70px;" min="0" max="23" step="1" required onblur="formatTwoDigits(this)">
                                    <span>:</span>
                                    <input type="number" name="endMinute" class="form-control" style="width: 70px;" min="0" max="59" step="1" required onblur="formatTwoDigits(this)">
                                    <span>:</span>
                                    <input type="number" name="endSecond" class="form-control" style="width: 70px;" min="0" max="59" step="1" required onblur="formatTwoDigits(this)">
                                </div>
                            </div>

                            <div class="form-group">
                                <label>Fichier de numéros</label>
                                <input type="file" name="phoneListFile" class="form-control" accept=".txt,.csv" required>
                                <small>Un numéro par ligne</small>
                            </div>

                            <input type="hidden" name="actionType" id="actionType" value="2">

                            <div class="reset-button">
                                <button type="button" class="btn addition" id="save">Enregistrer</button>

                                <button type="button" class="btn close-btn">Fermer</button>
                            </div>
                        </div>

                        <div class="col-sm-6">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>


<script>
    //POUR L'affichage de lheure 
function formatTwoDigits(input) {
    if (input.value.length === 1) {
        input.value = input.value.padStart(2, '0');
    }
}
</script>

<script type="text/javascript">
    $('#save').on('click', function (e) {
        document.getElementById('actionType').value = 2;
        $(this).parents('form').submit();
    });

    $('form').on("submit", function (event) {
        event.preventDefault();

        var form = $(this)[0];
        var formData = new FormData(form);
        var toDiv = $(this).attr("toDiv");
        var rpage = $(this).attr("returnPage");

        $.ajax({
            url: $(this).attr("action"),
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function (data) {
                var obj = jQuery.parseJSON(data);
                if (obj.errorCode == 0) {
                    $.confirm({
                        icon: 'glyphicon glyphicon-ok',
                        title: 'RESULTAT',
                        content: obj.errorMessage,
                        type: 'green',
                        typeAnimated: true,
                        buttons: {
                            confirm: {
                                text: 'OK',
                                action: function () {
                                    $("#content-wrapper").load(rpage);
                                }
                            }
                        }
                    });
                } else {
                    $.alert({
                        icon: 'glyphicon glyphicon-warning-sign',
                        title: 'RESULTAT',
                        content: obj.errorMessage,
                        type: 'red',
                        typeAnimated: true
                    });
                }
            }
        });
    });

    $(".close-btn").on('click', function () {
        $('#loader').loading({
            message: "Chargement...",
            theme: 'dark'
        });

        $("#<?php echo $toDiv; ?>").load("<?php echo $rpage; ?>");
        $('#loader').loading('stop');
    });
</script>

<link rel="stylesheet" href="css/jquery-confirm.min.css">
<script src="js/jquery-confirm.min.js"></script>