@extends('frontend::layouts.master')
@section('title')

@section('style')

@endsection

@section('content')
    @php
    setLanguage();
    @endphp
    <main id="main">
        <div class="rel py-12 pt-24-lg">
            <div class="container ppdx df aic jcsb fc fr-xl">
                <div class="text-center text-xl-left mb-6 mb-0-xl">
                    {!! mwz_getTextString(get_content(6)->content) !!}
                </div>
                <div class="df fc fr-md aic jcc jce-md">
                    <div class="stepsd df fc aic jcc m-2" style="background-image: url('../../../storage/poli.svg');">
                        <h2>@lang('frontend::lang.lang_title_42')</h2>
                        <h1>1</h1>
                        <p><strong>@lang('frontend::lang.lang_title_39')</strong></p>
                        <!--p><strong>Click apply button in position you are interested.</strong></p-->
                    </div>
                    <div class="stepsd df fc aic jcc my-2" style="background-image: url('../../../storage/poli.svg');">
                        <h2>@lang('frontend::lang.lang_title_42')</h2>
                        <h1>2</h1>
                        <p><strong>@lang('frontend::lang.lang_title_40')</strong></p>
                    </div>
                    <div class="stepsd df fc aic jcc my-2" style="background-image: url('../../../storage/poli.svg');">
                        <h2>@lang('frontend::lang.lang_title_42')</h2>
                        <h1>3</h1>
                        <p><strong>@lang('frontend::lang.lang_title_41')</strong></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="container ppdx">
            <div class="accordion accordion-reset accordion-style rel z-1" id="accordionExample">
                @foreach ($Careers as $index => $careers)
                    <div class="card animate__animated" animate="animate__fadeInUp">
                        <div class="card-header" id="heading{{ $careers->id }}">
                            <div class="space">
                                <div class="dim-10-sm p-4 df fc aic ais-sm">
                                    <p id="title{{ $careers->id }}" class="posn">{{ $careers->title }}</p>
                                    <button class="btn btn-link butn butn-trans df aic jcc jcs-md pl-0 py-0 mt-4 "
                                        type="button" data-toggle="collapse" data-target="#collapse{{ $careers->id }}"
                                        aria-expanded="false" aria-controls="collapse{{ $careers->id }}">Detail<img
                                            src="{{ Module::asset('frontend:img/icon/arrow-circle-up.svg') }}"
                                            alt="Alternate Text" lazyload="true">
                                    </button>
                                </div>
                                <div class="dim-2-sm df aic jcc p-4"><a onclick="Getposition('{{ $careers->id }}')"
                                        class="main-butn" href="#page-focus">
                                        <div class="mr-5">Apply </div><img
                                            src="{{ Module::asset('frontend:img/icon/arrow-d.svg') }}"
                                            alt="Alternate Text" lazyload="true">
                                    </a></div>
                            </div>
                        </div>
                        <div class="collapse {{ $index == 0 ? 'show' : '' }}"
                            aria-labelledby="heading{{ $careers->id }}" id="collapse{{ $careers->id }}"
                            data-parent="#accordionExample">
                            <div class="card-body">
                                <p class="text-1st"></p>
                                <p>{!! mwz_getTextString($careers->description) !!}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        @php
            $sum_page = 0;
        @endphp
        <div class="bg-service rmsdfv rel py-12"
            style="background-image:url({{ Module::asset('frontend:img/head/careers.svg') }})">
            <div class="container text-center">
                <div class="ps-pagination">
                    <ul class="pagination">
                        <li class="prev {{ $page == 1 ? 'disabled' : '' }}"><a
                                href="{{ $Careers->previousPageUrl() }}">
                                <h5><i class="fa fa-arrow-left"></i></h5>
                            </a></li>
                        @for ($i = 1; $i <= $Careers->lastPage(); $i++)
                            <li class="{{ $page == $i ? 'active' : '' }}"><a
                                    href="{{ $Careers->url($i) }}">{{ $i }}</a></li>
                            @php
                                $sum_page++;
                            @endphp
                        @endfor
                        <li class="next {{ $page == $sum_page ? 'disabled' : '' }}"><a
                                href="{{ $Careers->nextPageUrl() }}">
                                <h5><i class="fa fa-arrow-right"></i></h5>
                            </a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="page-focus" class="py-24"
            style="background-image:url({{ Module::asset('frontend:img/bg/career.jpg') }})">
            <div class="container ppdx">
                <div class="space jcc">
                    <div class="dim-8-md">
                        <div class="contact-form p-6 p-12-sm">
                            <div class="text-center">
                                <h3 class="upper text-2nd"><strong>@lang('frontend::lang.lang_title_29')</strong></h3>
                            </div>
                            <form class="form-wrapper float-label mt-4 animate__animated" id="career_frm" name="career_frm"
                                animate="animate__fadeIn" onsubmit="CareerSave(); return false;"
                                enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="col-12 mb-6">
                                        <label for="name">@lang('frontend::lang.lang_title_30')</label>
                                        <input class="form-style display-form" type="text" name="position" id="position"
                                            placeholder="@lang('frontend::lang.lang_title_31')">
                                    </div>
                                    <input type="hidden" name="career_id" id="career_id">
                                    <div class="col-12 mb-6 float-group">
                                        <input class="form-style" type="text" name="name"
                                            placeholder="@lang('frontend::lang.lang_title_11')" id="name">
                                        <label for="name">@lang('frontend::lang.lang_title_11')</label>
                                    </div>
                                    <div class="col-lg-6 mb-6 float-group">
                                        <input class="form-style" type="email" name="email"
                                            placeholder="@lang('frontend::lang.lang_title_12')" id="email">
                                        <label for="email">@lang('frontend::lang.lang_title_12')</label>
                                    </div>
                                    <div class="col-lg-6 mb-6 float-group">
                                        <input class="form-style" type="text" name="tel"
                                            placeholder="@lang('frontend::lang.lang_title_19')" id="tel">
                                        <label for="tel">@lang('frontend::lang.lang_title_19')</label>
                                    </div>
                                    <div class="col-12 my-6">
                                        <label class="mb-2">@lang('frontend::lang.lang_title_32')</label>
                                        <div class="box-dnd has-advanced-upload">
                                            <div class="box__input df aic jcs px-4">
                                                <input class="box__file" id="file" type="file" name="file"
                                                    onchange="ChangNameImage()"
                                                    data-multiple-caption="{count} file selected"
                                                    accept="image/png, image/gif, image/jpeg, application/pdf">
                                                <div class="df w-100 jcc text-center">
                                                    <label id="text_image" for="file">Drag or <span
                                                            class="brows-btn">Browse</span>&nbsp;Your Image
                                                        Here</label>
                                                </div>
                                            </div>
                                            <input type="hidden" name="ajax" value="1">
                                            <div class="dashed-l"></div>
                                            <div class="dashed-r"></div>
                                            <div class="dashed-t"></div>
                                            <div class="dashed-b"></div>
                                        </div>
                                        <p class="subt mt-2">@lang('frontend::lang.lang_title_33')</p>
                                    </div>
                                    <div class="col-12 df aic jcc">
                                        <div class="capcha mb-2 d-flex justify-content-center justify-content-md-start">
                                            <div class="g-recaptcha" data-callback="makeaction"
                                                data-sitekey="6Lerj88dAAAAANosdDXue_s_YfUBadWdCyLlFmLG"></div>
                                        </div>
                                    </div>
                                    <div class="col-12 df aic jcc">
                                        <button id="btn_submit" disabled class="sub-butn mt-6"
                                            type="submit">@lang('frontend::lang.lang_title_34')</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('script')
    <script type="text/javascript">
        function makeaction() {
            document.getElementById('btn_submit').disabled = false;
        }
    </script>
    <script src='https://www.google.com/recaptcha/api.js?hl=th'></script>
    <!--ckeditor js-->
    <script src="{{ URL::asset('assets/plugins/tinymce/tinymce.min.js') }}"></script>
    <!-- <script src="{{ URL::asset('assets/js/formeditor.js') }}"></script> -->

    <!-- Notifications js -->
    <link href="{{ URL::asset('assets/plugins/notify-growl/css/jquery.growl.css') }}" rel="stylesheet" />
    <link href="{{ URL::asset('assets/plugins/notify-growl/css/notifIt.css') }}" rel="stylesheet" />
    <script src="{{ URL::asset('assets/plugins/bootbox/bootbox.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/notify-growl/js/rainbow.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/notify-growl/js/jquery.growl.js') }}"></script>

    <!-- mwz master js css -->
    <link rel="stylesheet" href="{{ mix('css/mwz.css') }}">
    <script src="{{ mix('js/mwz.js') }}"></script>

    <!-- module js css -->
    <link rel="stylesheet" href="{{ mix('css/frontend.css') }}">
    <script src="{{ mix('js/frontend.js') }}"></script>
@endsection