@using rPiNVR.Models
@model List<int>
@{
    var cameras = ViewData["available"] as List<Camera>;
}

<div class="d-flex flex-row fullheight">
    <div class="left">
        <h1>Camera List</h1>
        <div>
            <label for="numcams">Number of cameras</label>
            <select id="numcams" name="numcams" title="Number of cameras">
                <option value=1>1</option>
                <option value=4>4</option>
                <option value=6>6</option>
            </select>
        </div>
        @foreach (Camera cam in cameras)
        {
            <div class="camera border" data-id="@cam.id">@cam.name</div>
        }
        <div><button id="upload" type="button" value="">Upload</button></div>
        <div><button id="stop" type="button" value="">Stop Cameras</button></div>
    </div>
    <div class="right">
        <table class="table table-bordered align-middle text-center">
            <tbody>
            </tbody>
        </table>
    </div>
    <form method="post">
        @for (var idx = 0; idx < Model.Count; idx++)
        {
            <input type="hidden" id="cams_@idx" name="cams[@idx]" value="@Model[idx]" />
        }
    </form>
</div>

@section Scripts {
    <script>
        function selectCamera(cell, camera) {
            cell.data("id", camera.data("id"));
            cell.html(camera.html());
            //camera.hide();
        }

        $(document).ready(function () {
            $('#numcams').on('change', function () {
                var numcams = $(this).val();
                var html = '';
                var rows = 0;
                var cols = 0;
                if (numcams == 1) {
                    rows = 1;
                    cols = 1;
                }
                else if (numcams == 4) {
                    rows = 2;
                    cols = 2;
                }
                else if (numcams == 6) {
                    rows = 2;
                    cols = 3;
                }
                var cell = 0;
                for (row = 0; row < rows; row++) {
                    html += "<tr>";
                    for (col = 0; col < cols; col++) {
                        html += "<td style='height:" + (100 / rows) + "%;width:" + (100 / cols) + "%;' data-cell='" + cell++ + "'></td>";
                    }
                    html += "</tr>"
                }
                $("tbody").html(html);
                //$('.camera').show();

                $('.camera').draggable({
                    revert: true,
                    cursor: "clone",
                    helper: "original"
                });
                $('td').droppable({
                    accept: ".camera",
                    drop: function (event, ui) {
                        // $('.camera[data-id=' + $(this).data('id') + ']').show();
                        selectCamera($(this), $(event.originalEvent.target));
                    }
                });
            });

            $("#numcams>option[value=@Model.Count]").attr('selected', 'selected');
            $("#numcams").trigger("change");

            var initialCams = Array(@Model.Count);

        @for (var i = 0; i < Model.Count; i++)
        {
            @Html.Raw($"initialCams[{i}] = {Model[i]};")
        }

                initialCams.forEach(function (value, idx) {
                    var camera = $('.camera[data-id=' + value + ']');
                    var cell = $('td[data-cell=' + idx + ']');
                    selectCamera(cell, camera);
                });

            $('#upload').on('click', function () {
                var cams = $('td:data("id")');
                if (cams.length == 0)
                    alert('you must place at least one camera');
                var numcams = parseInt($('#numcams').val());
                var camArray = Array.from(cams);
                var formdata = "";
                camArray.forEach(function (cam, idx) {
                    var channel = $(cam).data('id');
                    var cell = $(cam).data('cell');
                    formdata += `<input type="hidden" id="cams_${idx}" name="cams[${idx}]" value="${channel}" />`;
                });
                $('form').html(formdata);
                $('form').trigger('submit');
            });

            $('#stop').on('click', function () {
                $.ajax({
                    url: "@Url.Action("StopCameras")",
                    type: "GET",
                    success: function () {

                    }
                });
            });
        });
    </script>
}