@extends('frontend::layouts.app')
@section('title', $metaTags['metaTitle'])
@section('description', $metaTags['metaDescription'])
@section('keywords', $metaTags['metaKeywords'])
@section('other_meta_tags')
    {!! $metaTags['otherMetaTags'] !!}
@endsection
@section('content')
    <div id="pageWrapper" class="CarrerPage InnerPage">
        <!-- Cmn_Banner -->
        <section id="InnerBanner">
            <picture>
                <source media="(min-width: 468px)" srcset="{{ $pageBanner['image'] }}" />
                <img src="{{ $pageBanner['mobileImage'] }}" width="1920" height="480" alt="{{ $pageBanner['name'] }}"
                    loading="lazy" />
            </picture>
        </section>

        <!-- CarrerSec -->
        <section id="CarrerSec">
            <div class="container">
                <div class="CarrerListing">
                    <div class="HeadSec  wow animate__fadeInUp" data-wow-duration="1s">
                        <div class="tleWrap">
                            <h2 class="mTle">{{ $cms->title }}</h2>
                        </div>
                        <div class="txt">{!! $cms->description !!}</div>
                    </div>
                    @if ($careers->isNotEmpty())
                        <div class="accordion" id="Carrerlist">
                            @foreach ($careers as $career)
                                <div class="accordion-item wow animate__fadeInUp" data-wow-duration="1s">
                                    <h2 class="accordion-header">
                                        <div class="Carrerflx">
                                            <div class="lftDeBx">
                                                <div class="mainTtl">{{ $career->title }}</div>
                                                <div class="txt">{{ $career->short_description }}</div>
                                                <div class="dflxBx">
                                                    <div class="lfBx">
                                                        <div class="detBx">
                                                            <div class="icon">
                                                                <svg id="clock" xmlns="http://www.w3.org/2000/svg"
                                                                    width="17.491" height="17.491"
                                                                    viewBox="0 0 17.491 17.491">
                                                                    <g id="Group_22255" data-name="Group 22255"
                                                                        transform="translate(8.068 4.058)">
                                                                        <g id="Group_22254" data-name="Group 22254">
                                                                            <path id="Path_14398" data-name="Path 14398"
                                                                                d="M239.963,125.011l-2.439-1.829v-3.726a.677.677,0,1,0-1.355,0v4.065a.676.676,0,0,0,.271.542l2.71,2.032a.677.677,0,0,0,.813-1.084Z"
                                                                                transform="translate(-236.169 -118.779)"
                                                                                fill="rgba(1,1,1,0.6)" />
                                                                        </g>
                                                                    </g>
                                                                    <g id="Group_22257" data-name="Group 22257">
                                                                        <g id="Group_22256" data-name="Group 22256">
                                                                            <path id="Path_14399" data-name="Path 14399"
                                                                                d="M8.746,0a8.746,8.746,0,1,0,8.746,8.746A8.755,8.755,0,0,0,8.746,0Zm0,16.137a7.391,7.391,0,1,1,7.391-7.391A7.4,7.4,0,0,1,8.746,16.137Z"
                                                                                fill="rgba(1,1,1,0.6)" />
                                                                        </g>
                                                                    </g>
                                                                </svg>
                                                            </div>
                                                            <div class="txtBx">{{ $career->jobType->title }}</div>
                                                        </div>
                                                        <div class="detBx">
                                                            <div class="icon">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="16.153"
                                                                    height="21.864" viewBox="0 0 16.153 21.864">
                                                                    <g id="pin_1_" data-name="pin (1)"
                                                                        transform="translate(0)">
                                                                        <g id="Group_1319" data-name="Group 1319"
                                                                            transform="translate(0)">
                                                                            <g id="Group_1318" data-name="Group 1318"
                                                                                transform="translate(0)">
                                                                                <path id="Path_8310" data-name="Path 8310"
                                                                                    d="M56.157,0A8.086,8.086,0,0,0,48.08,8.077a9.318,9.318,0,0,0,.685,3.109,13.025,13.025,0,0,0,.934,1.746l5.538,8.391a1.053,1.053,0,0,0,1.841,0l5.538-8.391a12.971,12.971,0,0,0,.934-1.746,9.316,9.316,0,0,0,.685-3.109A8.086,8.086,0,0,0,56.157,0Zm6.516,10.817a11.934,11.934,0,0,1-.851,1.592L56.283,20.8c-.109.166-.144.166-.253,0l-5.538-8.391a11.94,11.94,0,0,1-.851-1.592,8.459,8.459,0,0,1-.611-2.74,7.126,7.126,0,1,1,14.253,0A8.465,8.465,0,0,1,62.673,10.817Z"
                                                                                    transform="translate(-48.08)"
                                                                                    fill="rgba(0,0,0,0.6)" />
                                                                                <path id="Path_8311" data-name="Path 8311"
                                                                                    d="M116.356,64.008a4.276,4.276,0,1,0,4.276,4.276A4.281,4.281,0,0,0,116.356,64.008Zm0,7.6a3.326,3.326,0,1,1,3.326-3.326A3.33,3.33,0,0,1,116.356,71.61Z"
                                                                                    transform="translate(-108.279 -60.207)"
                                                                                    fill="rgba(0,0,0,0.6)" />
                                                                            </g>
                                                                        </g>
                                                                    </g>
                                                                </svg>
                                                            </div>
                                                            <div class="txtBx">
                                                                {{ $career->city->name }},
                                                                {{ $career->state->name }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#carrer{{ $loop->iteration }}"
                                                aria-expanded="false" aria-controls="carrer{{ $loop->iteration }}"
                                                aria-label="View Details">
                                                <div class="accBtn v1">View Details</div>
                                                <div class="accBtn v2">Hide Details</div>
                                            </button>
                                        </div>
                                    </h2>
                                    <div id="carrer{{ $loop->iteration }}" class="accordion-collapse collapse"
                                        data-bs-parent="#Carrerlist">
                                        <div class="accordion-body">
                                            <div class="desBx">
                                                {!! $career->description !!}
                                                <button type="button" class="btn btn-primary applyBtn hoveranim"
                                                    data-bs-toggle="modal" data-bs-target="#Carrer-Modal"
                                                    data-id="{{ base64_encode($career->id) }}"
                                                    data-title="{{ $career->title }}"
                                                    data-experience="{{ $career->experience }}" aria-label="Apply Now">
                                                    <span class="txt">Apply Now</span>
                                                    <div class="icon">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="32"
                                                            height="16" viewBox="0 0 32 16">
                                                            <g id="arrow" transform="translate(-1238 -2406)">
                                                                <line id="Vector_4" data-name="Vector 4" x1="32"
                                                                    transform="translate(1238 2414)" fill="none"
                                                                    stroke="#fff" stroke-width="1" />
                                                                <g id="Group_52" data-name="Group 52">
                                                                    <path id="Ellipse_20" data-name="Ellipse 20"
                                                                        d="M1262,2406a8,8,0,0,0,8,8" fill="none"
                                                                        stroke="#fff" stroke-width="1" />
                                                                    <path id="Ellipse_21" data-name="Ellipse 21"
                                                                        d="M1270,2414a8,8,0,0,0-8,8" fill="none"
                                                                        stroke="#fff" stroke-width="1" />
                                                                </g>
                                                            </g>
                                                        </svg>
                                                    </div>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="submitForm" id="SubmitForm">
                            <div class="Form-Wrap">
                                <div class="Form-body">
                                    <div class="modheadSec">
                                        <div class="tleWrap">
                                            <h2 class="mTle">Join Our Team</h2>
                                            <p class="suble">We're not hiring right now, but we're always looking for
                                                talented individuals to join our team. Send your resume to and we'll notify
                                                you about future job opportunities.</p>
                                        </div>
                                    </div>
                                    <form class="FullForm" id="career-form" action="{{ route('career-submit') }}">
                                        @csrf
                                        @honeypot
                                        <input type="hidden" id="career_id" name="career_id">
                                        <div class="row">
                                            <div class="col-md-6 col-sm-12">
                                                <div class="form-group">
                                                    <label for="name" class="form-label">Name*</label>
                                                    <input type="text"
                                                        class="form-control @error('name') is-invalid @enderror"
                                                        placeholder="Enter your name" id="name" name="name">
                                                    <span class="error-block"></span>
                                                    @error('name')
                                                        <span class="error-block">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-12">
                                                <div class="form-group">
                                                    <label for="email" class="form-label">Email*</label>
                                                    <input type="email"
                                                        class="form-control @error('email') is-invalid @enderror"
                                                        placeholder="Enter your email" id="email" name="email"
                                                        value="{{ old('email') }}">
                                                    <span class="error-block"></span>
                                                    @error('email')
                                                        <span class="error-block">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-12">
                                                <div class="form-group">
                                                    <label for="phone_number" class="form-label">Phone Number*</label>
                                                    <input type="hidden" id="country_code" name="country_code">
                                                    <input type="tel" placeholder="Enter your number*"
                                                        class="form-control @error('phone_number') is-invalid @enderror phoneField"
                                                        name="phone_number" id="phone_number">
                                                    <span class="error-block"></span>
                                                    @error('phone_number')
                                                        <span class="error-block">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-12">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1" class="form-label">Upload
                                                        Resume*</label>
                                                    <div class="fileInpt">
                                                        <label for="resume" class="custom-file-upload">
                                                            Upload
                                                        </label>
                                                        <input id="resume" name="resume" type="file"
                                                            style="position: absolute;opacity: 0; visibility: hidden;"
                                                            accept="application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document">
                                                        <div class="rit">
                                                            <div class="icon">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="6.778"
                                                                    height="13.555" viewBox="0 0 6.778 13.555">
                                                                    <path id="path2"
                                                                        d="M12.389,14.587a2.421,2.421,0,0,1-2.421-2.421V4.42A1.451,1.451,0,0,1,11.42,2.968h0A1.451,1.451,0,0,1,12.873,4.42V11.2a.483.483,0,0,1-.483.483h0A.484.484,0,0,1,11.9,11.2V5.389a.484.484,0,0,0-.968,0V11.2a1.452,1.452,0,0,0,1.452,1.452h0A1.451,1.451,0,0,0,13.841,11.2V4.42A2.42,2.42,0,0,0,11.422,2h0A2.42,2.42,0,0,0,9,4.42v7.747a3.389,3.389,0,1,0,6.778,0V5.389a.484.484,0,0,0-.968,0v6.778a2.42,2.42,0,0,1-2.421,2.421Z"
                                                                        transform="translate(-9 -2)" fill="#fff"
                                                                        fill-rule="evenodd" />
                                                                </svg>
                                                            </div>
                                                            <div class="txt">Choose</div>
                                                        </div>
                                                    </div>
                                                    <span class="hint">Allowed file types: PDF, DOC, DOCX</span>
                                                    <span class="error-block"></span>
                                                    @error('resume')
                                                        <span class="error-block">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1" class="form-label ">Message</label>
                                                    <textarea name="message" id="message" class="form-control @error('message') is-invalid @enderror"></textarea>
                                                    <span class="error-block"></span>
                                                    @error('message')
                                                        <span class="error-block">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="BtnFlx">
                                                    <div class="btnSec">
                                                        <button type="submit" class="cmnBtnn hoveranim submitBtn"
                                                            aria-label="Submit Application">
                                                            <span>Submit Application</span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </section>
        @include('frontend::frontend.modals.career-form')
    </div>
    @push('js')
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput-jquery.min.js"></script>

        <script>
            $(document).ready(function() {
                $(document).on("click", ".applyBtn", function() {
                    $("#career_id").val($(this).data("id"));
                    $("#career_title").text($(this).data("title"));
                    $("#career_experience").text($(this).data("experience"));
                    $("#career-form .form-group .error-block").text('');
                    $("#career-form .is-invalid").removeClass('is-invalid');
                });

                var phoneInput = $("#phone_number");
                phoneInput.intlTelInput({
                    initialCountry: "in",
                    separateDialCode: true,
                });
                phoneInput.on("countrychange", function(e) {
                    var countryData = phoneInput.intlTelInput("getSelectedCountryData");
                    $("#country_code").val(countryData.dialCode);
                });
                // Set initial country code when the page loads
                var initialCountryData = phoneInput.intlTelInput("getSelectedCountryData");
                $("#country_code").val(initialCountryData.dialCode);

                new WOW().init();

                $('#Carrer-Modal').on('hidden.bs.modal', function() {
                    $("#career-form .form-group .error-block").text('');
                    $("#career-form .is-invalid").removeClass('is-invalid');
                });

                var validator = $("#career-form").validate({
                    rules: {
                        name: {
                            required: true,
                            maxlength: 100,
                            lettersOnly: true,
                            notHTML: true
                        },
                        phone_number: {
                            required: true,
                            intelPhoneNumbersOnly: true
                        },
                        email: {
                            required: true,
                            emailOnly: true
                        },
                        resume: {
                            required: true,
                            extension: "pdf|doc|docx"
                        }
                    },
                    messages: {
                        name: {
                            required: "The name field is required.",
                            maxlength: "The name field cannot exceed 100 characters.",
                            lettersOnly: "The name field must contain only letters.",
                            notHTML: "The name field cannot contain HTML."
                        },
                        phone_number: {
                            required: "The phone number field is required.",
                            intelPhoneNumbersOnly: "The phone number field must be a valid international phone number."
                        },
                        email: {
                            required: "The email field is required.",
                            emailOnly: "The email field must be a valid email address."
                        },
                        resume: {
                            required: "The resume field is required.",
                            extension: "Please upload a PDF, DOC, or DOCX file."
                        }
                    },
                    errorPlacement: function(error, element) {
                        $(element).closest('.form-group').find('.error-block').text(error.text());
                    },
                    success: function(label, element) {
                        $(element).closest('.form-group').find('.error-block').text('');
                        $(element).removeClass('is-invalid');
                    },
                    onchange: function(element) {
                        $(element).valid(); // Validate the changed element
                    },
                    onfocusout: function(element, event) {
                        if (element.tagName === "TEXTAREA" || (element.tagName === "INPUT" && element
                                .type !== "password")) {
                            element.value = $.trim(element.value);
                        }
                        if (!this.checkable(element) && (element.name in this.submitted || !this.optional(
                                element))) {
                            this.element(element);
                        }
                    },
                    submitHandler: function(form) {
                        var $submitBtn = $(form).find(':submit');
                        var originalBtnHtml = $submitBtn.html(); // Store the original button HTML

                        $submitBtn.prop("disabled", true).html(
                            '<i class="mdi mdi-rotate-right"></i> <span>Submitting...</span>');

                        var formData = new FormData(form);
                        $.ajax({
                            type: "POST",
                            url: $(form).attr('action'),
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function(response) {
                                if (response.success) {
                                    showToast('success',
                                        'Your application has been successfully submitted');
                                    $('#Carrer-Modal').fadeOut('slow', function() {
                                        $('#Carrer-Modal').modal('hide');
                                    });
                                    $('body').css('overflow', 'auto');
                                    $('.modal-backdrop').remove();
                                    $('#career-form')[0].reset();
                                    $('#resume').prev('label').text('Upload');
                                } else {
                                    showToast('error',
                                        'Oops! Something went wrong. Please try again.');
                                }
                            },
                            error: function(xhr) {
                                if (xhr.status === 422) {
                                    var errors = xhr.responseJSON.errors;
                                    $.each(errors, function(field, messages) {
                                        $('[name="' + field + '"]').closest(
                                                '.form-group').find('.error-block')
                                            .text(messages.join(', '));
                                    });
                                } else {
                                    console.error('Unexpected error occurred.');
                                }
                            },
                            complete: function() {
                                $submitBtn.prop('disabled', false).html(
                                    originalBtnHtml); // Restore the original button HTML
                            }
                        });
                    }
                });

                // Add dynamic validation for resume field on change
                $('#resume').on('change', function() {
                    var i = $(this).prev('label').clone();
                    var file = $('#resume')[0].files[0].name;
                    $(this).prev('label').text(file);

                    validator.settings.rules.resume = {
                        required: true,
                        extension: "pdf|doc|docx"
                    };
                    validator.settings.messages.resume = {
                        required: "The resume field is required.",
                        extension: "Please upload a PDF, DOC, or DOCX file."
                    };
                    validator.element('#resume'); // Re-validate the resume field
                });
            });
        </script>
    @endpush
@endsection