@extends('layouts-auth.main')

@section('extra-style-auth')
    <style>
        img {
            width: 100%;
        }
    </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">Login</h5>
                            <form class="form-horizontal form-login">
                                @csrf
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group mb-4">
                                            <label for="username">Username</label>
                                            <input type="text" class="form-control username" name="username" placeholder="Username" autocomplete="off">
                                        </div>
                                        <div class="form-group mb-4">
                                            <label for="password">Password</label>
                                            <input type="password" class="form-control password" name="password" placeholder="Password" required>
                                        </div>
                                        <div class="form-group mb-2">
                                            <div class="captcha">
                                                <label for="capctcha">Captcha</label>
                                                <span>{!! captcha_img() !!}</span>
                                                {{-- <button type="button" class="btn btn-danger" class="reload" id="reload">
                                                    Refresh Captcha
                                                </button> --}}
                                            </div>
                                        </div>
                                        <div class="form-group mb-4">
                                            <input id="captcha" type="text" class="form-control" name="captcha" placeholder="Isikan captcha di sini">
                                        </div>
                                        <div class="mt-4" style="text-align-last: justify;x">
                                            <button type="button" class="btn btn-danger" class="reload" id="reload">
                                                Refresh Captcha
                                            </button>
                                            <button class="btn btn-primary waves-effect waves-light btn-login"
                                                type="button" onclick="cekLogin()">Login</button>
                                            <div class="btn btn-secondary ld-ext-right running btn-login-loading w-49 d-none">
                                                Loading
                                                <div class="ld ld-ball ld-flip-h"></div>
                                            </div>
                                        </div>
                                        {{-- <div class="mt-4 text-center">
                                            <a href="{{ route('lupa_password') }}" class="text-muted"><i class="mdi mdi-lock"></i> Lupa password ?</a>
                                        </div> --}}
                                        <div class="mt-4 text-center">
                                            <p class="text-muted">Cek keaslian data ?</p>
                                        </div>
                                        <button type="button" class="btn btn-primary" style="width: 100%;" onclick="cekTtd()">
                                            Cek Keaslian TTD
                                        </button>
                                        <div style="padding-bottom: 1rem;"></div>
                                        <button type="button" class="btn btn-success" style="width: 100%;" onclick="cekBast()">
                                            Cek Keaslian BAST
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('extra-script-auth')
    <script type="text/javascript">
        {{-- @if (Session::has('berhasil')) --}}
        // Swal.fire({
        //     title: "Berhasil",
        //     text: "{{ Session::get('berhasil') }}",
        //     icon: "success",
        //     showConfirmButton: false
        // });
        {{-- @elseif(Session::has('gagal')) --}}
        // Swal.fire({
        //     title: "Gagal",
        //     text: "{{ Session::get('gagal') }}",
        //     icon: "error",
        //     showConfirmButton: true
        // });
        {{-- @endif --}}

        $(document).ready(function() {
            $('#reload').click(function () {
                $.ajax({
                    type: 'GET',
                    url: "{{route('reload_captcha')}}",
                    success: function (data) {
                        $(".captcha span").html(data.captcha);
                        $("#captcha").val("");
                    }
                });
            });
        });

        $(document).on('keypress', function(e) {
            if (e.which == 13) {
                cekLogin();
            }
        });

        function reloadCaptcha() {
            $.ajax({
                type: 'GET',
                url: "{{route('reload_captcha')}}",
                success: function (data) {
                    $(".captcha span").html(data.captcha);
                    $("#captcha").val("");
                }
            });
        }

        function cekLogin() {
            if ($('.username').val() == '' || $('.username').val() == null) {
                Swal.fire({
                    title: "Peringatan",
                    text: "Username 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 ($('#captcha').val() == '' || $('#captcha').val() == null) {
                Swal.fire({
                    title: "Peringatan",
                    text: "Captcha harus diisi",
                    icon: "warning",
                    showConfirmButton: true
                });
            } else {
                $('.btn-login').addClass('d-none');
                $('.btn-login-loading').removeClass('d-none');

                $.ajax({
                    url: '{{ route('login.cek') }}',
                    type: 'post',
                    data: $('.form-login').serialize(),
                    success: function(response) {
                        reloadCaptcha();
                        $('.btn-login-loading').addClass('d-none');
                        $('.btn-login').removeClass('d-none');
                        if (response.status == 'berhasil' && response.role == '1') {
                            Swal.fire({
                                title: "Sukses",
                                text: response.message,
                                icon: "success",
                                showConfirmButton: false,
                                timer: 2000
                            }).then(function() {
                                window.location.href = "{{ url('/dashboard') }}";
                            });

                        } else if (response.status == 'berhasil' && (response.role == '3' || response.role == '4')) {
                            Swal.fire({
                                title: "Sukses",
                                text: response.message,
                                icon: "success",
                                showConfirmButton: false,
                                timer: 2000
                            }).then(function() {
                                window.location.href = "{{ url('/dashboard') }}";
                            });
                        
                        } else if (response.status == 'berhasil' && response.role == '2') {
                            Swal.fire({
                                title: "Sukses",
                                text: response.message,
                                icon: "success",
                                showConfirmButton: false,
                                timer: 2000
                            }).then(function() {
                                window.location.href = "{{ url('/dashboard') }}";
                            });

                        // } else if (response.status == 'berhasil' && (response.role == 'admin_witel' || response
                        //         .role == 'gm_witel')) {
                        //     Swal.fire({
                        //         title: "Sukses",
                        //         text: response.message,
                        //         icon: "success",
                        //         showConfirmButton: false,
                        //         timer: 2000
                        //     }).then(function() {
                        //         window.location.href = "{{ url('/dashboard') }}";
                        //     });

                        // } else if (response.status == 'berhasil' && response.role == 'house_keeping') {
                        //     Swal.fire({
                        //         title: "Sukses",
                        //         text: response.message,
                        //         icon: "success",
                        //         showConfirmButton: false,
                        //         timer: 2000
                        //     }).then(function() {
                        //         window.location.href = "{{ url('/control-habbit') }}";
                        //     });

                        // } else if (response.status == 'pending' || response.status == 'rejected') {
                        //     hubungi(response.role, response.message);

                        } else if (response.status == 'tidak terdaftar') {
                            Swal.fire({
                                title: "Peringatan",
                                text: response.message,
                                icon: "warning",
                                showConfirmButton: true
                            });

                        } else if (response.status == 'gagal') {
                            Swal.fire({
                                title: "Gagal",
                                text: response.message,
                                icon: "error",
                                showConfirmButton: true
                            });
                        } else if (response.status == 'captcha tidak sesuai') {
                            Swal.fire({
                                title: "Peringatan",
                                text: response.message,
                                icon: "warning",
                                showConfirmButton: true
                            });
                        }
                    },
                    error: function(request, status, error) {
                        $('.btn-login-loading').addClass('d-none');
                        $('.btn-login').removeClass('d-none');
                        Swal.fire({
                            title: "Error",
                            text: "Terjadi kesalahan, hubungi pengembang",
                            icon: "error",
                            showConfirmButton: true
                        });
                        console.log(request.responseText);
                    }
                })
            }
        }

        function hubungi(role, message) {
            if (role == "security") {
                Swal.fire({
                    title: 'Peringatan',
                    text: message + ' silahkan konfirmasi di group T-Cloud Area Management',
                    icon: 'warning',
                    showConfirmButton: true,
                });
               
            } else {
                Swal.fire({
                    title: 'Peringatan',
                    text: message + ' silahkan konfirmasi di group Peduli Saving Energy TR5',
                    icon: 'warning',
                    showConfirmButton: true,
                });
            }
        }

        function cekTtd() {
            window.location.href = "{{ route('cek_keaslian.cek_ttd') }}";
        }

        function cekBast() {
            window.location.href = "{{ route('cek_keaslian.cek_bast') }}";
        }
    </script>
@endsection