@extends('frontend.layout.master')
@section('content')

{{--    <style>--}}
{{--        #cover-spin {--}}
{{--            position: fixed;--}}
{{--            width: 100%;--}}
{{--            left: 0;--}}
{{--            right: 0;--}}
{{--            top: 0;--}}
{{--            bottom: 0;--}}
{{--            background-color: rgba(45, 45, 45, 0.7);--}}
{{--            z-index: 9999;--}}
{{--            display: none;--}}
{{--        }--}}

{{--        @-webkit-keyframes spin {--}}
{{--            from {--}}
{{--                -webkit-transform: rotate(0deg);--}}
{{--            }--}}

{{--            to {--}}
{{--                -webkit-transform: rotate(360deg);--}}
{{--            }--}}
{{--        }--}}

{{--        @keyframes spin {--}}
{{--            from {--}}
{{--                transform: rotate(0deg);--}}
{{--            }--}}

{{--            to {--}}
{{--                transform: rotate(360deg);--}}
{{--            }--}}
{{--        }--}}

{{--        #cover-spin::after {--}}
{{--            content: '';--}}
{{--            display: block;--}}
{{--            position: absolute;--}}
{{--            left: 48%;--}}
{{--            top: 40%;--}}
{{--            width: 40px;--}}
{{--            height: 40px;--}}
{{--            border-style: solid;--}}
{{--            border-color: #bcefde;--}}
{{--            border-top-color: transparent;--}}
{{--            border-width: 4px;--}}
{{--            border-radius: 50%;--}}
{{--            -webkit-animation: spin .8s linear infinite;--}}
{{--            animation: spin .8s linear infinite;--}}
{{--        }--}}
{{--    </style>--}}
    <div class="container">
        <div class="breadcrumb-wrapper">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">


                    <li class="breadcrumb-item"><a href="index.html">Home</a></li>

                    <li class="breadcrumb-item active" aria-current="page">careers</li>


                </ol>
            </nav>
        </div>
    </div>

    <section class="careers-from">
        <div class="container">
            <div class="content">
                <div class="headingArea">
                    <h2 class="h2">Applied Position Heading</h2>
                </div>
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="left-cont">
                            <div class="date-area">
                                @if(!empty($career->created_at))
                                <span class="span-1">{{date_format($career->created_at,"d F Y") }}</span>
                                @endif
                            </div>
                            <div class="row align-items-top">
                                <div class="col-6">
                                    <h3>Required Experience :</h3>
                                </div>
                                <div class="col-6">
                                    <p class="p1">{{$career->experience ?? ''}}</p>
                                </div>
                                <div class="col-6">
                                    <h3>Required Skills :</h3>
                                </div>
                                <div class="col-6">
                                    <p class="p1">{{$career->skills ?? ''}}</p>
                                </div>
                                <div class="col-6">
                                    <h3>Location :</h3>
                                </div>
                                <div class="col-6">
                                    <p class="p1">{{$career->location ?? ''}}</p>
                                </div>
                                <div class="col-6">
                                    <h3>Position Open :</h3>
                                </div>
                                <div class="col-6">
                                    <p class="p1">{{$career->position_open ?? ''}}</p>
                                </div>
                                <div class="col-6">
                                    <h3>Eligibility :</h3>
                                </div>
                                <div class="col-6">
                                    <p class="p1">{{$career->eligibility ?? ''}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
{{--                    <div id="cover-spin" ></div>--}}
                    <div class="col-md-6">
                        <div class="right-cont">
                            <h3>Fill this to apply</h3>
                            <form action="{{route('applly_career')}}" method="post" id="contact_form">
                                @csrf
                                <div class="form-group">
                                    <input type="text" name="name" class="form-control" id="nameArea" placeholder="Enter your Name">
                                </div>
                                <span class="text-danger error-text name_error"></span>
                                <div class="form-group">
                                    <input type="text" name="email" class="form-control" id="emailArea"
                                           placeholder="Enter your Email ID">
                                </div>
                                <span class="text-danger error-text email_error"></span>
                                <div class="form-group">
                                    <input type="text" name="phone" class="form-control" id="Phone-area"
                                           placeholder="Enter your Phone No.">
                                </div>
                                <span class="text-danger error-text phone_error"></span><br>
                                <span id="fileid">Max Document Size 2 Mb</span>
                                <div class="form-group form-control" id="hii">
                                    Upload your CV

                                    <label for="fileArea" class="resume-level">Upload</label>
                                    <input type="file" name="file" id="fileArea" class="resume-area" >
                                </div>

                                <span class="text-danger error-text file_error"></span>

                            <div class="bottom-area">
                                <div class="buttons">
                                    <button type="submit" id="Form_Submit" class="btn btn-submit">Submit <span><i data-feather="chevrons-right"></i></span></button>
                                </div>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script src="{{ url('/') }}/admin/plugins/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.5.1/sweetalert2.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.5.1/sweetalert2.all.min.js"></script>
    @push('scripts')
        <script type="text/javascript">
           // $('#cover-spin').hide()
            $(function () {

                $("input[name='phone']").on('input', function(e) {
                    $(this).val($(this).val().replace(/[^0-9]/g, ''));
                });

                $('#contact_form').on('submit', function (e) {
                    $(".btn-submit").prepend('<i class="fa fa-spinner fa-spin"></i>');
                    $(".btn-submit").attr("disabled", 'disabled');
                    e.preventDefault();
                    //$('#cover-spin').show()
                    $.ajax({
                        url: $(this).attr('action'),
                        method: $(this).attr('method'),
                        data: new FormData(this),
                        processData: false,
                        dataType: 'json',
                        contentType: false,
                        beforeSend: function () {
                            $(document).find('span.error-text').text('');
                        },
                        success: function (data) {
                            if (data.status == 0) {
                                //$('#cover-spin').hide()
                                $.each(data.error, function (key, value) {
                                    $('span.' + key + '_error').text(value[0]);
                                });
                            } else {
                                $('#contact_form')[0].reset();
                                //$('#cover-spin').hide()
                                toastr.success(data.success)
                            }
                            $(".btn-submit").find(".fa-spinner").remove();
                            $(".btn-submit").removeAttr("disabled");
                        }
                    });

                });
            });

            // $(function() {
            //     $("input[name='phone']").on('input', function(e) {
            //         $(this).val($(this).val().replace(/[^0-9]/g, ''));
            //     });
            // });

         $('#fileArea').change(function (){
             $("#fileid").val("")
             let filesize= $("#fileArea")[0].files[0].size;

            if (filesize > 2000000){
                $("#fileid").val("")
                $('#fileid').css({"background-color":"red","color":"white"});
                return false;

            }
            return true;


         }) ;


            $("#fileArea").change(function(){

               $("#hii").contents()[0].nodeValue=this.files[0].name;
            });

        </script>
    @endpush

@endsection