@extends('layouts-auth.main')

@section('extra-style-auth')
    <style>
        .modal-dialog {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .modal-content {
            height: auto;
            min-height: 100%;
            border-radius: 0;
        }

        #screenshot-ktp>img,
        #screenshot-selfie>img,
        #screenshot-selfie-ktp>img {
            width: 100%;
            height: auto;
        }

    </style>
@endsection

@section('content-auth')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-5 col-sm-8">
                <div class="card">
                    <div class="card-body p-4">
                        <div class="p-2">
                            <h5 class="mb-5 text-center">Register</h5>
                            <form class="form-horizontal form-register">
                                @csrf
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group mb-4">
                                            <label for="nama">Role</label>
                                            <select class="select2 w-100 role" name="role" onchange="getWitel()">
                                                <option value="-" disabled="" selected="" disabled>- Pilih Role -</option>
                                                <option value="korlap">Korlap</option>
                                                <option value="kapok">Kapok</option>
                                                <option value="security">Security</option>
                                                <option value="house_keeping">House Keeping</option>
                                                <option value="organik_telkom">Organik Telkom</option>
                                                <option value="teknisi">Teknisi</option>
                                                <option value="tamu">Tamu</option>
                                            </select>
                                        </div>
                                        <div class="form-group mb-4 d-none container-witel">
                                            <label for="nama">WITEL</label>
                                            <select class="select2 witel" name="witel" style="width: 100%;"
                                                onchange="getSto()">
                                                <option value="-" disabled="" selected="" disabled>- Pilih Witel -</option>
                                                <option value="2">Telkom Landmark Tower</option>
                                                @foreach ($witel as $wt)
                                                    <option value="{{ $wt->id }}">{{ $wt->fullname }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group mb-4 d-none container-sto">
                                            <label for="nama">STO</label>
                                            <select class="select2 sto" name="sto[]" multiple="multiple"
                                                style="width: 100%;">
                                            </select>
                                        </div>
                                        <div class="form-group mb-4">
                                            <label for="nama">Nama</label>
                                            <input type="text" class="form-control nama" name="nama" required>
                                        </div>
                                        <div class="form-group mb-4">
                                            <label for="email">Email</label>
                                            <input type="email" class="form-control email" name="email" required>
                                        </div>
                                        <div class="form-group mb-4">
                                            <label for="no_hp">Nomer HP</label>
                                            <input type="number" class="form-control no-hp" name="no_hp" required>
                                        </div>
                                        <div class="form-group mb-4">
                                            <label for="alamat_ktp">Alamat KTP</label>
                                            <input type="text" class="form-control alamat-ktp" name="alamat_ktp" required>
                                        </div>
                                        <div class="form-group mb-4">
                                            <label for="alamat_kantor">Alamat Kantor</label>
                                            <input type="text" class="form-control alamat-kantor" name="alamat_kantor"
                                                required>
                                        </div>
                                        <div class="form-group mb-4">
                                            <label for="password">Password</label>
                                            <input type="password" class="form-control password" name="password" required>
                                        </div>
                                        <div class="form-group mb-4">
                                            <label for="password2">Re-type Password</label>
                                            <input type="password" class="form-control password2" name="password2" required>
                                        </div>
                                        <div class="form-group form-group-custom mb-4">
                                            <div class="text-center" id="screenshots-selfie"
                                                style="height: 100%; width: auto;">
                                            </div>
                                            <canvas class="d-none" id="canvas"
                                                style="height: 100%; width: auto;"></canvas>
                                            <input type="hidden" id="encode-foto-selfie" name="encode_foto_selfie">
                                            <button type="button" class="btn btn-primary btn-block waves-effect waves-light"
                                                onclick="showModal(true, 'selfie')">Ambil Foto
                                                Selfie</button>
                                        </div>
                                        {{-- <div class="form-group form-group-custom mb-4">
                                            <div class="text-center" id="screenshots-ktp"
                                                style="height: 100%; width: auto;">
                                            </div>
                                            <canvas class="d-none" id="canvas-ktp"
                                                style="height: 100%; width: auto;"></canvas>
                                            <input type="hidden" id="encode-foto-ktp" name="encode_foto_ktp">
                                            <button type="button" class="btn btn-info btn-block waves-effect waves-light"
                                                onclick="showModal(false, 'ktp')">Ambil Foto
                                                KTP</button>
                                        </div> --}}
                                        {{-- <div class="form-group form-group-custom mb-4">
                                            <div class="text-center" id="screenshots-selfie-ktp"
                                                style="height: 100%; width: auto;">
                                            </div>
                                            <canvas class="d-none" id="canvas-selfie-ktp"
                                                style="height: 100%; width: auto;"></canvas>
                                            <input type="hidden" id="encode-foto-selfie-ktp" name="encode_foto_selfie_ktp">
                                            <button type="button" class="btn btn-warning btn-block waves-effect waves-light"
                                                onclick="showModal(true, 'selfie ktp')">Ambil Foto
                                                Selfie KTP</button>
                                        </div> --}}
                                        <div class="mt-4">
                                            <button class="btn btn-success btn-block waves-effect waves-light btn-register"
                                                type="button" onclick="simpan()">Register</button>
                                            <div class="btn btn-secondary ld-ext-top running d-none btn-register-loading"
                                                style="width: 100%;">
                                                Loading
                                                <div class="ld ld-ball ld-flip-h"></div>
                                            </div>
                                        </div>
                                        <div class="mt-4 text-center">
                                            <a href="{{ route('login') }}" class="text-muted"><i
                                                    class="mdi mdi-account-circle mr-1"></i> Sudah punya akun ?</a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('auth.modal')
@endsection

@section('extra-script-auth')
    {{-- Webcam --}}
    <script>
        // get page elements
        const video = document.querySelector("#video");
        const btnPlay = document.querySelector("#btn-play");
        const canvas = document.querySelector("#canvas");
        const devicesSelect = document.querySelector("#devicesSelect");

        // video constraints
        const constraints = {
            video: {
                width: 320
            },
        };

        // deklarasi container screenshot
        var screenshotsContainer;

        // use front face camera
        var useFrontCamera;

        // current video stream
        var videoStream;

        $(document).ready(function() {
            if (
                !"mediaDevices" in navigator ||
                !"getUserMedia" in navigator.mediaDevices
            ) {
                alert("Camera API is not available in your browser");
                return;
            }

            $(".modal-webcam").on("hidden.bs.modal", function(e) {
                stopVideoStream();
                // initializeCamera();
            });
        })

        // show modal
        function showModal(param, type) {
            setTimeout(() => {
                useFrontCamera = param;

                initializeCamera();

                // handle events play
                btnPlay.addEventListener("click", function() {
                    video.play();
                    btnPlay.classList.add("d-none");
                });

                $(".modal-type").val(type);
                $(".modal-webcam").modal("show");
            }, 1000);
        }

        // take screenshot
        function screenshot() {
            const img = document.createElement("img");
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            canvas.getContext("2d").drawImage(video, 0, 0);
            img.src = canvas.toDataURL("image/png");
            clear();

            if ($(".modal-type").val() == "selfie") {
                screenshotsContainer = document.querySelector("#screenshots-selfie");
                $("#encode-foto-selfie").val(canvas.toDataURL());
            } else if ($(".modal-type").val() == "ktp") {
                screenshotsContainer = document.querySelector("#screenshots-ktp");
                $("#encode-foto-ktp").val(canvas.toDataURL());
            } else if ($(".modal-type").val() == "selfie ktp") {
                screenshotsContainer = document.querySelector("#screenshots-selfie-ktp");
                $("#encode-foto-selfie-ktp").val(canvas.toDataURL());
            }

            screenshotsContainer.prepend(img);

            $(".modal-webcam").modal("hide");
            // console.log($("#encode-foto").val());
        }

        // // switch camera
        // function changeCamera() {
        //     // btnChangeCamera.addEventListener("click", function() {
        //     useFrontCamera = !useFrontCamera;

        //     initializeCamera();
        //     // });
        // }

        // stop video stream
        function stopVideoStream() {
            if (videoStream) {
                videoStream.getTracks().forEach((track) => {
                    track.stop();
                });
            }
        }

        // initialize
        async function initializeCamera() {
            stopVideoStream();
            constraints.video.facingMode = useFrontCamera ? "user" : "environment";

            try {
                videoStream = await navigator.mediaDevices.getUserMedia(constraints);
                video.srcObject = videoStream;
            } catch (err) {
                console.log(err);
                alert("Could not access the camera");
            }
        }

        // clear container screenshot
        function clear() {
            if ($(".modal-type").val() == "selfie") {
                $("#screenshots-selfie").empty();
            } else if ($(".modal-type").val() == "ktp") {
                $("#screenshots-ktp").empty();
            } else if ($(".modal-type").val() == "selfie ktp") {
                $("#screenshots-selfie-ktp").empty();
            }
        }
    </script>
    {{-- End webcam --}}

    <script type="text/javascript">
        function getWitel() {
            if ($(".role").val() == "security" || $(".role").val() == "kapok" || $(".role").val() == "korlap" || $(".role")
                .val() == "house_keeping") {
                $(".witel").val("-").trigger("change");
                $(".container-witel").removeClass("d-none");
            } else if ($(".role").val() == "organik_telkom" || $(".role").val() == "teknisi") {
                $(".witel").val("-").trigger("change");
                $(".container-witel").removeClass("d-none");
                $(".container-sto").addClass("d-none");
            } else {
                $(".container-witel").addClass("d-none");
                $(".container-sto").addClass("d-none");
            }
        }

        function getSto() {
            if ($(".role").val() == "security" || $(".role").val() == "kapok" || $(".role").val() == "korlap" || $(".role")
                .val() == "house_keeping") {
                if ($(".witel").val() == "2") {
                    $(".container-sto").removeClass("d-none");
                    $(".sto").empty();
                    $('.sto').append('<option value="2">TELKOM LANDMARK TOWER</option>');
                    $(".select2").select2();

                } else {
                    $.ajax({
                        url: "{{ route('register.get_sto') }}",
                        type: "get",
                        data: {
                            "id_witel": $(".witel").val()
                        },
                        success: function(response) {
                            // console.log(response);
                            if (response.status == 'berhasil') {
                                $(".container-sto").removeClass("d-none");
                                $(".sto").empty();
                                $.each(response.data, function(key, val) {
                                    if (val.id != null) {
                                        $('.sto').append('<option value="' + val.id + '">' + val.fullname +
                                            '</option>');
                                    }
                                })
    
                                $(".select2").select2();
    
                            } else if (response.status == 'gagal') {
                                Swal.fire({
                                    title: "Gagal",
                                    text: "Data gagal disimpan",
                                    icon: "error",
                                    showConfirmButton: true
                                });
                                console.log(response.message);
                            }
                        },
                        error: function(request, status, error) {
                            Swal.fire({
                                title: "Error",
                                text: "Terjadi kesalahan, hubungi pengembang",
                                icon: "error",
                                showConfirmButton: true
                            });
                            console.log(request.responseText);
                        }
                    });
                }
            }
        }

        function simpan() {
            if ($('.role').val() == '-' || $('.role').val() == null || $('.role').val() == '') {
                Swal.fire({
                    title: "Peringatan",
                    text: "Role harus dipilih",
                    icon: "warning",
                    showConfirmButton: true
                });
            } else if (($('.role').val() == 'security' || $('.role').val() == 'kapok' || $(".role").val() == "korlap" || $('.role').val() == 'house_keeping') && $('.sto').val() == '') {
                Swal.fire({
                    title: "Peringatan",
                    text: "STO harus dipilih",
                    icon: "warning",
                    showConfirmButton: true
                });
            } else if (($('.role').val() == 'organik_telkom' || $('.role').val() == 'teknisi') && ($('.witel').val() == '' || $('.witel').val() == null)) {
                Swal.fire({
                    title: "Peringatan",
                    text: "Witel harus dipilih",
                    icon: "warning",
                    showConfirmButton: true
                });
            } else if ($('.nama').val() == '' || $('.nama').val() == null) {
                Swal.fire({
                    title: "Peringatan",
                    text: "Nama harus diisi",
                    icon: "warning",
                    showConfirmButton: true
                });
            } else if ($('.email').val() == '' || $('.email').val() == null) {
                Swal.fire({
                    title: "Peringatan",
                    text: "Email harus diisi",
                    icon: "warning",
                    showConfirmButton: true
                });
            } else if ($('.no-hp').val() == '' || $('.no-hp').val() == null) {
                Swal.fire({
                    title: "Peringatan",
                    text: "No HP harus diisi",
                    icon: "warning",
                    showConfirmButton: true
                });
            } else if ($('.alamat-ktp').val() == '' || $('.alamat-ktp').val() == null) {
                Swal.fire({
                    title: "Peringatan",
                    text: "Alamat KTP harus diisi",
                    icon: "warning",
                    showConfirmButton: true
                });
            } else if ($('.alamat-kantor').val() == '' || $('.alamat-kantor').val() == null) {
                Swal.fire({
                    title: "Peringatan",
                    text: "Alamat kantor harus diisi",
                    icon: "warning",
                    showConfirmButton: true
                });
            } else if ($('.password').val() == '' || $('.password').val() == null) {
                Swal.fire({
                    title: "Peringatan",
                    text: "Password harus diisi",
                    icon: "warning",
                    showConfirmButton: true
                });
            } else if ($('.password2').val() == '' || $('.password').val() == null) {
                Swal.fire({
                    title: "Peringatan",
                    text: "Re-type Password harus diisi",
                    icon: "warning",
                    showConfirmButton: true
                });
            } else if ($('.password2').val() != $('.password').val()) {
                Swal.fire({
                    title: "Peringatan",
                    text: "Password tidak sama",
                    icon: "warning",
                    showConfirmButton: true
                });
            } else if ($('#encode-foto-selfie').val() == '' || $('#encode-foto-selfie').val() == null) {
                Swal.fire({
                    title: "Peringatan",
                    text: "Foto selfie harus diisi",
                    icon: "warning",
                    showConfirmButton: true
                });
            // } else if ($('#encode-foto-ktp').val() == '' || $('#encode-foto-ktp').val() == null) {
            //     Swal.fire({
            //         title: "Peringatan",
            //         text: "Foto KTP harus diisi",
            //         icon: "warning",
            //         showConfirmButton: true
            //     });
            // } else if ($('#encode-foto-selfie-ktp').val() == '' || $('#encode-foto-selfie-ktp').val() == null) {
            //     Swal.fire({
            //         title: "Peringatan",
            //         text: "Foto selfie KTP harus diisi",
            //         icon: "warning",
            //         showConfirmButton: true
            //     });
            } else {
                $('.btn-register').addClass('d-none');
                $('.btn-register-loading').removeClass('d-none');

                $.ajax({
                    url: '{{ route('register.simpan') }}',
                    type: 'post',
                    data: $('.form-register').serialize(),
                    success: function(response) {
                        $('.btn-register-loading').addClass('d-none');
                        $('.btn-register').removeClass('d-none');
                        if (response.status == 'berhasil') {
                            Swal.fire({
                                title: "Sukses",
                                text: "Data berhasil disimpan, silahkan login",
                                icon: "success",
                                showConfirmButton: false,
                                timer: 1000
                            }).then(function() {
                                window.location.href = "{{ route('login') }}";
                            });

                        } else if (response.status == 'ada') {
                            Swal.fire({
                                title: "Peringatan",
                                text: "Email sudah ada, silahkan ganti email yang lain",
                                icon: "warning",
                                showConfirmButton: true
                            });

                        } else if (response.status == 'gagal') {
                            Swal.fire({
                                title: "Gagal",
                                text: "Data gagal disimpan",
                                icon: "error",
                                showConfirmButton: true
                            });
                            console.log(response.message);
                        }
                    },
                    error: function(request, status, error) {
                        $('.btn-register-loading').addClass('d-none');
                        $('.btn-register').removeClass('d-none');
                        Swal.fire({
                            title: "Error",
                            text: "Terjadi kesalahan, hubungi pengembang",
                            icon: "error",
                            showConfirmButton: true
                        });
                        console.log(request.responseText);
                    }
                });
            }
        }
    </script>
@endsection