@extends('website.main')
@section('main-content')
    <!-- Hero Banner -->
    <section class="hero-wrap hero-wrap-2" style="background-image: url('{{ asset('assets/images/bag2.webp') }}');">
        <div class="overlay"></div>
        <div class="container">
            <div class="row no-gutters slider-text align-items-center justify-content-center">
                <div class="col-md-9 pt-5 text-center">
                    <p class="breadcrumbs">
                        <span class="mr-2"><a href="{{ route('home') }}">Home <i class="fa fa-chevron-right"></i></a></span>
                        <span>Careers <i class="fa fa-chevron-right"></i></span>
                    </p>
                    <h1 class="mb-0 bread">Join Our Team</h1>
                </div>
            </div>
        </div>
    </section>

    <!-- Available Jobs Section (With Images & Fixed Layout) -->
    <section class="ftco-section bg-light">
        <div class="container-xl">
            <div class="row justify-content-center mb-5 pb-3">
                <div class="col-md-7 heading-section text-center" data-aos="fade-up">
                    <span class="subheading">Career Opportunities</span>
                    <h2 class="mb-4">Current Open Positions</h2>
                    <p>Explore opportunities to build your career with a leading legal team dedicated to excellence and
                        integrity.</p>
                </div>
            </div>

            <div class="row">
                <!-- Job Card 1 -->
                <div class="col-md-6 col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="100">
                    <div class="job-card-box">
                        <div class="job-card-img">
                            <img src="{{ asset('assets/images/images.png') }}" alt="Corporate Law" class="img-fluid">
                            <span class="job-badge badge-fulltime">Full-Time</span>
                        </div>
                        <div class="job-card-content">
                            <h3 class="job-title">Senior Corporate Legal Consultant</h3>
                            <div class="job-location">
                                <i class="fa fa-map-marker"></i> Riyadh, Saudi Arabia
                            </div>
                            <p class="job-desc">Looking for an experienced attorney with 5+ years experience in corporate
                                &amp; commercial law.</p>
                            <a href="#apply-section" class="job-apply-btn" style=" background-color:#1F3044; color: white">Apply Now</a>
                        </div>
                    </div>
                </div>

                <!-- Job Card 2 -->
                <div class="col-md-6 col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="200">
                    <div class="job-card-box">
                        <div class="job-card-img">
                            <img src="{{ asset('assets/images/litigation.png') }}" alt="Litigation" class="img-fluid">
                            <span class="job-badge badge-fulltime">Full-Time</span>
                        </div>
                        <div class="job-card-content">
                            <h3 class="job-title">Litigation Associate</h3>
                            <div class="job-location">
                                <i class="fa fa-map-marker"></i> Riyadh, Saudi Arabia
                            </div>
                            <p class="job-desc">Seeking a detail-oriented associate specialized in civil and commercial
                                litigation disputes.</p>
                            <a href="#apply-section" class="job-apply-btn" style=" background-color:#1F3044; color: white">Apply Now</a>
                        </div>
                    </div>
                </div>

                <!-- Job Card 3 -->
                <div class="col-md-6 col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="300">
                    <div class="job-card-box">
                        <div class="job-card-img">
                            <img src="{{ asset('assets/images/legal.png') }}" alt="Legal Trainee" class="img-fluid">
                            <span class="job-badge badge-intern">Internship</span>
                        </div>
                        <div class="job-card-content">
                            <h3 class="job-title">Legal Research Trainee</h3>
                            <div class="job-location">
                                <i class="fa fa-map-marker"></i> Riyadh, Saudi Arabia
                            </div>
                            <p class="job-desc">Great opportunity for law graduates to gain hands-on legal experience with
                                expert mentors.</p>
                            <a href="#apply-section" class="job-apply-btn" style=" background-color:#1F3044; color: white">Apply Now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Job Application Section -->
    <section id="apply-section" class="ftco-appointment ftco-section img"
        style="background-image: url({{ asset('assets/images/bg_4.jpg') }});">
        <div class="overlay"></div>
        <div class="container-xl">
            <div class="row">

                <!-- Left Text Column -->
                <div class="col-md-5 d-flex align-items-center pr-lg-5">
                    <div class="heading-section heading-section-white" data-aos="fade-up">

                        <span class="subheading">Work With Us</span>

                        <h2 class="mb-3">
                            Build Your Career In Legal Excellence
                        </h2>

                        <p>
                            We are always looking for top legal talent, dedicated advocates, and energetic professionals to
                            join our expanding team.
                        </p>


                        <div class="services d-flex w-100 mt-4">

                            <div class="icon icon-2 d-flex align-items-center justify-content-center">

                                <span class="flaticon-law" style="color:#1F3044;">
                                </span>

                            </div>

                            <div class="text pl-3">
                                <h2>Professional Growth</h2>
                                <p>
                                    Continuous learning environment with guidance from senior legal practitioners.
                                </p>
                            </div>

                        </div>



                        <div class="services d-flex w-100 mt-3">

                            <div class="icon icon-2 d-flex align-items-center justify-content-center">

                                <span class="flaticon-law" style="color:#1F3044;">
                                </span>

                            </div>

                            <div class="text pl-3">
                                <h2>Excellence Culture</h2>

                                <p>
                                    Collaborative atmosphere driven by integrity, commitment, and mutual respect.
                                </p>

                            </div>

                        </div>


                    </div>
                </div>

                <!-- Right Application Form -->
                <div class="col-md-7 d-flex align-items-center">
                    <form action="{{ route('career.apply') }}" method="POST" enctype="multipart/form-data"
                        class="appointment w-100" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">

                        @csrf

                        <span class="subheading">Submit Application</span>

                        <h2 class="mb-4 appointment-head">
                            Apply For a Position
                        </h2>

                        @if (session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif

                        <div class="row">

                            <!-- Full Name -->
                            <div class="col-md-12 col-lg-6">
                                <div class="form-group">
                                    <label>Your Full Name</label>

                                    <input type="text" name="full_name" class="form-control" placeholder="Full Name"
                                        value="{{ old('full_name') }}" required>

                                    @error('full_name')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>

                            <!-- Email -->
                            <div class="col-md-12 col-lg-6">
                                <div class="form-group">
                                    <label>Email Address</label>

                                    <input type="email" name="email" class="form-control"
                                        placeholder="Email Address" value="{{ old('email') }}" required>

                                    @error('email')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>

                            <!-- Phone -->
                            <div class="col-md-12 col-lg-6">
                                <div class="form-group">
                                    <label>Phone Number</label>

                                    <input type="text" name="phone" class="form-control"
                                        placeholder="Phone / WhatsApp" value="{{ old('phone') }}" required>

                                    @error('phone')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>

                            <!-- Position -->
                            <div class="col-md-12 col-lg-6">
                                <div class="form-group">

                                    <label>Applying Position</label>

                                    <div class="form-field">

                                        <div class="select-wrap">

                                            <div class="icon">
                                                <span class="fa fa-chevron-down"></span>
                                            </div>

                                            <select name="position" class="form-control" required>

                                                <option value="">Select Job Position</option>

                                                <option value="Senior Corporate Legal Consultant">
                                                    Senior Corporate Legal Consultant
                                                </option>

                                                <option value="Litigation Associate">
                                                    Litigation Associate
                                                </option>

                                                <option value="Legal Research Trainee">
                                                    Legal Research Trainee
                                                </option>

                                                <option value="Other">
                                                    Other / General Application
                                                </option>

                                            </select>

                                        </div>

                                    </div>

                                    @error('position')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror

                                </div>
                            </div>

                            <!-- Resume -->
                            <div class="col-md-12">
                                <div class="form-group">

                                    <label>Upload Resume / CV</label>

                                    <input type="file" name="resume" class="form-control" accept=".pdf,.doc,.docx"
                                        required>

                                    @error('resume')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror

                                </div>
                            </div>

                            <!-- Cover Letter -->
                            <div class="col-md-12">
                                <div class="form-group">

                                    <label>Cover Letter / Message</label>

                                    <textarea name="cover_letter" cols="30" rows="5" class="form-control"
                                        placeholder="Briefly introduce yourself and your relevant experience...">{{ old('cover_letter') }}</textarea>

                                    @error('cover_letter')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror

                                </div>
                            </div>

                            <!-- Submit -->
                            <div class="col-md-12">

                                <button type="submit" class="btn btn-primary py-3 px-4 rounded w-100" style=" background-color:#1F3044; color: white">

                                    <i class="fa fa-paper-plane me-2"></i>

                                    Submit Application

                                </button>

                            </div>

                        </div>

                    </form>
                </div>

            </div>
        </div>
    </section>

    <!-- Call To Action -->
@endsection
