@extends('mobile.module.layouts.content')
@push('meta')

@endpush

@push('css')
    <link href="{{ theme_asset('mobile/css/members.css') }}" rel="stylesheet">
    <style>
        .set-success-tip {
            height: .94rem;
            padding: 0 0.5rem;
            background-image: none;
            background-repeat: no-repeat;
            background-size: auto;
            word-wrap: break-word;
        }
    </style>
@endpush

@push('js')

@endpush

@section('content')
    <form action="post" id="appealForm">
        <img src="" id="image" style="display:block;width:100%;" alt="">
        <div class="split-block"></div>
        <div class="list-group">
            <input type="hidden" name="company_id" value="{{$emp['company_id']}}">
            <input type="hidden" name="emp_id" value="{{$emp['id']}}">
            <div class="list_height plist-txt notarrow">
                <div class="pic"></div>
                <div class="tit font14">姓名</div>
                <div class="describe font12"><input type="text" name="name" id="name" placeholder="请输入姓名"></div>
                <div class="clear"></div>
            </div>

            <div class="list_height plist-txt notarrow">
                <div class="pic"></div>
                <div class="tit font14">手机号码</div>
                <div class="describe font12"><input type="text" name="mobile" id="mobile" placeholder="请输入正在使用的电话"></div>
                <div class="clear"></div>
            </div>

            <div class="list_height plist-txt">
                <div class="pic"></div>
                <div class="tit font14">期待职位</div>
                <div class="describe font13">
                    <span class="for-select"></span>
                    <select id="job" name="job">
                        @foreach($jobs as $k => $v )
                            <option value="{{ $v['name'] }}" data-key="{{$k}}">{{ $v['name'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
            {{ csrf_field() }}
        </div>
    </form>

    <div id="appeal_wrap" class="btn-spacing mt4"><a id="submitBtn" href="javascript:;" class="qs-btn qs-btn-blue font18">提交</a></div>

    <div class="qs-hidden appeal_ok">
        <div class="set-success-tip-box qs-center">
            <div class="set-success-tip font16">信息提交成功！</div>
        </div>
        <div class="qs-center font13 txt-color-9 mt2"><a href="{{route('mobile.home')}}" style="color:#0D3B7D;">点击查看更多招聘信息</a></div>
    </div>

    <script type="text/javascript" src="{{theme_asset('app/js/regular.js')}}"></script>
@endsection

@section('script')
    <script>
        $('.for-event').hide();
        $('#submitBtn').on('click', function () {
            var realnameValue = $.trim($('input[name=name]').val());
            var mobileValue = $.trim($('input[name=mobile]').val());
            if (realnameValue == '') {
                qsToast({type:2,context: '请输入您的姓名'});
                return false;
            }
            if (mobileValue == '') {
                qsToast({type:2,context: '请输入手机号码'});
                return false;
            }
            if (mobileValue != "" && !regularMobile.test(mobileValue)) {
                qsToast({type:2,context: '手机号码格式不正确'});
                return false;
            }

            var url = "{{route('mobile.douyin_recruit.job.add_post')}}";
            $.ajax({
                url: url,
                type: 'POST',
                dataType: 'json',
                data: $('#appealForm').serialize(),
                success: function (data) {
                    $("#appealForm").remove();
                    $("#appeal_wrap").remove();
                    $(".appeal_ok").show();
                }
            });
        })

        const jobs = {!!json_encode($jobs->toArray())!!};
        if (jobs[0].image) {
            $('#image').attr('src',jobs[0].image).show();
        } else {
            $('#image').hide();
        }
        $('#job').on('change',function(){
            let key = this.options.selectedIndex;
            let job = jobs[key];
            if (job.image) {
                $('#image').attr('src',job.image).show();
            } else {
                $('#image').hide();
            }
        });
    </script>
@endsection