@extends('layouts/eims_pre_admission_layout')
@section('title', '| ' . $pageTitle)
@section('content')

    {{ Form::open(['method' => 'post', 'id' => 'preAdmissionLoginForm', 'enctype' => 'multipart/form-data']) }}
    {!! Form::hidden('companyId', $company->encoded_id ?? null, ['id' => 'companyId']) !!}
    <div class="col-md-3 register-left">
        <img id="company_image" src="{{ asset('images/company/' . $company->image) }}" alt="">
        <h3 style="color: white;">Welcome To</h3>
        <h3 style="color: white;">{{ $company->name }}</h3>
        <h4 style="color: white;">
            {{ $company->address }}
        </h4>
        <h4 style="color: white;"> Online Admission Primary Information Entry</h4>
        <div style="margin-top: 59px;">
            <h3 class="text-center blink" style="color: #e3fd05; font-size: 20px; padding: 5px;">
                Admission Fair !!!
            </h3>
        </div>
    </div>
    <div class="col-md-9 register-right">
        <a href="{{ url('eims/pre-admission') }}" id="registrationButton" class="btn btn-primary btn-login" title="Apply Now">
            <i class="glyphicon glyphicon-ok"></i>
            <b>Apply Now</b>
        </a>
        <h4 class="register-heading">{{ $pageTitle }}</h4>
        <div class="row register-form">
            <div class="col-md-9">

                <div class="form-group">
                    {!! Form::label(
                        'usernameAdmission',
                        'User Name: <sup class="text-danger">*</sup>',
                        ['class' => 'control-label'],
                        false,
                    ) !!}
                    <div>
                        {!! Form::text('usernameAdmission', null, [
                            'class' => 'form-control',
                            'id' => 'usernameAdmission',
                            'placeholder' => 'Enter user name',
                            'autocomplete' => 'off',
                        ]) !!}
                        <p id='usernameAdmissione' style="min-height:3px;"></p>
                    </div>
                </div>

                <div class="form-group">
                    {!! Form::label(
                        'passwordAdmission',
                        'Password: <sup class="text-danger">*</sup>',
                        ['class' => 'control-label'],
                        false,
                    ) !!}
                    <div>
                        {!! Form::password('passwordAdmission', [
                            'class' => 'form-control',
                            'id' => 'passwordAdmission',
                            'placeholder' => 'Enter password',
                            'autocomplete' => 'off',
                        ]) !!}
                        <p id='passwordAdmissione' style="min-height:3px;"></p>
                    </div>
                </div>

                <div class="form-group">
                    <button type="submit" id="logInButton" class="btn btn-primary" title="Login">
                        <i class="glyphicon glyphicon-log-in"> <b>Login</b></i>
                    </button>
                </div>
            </div>
        </div>

    </div>
    {{ Form::close() }}

    {{-- Tab Loading Scripts --}}
    <script type="text/javascript">
        'use strict';

        $(document).ready(function() {
            const loadingDiv = '<i class="glyphicon glyphicon-refresh glyphicon-spin"> <b>Loading...</b></i>';

            const preAdmissionLoginForm = $('#preAdmissionLoginForm');
            const logInButton = $('#logInButton');


            // logInButton click get admitCard
            logInButton.click(function(e) {
                e.preventDefault();
                $.ajax({
                    url: `{{ url('/eims/pre-admission/login') }}`,
                    type: 'POST',
                    data: preAdmissionLoginForm.serialize(),
                    dataType: 'json',
                    beforeSend: () => $('#logInButton').html(loadingDiv),
                    success: function(_response) {
                        $('#logInButton').html(
                            '<i class="glyphicon glyphicon-log-in"> <b>Login</b></i>');

                        setTimeout(function() {
                            const url = _response.data.url;
                            window.location.href =
                                `${url}?companyId=${encodeURIComponent(_response.data.encodedCompanyId)}&admission_no=${encodeURIComponent(_response.data.admission_no)}`;
                        }, 1000);
                    },
                    error: function(_response) {
                        $('#logInButton').html(
                            '<i class="glyphicon glyphicon-log-in"> <b>Login</b></i>');
                        const responseJSON = _response.responseJSON;
                        setErrorsText(responseJSON.errors);
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: responseJSON.message,

                        });
                    },
                });
            });
        });

        function setErrorsText(errors) {
            $.each(errors, function(key, value) {
                console.log(value);
                $('#' + key + 'e').empty().show().append('<span class="errormsg" style="color:red;">' + value +
                    '</span>');

            });
        }
    </script>
@endsection