@extends('layouts.customer')

@section('content')
<div class="main-div">
    <!-- Slider Start -->
    <section class="inner_banner">
        <div class="container-fluid">
        <h2>CAREERS</h2>
                            <p>We make sure you get the respect, stability, and reliable equipment you deserve, all while maintaining industry-leading compensation and one of the lowest driver turnover rates in the business.</p>
         </section>

    <section class="contect-sec enquiryn-page p-0">
        <div class="map-form m-0">
            <div class="row justify-content-center">
                <div class="col-md-10">
                    <div class="contect-form">
                        <h3 class="text-center">Apply for the Job</h3>
                        <form action="{{ route('send.career.mail') }}" class="row" method="post" enctype="multipart/form-data" id="career_form" name="career_form">
                            @csrf
                            @if (session()->has('success'))
                                <div class="alert alert-success">
                                    <button type="button" class="close" data-dismiss="alert">×</button>
                                    {{ session('success') }}
                                </div>
                            @endif
                                @if (session()->has('error'))
                                <div class="alert alert-danger">
                                    {{ session('error') }}
                                </div>
                            @endif
                            <div class="col-md-6">
                                <label for="">Full Name</label>
                                <input type="text" placeholder="Full name" name="name">
                                @error('name')
                                        <span class="" role="alert">
                                            <strong class="error">{{ $message }}</strong>
                                        </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="">Start Date</label>
                                <input type="date" placeholder="Start Date" name="date">
                                @error('date')
                                    <span class="" role="alert">
                                        <strong class="error">{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="">Email</label>
                                <input type="email" placeholder="Email adress" name="email">
                                @error('email')
                                        <span class="" role="alert">
                                            <strong class="error">{{ $message }}</strong>
                                        </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="">Apply for Position</label>
                                <input type="text" placeholder="Position" name="position">
                                @error('position')
                                        <span class="" role="alert">
                                            <strong class="error">{{ $message }}</strong>
                                        </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="">Phone Number</label>
                                <input type="text" placeholder="Enter Phone Number" name="phone">
                                @error('phone')
                                    <span class="" role="alert">
                                        <strong class="error">{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="">Location</label>
                                <select id="location" name="location">
                                    <option value="">Location</option>
                                    <option value="Auckland">Auckland</option>
                                    <option value="Hamilton">Hamilton</option>
                                    <option value="Tauranga">Tauranga</option>
                                    <option value="Christchurch">Christchurch</option>
                                    <option value="Wellington">Wellington</option>
                                </select>
                                @error('location')
                                    <span class="" role="alert">
                                        <strong class="error">{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-12">
                                <label for="">Address</label>
                                <textarea id="" placeholder="Address" name="address"></textarea>
                                @error('address')
                                    <span class="" role="alert">
                                        <strong class="error">{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="">Experience</label>
                                <select id="experience" name="experience">
                                    <option value="">Experience</option>
                                    <option value="one">0-1 Year</option>
                                    <option value="two">1 Year</option>
                                    <option value="2-Years">2 Years</option>
                                    <option value="3-Years">3 Years</option>
                                    <option value="4-Years">4 Years</option>
                                    <option value="5-Years">5 Years</option>
                                    <option value="More-than-5-Years">More than 5 Years</option>
                                </select>
                                @error('experience')
                                    <span class="" role="alert">
                                        <strong class="error">{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-12">
                                <label for="">Upload Resume</label>
                                <input type="file" name="resume">
                                @error('resume')
                                    <span class="" role="alert">
                                        <strong class="error">{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="col-md-12">
                                <button class="request-btn">Submit <svg width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M3.75 12H20.25" stroke="#F48120" stroke-width="1.5"
                                            stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M13.5 5.25L20.25 12L13.5 18.75" stroke="#F48120" stroke-width="1.5"
                                            stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                    </a></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection
@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script>
  jQuery.validator.addMethod('alphabetsonly', function(value, element) {
    return this.optional(element) || /^[a-zA-Z\s]+$/i.test(value);
  }, "Letters and spaces only please");

  if ($("#career_form").length > 0) {
   $("#career_form").validate({
        rules: {
            name: {
                required: true,
                // alphabetsonly : true
            },
            date: {
                required: true,
                // alphabetsonly : true
            },
            email: {
                required: true,
                email: true
            },
            position: {
                required: true,
                // alphabetsonly : true
            },
            location: {
                required: true,
            },
            phone: {
                required: true
            },
            experience: {
                required: true
            },
            resume: {
                required: true
            },
        },
        messages: {
            name: {
                required : 'Please Enter Name.',
                // alphabetsonly : "Please Enter valid text"
            }, 
            date: {
                required : 'Please Select Date.',
                // alphabetsonly : "Please Enter valid text"
            },  
            email: {
                required : 'Please Enter Email.',
                email : 'Please Enter Correct Email.'
            },
            position: {
                required : 'Please Enter Position.',
            },
            location: {
                    required : 'Please Select Location.',
                    // alphabetsonly : "Please Enter valid text"
                }, 
            phone: 'Please Enter Phone.',
            experience: 'Please Select Experience.',
            resume: 'Please Upload Resume.',
         },
       })
     }
</script>
@endsection