@extends('layouts/blankLayout')

@section('title', 'Apply Job - Welcome')

@section('vendor-style')
    @vite(['resources/assets/vendor/libs/dropzone/dropzone.scss'])
@endsection

@section('vendor-script')
    @vite(['resources/assets/vendor/libs/dropzone/dropzone.js'])
@endsection

@section('page-script')
    @vite('resources/assets/js/forms-file-upload.js')
@endsection

@section('content')

<style>
.content-wrapper {
    width: 100%;
    max-width: 210mm;
    /* margin: 0 auto; */
    box-sizing: border-box;
    /* min-height: 297mm;  */
    display: block;
    text-align: left;
}

.apply-btn {
    background: #AB2B22;
    color: #fff;
    border: none;
    padding: 10px 25px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}

.apply-btn:hover {
    background: rgba(255, 60, 0, 1);
    color: #fff;
}

/* Card styling */
.card {
    background: transparent;
    box-shadow: none;
}
.logo-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.header-card{
    position:absolute; 
    top:75%; 
    right:380px; 
    transform: translateY(-50%);
}


@media (min-width: 320px){
    .header-card{
        position: absolute;
        top:85%;
        right:110px
    }
}

@media (min-width: 380px){
    .header-card{
        position: absolute;
        top:85%;
        right:150px
    }
}

@media (min-width: 425px){
    .header-card{
        position: absolute;
        top:85%;
        right:180px
    }
}

@media (min-width: 768px){
    .header-card{
        position: absolute;
        top:85%;
        right:340px;
    }
}
</style>
<center>
<div class="content-wrapper bg-white" style="border-top-right-radius: 5px;border-top-left-radius: 5px;padding-bottom: 50px !important;">
    <div class="card bg-primary" style="padding:20px; position:relative; height:80px; overflow: visible;border-top-left-radius: 0px; border-top-right-radius:none;">
        <div style="" class="header-card">
            <div class="logo-circle bg-white border border-5 border-primary d-inline-flex align-items-center justify-content-center">
                <img src="{{ asset('assets/common/logo_small.png') }}"
                    width="60"
                    alt="EGC Logo">
            </div>
        </div>
    </div>
    <div class="content">
        <div style="margin-top:40px;padding: 10px 20px;margin-bottom: 10px;">
            <h4 style="margin-bottom:0.75rem;color: #000;">We're Hiring | Content Writer
                <span class="fs-6 text-dark d-block mt-4 mb-4">Apply now — We’re excited to see how your skills can make an impact. Join our team and become a valued part of our family!</span>
            </h4>
            <div style="display:flex; align-items:center; justify-content:start;gap:20px;flex-wrap:wrap;">
                <label style="margin-bottom: 10px;display:flex; align-items:center; justify-content:start;gap:2px;flex-wrap:wrap;">
                    <span class="py-2 bg-gray-300 rounded" style="padding-right: 0.45rem !important;padding-left: 0.5rem !important;">
                        <i class="mdi mdi-lightbulb-night-outline fs-4 text-black"></i>
                    </span>
                    <span style="margin-left:4px;">2-4 years</span>
                </label>
                <label style="margin-bottom: 10px;display:flex; align-items:center; justify-content:start;gap:2px;flex-wrap:wrap;">
                    <span class="py-2 bg-gray-300 rounded" style="padding-right: 0.5rem !important;padding-left: 0.5rem !important;">
                        <i class="mdi mdi-calendar-month-outline fs-4 text-black    "></i>
                    </span>
                    <span style="margin-left:4px;">31-Dec-2025</span>
                </label>
            </div>
        </div>
        <div style="margin:10px 20px; text-align: left;padding: 10px 20px;border-radius:10px;background: rgba(240, 240, 240, 0.54)">
            <h2 style="font-size: 18px; color: #333;">
                <i class="mdi mdi-account-outline fs-4 text-black"></i>
                Personal Information
            </h2>
            <div style="margin-bottom: 20px; text-align: left;padding: 0 20px;margin-top: 20px;">
                <div class="row">
                    <div class="col-lg-6 mb-2">
                        <label class="fw-semibold fs-6 text-back">First Name</label>
                        <input type="text" class="form-control" placeholder="Enter First Name"/>
                    </div>
                    <div class="col-lg-6 mb-2">
                        <label class="fw-semibold fs-6 text-back">Gender</label>
                        <select id="gender" name="gender" class="select3 form-select">
                            <option value="">Select Gender</option>
                            <option value="1" selected>Male</option>
                            <option value="2" >Female</option>
                            <option value="3">Others</option>
                        </select>
                    </div>
                    <div class="col-lg-6 mb-2">
                        <label class="fw-semibold fs-6 text-back">Mobile Number</label>
                        <input type="text" class="form-control" placeholder="Enter Mobile Number"/>
                    </div>
                    <div class="col-lg-6 mb-2">
                        <label class="fw-semibold fs-6 text-back">Email Id</label>
                        <input type="text" class="form-control" placeholder="Enter Email Id"/>
                    </div>
                    <div class="col-lg-6 mb-2">
                        <label class="fw-semibold fs-6 text-back">Martial Status</label>
                        <select id="martial_status" name="martial_status" class="select3 form-select">
                            <option value="">Select Martial Status</option>
                            <option value="1" selected>Married</option>
                            <option value="2" >Unmarried</option>
                            <option value="3" >Widow</option>
                            <option value="4" >Single Parent</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin:10px 20px; text-align: left;padding: 10px 20px;border-radius:10px;background: rgba(240, 240, 240, 0.54)">
            <h2 style="font-size: 18px; color: #333;">
                <i class="mdi mdi-briefcase-variant-outline fs-4 text-black"></i>
                Education & Qualification
            </h2>
            <div style="margin-bottom: 20px; text-align: left;padding: 0 20px;margin-top: 20px;">
                <div class="row">
                    <div class="col-lg-6 mb-2">
                        <label class="fw-semibold fs-6 text-back">Qualification</label>
                        <select id="qualif" name="qualif" class="select3 form-select">
                            <option value="">Select Qualification</option>
                            <option value="1" selected>UG</option>
                            <option value="2" >PG</option>
                        </select>
                    </div>
                    <div class="col-lg-6 mb-2">
                        <label class="fw-semibold fs-6 text-back">Major</label>
                        <input type="text" class="form-control" placeholder="Enter Major"/>
                    </div>
                    <div class="col-lg-6 mb-2">
                        <label class="fw-semibold fs-6 text-back">Fresher / Experience</label>
                        <select id="exper" name="exper" class="select3 form-select">
                            <option value="">Select Fresher / Experience</option>
                            <option value="1" selected>Fresher</option>
                            <option value="2" >Experience</option>
                        </select>
                    </div>
                    <div class="col-lg-6 mb-2">
                        <label class="fw-semibold fs-6 text-back">Experience</label>
                        <input type="text" class="form-control" placeholder="Enter Experience"/>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin:10px 20px; text-align: left;padding: 10px 20px;border-radius:10px;background: rgba(240, 240, 240, 0.54);">
            <h2 style="font-size: 18px; color: #333;">
                <i class="mdi mdi-tray-arrow-up fs-4 text-black"></i>
                Resume Upload
            </h2>
            <div style="margin-bottom: 20px; text-align: left;padding: 0 20px;margin-top: 20px;">
                <div class="row">
                    <div class="col-lg-12 mb-2">
                        <div class="dropzone needsclick dz-clickable" id="dropzone-multi_staff_0">
                            <div class="dz-message needsclick fs-6">
                                <div class="text-center text-black me-3">Drop files here or click
                                    to upload</div>
                            </div>
                            <div class="fallback">
                                <input type="file" name="attachment[]" multiple
                                    class="required-field" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin:10px 20px; text-align: left;padding: 10px 20px;border-radius:10px;background: rgba(240, 240, 240, 0.54);">
            <div style="margin-bottom: 20px; text-align: left;padding: 0 20px;margin-top: 20px;">
                <div class="row">
                    <div class="col-lg-12 mb-2">
                        <label class="fw-semibold fs-6 text-back">How do you know about us?</label>
                        <select id="source" name="source" class="select3 form-select">
                            <option value="">Select Source</option>
                            <option value="1" selected>Linkedin</option>
                            <option value="2" >Facebook</option>
                            <option value="3" >Website</option>
                        </select>
                    </div>
                    <div class="col-lg-12 mb-2">
                        <label class="fw-semibold fs-6 text-back">Tell us about yourself</label>
                        <textarea rows="3" class="form-control"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin: 20px;padding: 10px;text-align:center;">
            <a href="{{ url('/hr_recruitment/job_applied') }}" class="apply-btn" style="width: 300px; ">Submit Application</a>
        </div>
    </div>
</div>
</center>


<script>
    // var isEditMode = true;

// var existingSchedule = @json($schedule);
// var existingStages   = @json($stages);
// var existingQuestions= @json($questions);
// function saveSchedule() {
//     const url = isEditMode
//         ? '/interview-schedule/update'
//         : '/create-interview-schedule';

//     const payload = buildInterviewPayload();

//     if (isEditMode) {
//         payload.schedule_sno = existingSchedule.sno;
//     }

//     $.ajax({
//         url,
//         type: 'POST',
//         data: JSON.stringify(payload),
//         contentType: 'application/json',
//         headers: {
//             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
//         },
//         success(res) {
//             toastr.success(res.message || 'Saved successfully');
//         }
//     });
// }

// existingStages.forEach(stage => {
//     selectedTypes.add(String(stage.interview_category_id));

//     configs[stage.interview_category_id] = {
//         duration_value: stage.duration_value,
//         duration_unit: stage.duration_unit,
//         mode: stage.mode,
//         callConfirmation: stage.call_confirmation == 1,
//         imidiateNotify: stage.immediate_notify == 1
//     };

//     questions[stage.interview_category_id] = existingQuestions
//         .filter(q => q.interview_schedule_stage_id === stage.sno)
//         .map(q => q.interview_question_id);
// });
</script>

@endsection