<?php include 'header.php'; ?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Add Applicants</title>

    <style>
.ts-wrapper{
    width:100%;
    position:relative;
}

.ts-control{
    min-height:56px !important;
    height:56px !important;
    border:1px solid #d1d5db !important;
    border-radius:16px !important;
    padding:0 16px !important;
    background:#fff !important;
    box-shadow:none !important;
    display:flex !important;
    align-items:center !important;
    overflow:hidden !important;
}

.ts-control input{
    font-size:14px !important;
}

.ts-wrapper.focus .ts-control{
    border-color:#8b5cf6 !important;
    box-shadow:0 0 0 4px rgba(139,92,246,0.10) !important;
}

.ts-dropdown{
    margin-top:8px !important;
    border-radius:16px !important;
    border:1px solid #e5e7eb !important;
    overflow:hidden !important;
    background:#fff !important;
    box-shadow:0 10px 30px rgba(0,0,0,0.10) !important;
    z-index:9999 !important;
}

.ts-dropdown-content{
    max-height:220px !important;
    overflow-y:auto !important;
}

.ts-dropdown .option{
    padding:14px 16px !important;
    font-size:14px !important;
    cursor:pointer;
}

.ts-dropdown .active{
    background:#f3e8ff !important;
    color:#7c3aed !important;
}
        .fi{
            position:relative;
        }

        .fi input,
        .fi textarea{
            width:100%;
            height:56px;
            border:1px solid #d1d5db;
            border-radius:16px;
            padding:0 16px;
            outline:none;
            font-size:15px;
            background:#fff;
            transition:0.25s;
        }

        .fi input:focus,
        .fi textarea:focus{
            border-color:#8b5cf6;
            box-shadow:0 0 0 4px rgba(139,92,246,0.10);
        }

        .fi label{
            position:absolute;
            left:14px;
            top:50%;
            transform:translateY(-50%);
            background:#fff;
            padding:0 6px;
            font-size:14px;
            color:#6b7280;
            pointer-events:none;
            transition:0.2s;
            z-index:2;
        }

        .fi input:focus + label,
        .fi input:not(:placeholder-shown) + label{
            top:0;
            transform:translateY(-50%);
            font-size:11px;
            color:#8b5cf6;
        }

        .si{
            position:relative;
        }

        .si select{
            width:100%;
            height:56px;
            border:1px solid #d1d5db;
            border-radius:16px;
            padding:0 42px 0 16px;
            outline:none;
            font-size:15px;
            background:#fff;
            appearance:none;
            transition:0.25s;
        }

        .si select:focus{
            border-color:#8b5cf6;
            box-shadow:0 0 0 4px rgba(139,92,246,0.10);
        }

        .si::after{
            content:'⌄';
            position:absolute;
            right:16px;
            top:50%;
            transform:translateY(-50%);
            color:#6b7280;
            pointer-events:none;
            font-size:18px;
        }

        .doc-row{
            display:flex;
            align-items:stretch;
            gap:14px;
            border:1px solid #e5e7eb;
            border-radius:18px;
            padding:14px 16px;
            background:#fff;
            transition:0.25s;
        }

        .doc-row:hover{
            border-color:#c4b5fd;
            box-shadow:0 2px 12px rgba(139,92,246,0.07);
        }

        .doc-left{
            display:flex;
            align-items:center;
            gap:14px;
            flex:1;
            min-width:0;
        }

        .doc-icon{
            width:42px;
            height:42px;
            border-radius:12px;
            background:#f3e8ff;
            display:flex;
            align-items:center;
            justify-content:center;
            flex-shrink:0;
        }

        .doc-icon i{
            font-size:20px;
            color:#8b5cf6;
        }

        .doc-info{
            flex:1;
            min-width:0;
        }

        .doc-label{
            font-size:14px;
            font-weight:600;
            color:#1f2937;
        }

        .req{
            color:#ef4444;
        }

        .doc-filename{
            font-size:12px;
            color:#9ca3af;
            margin-top:2px;
        }

        .doc-filename.has-file{
            color:#7c3aed;
            font-weight:500;
        }

        .doc-upload-btn{
            display:inline-flex;
            align-items:center;
            gap:6px;
            margin-top:8px;
            height:32px;
            padding:0 14px;
            border-radius:8px;
            border:1.5px dashed #c4b5fd;
            background:#faf5ff;
            color:#7c3aed;
            font-size:12px;
            font-weight:600;
            cursor:pointer;
            transition:0.2s;
        }

        .doc-upload-btn:hover{
            background:#ede9fe;
            border-color:#8b5cf6;
        }

        .doc-preview{
            width:90px;
            flex-shrink:0;
            border-radius:12px;
            border:1px solid #e5e7eb;
            background:#f9fafb;
            overflow:hidden;
            display:flex;
            align-items:center;
            justify-content:center;
            position:relative;
            min-height:80px;
        }

        .prev-placeholder{
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            gap:4px;
            padding:8px;
        }

        .prev-placeholder i{
            font-size:22px;
            color:#d1d5db;
        }

        .prev-placeholder span{
            font-size:10px;
            color:#d1d5db;
        }

        .prev-file{
            display:none;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            gap:4px;
            padding:8px;
            text-align:center;
        }

        .prev-file.visible{
            display:flex;
        }

        .prev-file i{
            font-size:26px;
            color:#8b5cf6;
        }

        .prev-file span{
            font-size:10px;
            color:#7c3aed;
            font-weight:600;
            word-break:break-all;
        }

        .prev-remove{
            position:absolute;
            top:4px;
            right:4px;
            width:18px;
            height:18px;
            border-radius:50%;
            background:#ef4444;
            color:#fff;
            border:none;
            font-size:10px;
            cursor:pointer;
            display:none;
            align-items:center;
            justify-content:center;
        }

        .prev-remove.visible{
            display:flex;
        }

        @media(max-width:640px){

            .fi input,
            .si select{
                height:52px;
            }

        }

    </style>

</head>

<body class="bg-gray-100 min-h-screen">

<!-- HEADER -->
<div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8 pt-6 sm:pt-8 pb-5 sm:pb-6">

    <div class="flex items-start justify-between">

        <div>

            <h1 class="text-3xl font-bold text-gray-900">
                Add Applicants
            </h1>

        </div>

        <a href="manage_applicants.php">

            <button class="inline-flex items-center gap-2 h-11 px-5 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 text-gray-700 text-sm font-semibold transition-all shadow-sm">

                <i class="ri-arrow-left-line"></i>
                Back

            </button>

        </a>

    </div>

</div>

<!-- MAIN -->
<div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8 pb-6 sm:pb-10">

    <div class="w-full bg-white rounded-2xl sm:rounded-3xl shadow-xl border border-gray-100 p-3 sm:p-6 md:p-8 lg:p-12 overflow-visible">

        <div class="mb-8">


            <h1 class="text-3xl font-bold text-gray-900">
                Fill Applicant Details
            </h1>
            
            <p class="text-xs text-gray-400 mt-1">
                Fill all required details
            </p>

        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

            <!-- Full Name -->
            <div class="fi sm:col-span-2">

                <input type="text" placeholder=" " id="fullName">
                <label>Full Name *</label>

            </div>

            <!-- Phone -->
            <div class="fi">

                <input type="tel" placeholder=" " id="phoneNumber">
                <label>Phone Number *</label>

            </div>

            <!-- Email -->
            <div class="fi">

                <input type="email" placeholder=" " id="email">
                <label>Email Address *</label>

            </div>

            <!-- Qualification -->
            <div class="fi">

                <input type="text" placeholder=" " id="qualification">
                <label>Educational Qualification *</label>

            </div>

            <!-- Preferred Technology -->
<div>

    <select id="technology" placeholder="Preferred Technology *">

        <option value="">Preferred Technology *</option>

        <option>PHP</option>
        <option>Laravel</option>
        <option>React JS</option>
        <option>Node JS</option>
        <option>Flutter</option>
        <option>Python</option>
        <option>UI/UX Design</option>
        <option>QA Testing</option>

    </select>

</div>

            <!-- Applying As -->
<div class="si sm:col-span-2">

    <select id="applyingAs">

        <option value="" disabled selected>
            Applying As *
        </option>

        <option>Intern</option>
        <option>Fresher</option>
        <option>Experienced</option>
        <option>Freelancer</option>
        <option>Part Time</option>
        <option>Full Time</option>

    </select>

</div>

        </div>

        <!-- Upload CV -->
        <div class="mt-6">

            <div class="doc-row">

                <div class="doc-left">

                    <div class="doc-icon">
                        <i class="ri-file-text-line"></i>
                    </div>

                    <div class="doc-info">

                        <div class="doc-label">
                            Upload CV <span class="req">*</span>
                        </div>

                        <div id="cvName" class="doc-filename">
                            No file chosen
                        </div>

                        <label for="cvUpload" class="doc-upload-btn">

                            <i class="ri-upload-2-line"></i>
                            Upload CV

                        </label>

                        <input
                            type="file"
                            id="cvUpload"
                            class="hidden"
                            accept=".pdf,.doc,.docx"
                            onchange="handleDocUpload(this)">

                    </div>

                </div>

                <div class="doc-preview">

                    <div class="prev-placeholder" id="cvPlaceholder">

                        <i class="ri-file-line"></i>
                        <span>Preview</span>

                    </div>

                    <div class="prev-file" id="cvFile"></div>

                    <button
                        class="prev-remove"
                        id="cvRemove"
                        onclick="removeDoc()">

                        ✕

                    </button>

                </div>

            </div>

        </div>

        <!-- BUTTON -->
        <div class="flex justify-end mt-8 pt-6 border-t border-gray-100">

            <button
                onclick="submitApplication()"
                class="inline-flex justify-center items-center gap-2 h-12 px-9 rounded-xl bg-violet-500 hover:bg-violet-600 text-white text-sm font-semibold transition-all shadow-lg shadow-violet-200">

                Submit
                <i class="ri-arrow-right-line"></i>

            </button>

        </div>

    </div>

</div>

<script>

    // PHONE VALIDATION
    document.getElementById('phoneNumber')
        .addEventListener('input', function(){

            this.value = this.value.replace(/\D/g,'');

            if(this.value.length > 10){
                this.value = this.value.slice(0,10);
            }

        });

    // EMAIL VALIDATION
    function isValidEmail(email){

        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

    }

    // FILE UPLOAD
    function handleDocUpload(input){

        const file = input.files[0];

        if(!file) return;

        document.getElementById('cvName').textContent = file.name;
        document.getElementById('cvName').classList.add('has-file');

        const fileBox = document.getElementById('cvFile');

        fileBox.innerHTML =
            '<i class="ri-file-pdf-2-line"></i>' +
            '<span>' + file.name.substring(0,12) + '</span>';

        fileBox.classList.add('visible');

        document.getElementById('cvPlaceholder').style.display = 'none';

        document.getElementById('cvRemove')
            .classList.add('visible');

    }

    // REMOVE FILE
    function removeDoc(){

        document.getElementById('cvUpload').value = '';

        document.getElementById('cvName').textContent =
            'No file chosen';

        document.getElementById('cvName')
            .classList.remove('has-file');

        document.getElementById('cvFile')
            .classList.remove('visible');

        document.getElementById('cvFile').innerHTML = '';

        document.getElementById('cvPlaceholder')
            .style.display = 'flex';

        document.getElementById('cvRemove')
            .classList.remove('visible');

    }

    // SUBMIT
    function submitApplication(){

        const fullName = document.getElementById('fullName').value.trim();
        const phone = document.getElementById('phoneNumber').value.trim();
        const email = document.getElementById('email').value.trim();
        const qualification = document.getElementById('qualification').value.trim();
        const technology = document.getElementById('technology').value;
        const applyingAs = document.getElementById('applyingAs').value;
        const cv = document.getElementById('cvUpload').value;

        if(fullName === ''){

            Swal.fire({
                icon:'error',
                title:'Full Name Required'
            });

            return;
        }

        if(phone === ''){

            Swal.fire({
                icon:'error',
                title:'Phone Number Required'
            });

            return;
        }

        if(phone.length !== 10){

            Swal.fire({
                icon:'error',
                title:'Phone Number Must Be 10 Digits'
            });

            return;
        }

        if(email === ''){

            Swal.fire({
                icon:'error',
                title:'Email Required'
            });

            return;
        }

        if(!isValidEmail(email)){

            Swal.fire({
                icon:'error',
                title:'Enter Valid Email Address'
            });

            return;
        }

        if(qualification === ''){

            Swal.fire({
                icon:'error',
                title:'Educational Qualification Required'
            });

            return;
        }

        if(technology === ''){

            Swal.fire({
                icon:'error',
                title:'Select Preferred Technology'
            });

            return;
        }

        if(applyingAs === ''){

            Swal.fire({
                icon:'error',
                title:'Select Applying As'
            });

            return;
        }

        if(cv === ''){

            Swal.fire({
                icon:'error',
                title:'Please Upload CV'
            });

            return;
        }

Swal.fire({
    icon:'success',
    title:'Application Submitted Successfully',
    timer:1500,
    showConfirmButton:false
});

setTimeout(() => {
    window.location.href = 'manage_applicants.php';
}, 1500);

    }

</script>
<script>

    new TomSelect('#technology',{

        create:false,
        allowEmptyOption:true,
        closeAfterSelect:true,

        render:{
            no_results:function(){
                return '<div class="p-3 text-sm text-gray-400">No results found</div>';
            }
        }

    });

    new TomSelect('#applyingAs',{

        create:false,
        allowEmptyOption:true,
        closeAfterSelect:true,

        render:{
            no_results:function(){
                return '<div class="p-3 text-sm text-gray-400">No results found</div>';
            }
        }

    });

</script>
</body>

</html>

<?php include 'footer.php'; ?>