@extends('frontend.layouts.template')
@section('content')

<div class="row box-banner" style="background: #fff;">
    <div class="col-12" style="background: url({{asset('frontend/assetsnew/img/about/BG28.png') }});background-repeat: no-repeat;background-size:contain;background-position: top center;">
        <div class="box-page">
            <div class="row" style="">
                <div class="col-12">
                    <div style="margin-bottom: 60px;">
                        <div class="text-center c-black f-topic-news" style="">
                            <b class="f-bold">CAREERS</b>
                        </div>
                        <div class="text-center c-black res-ma">
                            <div class="mt-2 mb-2 position-relative" style="font-size: 16px;color: #000;">
                                {{ count( $jobs ) }} JOBS
                            </div>
                        </div>
                    </div>
                    <div class="row" style="">
                        <div class="col-sm-12 col-xl-1"></div>
                        <div class="col-sm-12 col-xl-10 res-p-15">
                            <div style="box-shadow: 0px 3px 15px 0px rgb(0 0 0 / 16%);" class="mb-3 c-black box-blog">

                                <div class="row" style="">
                                    <div class="col-sm-12 col-xl-12">
                                        <div class="mt-2">
                                            {!! $detail->top !!}
                                            <div class="mt-5">
                                                <ul>
                                                    @if ($jobs)
                                                        @foreach ($jobs as $job)
                                                            <li class="mb-5" style="list-style: none">
                                                                <i class="fa fa-check-square" aria-hidden="true" style="color: #22559E;margin-left:-20px;"></i> <b>{{ $job->name }}</b>
                                                                <div class="mt-2">
                                                                    {!! $job->description !!}
                                                                </div>
                                                                <div class="mt-3">
                                                                    @if ( $job->attach_jobs )
                                                                        <a href="{{ asset( $job->attach_jobs->link )}}" target="_blank" class="stem-click-red" style="padding: 5px 30px;font-size: 14px;display: inline-block;">
                                                                            <img src="{{ asset('frontend/assetsnew/img/whatworks/icon/icon-b.png') }}" alt="" style="width:12px;vertical-align: middle;">&nbsp;&nbsp;Download
                                                                        </a>
                                                                    @endif
                                                                </div>
                                                            </li>
                                                        @endforeach
                                                    @endif
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {!! $detail->bottom !!}
                            </div>
                            <div>
                                <div class="sec-contact">

                                    <div class="topic-content-detail f-bold c-black pt-4">
                                        Personal Details
                                    </div>
                                     @if (Session::has('success') )
                                        <div class="alert alert-success" id="success-contact">
                                            <h2>Thank you!</h2>
                                            <p>You are very important to us, all information received will always remain confidential. We will contact you as soon as we review your message.</p>
                                        </div>
                                    @endif
                                    <form accept-charset="utf-8" method="post" action="{{ url('sender/careers') }}" class="needs-validation" enctype="multipart/form-data" novalidate>
                                        {{ csrf_field() }}
                                        <div class="mb-5">
                                            <div class="row">
                                                <div class="col-12 col-md-6">
                                                    <div class="form-group">
                                                        <input type="text" class="form-control border-r0"  placeholder="Full Name" name="name" required="required">
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-6">
                                                    <div class="form-group">
                                                        <input type="text" class="form-control border-r0"  placeholder="Position" name="position" required="required">
                                                    </div>
                                                </div>
                                                <div class="col-12 col-md-6">
                                                    <div class="form-group">
                                                        <input type="text" class="form-control border-r0"  placeholder="Phone Number" name="phone" required="required">
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-6">
                                                    <div class="form-group">
                                                        <input type="email" class="form-control border-r0"  placeholder="Email Address" name="email" required="required">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="topic-content-detail f-bold c-black pt-4">
                                                        Experiences
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="topic-content-detail f-bold c-black pt-4">
                                                        Work History
                                                    </div>
                                                    <div>
                                                        <ul style="padding: 0" id="TextBoxContainer"></ul>
                                                        <div>
                                                            <a id="btnAdd" type="button" class="ab-del c-red" data-toggle="tooltip" data-original-title="Add more controls">+ Add Position</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="topic-content-detail f-bold c-black pt-4">
                                                        Education
                                                    </div>
                                                    <div>
                                                        <ul style="padding: 0" id="TextBoxContainer-b"></ul>
                                                        <div>
                                                            <a id="btnAdd-b" type="button" class="ab-del c-red" data-toggle="tooltip" data-original-title="Add more controls">+ Add Education</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="topic-content-detail f-bold c-black pt-4">
                                                        Experience Summary
                                                    </div>
                                                </div>
                                                <div class="col-12 col-md-12">
                                                    <div class="form-group">
                                                        <textarea class="form-control border-r0" name="experience" rows="3"  placeholder="Message" required="required"></textarea>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="topic-content-detail f-bold c-black pt-4">
                                                        Resume <span class="c-red">*</span>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-md-12">
                                                    <div class="form-group">
                                                        <input type="file" id="actual-btn" hidden name="attach" required="required"/>
                                                        <label for="actual-btn" class="c-red" id="file-chosen"><i class="fa fa-file-text" aria-hidden="true"></i> Upload Resume</label>
                                                    </div>

                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="topic-content-detail f-bold c-black pt-4">
                                                        Cover Letter
                                                    </div>
                                                </div>
                                                <div class="col-12 col-md-12">
                                                    <div class="form-group">
                                                        <textarea class="form-control border-r0" rows="3"  placeholder="Message" name="message" required="required"></textarea>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-12 col-md-12">
                                                    <div class="text-right " style="margin-top:15px;">
                                                        <button type="submit" class="btn button-b text-center border-r0" style="">SUBMIT</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-xl-1"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('stylesheet')
	<link href="{{ asset('frontend/assetsnew/css/resources.css')}}" rel="stylesheet">
	<link href="{{ asset('frontend/assetsnew/css/about.css')}}" rel="stylesheet">
@endsection
@section('javascript')
<script>
    const actualBtn = document.getElementById('actual-btn');

    const fileChosen = document.getElementById('file-chosen');

    actualBtn.addEventListener('change', function() {
        fileChosen.textContent = this.files[0].name
    })
    $(function() {
        $("#btnAdd-b").bind("click", function() {
            var div = $("<li />");
            div.html(GetDynamicTextBoxb(""));
            $("#TextBoxContainer-b").append(div);
        });
        $("body").on("click", ".remove", function() {
            $(this).closest("li").remove();
        });

        $("#btnAdd").bind("click", function() {
            var div = $("<li />");
            div.html(GetDynamicTextBox(""));
            $("#TextBoxContainer").append(div);
        });
        $("body").on("click", ".remove", function() {
            $(this).closest("li").remove();
        });
    });

    function GetDynamicTextBox(value) {
        return '<div class="form-group">'
                    +'<input type="text" class="form-control border-r0" placeholder="Company" name="job[company][]" required="required">'
                +'</div>'
                +'<div class="form-group">'
                    +'<input type="text" class="form-control border-r0" placeholder="Title" name="job[title][]" required="required">'
                +'</div>'
                +'<div class="form-group">'
                    +'<input type="text" class="form-control border-r0" placeholder="Summary" name="job[summary][]" required="required">'
                +'</div>'
                +'<div class="text-right">'
                    +'<a class="ab-del c-red remove">- Delete</a>'
                +'</div>';
    }

    function GetDynamicTextBoxb(value) {
        return '<div class="form-group">'
                    +'<input type="text" class="form-control border-r0" name="educate[school][]" placeholder="School" required="required">'
                +'</div>'
                +'<div class="form-group">'
                    +'<input type="text" class="form-control border-r0" name="educate[study][]" placeholder="Field of Study" required="required">'
                +'</div>'
                +'<div class="form-group">'
                    +'<input type="text" class="form-control border-r0" name="educate[summary][]" placeholder="Summary" required="required">'
                +'</div>'
                +'<div class="text-right">'
                    +'<a class="ab-del c-red remove">- Delete</a>'
                +'</div>';
    }
    @if (Session::has('success') )
        document.querySelector('#success-contact').scrollIntoView();
    @endif

</script>
@endsection