@extends('v1.enduser.genericpage')

@push('subContents')
    <br/>
    @if(!empty($pageInfo['subContent']['careerApplicant']['title']) && !empty($pageInfo['subContent']['careerApplicant']['content']))
        <h2>{{ $pageInfo['subContent']['careerApplicant']['title'] }}</h2>
        <p>{!! $pageInfo['subContent']['careerApplicant']['content'] !!}</p>
        <br/>
    @endif
    
    <div class="row">
        <form action="" method="get" class="col-sm-12 formSearch">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="name">Levels:</div>
                    <select name="level" class="select-level">
                        <option value="0">Show All</option>
                        @foreach($jobs['jobLevels'] as $jobLevel)
                        <option value="{{ $jobLevel['id'] }}" {{ app('request')->input('level')==$jobLevel['id'] ? 'selected' : '' }}>{{ $jobLevel['title'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="name-dep">Department:</div>
                    <select name="department" class="select-level">
                        <option value="0">Show All</option>
                        @foreach($jobs['jobDepartments'] as $jobDepartment)
                        <option value="{{ $jobDepartment['id'] }}" {{ app('request')->input('department')==$jobDepartment['id'] ? 'selected' : '' }}>{{ $jobDepartment['title'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="name">Locations:</div>
                    <select name="location" class="select-level">
                        <option value="0">Show All</option>
                        @foreach($jobs['jobLocations'] as $jobLocation)
                        <option value="{{ $jobLocation['id'] }}" {{ app('request')->input('location')==$jobLocation['id'] ? 'selected' : '' }}>{{ $jobLocation['title'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <button type="submit" class="search-btn">Search</button>
                </div>
            </div>
        </form>
    </div>

    @foreach($jobs['jobs'] as $job)
        <div class="career">
            <button id="pos-slide{{ $job['id'] }}" class="header pos-slide">
                <div class="title">{{ $job['title'] }}</div>
                {{-- <div class="location">Eskala Hotel • Ngwe Saung, Pathein</div> --}}
                <div class="location">{{ $job['location'] }}</div>
                <div class="expand"><i class="material-icons">expand_more</i></div>
                <div class="less"><i class="material-icons">expand_less</i></div>
            </button>
            <div class="content content-slide">
                <div>{!! $job['content'] !!}</div>
                <div class="content-apply">
                    <div class="apply-pos">{{ $job['level']}} • {{ $job['department'] }} • {{ $job['location'] }}</div>
                    <div>
                        <div data-job-id="{{ $job['id'] }}" data-job-title="{{ $job['title'] }}" class="apply-now applyJob">Apply Now</div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
@endpush

@push('footerPopupCon')
    <div class="applicationForm">
        <div class="applicationFormWrapper">
            <div class="applicationFormInnerWrapper">
                <div class="container">
                    <form class="row formFormatOne" method="get" id="applicationForm">
                        <div class="col-sm-12">
                            <h3>Apply a job</h3>
                            <br/>
                        </div>
                        <div class="col-sm-12">
                            <label>Interested Position</label>
                            <input id="applicantPosition" disabled/>
                            {{-- <select>
                                <option>Please select subject</option>
                                @foreach($pageInfo['subContent']['careerApplicant']['other_info']['positions'] as $position)
                                <option value="{{ $position['name'] }}">{{ $position['name'] }}</option>
                                @endforeach
                                <option value="others">Others</option>
                            </select> --}}
                        </div>
                        <div class="col-sm-12">
                            <div class="row">
                                <div class="col-md-4 col-sm-12">
                                    <label>Name *</label>
                                    <input id="applicantName" placeholder="Please enter your full name"/>
                                </div>
                                <div class="col-md-4 col-sm-12">
                                    <label>Email *</label>
                                    <input id="applicantEmail" type="email" placeholder="Please enter your email address"/>
                                </div>
                                <div class="col-md-4 col-sm-12">
                                    <label>Phone *</label>
                                    <input id="applicantPhone" placeholder="Please enter your phone number"/>
                                </div>
                            </div>
                        </div>
                        <input id="jobid" type="hidden"/>
                        <div class="col-sm-12">
                            <label>Message *</label>
                            <textarea id="applicantMesg" placeholder="Please write your message here"></textarea>
                        </div>
                        <div class="col-md-12 text-right">
                            <div id="sendApplicationCon">
                                <button class="btnRadiusFill cancelApplyJob" type="button">Cancel</button>
                                <button class="btnRadiusOutlineInvert sendButton" type="submit">Send</button>
                                <span style="display:none">Sending...</span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endpush

@push('footerScript')
    <script>
        $(document).ready(function() {
            $(".applyJob").on("click", function() {
                $("#applicantPosition").val($(this).data('job-title'));
                $("#jobid").val($(this).data('job-id'));
                $(".applicationForm").addClass("showForm");
            });
            $(".cancelApplyJob").on("click", function() {
                $(".applicationForm input, .applicationForm textarea").val('');
                $(".applicationForm").removeClass("showForm");
            });

            $("#applicationForm").on("submit", function(e) {
                e.preventDefault();
                
                var name = $("#applicantName").val();
                if(name=="") {
                    alert("Name field is required!");
                    return;
                }
                var email = $("#applicantEmail").val();
                if(email=="") {
                    alert("Email field is required!");
                    return;
                }
                var phone = $("#applicantPhone").val();
                if(phone=="") {
                    alert("Phone field is required!");
                    return;
                }
                var mesg = $("#applicantMesg").val();
                if(mesg=="") {
                    alert("Message field is required!");
                    return;
                }
                var jobId = $("#jobid").val();

                $("#sendApplicationCon span").show();
                $("#sendApplicationCon button").hide();

                var data = new FormData();
                data.append('name', name);
                data.append('_token', '{{ csrf_token() }}');
                data.append('email', email);
                data.append('phone', phone);
                data.append('mesg', mesg);
                data.append('jobid', jobId);

                $.ajax({
                    method: "post",
                    data: data,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        $(".applicationForm input, .applicationForm textarea").val('');
                        $(".applicationForm").removeClass("showForm");
                        $("#sendApplicationCon span").hide();
                        $("#sendApplicationCon button").show();
                    },
                    error: function(error) {
                        alert("Filed to send an application.")
                        $("#sendApplicationCon span").hide();
                        $("#sendApplicationCon button").show();
                    }
                });

            });
        });
    </script>
@endpush