@extends('frontend.layouts.app')

@section('title')
Careers | Brokenshire Medical Center
@endsection

@section('seo')
<style>
    .blank-banner {
        background: url('{{url("/images/banners/careers.jpg")}}') !important;
    }
</style>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Careers | Brokenshire Medical Center" />
<meta property="og:url" content="{{ url('/news-events') }}" />
<meta property="og:site_name" content="Careers | Brokenshire Medical Center"/>
<meta property="og:image" content="{{ asset('images/icons/meta-thumbnail.jpg') }}" />
<meta property="og:thumbnail" content="{{ asset('images/icons/meta-thumbnail.jpg') }}" />
<meta property="og:icon" content="{{ asset('images/icons/android-chrome-192x192.png') }}" />
<link rel="icon" href="{{ asset('images/icons/android-chrome-192x192.png') }}">
<meta property="og:description" content="Brokenshire Medical Center offers exceptional healthcare services in Davao City. We are committed to compassionate care, affordability, and excellence. Find a doctor, schedule an appointment, or learn more about our services." />
<meta property="og:keywords" content="Davao City hospital, Philippines healthcare, Quality medical care, Affordable healthcare, Compassionate care, Medical specialties (Urinalysis, Fecalysis, Ova & Parasites, Amoeba, Complete Blood Count, Red Blood Cells, White Blood Cells, Platelet Count, Hemoglobin, Hemetocrit), Appointments, Patient portal, Medical records">
@endsection

@section('content')
    <div class="container-fluid bg-dark blank-banner">
        <div class="container text-white">
            <div>
                <h3 class="fw-bold mb-2">Careers</h3>
            </div>
        </div>
    </div>

    <div class="container-fluid bg-light">
        <div class="container py-5">
            <div class="service-label mb-5">
                <div class="bg-white rounded shadow-sm px-4 py-5">
                    <h2 class="green fw-bold mb-5">Join Our Team</h2>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="row gy-3">
                                <div class="col-lg-8">
                                    <input type="text" class="form-control form-lg border-green rounded-1 py-2"
                                        placeholder="Type your serach">
                                </div>
                                <div class="col-lg">
                                    <button class="btn btn-quote rounded-1 w-100 py-2 hover-green-opacity-80">SEARCH</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-red rounded pt-1"></div>
            </div>

            <div class="row g-5">
                <div class="col-lg-8">
                    <ul class="nav nav-pills border-bottom mb-3" id="pills-tab" role="tablist">
                        <li class="page-item" role="presentation">
                            <a class="pill-link pb-3 pe-5 active text-decoration-none fw-bold fs-5" id="all-positions-tab"
                                data-bs-toggle="pill" data-bs-target="#all-positions" type="button" role="tab"
                                aria-controls="all-positions" aria-selected="true">All Positions</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="pill-link pb-3 pe-5 text-decoration-none fw-bold fs-5" id="doctors-recruitment-tab"
                                data-bs-toggle="pill" data-bs-target="#doctors-recruitment" type="button" role="tab"
                                aria-controls="doctors-recruitment" aria-selected="false">Doctors Recruitment</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="all-positions" role="tabpanel"
                            aria-labelledby="all-positions-tab" tabindex="0">
                            <div class="row g-4">

                                @foreach ($careers as $career)
                                <div class="col-lg-6">
                                    <a role="button" data-bs-toggle="modal" data-bs-target="#showCareer-{{$career->id}}"
                                        class="text-black text-decoration-none">
                                        <div class="rounded-1 bg-white p-3 hover-item shadow-sm">
                                            <div class="row gy-3">
                                                <div class="col-lg-4 d-flex">
                                                    <div
                                                        class="border-gold d-flex text-center rounded p-2 justify-content-sm-center justify-content-start">
                                                        <img src="{{ asset('images/logo-small.png') }}"
                                                            class="img-fluid align-self-center" alt="">
                                                    </div>
                                                </div>
                                                <div class="col-lg">
                                                    <h5 class="fw-bold">{{$career->position}}</h5>

                                                    <div>
                                                        <i class="fa-solid fa-location-dot green"></i> &nbsp;
                                                        <span>{{$career->assign}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                @endforeach   
                
                            </div>
                        </div>
                        <div class="tab-pane fade" id="doctors-recruitment" role="tabpanel"
                            aria-labelledby="doctors-recruitment-tab" tabindex="0">
                            <div class="row g-4">

                                @foreach ($doctors as $doctor)
                                <div class="col-lg-6">
                                    <a role="button" data-bs-toggle="modal" data-bs-target="#showCareer-{{$doctor->id}}"
                                        class="text-black text-decoration-none">
                                        <div class="rounded-1 bg-white p-3 hover-item shadow-sm">
                                            <div class="row gy-3">
                                                <div class="col-lg-4 d-flex">
                                                    <div
                                                        class="border-gold d-flex text-center rounded p-2 justify-content-sm-center justify-content-start">
                                                        <img src="{{ asset('images/logo-small.png') }}"
                                                            class="img-fluid align-self-center" alt="">
                                                    </div>
                                                </div>
                                                <div class="col-lg">
                                                    <h5 class="fw-bold">{{$doctor->position}}</h5>

                                                    <div>
                                                        <i class="fa-solid fa-location-dot green"></i> &nbsp;
                                                        <span>{{$doctor->assign}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                @endforeach   

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg">
                    <div class="mb-4">
                        @include('frontend.layouts.login-portal-sidebar')
                    </div>

                    <div class="rounded bg-white py-4 px-3 shadow-sm">
                        <h4 class="fw-bold mb-3">Doctors Timetable</h4>

                        <div class="vstack gap-1 mb-3">
                            <div class="d-flex gap-2 align-items-center">
                                <i class="fa-solid fa-circle pt-1" style="font-size: 3px"></i>
                                <span>Seen when your favorite doctor is in.</span>
                            </div>
                            <div class="d-flex gap-2 align-items-center">
                                <i class="fa-solid fa-circle pt-1" style="font-size: 3px"></i>
                                <span>Choose a convinient appointment time.</span>
                            </div>
                            <div class="d-flex gap-2 align-items-center">
                                <i class="fa-solid fa-circle pt-1" style="font-size: 3px"></i>
                                <span>Schedule your visit with ease.</span>
                            </div>
                        </div>

                        <a href="" class="btn rounded shadow time-hover w-100 text-center">VIEW TIMETABLE</a>
                    </div>
                    <div class="bg-red rounded pt-1"></div>
                </div>
            </div>

            @foreach ($careers as $career)
            <div class="modal fade" id="showCareer-{{$career->id}}" tabindex="-1" aria-labelledby="showCareer-{{$career->id}}Label"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
                    <div class="modal-content">
                        <div class="modal-header border-bottom-0 px-5 py-4">
                            <img src="{{ asset('images/logo-modal.png') }}" class="img-fluid" alt="">
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body px-5">
                            <div class="border-top mb-3"></div>
                            <div class="row gy-3">
                                <div class="col-lg-9">
                                    <h5 class="fw-bold mb-4">{{$career->position}}</h5>

                                    <div class="vstack gap-1 mb-4">
                                        <div class="d-flex align-items-center gap-2">
                                            <i class="fa-solid fa-location-dot green text-center" style="width: 15px;"></i>
                                            <span>{{$career->assign}}</span>
                                        </div>
                                        <div class="d-flex align-items-center gap-2">
                                            <i class="fa-solid fa-hourglass-start green text-center" style="width: 15px;"></i>
                                            <span>{{$career->type}}</span>
                                        </div>
                                        <div class="d-flex align-items-center gap-2">
                                            <i class="fa-solid fa-wallet green text-center" style="width: 15px;"></i>
                                            <span><b>{{$career->salary}}</b> / month</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg text-end">
                                    <a href="mailto:boreshire@gmail.com" class="btn btn-quote w-100 py-2 rounded-1">APPLY
                                        NOW</a>
                                </div>
                            </div>

                            <h6 class="fw-bold">Job Description</h6>

                            <p class="mb-5">
                                {{$career->job_description}}
                            </p>

                            <div class="row g-4">
                                <div class="col-lg-4">
                                    <div class="mb-4">
                                        <h6 class="fw-bold">Job Reponsibilities</h6>

                                        <div class="flex-column gap-2">
                                            @foreach (json_decode($career->job_responsibilities) as $responsibility)
                                            <div class="d-flex align-items-center gap-3">
                                                <i class="fa-regular fa-circle-dot" style="width: 10px;"></i>
                                                <span>{{$responsibility}}</span>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>

                                    <div>
                                        <h6 class="fw-bold">Requirements</h6>

                                        <div class="flex-column gap-2">
                                            @foreach (json_decode($career->requirements) as $requirement)
                                            <div class="d-flex align-items-center gap-3">
                                                <i class="fa fa-check-square" style="width: 10px;"></i>
                                                <span>{{$requirement}}</span>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg">
                                    <div>
                                        <h6 class="fw-bold">Additional Information</h6>

                                        <div class="vstack gap-2">
                                            <div class="d-flex align-items-center gap-3">
                                                <i class="fa-solid fa-chart-column green text-center" style="width: 10px;"></i>
                                                <span>{{json_decode($career->additional_information)[0]}}</span>
                                            </div>
                                            <div class="d-flex align-items-center gap-3">
                                                <i class="fa-solid fa-briefcase green text-center" style="width: 10px;"></i>
                                                <span>{{json_decode($career->additional_information)[1]}}</span>
                                            </div>
                                            <div class="d-flex align-items-center gap-3">
                                                <i class="fa-solid fa-award green text-center" style="width: 10px;"></i>
                                                <span>{{json_decode($career->additional_information)[2]}}</span>
                                            </div>
                                            <div class="d-flex align-items-center gap-3">
                                                <i class="fa-solid fa-clipboard green text-center" style="width: 10px;"></i>
                                                <span>{{json_decode($career->additional_information)[3]}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer border-top-0">
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
@endsection