@extends('layouts.app')
@section('content')
    <style>
        .body-bg {
            background: linear-gradient(180deg, #BEFDFF 0%, #51B9BD 100%);
            background-image: url('{{ asset('images/login-bg.png') }}');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            padding: 1% 3%;
            font-family: 'Inter', sans-serif
                /* min-height: 100vh; */
        }

        .login-form-card {
            padding: 5% 8% 5% 8%;
            border: none;
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        }

        .login-container {
            padding-top: 1%;
            padding-bottom: 1%;
        }

        .teacher-login-title {
            color: #181C32;
            font-size: 30px;
            font-style: normal;
            font-weight: 700;
            line-height: 39px;
        }

        .np-login-subtitle {
            color: var(--text-secondary-color);
        }

        .np-login-checbox-text {
            color: var(--text-secondary-color);
        }

        .login-button {
            display: flex;
            padding: 14px 112px 14px 111px;
            justify-content: center;
            align-items: center;
            border-radius: 6px;
            background: rgba(66, 143, 146, 1);
            margin: 0 auto;
            width: 100%;
        }

        .login-button:hover {
            background: #428F92;
        }

        .password-toggle {
            position: absolute;
            right: 3%;
            top: 20%;
            z-index: 100;
        }

        .np-login-field-icon {
            position: absolute;
            left: 4%;
            z-index: 100;
            top: 30%;
            width: 20px;
        }

        .np-login-form-field {
            border-radius: 5px !important;
            background-color: #F5F8FA;
            padding: 0.775rem 2.75rem;
            border: none;
        }

        .login-field-title {
            color: #428F92;
            margin: 10px 0;
        }

        .login-next-page {
            color: white;
            text-decoration: none;
        }

        .login-forget-pass {
            float: right;
            text-decoration: none;
            color: black;
        }

        .login-language {
            font-weight: 400;
            color: #222;
        }

        /***********
    Language Switch
     ************/
        .language-switch {
            visibility: hidden;
        }

        .switch-label {
            position: relative;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .switch-rail {
            transition: all 0.2s ease-in-out;
            position: absolute;
            width: 45px;
            height: 30px;
            background: #DDDDDD;
            border-radius: 50px;
            overflow: hidden;
            left: 65%;
        }

        .switch-slider {
            transition: all 0.2s ease-in-out;
            position: absolute;
            top: 4px;
            left: 4px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #428F92;
        }

        .language-switch:checked+.switch-label .switch-rail {
            transition: all 0.2s ease-in-out;
            background: #DDDDDD;
        }

        .language-switch:checked+.switch-label .switch-rail .switch-slider {
            transition: all 0.2s ease-in-out;
            transform: translateX(15px);
        }

        .switch-label-right {
            padding-left: 55px;
        }

        /* mobile media query */
        @media (max-width: 768px) {
            .switch-rail {
                left: 90%;
            }

            .login-language {
                font-size: 11px;
            }

            .help-desk-content {
                text-align: center;
            }
        }

        .np-login-checkbox:checked {
            background-color: rgba(66, 143, 146, 1);
        }

        .login-button {
            display: flex;
            padding: 14px 112px 14px 111px;
            justify-content: center;
            align-items: center;
            border-radius: 6px;
            background: rgba(66, 143, 146, 1);
            margin: 0 auto;
            width: 100%;
        }

        .login-button:hover {
            background: #428F92;
        }

        #no_sms:hover {
            color: rgba(66, 143, 146, 1) !important;
            text-decoration: underline;
        }

        #caid::-webkit-input-placeholder,
        #password::-webkit-input-placeholder {
            color: #d6d4d4;
        }

        @media (min-width: 769px) {
            .help-desk-faq {
                text-align: right;
                /* Right alignment on laptop screens */
            }
        }
    </style>
    <div class="login-bg">
        <div class="container">
            {{-- <p class="login-box-msg">
            {{ trans('global.login') }}
        </p> --}}
            <div class="row">
                <div class="col-md-4 col-sm-12">
                    <div class="help-desk-content">
                        <label for="help-desk" class="help-desk">
                            {{-- <p class="mb-0" style="color: #963293">হেল্প ডেস্ক</p> --}}
                            <p style="color: #963293">হেল্প ডেস্ক নম্বর: <a style="color: #000; text-decoration:underline;"
                                    href="tel:09638600700">০৯৬৩৮৬০০৭০০</a></p>
                        </label>
                    </div>
                </div>
                <div class="col-md-4 col-sm-12">
                    <div class="text-center help-desk-content">
                        <label for="help-desk" class="help-desk">
                            <a class="mb-0" style="color: #963293; text-decoration: underline;"
                                href="https://docs.google.com/spreadsheets/d/e/2PACX-1vQJyc51nkExJh5Zti4RVaeC0OyXWNz6Y5fcO-9zjNxq1kmjOb65EZ6r9jLzPpeyZYeOFyNJAqZeGRum/pubhtml?gid=0&single=true"
                                target="_blank">অ্যাপ সংক্রান্ত তথ্যসেবা পেতে জেলাভিত্তিক নির্ধারিত নম্বরসূমহে যোগাযোগ করুন
                            </a>
                            {{-- জেলাভিত্তিক হেল্পলাইনের নম্বর --}}
                        </label>
                    </div>
                </div>
                <div class="col-md-4 col-sm-12">
                    <div class="help-desk-content help-desk-faq">
                        <label for="help-desk" class="help-desk">
                            <a class="mb-0" style="color: #963293; text-decoration: underline;"
                                href="https://docs.google.com/document/d/e/2PACX-1vTfzi4vy5b8RbL0rnIAt8t7stJFN0F70qwTOUM_ZxEyveq794GnjdXzIzd_RY-a0tVQqGdhwAOyd1NQ/pub"
                                target="_blank">সচরাচর জিজ্ঞাসা</a>
                        </label>
                    </div>
                </div>
            </div>
            {{-- <div class="row">
          <div class="col-md-12">
            <div class="text-center py-3 rounded" style="background: #963293">
              <h5 style="font-weight: 400; color: #fff">প্রতিষ্ঠান প্রধান হিসেবে লগইন এসএমএস না পেয়ে থাকলে <a id="no_sms" href="https://forms.gle/sFrdsXavPaQryQ6k8" target="_blank" style="color: #79bfc1"><strong>এখানে</strong></a> ক্লিক করুন</h5>
          </div>
          </div>
        </div> --}}
            <div class="mt-3">
                <div class="row d-flex justify-content-center align-items-center login-container">
                    <div class="col-md-7 cols-sm-12">
                        <img class="mb-2" src="{{ asset('images/noipunno-new-logo.svg') }}" alt="logo" width="100px">
                        <p class="teacher-login-title">বিষয়ভিত্তিক মূল্যায়ন অ্যাপ্লিকেশন</p>
                        <p class="np-login-subtitle">অনুগ্রহ করে আপনার অ্যাকাউন্টে সাইন ইন করুন এবং অ্যাডভেঞ্চার শুরু করুন
                        </p>
                        <div class="switch-container">
                            <input type="checkbox" id="switch" class="language-switch">
                            <label for="switch" class="switch-label">
                                <p class="login-language">অ্যাপ ডাউনলোড করতে ক্লিক করুন</p> &nbsp;&nbsp;&nbsp;&nbsp;
                                {{-- <div class="switch-rail">
                              <div class="switch-slider"></div>
                          </div> --}}
                                {{-- <small class="login-language">আপনি কি বাংলাকে আপনার ডিফল্ট ভাষা হিসেবে রাখতে চান ?</small>
                          <div class="switch-rail">
                              <div class="switch-slider"></div>
                          </div> --}}
                                <a href="{{ asset('app/noipunno.apk') }}" download><img height="40px"
                                        src="{{ asset('images/play-store-logo.png') }}"></a>
                            </label>
                        </div>
                    </div>
                    <div class="col-md-5 cols-sm-12">
                        <div class="card login-form-card">
                            <p class="teacher-login-title text-center">লগইন</p>
                            @if (session()->has('message'))
                                <p class="alert alert-info">
                                    {{ session()->get('message') }}
                                </p>
                            @endif

                            @if (session('error'))
                                <div class="alert alert-danger">
                                    {!! session('error') !!}
                                </div>
                            @endif
                            <!-- Form Start -->
                            <form action="{{ route('account.verify') }}" method="POST">
                                @csrf

                                <input type="hidden" name="redirect_uri" value="{{ old('redirect_uri', $redirect_uri) }}">

                                <div class="form-group mb-0 d-none">
                                    <label for="user_type_id" class="login-field-title"> ইউজার টাইপ</label>
                                    <div class="input-group">
                                        <select class="form-control np-login-form-field_" name="user_type_id" required>
                                            {{-- <option value="1" selected>শিক্ষক</option> --}}
                                            <!-- <option value="2">শিক্ষার্থী</option> -->
                                            <option value="3" selected>প্রতিষ্ঠান</option>
                                            <option value="4">অন্যান্য</option>
                                        </select>
                                    </div>

                                    @if ($errors->has('user_type_id'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('user_type_id') }}
                                        </div>
                                    @endif
                                </div>

                                <div class="form-group mb-0">
                                    <label for="caid" class="login-field-title"> ইউজার আইডি </label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span> <img src="{{ asset('images/user-square.svg') }}"
                                                    class="np-login-field-icon" alt="logo"></span>
                                        </div>
                                        <input type="text" id="caid" required autocomplete="caid"
                                            placeholder="ইউজার আইডি" name="caid" value=""
                                            class="form-control np-login-form-field" data-toggle="tooltip"
                                            data-placement="top"
                                            title="প্রতিষ্ঠান হিসেবে লগইন করার জন্য EIIN/SGN প্রদান করুন">
                                    </div>

                                    @if ($errors->has('caid'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('caid') }}
                                        </div>
                                    @endif
                                </div>

                                <div class="form-group mb-0">
                                    <label for="pin" class="login-field-title"> পিন নম্বর </label>
                                    <div class="input-group"><img src="{{ asset('images/lock.svg') }}"
                                            class="np-login-field-icon" alt="logo">
                                        <input type="password" id="password"
                                            class="form-control np-login-form-field {{ $errors->has('password') ? ' is-invalid' : '' }}"
                                            data-toggle="tooltip" data-placement="top" title="পিন প্রদান করুন"
                                            name="password" required pattern="[0-9]{6}" placeholder="126345" maxlength="6"
                                            oninput="this.value = this.value.replace(/\D/g, '')">
                                        <div class="input-group-append password-toggle">
                                            <span>
                                                <i id="password-toggle" class="fa fa-eye-slash"
                                                    onclick="togglePassword()"></i>
                                            </span>
                                        </div>

                                        @if ($errors->has('password'))
                                            <div class="invalid-feedback">
                                                {{ $errors->first('password') }}
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                <div class="form-group form-check my-4 mb-0">
                                    {{-- <input type="checkbox" class="form-check-input np-login-checkbox" id="remember" name="remember">
                                <label class="form-check-label np-login-checbox-text" for="remember">পিন সংরক্ষণ করুন</label> --}}

                                    @if (Route::has('account.password-reset'))
                                        <p class="mt-2 mb-1">
                                            <a href="#" id="password-reset-link" class="link-success"
                                                style="color: #428F92">
                                                পিন ভুলে গেছেন? ক্লিক করুন
                                            </a>
                                        </p>
                                    @endif
                                </div>
                                <button type="submit" class="btn login-button text-white"> লগইন করুন</button>
                            </form>
                            <!-- Form End -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- <script>
    document.getElementById('password').addEventListener('input', function(event) {
        let input = event.target.value;
        event.target.value = input.replace(/\D/g, ''); // Replace non-digit characters with an empty string
    });
    </script> --}}
    <script>
        $(document).ready(function() {
            // $('[data-toggle="tooltip"]').tooltip();

            $('#password-reset-link').click(function(e) {
                e.preventDefault(); // Prevent the default action of the link

                // Create a form element
                var form = $('<form>', {
                    'method': 'POST',
                    'action': '{{ route('account.password-reset') }}'
                });
                var caid = $('#caid').val();
                // Add CSRF token input
                form.append('{{ csrf_field() }}');

                // Add input for your parameter
                form.append($('<input>', {
                    'type': 'hidden',
                    'name': 'caid',
                    'value': caid // Replace 'param_value' with the actual value you want to pass
                }));

                // Append form to the document and submit it
                form.appendTo('body').submit();
            });
        });
    </script>
    <script>
        function togglePassword() {
            var passwordInput = document.getElementById("password");
            var passwordToggle = document.getElementById("password-toggle");

            if (passwordInput.type === "password") {
                passwordInput.type = "text";
                passwordToggle.classList.remove("fa-eye-slash");
                passwordToggle.classList.add("fa-eye");
                passwordInput.setAttribute("placeholder", ""); // Clear placeholder
            } else {
                passwordInput.type = "password";
                passwordToggle.classList.remove("fa-eye");
                passwordToggle.classList.add("fa-eye-slash");
                passwordInput.setAttribute("placeholder", "••••••"); // Restore placeholder
            }
        }
    </script>
@endsection