@extends('front.layouts.app')
@section('content')
    <style>
        @media (max-width: 768px) {
            .custom-margin {
                margin-top: 70px !important;
            }
        }
    </style>

    <div class="container mt-3 mb-3">
        <div class="row justify-content-center">
            <div class="col-md-6  mt-lg-2 custom-margin ">
                <div class="card ">
                    <div class="card-header">Enter Your Phone Number</div>
                    <div class="card-body">
                        @if(session('error'))
                            <div class="alert alert-danger">{{ session('error') }}</div>
                        @endif
                            <form action="{{ route('career-assessment.detail') }}" method="POST">
                                @csrf
                                <div class="form-group">
                                    <label for="phone_number">Phone Number</label>
                                    <input type="text" name="phone_number" id="phone_number" placeholder="03__-_______"
                                           class="form-control" maxlength="12" required>
                                </div>
                                <button type="submit" class="btn btn-primary mt-3">Check</button>

                            </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('footer-scripts')
<script src="{{ asset('frontend/coreui/js/jquery.inputmask.bundle.js') }}"></script>

<script>
    $(":input").inputmask();

</script>

<script>
    $(document).ready(function () {
        $("#phone_number").inputmask({
            mask: "0399-9999999",
            placeholder: "____-_______",
            clearIncomplete: true,
            showMaskOnHover: false
        });
    });
</script>
@endpush