@extends('master')

@section('custom_css')
    <style>
        :root {
            --primary: #25abd9;
            --primary-dark: #2090b7;
        }

        .connectionStatus {
            width: 25px;
            height: 25px;
            background: #ff0;
            margin: 0 15px;
        }

        .connectionClosed {
            background-color: #ff0 !important;
        }

        .connectionStatus_ready {
            background: greenyellow;
        }

        .closed {
            background-color: greenyellow;
            /* box-shadow: 0 6px 0 greenyellow, 0 5px 15px -4px #000; */
        }

        /* .closed:hover {
                                            background-color: rgb(108, 177, 4);
                                        } */

        .closed:active {
            background-color: rgb(108, 177, 4);
            -webkit-box-shadow: inset 0px 0px 10px rgb(79, 126, 7);
            -moz-box-shadow: inset 0px 0px 10px rgb(79, 126, 7);
            box-shadow: inset 0px 0px 10px rgb(79, 126, 7);
            outline: none;
        }

        .open {
            background-color: red;
            box-shadow: 0 6px 0 red, 0 5px 15px -4px #000;
        }

        .default {
            background-color: gray;
        }

        .box-container {
            display: flex;
            flex-wrap: wrap;
            padding: 10px;
            justify-content: center;
            height: 45vh;
            overflow: auto;
        }

        .box-single {
            margin: 5px;
            width: 100px;
        }

        .url-container {
            display: flex;
            justify-content: space-between;
        }

        .locker_not_select {
            font-weight: bold;
            color: red;
        }


        /* 3d Button Design: start */
        .button {
            /* background: var(--primary); */
            border: 0;
            border-radius: 5px;
            box-shadow: 0 6px 0 gray, 0 5px 15px -4px #000;
            color: #fff;
            cursor: pointer;
            font-family: roboto;
            font-size: 20px;
            font-weight: 800;
            height: 50px;
            padding: 5px;
            text-transform: uppercase;
            transition: box-shadow 0.2s ease-in-out, margin-top 0.2s ease-in-out,
                opacity 0.2s ease-in-out;
            width: 130px;
        }

        .button:hover,
        .button:focus {
            opacity: 0.9;
            outline: 0;
        }

        .button:active {
            box-shadow: none;
            margin-top: 6px;
        }

        @media only screen and (max-width: 425px) {

            /*Small smartphones [325px -> 425px]*/
            .button {
                width: 120px;
            }
        }

        /* 3d Button Design: end */
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item active">Locker Master Dashboard</li>
                    </ol>
                </div>
                <h4 class="page-title">Maintenance</h4>
                @if (session()->has('message'))
                    <div class="alert alert-danger">
                        {{ session('message') }}
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <select name="" id="locker_select" class=" form-select location-highlight">
                <option value="">Filter by locker</option>
                @foreach ($allLocker as $data)
                    <option value="{{ $data->locker_id }}" data-box_number="{{ count($data->boxes) }}">
                        {{ $data->locker_code }}
                        ({{ count($data->boxes) }})
                    </option>
                @endforeach
            </select>
        </div>
    </div>
    <hr>





    {{-- Locker Page: start --}}
    <div class="container mt-2">
        <div class="url-container">
            <div class="row">
                Connection status:<span id="conStatus" class="connectionStatus"></span>
            </div>

            <a href="javascript:void(0)" class="btn btn-success" onclick="reloadPage()">Reload</a>
        </div>

    </div>

    <div class="container">
        <div class="row">
            {{-- <div class="col-md-6">
                <div class="input-group">
                    <input type="text" id="cmdInpt" class="form-control" placeholder="" />
                    <button onclick="sendMsg()" class="btn btn-primary btn-lg">
                        Send Command
                    </button>
                </div>
                <div class="url-container">
                    <a href="javascript:void(0)" onclick="reloadPage()">Reload</a>
                    <a href="javascript:void(0)" onclick="getAllStatus()">ALL Status</a>
                </div>
            </div> --}}
            {{-- style="overflow: scroll;" --}}
            <code class="col-md-12">
                <div class="serverResponse">
                    <p id="serverTxt"></p>
                </div>
            </code>

            <div id="js__btnContainer" class="box-container">

            </div>
        </div>
    </div>
    {{-- Locker Page: End --}}




    <!-- The Modal -->
    <div class="modal" id="demoModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Your Modal Heading</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    Your Modal body..
                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" data-dismiss="modal">Save</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>

            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="lmBoxModal" tabindex="-1" aria-labelledby="lmBoxModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h5 class="modal-title" id="lmBoxModalLabel">Box Open Alert!</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    Your Modal body..
                </div>
                <div class="modal-footer">

                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">No</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('custom_script')
    <script src="{{ asset('') }}assets/common/js/locker-v3.js"></script>

    <script>
        var numberOfBox = 0;
        var controllerNumber = 0;
        const allBox_status = [];
        const locker = new Locker("ws://192.168.10.158:5000", CUV2);
        const output = document.getElementById("serverTxt");
        var body = document.body;

        var selectedLocationBoxes = 0;
        var selectedLocker = "";

        function checkLocalStorage() {
            if(!localStorage.getItem("location_select_time")){
                return 100;
            }
            var object = JSON.parse(localStorage.getItem("location_select_time"));
            let dateString = object.timestamp;
            let now = Date.now();
            // now = new Date().getTime().toString();

            let difference = now - dateString;
            let daysDifference = Math.round(difference / 1000 / 60 / 60 / 24);

            // console.log(dateString, now);
            // console.log(difference, daysDifference);
            return daysDifference;
        }

        $(document).ready(function() {

            // $.getJSON("https://api.ipify.org?format=json", function(data) {

            //     // Setting text of element P with id gfg
            //     console.log("data.ip");
            //     console.log(data.ip);
            //     $("#gfg").html(data.ip);
            // })

            // $.get("https://ipinfo.io", function(response) {
            //     alert(response.ip);
            // }, "json")

            let localStorageExpiryInDay = 2;

            // check local storage
            // console.log(checkLocalStorage());
            if (checkLocalStorage() >= localStorageExpiryInDay) {
                localStorage.removeItem("box_number");
                localStorage.removeItem("selected_locker");
            }
            // Get saved data from localStorage
            selectedLocationBoxes = localStorage.getItem('box_number') ? JSON.parse(localStorage.getItem(
                'box_number')) : 0;
            selectedLocker = localStorage.getItem('selected_locker') ? JSON.parse(localStorage.getItem(
                'selected_locker')) : "";

            if (selectedLocker != "") {
                $(`#locker_select option[value='${selectedLocker}']`).prop("selected", true);
                // console.log(selectedLocker,selectedLocationBoxes);
                // console.log($("#locker_select").children("option:selected").val());
            }

            $("#locker_select").change(function(e) {
                e.preventDefault();
                console.log("changed");
                selectedLocationBoxes = $(this).find(':selected').data('box_number');
                selectedLocker = this.value;

                localStorage.setItem('box_number', JSON.stringify(selectedLocationBoxes));
                localStorage.setItem('selected_locker', JSON.stringify(selectedLocker));
                let object = {
                    value: "value",
                    timestamp: new Date().getTime()
                }
                localStorage.setItem("location_select_time", JSON.stringify(object));

                console.log($(this).find(':selected').data('locker'));

                location.reload(true);
            });

            if (selectedLocationBoxes == 0) {
                document.getElementById('js__btnContainer').innerHTML =
                    "<span class='locker_not_select'>Please Select Location First</span>";
                return;
            }

            numberOfBox = selectedLocationBoxes

            locker.onOpen(() => {
                output.innerText = "Connection Ready\n";
                document.getElementById('conStatus').classList.add('connectionStatus_ready');
                body.classList.remove("connectionClosed");
            });
            locker.onClose(() => {
                output.innerText = "Connection Closed\n";
                document.getElementById('conStatus').classList.remove('connectionStatus_ready');
                body.classList.add("connectionClosed");
                setTimeout(() => {
                    reloadPage();
                }, 2000);
            });
            locker.onMessage((d) => {
                if (controllerNumber > 1) {
                    controllerNumber = 1;
                } else {
                    controllerNumber = 1;
                }
                console.log("controllerNumber");
                console.log(controllerNumber);
                console.log("d.locked");
                console.log(d.locked);
                d.locked.forEach((status, index) => {
                    let extra = 0;
                    (controllerNumber == 2) ? extra = 48: extra = extra;
                    let boxNumber = index + 1 + extra;
                    console.log(`box-${boxNumber}: ${(status) ? "Close" : "Open"}`);

                    if (status) { //Close
                        document.getElementById("box-" + boxNumber).classList.remove("open");
                        document.getElementById("box-" + boxNumber).classList.add("closed");
                    } else {
                        document.getElementById("box-" + boxNumber).classList.remove("closed");
                        document.getElementById("box-" + boxNumber).classList.add("open");
                    }

                });
                // allBox_status.push(d.locked);
                // output.innerText += JSON.stringify(d.locked, null, 2) + "\n";
            });



            window.onload = function() {
                makeButtonsForBoxes(numberOfBox);
                getAllStatus();
            };

            function makeButtonsForBoxes(number) {
                let buttons = [];
                let buttonContainers = "";
                for (let index = 1; index <= number; index++) {
                    // buttons[index] = `<button id="box-${index}" class="box-single button closed" onclick="openBoxPopUp(${index},this)">Box-${index}</button>`;
                    buttonContainers = buttonContainers + " " +
                        `<button id="box-${index}" class="box-single button closed" onclick="openBoxPopUp(${index},this)">Box-${index}</button>`;
                }
                // document.getElementById('js__btnContainer').innerHTML = buttons;
                document.getElementById('js__btnContainer').innerHTML = buttonContainers;
                // console.log(buttons);
            }

            // setTimeout(() => 
            //     locker.send("DO1");
            // }, 500);
        });

        const sendMsg = () => {
            let cmdTxt = document.getElementById("cmdInpt").value;
            if (cmdTxt == 'DOA') {
                for (let index = 1; index <= numberOfBox; index++) {
                    locker.send("DO" + index);
                }
            } else {
                locker.send(cmdTxt);
            }

        };

        function getAllStatus() {
            setTimeout(() => {
                locker.send("STA");
            }, 500);
        }

        function reloadPage() {
            window.location.reload();
        }



        function openBoxPopUp(boxNumber, el) {
            // console.log(el.classList);
            if (el.classList.contains('closed')) {
                // console.log("if");
                let openBtn =
                    `<button type="button" class="btn btn-success yes_open_box" onClick="openBox(${boxNumber})">Yes</button>`;
                let alertMessage = `<p>You are going to open <b>box-${boxNumber}</b></p>`;
                $('#lmBoxModal').find(".modal-body").html(alertMessage);
                $(".yes_open_box").remove();
                $('#lmBoxModal').find(".modal-footer").prepend(openBtn);
                $('#lmBoxModal').modal('show');
            } else {
                // console.log("else");
                openBox(boxNumber);
            }

        }

        function openBox(boxNumber) {
            $('#lmBoxModal').modal('hide');
            $.ajax({
                url: `/lm/open-box/${boxNumber}/${selectedLocker}`,
                type: 'GET',
                dataType: 'json', // added data type
                success: function(res) {
                    console.log(res);
                },
                error: function() {
                    alert("There was an error ajax.");
                    return 0;
                }
            });
            locker.send("DO" + boxNumber);
            console.log("Opennign box-" + boxNumber);
            getAllStatus();
        }
    </script>

    <script></script>
@endsection