@extends('frontend.layouts.app')

@section('title', __('Career'))

@section('meta_description', 'Idein The Ideal Partner for All of Your Creative & strategic Communication Needs.')
@push('after-styles')
<style>
    /* Change autocomplete styles in WebKit */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:hover,
    textarea:-webkit-autofill:focus,
    select:-webkit-autofill,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0px 1000px transparent inset;
        transition: background-color 5000s ease-in-out 0s;
    }
</style>
@endpush
@section('content')
<section class="pxs pt-40 md:pb-20 bg-black text-white space-y-10">
    <div class="flex 3xl:justify-between max-md:flex-col">
        <div class="px-4 md:px-8 space-y-10 max-md:order-2">
            <div class="max-md:!text-[2.375rem] max-md:font-[400] text-5xl md:text-7xl max-md:text-center font-rubik">
                The <span class="font-medium">Ideals</span><span class="md:text-5xl">&#8482;</span>
            </div>
            <div class="space-y-4">
                <div class="text-2xl md:text-4xl pb-1 border-b border-white inline-flex gap-2 items-end">
                    <div>Open Roles</div>

                    <div class="rotate-45 mb-1 md:mb-2">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.7 26.68" class="w-5 h-5">
                            <g id="arrow-svg" data-name="arrow">
                                <path class="fill-white"
                                    d="M11.17,26.38s.1,0,.13.05a.27.27,0,0,0,.22.08h.29c.85,0,1.69.09,2.53.15a.63.63,0,0,0,.53-.17c.21-.21.41-.41.63-.61L28.15,14.12l.48-.46c.09-.1.09-.15,0-.26a.52.52,0,0,0-.1-.11l-.67-.68Q22.64,7,17.41,1.35a13.84,13.84,0,0,1-1-1.07A.45.45,0,0,0,16,.07h-.27c-1,0-1.89,0-2.84-.07a.51.51,0,0,0-.42.18q.4.44.81.84c.46.47.91,1,1.36,1.44q3.88,4.19,7.78,8.38c.26.28.51.56.78.83a.53.53,0,0,1,.21.37l-.31,0a13.09,13.09,0,0,0-1.66-.07c-.65,0-1.31,0-2,0-2.16-.06-4.31-.17-6.47-.18-1.39,0-2.78-.07-4.17-.08s-2.63-.09-3.95-.05c-.84,0-1.68,0-2.52-.06-.67,0-1.35-.07-2-.06l-.33,0a5.79,5.79,0,0,1,0,.72c0,.64,0,1.27,0,1.91a.49.49,0,0,0,.05.27.13.13,0,0,0,.1,0c.42,0,.83,0,1.24,0,1.76,0,3.51.14,5.27.15.82,0,1.64,0,2.45.05,1.06,0,2.11,0,3.16,0,1.39.06,2.78.06,4.16.08l2.68.06,2.64.06h1.4a.6.6,0,0,1,.26,0,.19.19,0,0,1-.1.17c-.14.11-.29.21-.43.33-.47.41-.94.84-1.41,1.27-1.39,1.3-2.79,2.59-4.17,3.89s-2.83,2.58-4.18,3.93c-.58.58-1.18,1.14-1.81,1.67l-.19.18" />
                            </g>
                        </svg>
                    </div>
                </div>

                @foreach ($openRoles as $role)
                <div class="text-md md:text-2xl max-md:!text-[1rem] max-md:!leading-normal max-md:font-[400]">
                    <span class="text-[10px] md:text-base mr-2 max-md:!text-[0.75rem]">{{
                        Carbon\Carbon::parse($role->published_at)->format('d-m-Y') }}</span>
                    {{ $role->title }}
                </div>
                @if ($loop->iteration == 3)
                @break
                @endif
                @endforeach
            </div>
        </div>
        <div class="max-md:order-1">
            <img class="-mt-40" src="{{ asset('img/carreer/carreer-hero.png') }}" alt="">
        </div>
    </div>
    <div class="flex gap-3 -mx-5 md:-mx-14 anim_onscroll">
        @foreach ($sliders as $slide)
        <div class="rounded-2xl bg-gray-400 overflow-hidden min-w-max anim-left-scroll">
            <img class="h-40 md:h-80 table m-auto" src="{{ asset($slide->image) }}" alt="">
        </div>
        @endforeach
    </div>

    <div>
        <div class="text-xl md:text-6xl md:text-primary hidden md:block max-md:font-rubik">We are...</div>
        <div class="flex max-md:flex-col md:grid md:grid-cols-12 gap-16 md:mx-10 2xl:mx-20">
            <div class="col-span-4 flex md:flex-col max-md:justify-center max-md:items-center gap-6">
                <img class="w-1/2 md:w-full" src="{{ asset($settPage['carreer_weare_img1']->value) }}" alt="">
                <div class="md:text-2xl max-md:text-[0.75rem] max-md:font-[400]">
                    <span class="block md:hidden text-xl font-medium font-rubik mb-4">We are...</span>
                    An
                    <span class="relative">
                        <span class="absolute top-0 -bottom-1 -left-0 md:-bottom-1 md:-left-1 right-0"><svg
                                viewBox="0 0 457 166" fill="#fff" xmlns="http://www.w3.org/2000/svg"
                                preserveAspectRatio="none" class="h-full w-full">
                                <path pathLength="100" vector-effect="non-scaling-stroke"
                                    d="M23.652 37.57c-49.713 32.158-36.71 138.536 237.723 125.923 173.239-7.961 203.906-74.972 191.822-96.122C441.112 46.22 407.649 3.28 254.105 1.05 92.241-1.303 31.338 80.263 64.788 92.366"
                                    stroke="#fff" stroke-linecap="round" stroke-linejoin="round"
                                    class="draw-circle !stroke-white"></path>
                            </svg></span>
                        adept team,
                    </span>
                    seasoned since 2016,
                    managing diverse
                    <span class="font-[600]">brands, challenges,</span>
                    and
                    <span class="font-[600]">communication strategies.</span>
                </div>
            </div>

            <div class="col-span-4 flex md:flex-col max-md:justify-center max-md:items-center gap-6">
                <img class="w-1/2 md:w-full max-md:order-2" src="{{ asset($settPage['carreer_weare_img2']->value) }}"
                    alt="">
                <div class="max-md:order-1 md:text-2xl max-md:text-[0.75rem] max-md:font-[400]">
                    A team of <span class="font-[600]">passionate creatives</span> reveling in the
                    synergy of <span class="underline">captivating</span>
                    <span class="underline">visuals</span> and <span class="underline">persuasive</span>
                    <span class="underline">messages</span>
                </div>
            </div>

            <div class="col-span-4 flex md:flex-col max-md:justify-center max-md:items-center gap-6">
                <img class="w-1/2 md:w-full" src="{{ asset($settPage['carreer_weare_img3']->value) }}" alt="">
                <div class="md:text-2xl max-md:text-[0.75rem] max-md:font-[400]">
                    A bunch of
                    <span class="relative">
                        <span class="absolute top-0 -bottom-1 -left-0 md:-bottom-1 md:-left-1 right-0"><svg
                                viewBox="0 0 457 166" fill="#fff" xmlns="http://www.w3.org/2000/svg"
                                preserveAspectRatio="none" class="h-full w-full">
                                <path pathLength="100" vector-effect="non-scaling-stroke"
                                    d="M23.652 37.57c-49.713 32.158-36.71 138.536 237.723 125.923 173.239-7.961 203.906-74.972 191.822-96.122C441.112 46.22 407.649 3.28 254.105 1.05 92.241-1.303 31.338 80.263 64.788 92.366"
                                    stroke="#fff" stroke-linecap="round" stroke-linejoin="round"
                                    class="draw-circle !stroke-white"></path>
                            </svg></span>
                        <span class="font-[600]">story-tellers,</span>
                    </span>
                    who
                    knows how to
                    <span class="font-[600]">crawl into consumer’s mind</span>
                </div>
            </div>
        </div>
    </div>

    <div class="flex max-md:flex-col justify-between max-md:gap-10 md:!mt-28">
        <div
            class="text-white md:text-primary text-xl md:text-5xl max-md:text-center max-md:order-2 max-md:mx-auto max-md:font-rubik max-md:!text-[1.5rem] max-md:!leading-[1.875rem]">
            <div class="">We continually seek individuals</div>
            <div class="">who share
                <span class="font-[600]">our</span>
                <span class="relative">
                    <span class="absolute top-0 -bottom-1 -left-0 md:-bottom-1 md:-left-1 right-0 md:hidden"><svg
                            viewBox="0 0 457 166" fill="#fff" xmlns="http://www.w3.org/2000/svg"
                            preserveAspectRatio="none" class="h-full w-full">
                            <path pathLength="100" vector-effect="non-scaling-stroke"
                                d="M23.652 37.57c-49.713 32.158-36.71 138.536 237.723 125.923 173.239-7.961 203.906-74.972 191.822-96.122C441.112 46.22 407.649 3.28 254.105 1.05 92.241-1.303 31.338 80.263 64.788 92.366"
                                stroke="#fff" stroke-linecap="round" stroke-linejoin="round"
                                class="draw-circle !stroke-white"></path>
                        </svg></span>
                    <span class="font-[600]">values</span>
                </span>
            </div>
        </div>
        <div class="max-md:order-1 max-md:mx-auto">
            <img class="max-md:w-1/2 max-md:mx-auto" src="{{ asset('img/cmpy-culture.png') }}" alt="">
        </div>
    </div>

    <div class="flex max-md:flex-col justify-between items-center max-md:gap-10 md:!mt-20">
        <div
            class="text-sm md:text-3xl font-rubik flex flex-wrap md:flex-col justify-center gap-5 max-md:!text-[1rem] max-md:!font-[300] max-md:!leading-normal w-auto md:w-1/2">
            <div class="max-md:order-1">⚡ DYNAMIC</div>
            <div class="max-md:order-2">💡 INITIATIVE</div>
            <div class="max-md:order-5">💬 COMMUNICATIVE</div>
            <div class="max-md:order-3">🧡 INTEGROUS</div>
            <div class="max-md:order-4">💭 THOUGHTFUL</div>
        </div>
        <div class="w-auto md:w-1/2 max-md:-mx-6">
            <video autoplay muted loop id="idein-video" class="w-full float-right">
                <source src="{{ asset('videos/idein_notion_teamspace_intro.mp4')}}" type="video/mp4">
                <img class="w-full float-right" src="{{ asset('img/carreer/tumb-video.png') }}" alt="">
            </video>
        </div>
    </div>
</section>
<section>
    <div
        class="bg-primary pxs py-4 md:py-8 text-3xl md:text-5xl text-white flex items-end gap-2 max-md:!text-[1.5rem] max-md:font-rubik max-md:!leading-6 max-md:!font-[400]">
        <div>Open Roles</div>
        <div class="rotate-45 mb-1 md:mb-2">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.7 26.68" class="w-5 h-5">
                <g id="arrow-svg" data-name="arrow">
                    <path class="fill-white"
                        d="M11.17,26.38s.1,0,.13.05a.27.27,0,0,0,.22.08h.29c.85,0,1.69.09,2.53.15a.63.63,0,0,0,.53-.17c.21-.21.41-.41.63-.61L28.15,14.12l.48-.46c.09-.1.09-.15,0-.26a.52.52,0,0,0-.1-.11l-.67-.68Q22.64,7,17.41,1.35a13.84,13.84,0,0,1-1-1.07A.45.45,0,0,0,16,.07h-.27c-1,0-1.89,0-2.84-.07a.51.51,0,0,0-.42.18q.4.44.81.84c.46.47.91,1,1.36,1.44q3.88,4.19,7.78,8.38c.26.28.51.56.78.83a.53.53,0,0,1,.21.37l-.31,0a13.09,13.09,0,0,0-1.66-.07c-.65,0-1.31,0-2,0-2.16-.06-4.31-.17-6.47-.18-1.39,0-2.78-.07-4.17-.08s-2.63-.09-3.95-.05c-.84,0-1.68,0-2.52-.06-.67,0-1.35-.07-2-.06l-.33,0a5.79,5.79,0,0,1,0,.72c0,.64,0,1.27,0,1.91a.49.49,0,0,0,.05.27.13.13,0,0,0,.1,0c.42,0,.83,0,1.24,0,1.76,0,3.51.14,5.27.15.82,0,1.64,0,2.45.05,1.06,0,2.11,0,3.16,0,1.39.06,2.78.06,4.16.08l2.68.06,2.64.06h1.4a.6.6,0,0,1,.26,0,.19.19,0,0,1-.1.17c-.14.11-.29.21-.43.33-.47.41-.94.84-1.41,1.27-1.39,1.3-2.79,2.59-4.17,3.89s-2.83,2.58-4.18,3.93c-.58.58-1.18,1.14-1.81,1.67l-.19.18" />
                </g>
            </svg>
        </div>
    </div>

    <div class="max-md:px-0 pxs max-w-screen-lg my-4">
        <div class="accordion">
            @foreach ($openRoles as $role)
            <div class="accordion-carreer-wrapper overflow-hidden transition-all duration-500">
                <h5
                    class="border-t border-t-black text-base font-normal mb-0 p-3 md:p-4 accordion-carreer flex justify-between items-center cursor-pointer transition-colors duration-500">
                    <span class="mr-3">
                        <span class="max-md:text-[0.6875rem] max-md:font-[400]">{{
                            Carbon\Carbon::parse($role->published_at)->format('d-m-Y') }}</span> <span
                            class="font-medium text-sm md:text-xl ml-3 md:ml-5 max-md:font-[400]">{{ $role->title
                            }}</span>
                    </span>
                    <svg class="flex-shrink-0 stroke-current" width="32" height="32" viewBox="0 0 24 24"
                        stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <polyline points="6 9 12 15 18 9" />
                    </svg>
                </h5>
                {{-- <div class="accordion-answer" {% if not loop.first %} style="display:none" {% endif %}> --}}
                    <div class="accordion-answer" style="display:none">
                        <div class="px-4">
                            <div class="richtext accordian-richtext border-secondary py-3 md:py-4 max-md:text-[11px]">
                                {!! $role->body !!}
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
</section>
<section class="mb-20">
    <div
        class="bg-primary pxs py-4 md:py-8 text-3xl md:text-5xl text-white mt-10 md:mt-20 flex items-end gap-2 max-md:!text-[1.5rem] max-md:font-[400] max-md:leading-6 max-md:font-rubik">
        <div>Apply Form</div>
        <div class="rotate-45 mb-1 md:mb-2">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.7 26.68" class="w-5 h-5">
                <g id="arrow-svg" data-name="arrow">
                    <path class="fill-white"
                        d="M11.17,26.38s.1,0,.13.05a.27.27,0,0,0,.22.08h.29c.85,0,1.69.09,2.53.15a.63.63,0,0,0,.53-.17c.21-.21.41-.41.63-.61L28.15,14.12l.48-.46c.09-.1.09-.15,0-.26a.52.52,0,0,0-.1-.11l-.67-.68Q22.64,7,17.41,1.35a13.84,13.84,0,0,1-1-1.07A.45.45,0,0,0,16,.07h-.27c-1,0-1.89,0-2.84-.07a.51.51,0,0,0-.42.18q.4.44.81.84c.46.47.91,1,1.36,1.44q3.88,4.19,7.78,8.38c.26.28.51.56.78.83a.53.53,0,0,1,.21.37l-.31,0a13.09,13.09,0,0,0-1.66-.07c-.65,0-1.31,0-2,0-2.16-.06-4.31-.17-6.47-.18-1.39,0-2.78-.07-4.17-.08s-2.63-.09-3.95-.05c-.84,0-1.68,0-2.52-.06-.67,0-1.35-.07-2-.06l-.33,0a5.79,5.79,0,0,1,0,.72c0,.64,0,1.27,0,1.91a.49.49,0,0,0,.05.27.13.13,0,0,0,.1,0c.42,0,.83,0,1.24,0,1.76,0,3.51.14,5.27.15.82,0,1.64,0,2.45.05,1.06,0,2.11,0,3.16,0,1.39.06,2.78.06,4.16.08l2.68.06,2.64.06h1.4a.6.6,0,0,1,.26,0,.19.19,0,0,1-.1.17c-.14.11-.29.21-.43.33-.47.41-.94.84-1.41,1.27-1.39,1.3-2.79,2.59-4.17,3.89s-2.83,2.58-4.18,3.93c-.58.58-1.18,1.14-1.81,1.67l-.19.18" />
                </g>
            </svg>
        </div>
    </div>

    <div class="mx-[5%] mt-10">
        <form action="{{ route('frontend.carreer.store') }}" method="POST" enctype="multipart/form-data">
            @method('POST')
            @csrf
            <div class="relative z-0 w-full mb-6 group">
                <input type="text" name="email" id="floating_email" value="{{ old('email') }}"
                    class="block py-3 px-0 w-full text-xs md:text-lg {{ $errors->get('email') ? 'text-red-500 border-red-500' : 'text-black border-black' }} bg-transparent border-b appearance-none focus:text-black focus:outline-none focus:ring-0 focus:border-black peer"
                    placeholder=" " required />
                <label for="floating_email"
                    class="peer-focus:font-medium absolute text-xs md:text-lg {{ $errors->get('email') ? 'text-red-500' : 'text-black' }} duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-black peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Email</label>
                @error('email')
                <small class="text-xs text-red-500">{{ $message }}</small>
                @enderror
            </div>
            <div class="md:flex gap-8">
                <div class="relative z-0 w-full mb-6 group">
                    <input type="text" name="name" id="floating_name" value="{{ old('name') }}"
                        class="block py-3 px-0 w-full text-xs md:text-lg {{ $errors->get('name') ? 'text-red-500 border-red-500' : 'text-black border-black' }} bg-transparent border-b appearance-none focus:text-black focus:outline-none focus:ring-0 focus:border-black peer"
                        placeholder=" " required />
                    <label for="floating_name"
                        class="peer-focus:font-medium absolute text-xs md:text-lg {{ $errors->get('name') ? 'text-red-500' : 'text-black' }} duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-black peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Name</label>
                    @error('name')
                    <small class="text-xs text-red-500">{{ $message }}</small>
                    @enderror
                </div>
                <div class="relative z-0 w-full mb-6 group">
                    <input type="text" name="last_name" id="floating_last_name" value="{{ old('last_name') }}"
                        class="block py-3 px-0 w-full text-xs md:text-lg {{ $errors->get('last_name') ? 'text-red-500 border-red-500' : 'text-black border-black' }} bg-transparent border-b appearance-none focus:text-black focus:outline-none focus:ring-0 focus:border-black peer"
                        placeholder=" " required />
                    <label for="floating_last_name"
                        class="peer-focus:font-medium absolute text-xs md:text-lg {{ $errors->get('last_name') ? 'text-red-500' : 'text-black' }} duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-black peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Last
                        Name</label>
                    @error('last_name')
                    <small class="text-xs text-red-500">{{ $message }}</small>
                    @enderror
                </div>
            </div>
            <div class="relative z-0 w-full mb-6 group">
                <input type="text" name="phone" id="floating_phone" value="{{ old('phone') }}"
                    class="block py-3 px-0 w-full text-xs md:text-lg {{ $errors->get('phone') ? 'text-red-500 border-red-500' : 'text-black border-black' }} bg-transparent border-b appearance-none focus:text-black focus:outline-none focus:ring-0 focus:border-black peer"
                    placeholder=" " required />
                <label for="floating_phone"
                    class="peer-focus:font-medium absolute text-xs md:text-lg {{ $errors->get('phone') ? 'text-red-500' : 'text-black' }} duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-black peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Phone
                    Number</label>
                @error('phone')
                <small class="text-xs text-red-500">{{ $message }}</small>
                @enderror
            </div>
            <div class="md:flex gap-8 w-full">
                <div class="relative z-0 mb-6 group">
                    <label for="floating_based"
                        class="text-xs md:text-lg {{ $errors->get('base_in_jakarta') ? 'text-red-500' : 'text-black' }} ">Are
                        you based in Jakarta?</label>
                    <div class="max-md:text-xs">
                        <select class="border border-black w-full p-2" name="base_in_jakarta" id="floating_based">
                            <option class="" value="" selected disabled>*Select one option</option>
                            <option value="Yes, i can come to idein’s office in Jakarta" {{ old('base_in_jakarta')
                                ? 'selected' : '' }}>Yes, i can come to idein’s office in Jakarta</option>
                            <option value="No, but i would like to talk online" {{ old('base_in_jakarta') ? 'selected'
                                : '' }}>No, but i would like to talk online</option>
                        </select>
                    </div>
                    @error('base_in_jakarta')
                    <small class="text-xs text-red-500">{{ $message }}</small>
                    @enderror
                </div>
                <div class="relative z-0 w-full mb-6 group">
                    <label for="floating_address"
                        class="text-xs md:text-lg {{ $errors->get('address') ? 'text-red-500' : 'text-black' }} ">Address</label>
                    <textarea name="address" id="floating_address"
                        class="pb-3 px-0 w-full text-xs md:text-lg {{ $errors->get('address') ? 'text-red-500 border-red-500' : 'text-black border-black' }} bg-transparent border-b appearance-none focus:text-black focus:outline-none focus:ring-0 focus:border-black peer"
                        rows="1">{{ old('address') }}</textarea>
                    @error('address')
                    <small class="text-xs text-red-500">{{ $message }}</small>
                    @enderror
                </div>
            </div>
            <div class="relative z-0 w-full mb-6 group">
                <label for="floating_why_join"
                    class="text-xs md:text-lg {{ $errors->get('about_yourself') ? 'text-red-500' : 'text-black' }} max-md:text-[0.75rem] max-md:font-[400]">Tell
                    us a bit about yourself and the reasons why you want to join idein</label>
                <textarea
                    class="border {{ $errors->get('about_yourself') ? 'text-red-500 border-red-500' : 'text-black border-black' }} block w-full p-2"
                    name="about_yourself" id="floating_why_join" rows="5"
                    placeholder="*Your reply">{{ old('about_yourself') }}</textarea>
            </div>
            <div class="relative z-0 w-full mb-6 group">
                <input type="text" name="find_idein" id="floating_find_idn" value="{{ old('find_idein') }}"
                    class="block py-3 px-0 w-full text-xs md:text-lg {{ $errors->get('find_idein') ? 'text-red-500 border-red-500' : 'text-black border-black' }} bg-transparent border-b appearance-none focus:text-black focus:outline-none focus:ring-0 focus:border-black peer"
                    placeholder=" " required />
                <label for="floating_find_idn"
                    class="peer-focus:font-medium absolute text-xs md:text-lg {{ $errors->get('find_idein') ? 'text-red-500' : 'text-black' }} duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-black peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">How
                    did you find out about idein?</label>
                @error('find_idein')
                <small class="text-xs text-red-500">{{ $message }}</small>
                @enderror
            </div>
            <div class="flex max-md:flex-col max-md:gap-5 justify-between">
                <div class="flex max-md:flex-col md:items-center gap-4">
                    <div>
                        <label for="formFile" class="block w-max max-md:text-xs">
                            Upload your CV / Portfolio here
                        </label>
                    </div>
                    <div>
                        <input
                            class="relative m-0 block w-full min-w-0 flex-auto rounded border border-solid border-idn-gray bg-clip-padding px-3 py-[0.32rem] text-base font-normal transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:overflow-hidden file:rounded-none file:border-0 file:border-solid file:border-inherit file:bg-neutral-100 file:px-3 file:py-[0.32rem] file:text-neutral-700 file:transition file:duration-150 file:ease-in-out file:[border-inline-end-width:1px] file:[margin-inline-end:0.75rem] hover:file:bg-neutral-200 focus:border-black focus:text-neutral-700 focus:shadow-te-black focus:outline-none"
                            type="file" name="cv" id="formFile" />

                        @error('cv')
                        <small class="text-xs text-red-500">{{ $message }}</small>
                        @enderror
                    </div>
                </div>
                <div>
                    <button
                        class="bg-primary max-md:w-full py-1.5 px-3 rounded-full md:rounded-lg text-xl text-white max-md:text-[1.5rem] max-md:leading-normal">Submit</button>
                </div>
            </div>
        </form>
    </div>

</section>
@endsection

@push('after-styles')
<style>
    .accordion-carreer-wrapper .accordion-carreer {
        background-color: #f3f3f3;
    }

    .accordion-carreer-wrapper.is-active .accordion-carreer,
    .accordion-carreer-wrapper.is-active .accordion-carreer:hover {
        cursor: pointer;
        background-color: #00000000;
    }

    .accordion-carreer-wrapper.is-active .accordion-carreer svg,
    .accordion-carreer-wrapper.is-active .accordion-carreer:hover svg {
        stroke: #000;
    }

    .accordion-carreer-wrapper.is-active .accordion-carreer svg {
        transform: rotatex(180deg);
    }

    .accordion-answer {
        margin-top: 8px;
    }
</style>
@endpush

@push('after-scripts')
<script>
    setTimeout(function () {
            $('.accordion-carreer-wrapper .accordion-carreer').first().trigger("click");
        }, 10);


        $(".accordion-carreer").click(function () {
            var isActive = $(this).parent().hasClass("is-active");

            if (isActive) {
                $(this).parent().find(".accordion-answer").slideUp();
                $(this).parent().removeClass("is-active");
            } else {
                $(this).parent().siblings().removeClass("is-active");
                $(this).parent().addClass("is-active");
                $(this).parent().siblings().find(".accordion-answer").slideUp();
                $(this).next().slideDown();
            }
        });
</script>
@endpush