@extends('layouts/blankLayout')

@section('title', 'EGC Job Application')

@section('vendor-style')
@vite([
'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
'resources/assets/vendor/libs/select2/select2.scss',
'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.scss',
'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.scss',
'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
'resources/assets/vendor/libs/dropzone/dropzone.scss',
'resources/assets/vendor/libs/tagify/tagify.scss',
])
@endsection

@section('vendor-script')
@vite([
'resources/assets/vendor/libs/select2/select2.js',
'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js',
'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js',
'resources/assets/vendor/libs/flatpickr/flatpickr.js',
'resources/assets/vendor/libs/dropzone/dropzone.js',
])
@endsection

@section('page-script')
@vite(['resources/assets/js/forms_date_time_pickers.js'])
@endsection
<style>
    /* Custom Styles */
    body {
        font-family: 'Roboto', sans-serif;
        background-color: #f5f5f5;
    }

    

    /* Desktop Header */
    .app-header #desktop_device {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2rem;
    }

    .app-header #mobile_device {
        display: none;
    }

    .app-header h1 {
        font-size: 2.8rem;
        font-weight: 600;
        color: #000000ff;
    }
/* 
    .app-header p {
        font-size: 1.2rem;
        color: #3a3a3aff;
        opacity: 0.8;
    } */

    .app-header #desktop_device .logo-wrapper img {
        max-width: 150px; /* Desktop logo size */
        border-radius: 5px;
    }

    /* Mobile Header */
  

    .app-header #mobile_device {
        display: block;
        text-align: center;
    }

    .desktop{

    }

    .app-header .logo-wrapper img {
        max-width: 80px; /* Reduced logo size for mobile */
    }

    /* .form-select {
        border-radius: 10px;
        padding: 1rem;
    } */

    .form-row {
        margin-bottom: 1.5rem;
    }

    .text-center {
        margin-top: 2rem;
    }
    .app-header .header-content {
        flex-direction: column;
    }

    .desktop main{
        padding:0 3rem;
    }

    #job_description {
        font-size: 0.9rem !important;
        color: #555 !important;
        line-height: 1.5 !important;
    }

    #job_description h1,h2,h3,h4,h5,{
        font-size: 0.9rem !important;
        margin-bottom:4px !important;
    }
    #job_description h6{
        margin-bottom:4px !important;
    }

    #job_description strong,p,li,.see-more{
        font-size: 0.9rem !important;
        margin-bottom:4px !important;
    }

    .see-more {
        cursor: pointer;
        font-size: 1rem;
        font-weight: 400;
    }

    .see-more:hover {
        text-decoration: underline;
    }

    select, option {
        font-size: 1rem !important;
        color: #333 !important;
        font-weight: lighter !important;
    }

    .select2-container .select2-selection--single {
        font-size: 1rem !important;
        color: #333 !important;
        font-weight: lighter !important;
    }

    /* Responsive Design */
    @media (max-width: 767px) {

        .app-header #desktop_device {
            display: flex;
            justify-content: center;
            align-items: start;
            gap: 1rem;
        }

         #job_description {
            font-size: 0.9rem !important;
            color: #555 !important;
            line-height: 1.5 !important;
        }

        #job_description h1,h2,h3,h4,h5,{
            font-size: 0.8rem !important;
            margin-bottom:4px !important;
        }
        #job_description h6{
            margin-bottom:4px !important;
        }

        #job_description strong,p,li,.see-more{
            font-size: 0.8rem !important;
            margin-bottom:4px !important;
        }

        .apply-now{
            font-size: 0.8rem !important;
        }

        select, option {
            font-size: 0.9rem !important;
            color: #333 !important;
            font-weight: lighter !important;
        }

        .select2-container .select2-selection--single {
            font-size: 0.9rem !important;
            color: #333 !important;
            font-weight: lighter !important;
        }

        .see-more {
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 400;
        }

         .app-header{
             padding: 1.5rem;
         }
        .desktop main{
            padding:0 1.5rem;
        }
      
        /* #submitBtn {
            padding: 0.8rem 2rem;
            font-size: 1rem;
        } */
    }

    @media (min-width: 768px) {
        .app-header #desktop_device {
            display: flex;
            justify-content: center;
            align-items: start;
            gap: 2rem;
        }

        .desktop{
            width:60%;
        }

        .app-header #mobile_device {
            display: none;
        }
        

        .app-header {
            padding: 3rem 3rem 1rem 3rem;
        }
        
    }

 /* Container for the image */
.image-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

/* Image animation */
.img-fluid {
    width: 100%;
    height: auto;
    clip-path: inset(0 100% 0 0); /* Start hidden */
    animation: drawImage 2s linear forwards; /* 3s animation + 1s pause */
}

/* Reveal animation with 1s pause */
@keyframes drawImage {
    0% {
        clip-path: inset(0 100% 0 0); /* hidden */
    }
    75% {
        clip-path: inset(0 0 0 0); /* fully revealed (at 3s) */
    }
    100% {
        clip-path: inset(0 0 0 0); /* hold for 1s pause */
    }
}

.resume-dropzone {
    border: 2px dashed #ab2b22;
    border-radius: 10px;
    padding: 5px 15px;
    text-align: center;
    cursor: pointer;
    background: #fdf6f2ff;
    transition: all 0.3s ease;
}

.resume-dropzone:hover {
    background: #fdf6f2ff;
    border-color: #ab2b22;
}

.resume-dropzone.dragover {
    background: #fdf6f2ff;
    border-color: #ab2b22;
}

.file-name {
    /* margin-top: 15px; */
    padding: 5px;
    background: #ea7e7421;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #ab2b22;
}



</style>

@section('content')
<div class="m-4 w-full d-flex justify-content-center">
    <div class="card p-4 desktop">
        <!-- Header for Desktop -->
        <div class="app-header">
                <div class="header-content" id="desktop_device">
                    <div class="logo-wrapper">
                        <div class="image-container">
                            <img src="{{ asset('assets/common/logo_full.png') }}" alt="Company Logo" class="img-fluid">
                        </div>
                    </div>
                    <div class="text-start">
                        <h5 class="mb-2">We're Hiring | {{$jobRequest->job_role_name ?? ''}}</h5>
                        <h6 class="apply-now" style="color:#3a3a3aff !important;opacity: 0.8;line-height: 1.5 !important;">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!</h6>
                        <div>
                            <div id="job_description" class="mb-1" style="font-size: 0.9rem; color: #555; line-height: 1.5; word-wrap: break-word;">
                                {!! Str::limit($jobRequest->job_description, 200) !!} 
                                <span class="see-more text-primary" onclick="toggleDescription()">See More</span>
                            </div>
                        </div>
                    </div>
                    
                </div>
        </div>
        <!-- Centered Form Container -->
        <main class="d-flex w-full" >
            <div class="col-12">
                <!-- Questions Container -->
                <form method="POST" enctype="multipart/form-data" id="jobApplyForm">
                    @csrf
                    <div class="form-row">
                        <!-- Full Name -->
                        <div class="col-12">
                            <label for="fullName" class="form-label">Full Name<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="fullName" name="fullName" placeholder="Enter Your Full Name" required>
                            <div class="text-danger" id="fullName_err"></div>
                        </div>
                    </div>
                    <div class="form-row">
                        <!-- Gender -->
                        <div class="col-12">
                            <label for="gender" class="form-label">Gender<span class="text-danger">*</span></label>
                            <select id="gender" name="gender" class="select3 form-select required-field">
                                <option value="">Select Gender</option>
                                <option value="1" >Male</option>
                                <option value="2" >Female</option>
                                <option value="3" >Others</option>
                            </select>
                            <div class="text-danger" id="gender_err"></div>
                        </div>
                    </div>

                    <div class="form-row">
                        <!-- Mobile Number -->
                        <div class="col-12">
                            <label for="mobile" class="form-label">Mobile Number<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Enter Your Mobile Number" required>
                            <div class="text-danger" id="email_err"></div>
                        </div>
                    </div>

                    <div class="form-row">
                        <!-- Email Address -->
                        <div class="col-12">
                            <label for="email" class="form-label">Email Address<span class="text-danger">*</span></label>
                            <input type="email" class="form-control" id="email" name="email" placeholder="Enter Your Email Address" required>
                            <div class="text-danger" id="email_err"></div>
                        </div>
                    </div>

                    <div class="form-row">
                        <!-- Experience -->
                        <div class="col-12">
                            <label for="experience" class="form-label">Experience<span class="text-danger">*</span></label>
                            <select id="experience" name="experience" class="select3 form-select required-field">
                                <option value="">Select Experience</option>
                                <option value="1">Fresher</option>
                                <option value="2">Experienced</option>
                            </select>
                            <div class="text-danger" id="experience_err"></div>
                        </div>
                    </div>

                    <div class="form-row">
                        <!-- Qualification -->
                        <div class="col-12">
                            <label for="qualification" class="form-label">Qualification<span class="text-danger">*</span></label>
                            <select id="qualification" name="qualification" class="select3 form-select required-field">
                                <option value="">Select Qualification</option>
                                <option value="1">UG</option>
                                <option value="2">PG</option>
                            </select>
                            <div class="text-danger" id="qualification_err"></div>
                        </div>
                    </div>

                    <div class="form-row">
                        <!-- major -->
                        <div class="col-12">
                            <label for="major" class="form-label">Major<span class="text-danger">*</span></label>
                            <select id="major" name="major" class="select3 form-select required-field">
                                <option value="">Select Major</option>
                            </select>
                            <div class="text-danger" id="major_err"></div>
                        </div>
                    </div>

                    <div class="form-row">
                        <!-- Source of Vacancy -->
                        <div class="col-12">
                            <label for="source" class="form-label">How did you come across this vacancy?</label>
                            <select class="form-select select3" id="source" name="source" required>
                                <option value="" selected>Select Source</option>
                            </select>
                            <div class="text-danger" id="source_err"></div>
                        </div>
                    </div>

                    <div class="form-row">
                        <!-- Marital Status -->
                        <div class="col-12">
                            <label for="maritalStatus " class="form-label">Marital Status<span class="text-danger">*</span></label>
                            <select class="form-select select3" id="maritalStatus" name="maritalStatus" required>
                                <option value="" selected>Select Marital Status</option>
                                <option value="1">Single</option>
                                <option value="2">Married</option>
                            </select>
                            <div class="text-danger" id="email_err"></div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="col-12">
                            <label class="form-label">
                                Upload Resume <span class="text-danger">*</span>
                            </label>

                            <div id="resume-dropzone" class="resume-dropzone">
                                <input type="file"
                                    id="resume"
                                    name="resume"
                                    accept=".pdf,.doc,.docx"
                                    hidden
                                    required>

                                <div class="dropzone-content">
                                    <span class="d-flex gap-1 align-item-center justify-content-center" id="browse-file-text">
                                        <i class="mdi mdi-upload fs-8 text-primary"></i>
                                        <p class="fw-semibold text-primary">Browse Resume</p>
                                    </span>
                                    
                                </div>

                                <div id="file-name" class="file-name d-none"></div>
                            </div>

                            <div class="text-danger" id="resume_err"></div>
                        </div>
                    </div>


                    <div class="form-row">
                        <!-- About Yourself -->
                        <div class="col-12">
                            <label for="about" class="form-label">Tell us about yourself</label>
                            <textarea class="form-control" id="about" name="about" rows="4" placeholder="Write about yourself..." required></textarea>
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <div class="text-center mt-4">
                        <button type="submit" class="btn btn-primary btn-md" id="submitBtn">Apply</button>
                    </div>
                </form>
            </div>
        </main>
    </div>
</div>
<script>
    function toggleDescription() {
        var jobDescription = document.getElementById('job_description');
        if (jobDescription.innerHTML.includes('See More')) {
            jobDescription.innerHTML = "{!! $jobRequest->job_description !!} <span class='see-more text-primary' onclick='toggleDescription()'>See Less</span>";
        } else {
            jobDescription.innerHTML = "{!! Str::limit($jobRequest->job_description, 200) !!} <span class='see-more text-primary' onclick='toggleDescription()'>See More</span>";
        }
    }
</script>

<script>
    const dropzone = document.getElementById('resume-dropzone');
    const fileInput = document.getElementById('resume');
    const fileName = document.getElementById('file-name');
    const browseFileName = document.getElementById('browse-file-text');

    // Click to open file browser
    dropzone.addEventListener('click', () => {
        fileInput.click();
    });

    // Show selected file
    fileInput.addEventListener('change', () => {
        if (fileInput.files.length > 0) {
            fileName.textContent = "Selected File: " + fileInput.files[0].name;
            fileName.classList.remove('d-none');
            browseFileName.classList.add('d-none');
        }
    });

    // Drag over
    dropzone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropzone.classList.add('dragover');
    });

    // Drag leave
    dropzone.addEventListener('dragleave', () => {
        dropzone.classList.remove('dragover');
    });

    // Drop file
    dropzone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropzone.classList.remove('dragover');

        if (e.dataTransfer.files.length > 0) {
            fileInput.files = e.dataTransfer.files;
            fileName.textContent = "Selected File: " + e.dataTransfer.files[0].name;
            fileName.classList.remove('d-none');
        }
    });
</script>


@endsection