@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')->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 our awesome TEAM!</h3> <br>
                        <p>Interested candidates may send their resumes / curriculum vitae to the following:</p>
                        <b>
                            <p class="mb-0">Human Resource</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:inquire@quantaservices.com."></a>inquire@quantaservices.com </p>
                        <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%">Title</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}}">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 Job</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>
                    </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');
            document.getElementById('career_id').value = careerId;
            document.getElementById('display_career_id').value = careerId; // Show career ID in modal
        });
    });
</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