@extends('layouts.front.app')
@section('meta')
    <title>Careers | {{ env('APP_NAME') }}</title>
    <meta name="description" content="Providing high-quality workforce and hosted services to Quanta Operating units" />

@stop
@section('css')
    <style>
    </style>
@endsection
@section('content')
    <div class="primary-content position-relative">
        @php
            $careers = App\Models\Career::all();
            $careers_local = App\Models\Career::where('type', 'local')->where('active', 1)->get();
            $careers_international = App\Models\Career::where('type', 'international')->get();
        @endphp
        <!--<div class="d-none d-md-block fixed bg-light position-fixed my-5 wow fadeInLeft animated"  style="width: 25%; z-index: 3; visibility: visible; animation-duration: 1500ms; animation-delay: 0ms; animation-name: fadeInLeft;" data-wow-duration="1500ms" data-wow-delay="0ms">-->
        <!--    <div class="py-4 px-3 ps-lg-5" style="background: var(--thm-primary);">-->
        <!--        <h3 class="text-white ">Careers</h3>-->
        <!--    </div>-->



        <!--<ul class="mx-3 mx-lg-5 widget__links-lis list-unstyled py-5">-->
        <!--    <li class="mb-3">-->
        <!--        <h5 class="">-->
        <!--            <a class="border-bottom pb-1 link hover-primary" type="button" data-bs-toggle="collapse" data-bs-target="#local" aria-expanded="false" aria-controls="local" href="#"><img src="{{ asset('images/cross.png') }}" > Local</a>-->
        <!--        </h5>-->
        <!--        <div class="collapse" id="local">-->
        <!--          <div class="card card-body bg-transparent border-0">-->
        <!--            <ul class="widget__links-lis list-unstyled"> -->
        <!--                @if (!count($careers_local))
    -->
        <!--                <li class="mb-3">-->
        <!--                    <h6>-->
        <!--                        <a class="border-bottom hover-primary pb-1 modal-btn">-->
        <!--                            No available careers for local-->
        <!--                        </a>-->
        <!--                    </h6>-->
        <!--                </li>-->
        <!--
    @endif-->
        <!--                @foreach ($careers as $career)
    -->
        <!--                @if ($career->type == 'Local')
    -->
        <!--                    <li class="mb-3">-->
        <!--                        <h6>-->
        <!--                            <a class="border-bottom hover-primary pb-1 modal-btn" role="button" data-bs-toggle="modal" data-bs-target="#modal" href="#" data-content='{!! $career->content !!}'>-->
        <!--                                <img src="{{ asset('images/square.png') }}" > {{ $career->title }}-->
        <!--                            </a>-->
        <!--                        </h6>-->
        <!--                    </li>-->
        <!--
    @endif-->
        <!--
    @endforeach-->
        <!--            </ul>-->
        <!--          </div>-->
        <!--        </div>-->
        <!--    </li>-->
        <!--    <li class="mb-3">-->
        <!--        <h5 class="">-->
        <!--            <a class="border-bottom pb-1 link hover-primary" type="button" data-bs-toggle="collapse" data-bs-target="#international" aria-expanded="false" aria-controls="international" href="#"><img src="{{ asset('images/cross.png') }}" > International</a>-->
        <!--        </h5>-->
        <!--        <div class="collapse" id="international">-->
        <!--          <div class="card card-body bg-transparent border-0">-->
        <!--            <ul class="widget__links-lis list-unstyled"> -->
        <!--                @foreach ($careers as $career)
    -->
        <!--                @if ($career->type == 'International')
    -->
        <!--                    <li class="mb-3">-->
        <!--                        <h6>-->
        <!--                            <a class="border-bottom hover-primary pb-1 modal-btn" role="button" data-bs-toggle="modal" data-bs-target="#modal" href="#" data-content='{!! $career->content !!}'>-->
        <!--                                <img src="{{ asset('images/square.png') }}" > {{ $career->title }}-->
        <!--                            </a>-->
        <!--                        </h6>-->
        <!--                    </li>-->
        <!--
    @endif-->
        <!--
    @endforeach-->
        <!--            </ul>-->
        <!--          </div>-->
        <!--        </div>-->
        <!--    </li>-->
        <!--</ul>-->
        <!--</div>-->

        <!--Page Header Start-->
        <section class="page-header"
            style="background-position:center; background-size: cover; background-image: url({{ asset('/images/backgrounds/careers-banner.jpg') }});">

            <div class="container">
                <div class="offset-md-3 page-header__inner">
                    <!--<h2 class="text-uppercase text-website-secondary">Careers</h2>-->
                </div>

            </div>
        </section>
        <!--Page Header End-->
        <!--Contact Page Start-->
        <section class="my-5">
            <div class="container">
                <div class="pt-5">
                    <div class="row mb-5">
                        <div class="col offset-md-3 mb-5" style="color: #000000;">
                            <h3>Join Us and Be Part of Something Great</h3> <br>
                            <p>At Quanta Philippines ROHQ, we connect local talent to world-class projects in energy, infrastructure, and technology.
                            <br>
                            We’ are a team that values collaboration, innovation, and excellence — where every individual’s contribution makes a global impact.
                            <br>
                            If you’re ready to grow your career with a company that invests in people and their potential, explore our current opportunities below or send your CV directly to our team.</p>
                            <b>
                                <p class="mb-0">People and Culture</p>
                            </b>
                            <!--<p><a href="mailto:ccudal@quantaservices.com"></a> ccudal@quantaservices.com / <a href="mailto:mdimailig@quantaservices.com"></a> mdimailig@quantaservices.com </p>-->

                            <p>
    <a href="mailto:QSP_Careers@Quantaservices.com" class="email-link">QSP_Careers@Quantaservices.com</a>
</p>

<style>
    .email-link {
        color: #000;           /* text color black */
        text-decoration: underline; /* underline */
        transition: color 0.3s;
    }

    .email-link:hover {
        color: #007bff;        /* changes color on hover */
        text-decoration: none;  /* remove underline on hover */
        cursor: pointer;
    }
</style>

                            <p class="mb-0">Direct Line</p>
                            <p><a href="tel:+63286619398">(+632) 8635 6692 Loc. 104 </a> </p>
                            <div class="section-title">
                                <span class="section-title__tagline">Careers Local</span>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-striped ">
                                    <thead>
                                        <tr class="bg-danger text-white">
                                            <th width="50%">Job Description</th>
                                            <th width="25%">Department</th>
                                            <th width="25%">Location</th>
                                            <th width="25%">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-black">
                                        @if (count($careers_local) == 0)
                                            <tr>
                                                <td colspan="4">No available careers for local</td>
                                            </tr>
                                        @endif
                                        @foreach ($careers_local as $career)
                                            <tr>
                                                <td scope="row">
                                                    <a class="pb-1 modal-btn hover-primary" role="button"
                                                        data-bs-toggle="modal" data-bs-target="#modal" href="#"
                                                        data-content='{!! $career->content !!}'>
                                                        {{ $career->title }}
                                                    </a>
                                                </td>
                                                <td>{{ $career->department }}</td>
                                                <td>{{ $career->location }}</td>
                                                <td>
                                                    <button class="active-subnav text-nowrap apply-btn"
                                                        data-bs-toggle="modal" data-bs-target="#applyModal"
                                                        data-career-id="{{ $career->id }}"
                                                        data-position-name="{{ $career->title }}">
                                                        Apply Now
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>



                                </table>
                            </div>
                        </div>
                    </div>
                    <!--<div class="row">-->
                    <!--    <div class="col offset-md-3 mb-5">-->
                    <!--        <div class="section-title">-->
                    <!--            <span class="section-title__tagline">Careers International</span>-->
                    <!--        </div>-->
                    <!--        <div class="table-responsive">-->
                    <!--            <table class="table table-striped ">-->
                    <!--                <thead>-->
                    <!--                    <tr class="bg-danger text-white">-->
                    <!--                        <th width="50%">Title</th>-->
                    <!--                        <th width="25%">Department</th>-->
                    <!--                        <th width="25%">Location</th>-->
                    <!--                    </tr>-->
                    <!--                </thead>-->
                    <!--                <tbody class="text-black">-->
                    <!--                    @if (count($careers_international) == 0)
    -->
                    <!--                        <tr>-->
                    <!--                            <td colspan="3">No available careers for international</td>-->
                    <!--                        </tr>-->
                    <!--
    @endif-->
                    <!--                    @foreach ($careers_international as $career)
    -->
                    <!--                        <tr>-->
                    <!--                            <td scope="row">-->
                    <!--                                <a class="pb-1 modal-btn hover-primary" role="button" data-bs-toggle="modal" data-bs-target="#modal" href="#" -->
                    <!--                                data-content='{!! $career->content !!}'-->
                    <!--                                > {{ $career->title }}</a>-->
                    <!--                            </td>-->
                    <!--                            <td>{{ $career->department }}</td>-->
                    <!--                            <td>{{ $career->location }}</td>-->
                    <!--                        </tr>-->
                    <!--
    @endforeach-->
                    <!--                </tbody>-->
                    <!--            </table>-->
                    <!--        </div>-->
                    <!--    </div>-->
                    <!--</div>-->

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

    @if (session('success'))
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                Swal.fire({
                    icon: 'success',
                    title: '{{ session('success') }}',
                    text: '{{ session('success2') }}',
                    timer: 5000,
                    showConfirmButton: false
                });
            });
        </script>
    @endif



    <!-- Apply Now Modal (Placed Outside the Loop) -->
    <div class="modal fade" id="applyModal" tabindex="-1" aria-labelledby="applyModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="applyModalLabel">Apply for</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <form method="post" action="{{ route('store.applicants') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="career_id" id="career_id">

                        <div hidden class="mb-3">
                            <label for="display_career_id" class="form-label">Career ID</label>
                            <input type="text" class="form-control" id="display_career_id" disabled>
                        </div>

                        <div class="mb-3">
                            <label for="name" class="form-label">Your Name</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="contact_number" class="form-label">Your Contact Number</label>
                            <input type="text" class="form-control" id="contact_number" name="contact_number"
                                required>
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">Your Email</label>
                            <input type="email" class="form-control" id="email" name="email" required>
                        </div>
                        <!--<div class="mb-3">-->
                        <!--    <label for="address" class="form-label">Your Address</label>-->
                        <!--    <input type="text" class="form-control" id="address" name="address" required>-->
                        <!--</div>-->
                        <div class="mb-3">
                            <label for="resume" class="form-label">Upload Resume</label>
                            <input type="file" class="form-control" id="resume" name="resume"
                                accept=".doc,.docx,.pdf" required>
                            <small class="form-text text-muted">
                                <span style="color:red !important;">
                                    Allowed file types: .doc, .docx, .pdf — Max size: 2 MB
                                </span>
                            </small>
                        </div>

                        <button type="submit" class="btn active-subnav">Submit Application</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        document.querySelectorAll('.apply-btn').forEach(button => {
            button.addEventListener('click', function() {
                const careerId = this.getAttribute('data-career-id');
                const positionName = this.getAttribute('data-position-name');

                // Set hidden input values
                document.getElementById('career_id').value = careerId;
                document.getElementById('display_career_id').value = careerId;

                // Update modal title dynamically
                const modalTitle = document.getElementById('applyModalLabel');
                modalTitle.textContent = `Apply for ${positionName}`;
            });
        });
    </script>

    <div class="modal fade" id="modal" tabindex="-1" aria-labelledby="modal" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content rounded-0">
                <div class="modal-header border-0">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="content">

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $('.modal-btn').click(function() {
            // alert()
            $("#content").html($(this).data("content"))
        });
    </script>
@endsection