@extends("Site.Layouts.blank")
@section ("content")

    <!-- *=*=*=*=*=*=*=*=*=* Section Banner *=*=*=*=*=*=*=*=*=* -->
    <div class="w-full relative overflow-x-hidden overflow-y-hidden">
        <img class="w-full    min-h-[320px] md:h-auto object-cover  " src="{{url($setting['careers_page_banner'])}}" alt="banner">
        <div class="left_bottom-absolute  min-w-full">
            <div class="Banner_text-wrapper">
                <h1> @lang('site.Careers') </h1>
            </div>
        </div>
    </div>
    <br><br>

    <main class="my-12  mx-6 lg:mx-16 xl:mx-20 2xl:mx-40">

        <section class="flex justify-between  gap-2">
            <div class="md:w-[80%] md:w-1/2 xl:w-[40%] ">
                <h1 class="text-3xl md:text-4xl text-primary"> @lang('site.APPLY NOW') </h1>
                <form action="{{url('careers')}}" method="post" enctype="multipart/form-data" class="mt-5" data-aos="fade-up" >
                    @csrf
                    <input type="text" name="name" placeholder="@lang('site.Name')" class="w-full placeholder:text-[#484848] border-b-2 py-2  mb-7"            >
                    <input type="text" name="phone" placeholder="@lang('site.Phone Number')" class="w-full placeholder:text-[#484848] border-b-2 py-2  mb-7"   >
                    <input type="text" name="email" placeholder="@lang('site.Email')" class="w-full placeholder:text-[#484848] border-b-2 py-2  mb-7"           type="email"        >
                    <input type="text" name="country" placeholder="@lang('site.County')" class="w-full placeholder:text-[#484848] border-b-2 py-2  mb-7"         >
                    <input type="text" name="city" placeholder="@lang('site.City')" class="w-full placeholder:text-[#484848] border-b-2 py-2  mb-7"            >
                    <select name="category_id" class="w-full  text-[#484848] border-b-2 py-2  mb-7">
                        <option value=""> @lang('site.Job Category') </option>
                        @foreach($categories as $category)
                            <option value="{{$category->id}}"> {{$category->name}} </option>
                        @endforeach
                    </select>
                    <div class="w-full placeholder:text-[#484848] border-b-2 py-2  mb-7 flex justify-between"  >
                        <label for="cv_file" class="flex-1">@lang('site.Upload your Cv')</label>
                        <input type="file" id="cv_file" name="cv"   class="flex-1 block w-full text-sm text-slate-500
                          file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold
                          file:bg-violet-50 file:text-[#02204C] hover:file:bg-violet-100
                        ">
                    </div>


                    <button class=" bg-primary text-white px-10 py-2 rounded-lg drop-shadow-lg hover:scale-x-105	 transition-all  mt-4" type="submit">
                        @lang('site.Submit')
                    </button>

                </form>
            </div>
            <div class="hidden md:block">
                <img src="{{url($setting['careers_image'])}}" alt="Careers" data-aos="fade-left" >
            </div>
        </section>

    </main>


    <!-- *=*=*=*=*=*=*=*=*=* Section CONTACT US *=*=*=*=*=*=*=*=*=* -->
    @include('Site._contact_us')



@endsection