@extends('dashboard.base')

@section('content')
<div class="container my-4">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center bg-orange text-white p-3">
            <a href="{{ route('certification_application') }}" class="btn btn-orange text-white d-flex align-items-center">
                <i class="fas fa-arrow-left"></i>
                <span class="ml-2">BACK</span>
            </a>
            <h3 class="text-center flex-grow-1 m-0">Vacancy Application</h3>
        </div>
        
        <div class="card-body">
            <h4><strong>Vacancy | Job Application Process</strong></h4>
            <p>Application for the post of: <strong>Deputy Director of Human Resource and Administration</strong></p>
            
            <!-- Navigation Steps -->
            <ul class="nav nav-tabs" id="stepNav">
                <li class="nav-item step-active">
                    <a class="nav-link active" data-step="1" href="#">Step 1<br>Personal Details</a>
                </li>
                <li class="nav-item"><a class="nav-link" data-step="2" href="#">Step 2<br>Experience</a></li>
                <li class="nav-item"><a class="nav-link" data-step="3" href="#">Step 3<br>Education</a></li>
                <li class="nav-item"><a class="nav-link" data-step="4" href="#">Step 4<br>Training</a></li>
                <li class="nav-item"><a class="nav-link" data-step="5" href="#">Step 5<br>Skills</a></li>
                <li class="nav-item"><a class="nav-link" data-step="6" href="#">Step 6<br>References</a></li>
                <li class="nav-item"><a class="nav-link" data-step="7" href="#">Step 7<br>Attachments</a></li>
                <li class="nav-item"><a class="nav-link" data-step="8" href="#">Step 8<br>Submit Application</a></li>
            </ul>

            <!-- Form Sections -->
            <div id="stepForms">
                <div class="step-content active" data-step="1">
                    <h5 class="mt-4">Personal Details</h5>
                    <form method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col-md-6">
                        <label for="title">Title</label>
                        <select id="title" name="title" class="form-control" required>
                            <option>Select</option>
                            <option>Mr.</option>
                            <option>Mrs.</option>
                            <option>Ms.</option>
                            <option>Dr.</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="nationality">Nationality</label>
                        <input type="text" class="form-control" id="nationality" name="nationality" required>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                        <label for="first_name">First Name</label>
                        <input type="text" class="form-control" id="first_name" name="first_name" required>
                    </div>
                    <div class="col-md-6">
                        <label for="district">District</label>
                        <input type="text" class="form-control" id="district" name="district" required>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                        <label for="middle_name">Middle Name</label>
                        <input type="text" class="form-control" id="middle_name" name="middle_name">
                    </div>
                    <div class="col-md-6">
                        <label for="village">Village</label>
                        <input type="text" class="form-control" id="village" name="village" required>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                        <label for="gender">Gender</label><br>
                        <input type="radio" name="gender" value="Male"> Male
                        <input type="radio" name="gender" value="Female"> Female
                    </div>
                    <div class="col-md-6">
                        <label for="available_start_date">Available Start Date</label>
                        <input type="date" class="form-control" id="available_start_date" name="available_start_date" required>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                        <button type="submit" class="btn btn-primary">Save Details</button>
                    </div>
                    <div class="col-md-6 text-right">
                        
                        <a href="#" class="btn btn-orange next-step">Next</a>
                    </div>
                </div>

            </form>
                </div>

                <div class="step-content" data-step="2">
                    <h5 class="mt-4">Experience</h5>
                    <p>Experience details form goes here...</p>

                    <div class="row">
                        <div class="col-md-6">
                            <button type="submit" class="btn btn-primary">Save Details</button>
                        </div>
                        <div class="col-md-6 text-right">
                            <a href="#" class="btn btn-secondary prev-step">Prev</a>
                            <a href="#" class="btn btn-orange next-step">Next</a>
                        </div>
                    </div>
                </div>

                <div class="step-content" data-step="3">
                    <h5 class="mt-4">Education</h5>
                    <p>Education details form goes here...</p>
                    <div class="row">
                        <div class="col-md-6">
                            <button type="submit" class="btn btn-primary">Save Details</button>
                        </div>
                        <div class="col-md-6 text-right">
                            <a href="#" class="btn btn-secondary prev-step">Prev</a>
                            <a href="#" class="btn btn-orange next-step">Next</a>
                        </div>
                    </div>
                </div>

                <div class="step-content" data-step="4">
                    <h5 class="mt-4">Training</h5>
                    <p>Training details form goes here...</p>
                    <div class="row">
                        <div class="col-md-6">
                            <button type="submit" class="btn btn-primary">Save Details</button>
                        </div>
                        <div class="col-md-6 text-right">
                            <a href="#" class="btn btn-secondary prev-step">Prev</a>
                            <a href="#" class="btn btn-orange next-step">Next</a>
                        </div>
                    </div>
                </div>

                <div class="step-content" data-step="5">
                    <h5 class="mt-4">Skills</h5>
                    <p>Skills details form goes here...</p>
                    <div class="row">
                        <div class="col-md-6">
                            <button type="submit" class="btn btn-primary">Save Details</button>
                        </div>
                        <div class="col-md-6 text-right">
                            <a href="#" class="btn btn-secondary prev-step">Prev</a>
                            <a href="#" class="btn btn-orange next-step">Next</a>
                        </div>
                    </div>
                </div>  

                <div class="step-content" data-step="6">
                    <h5 class="mt-4">References</h5>
                    <p>References form goes here...</p>
                    <div class="row">
                        <div class="col-md-6">
                            <button type="submit" class="btn btn-primary">Save Details</button>
                        </div>
                        <div class="col-md-6 text-right">
                            <a href="#" class="btn btn-secondary prev-step">Prev</a>
                            <a href="#" class="btn btn-orange next-step">Next</a>
                        </div>
                    </div>
                </div>

                <div class="step-content" data-step="7">
                    <h5 class="mt-4">Attachments</h5>
                    <p>Attachment upload form goes here...</p>
                    <div class="row">
                        <div class="col-md-6">
                            <button type="submit" class="btn btn-primary">Save Details</button>
                        </div>
                        <div class="col-md-6 text-right">
                            <a href="#" class="btn btn-secondary prev-step">Prev</a>
                            <a href="#" class="btn btn-orange next-step">Next</a>
                        </div>
                    </div>
                </div>

                <div class="step-content" data-step="8">
                    <h5 class="mt-4">Submit Application</h5>
                    <p>Final submission form goes here...</p>
                    <div class="row">
                        <div class="col-md-6">
                            <button type="submit" class="btn btn-primary">Save Details</button>
                        </div>
                        <div class="col-md-6 text-right">
                            <a href="#" class="btn btn-secondary prev-step">Prev</a>
                            <a href="#" class="btn btn-orange next-step">Submit</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Custom Styles -->
<style>
    .btn-orange {
        background-color: #ff6c2f;
        color: white;
        border: none;
    }
    .btn-orange:hover {
        background-color: #e65a1b;
    }
    .bg-orange {
        background-color: #ff6c2f;
    }

    /* Step Navigation */
    .nav-tabs {
        border-bottom: none;
        display: flex;
    }

    .nav-tabs .nav-item {
        position: relative;
    }

    .nav-tabs .nav-link {
        border: none;
        font-weight: bold;
        color: #333;
        padding: 10px 20px;
        cursor: pointer;
    }

    .nav-tabs .nav-link.active {
        background-color: #ff6c2f;
        color: white;
        border-radius: 5px;
        position: relative;
    }

    .nav-tabs .nav-link.active::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -15px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 15px solid #ff6c2f;
        transform: translateY(-50%);
    }

    /* Step Content */
    .step-content {
        display: none;
    }

    .step-content.active {
        display: block;
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const steps = document.querySelectorAll(".nav-link");
        const forms = document.querySelectorAll(".step-content");

        function updateButtons() {
            const currentStep = parseInt(document.querySelector(".nav-link.active").getAttribute("data-step"));

            document.querySelectorAll(".prev-step").forEach(btn => {
                btn.classList.toggle("disabled", currentStep === 1);
            });

            document.querySelectorAll(".next-step").forEach(btn => {
                btn.style.display = currentStep === 8 ? "none" : "inline-block";
            });
        }

        steps.forEach(step => {
            step.addEventListener("click", function (e) {
                e.preventDefault();
                const stepNumber = this.getAttribute("data-step");

                // Remove active class from all steps and forms
                steps.forEach(s => s.classList.remove("active"));
                forms.forEach(f => f.classList.remove("active"));

                // Add active class to clicked step and corresponding form
                this.classList.add("active");
                document.querySelector(`.step-content[data-step="${stepNumber}"]`).classList.add("active");

                updateButtons();
            });
        });

        // Handle "Next" button click
        document.querySelectorAll(".next-step").forEach(button => {
            button.addEventListener("click", function (e) {
                e.preventDefault();
                const currentStep = parseInt(document.querySelector(".nav-link.active").getAttribute("data-step"));
                const nextStep = currentStep + 1;
                const nextStepElement = document.querySelector(`.nav-link[data-step="${nextStep}"]`);

                if (nextStepElement) {
                    nextStepElement.click();
                }
            });
        });

        // Handle "Prev" button click
        document.querySelectorAll(".prev-step").forEach(button => {
            button.addEventListener("click", function (e) {
                e.preventDefault();
                const currentStep = parseInt(document.querySelector(".nav-link.active").getAttribute("data-step"));
                const prevStep = currentStep - 1;
                const prevStepElement = document.querySelector(`.nav-link[data-step="${prevStep}"]`);

                if (prevStepElement) {
                    prevStepElement.click();
                }
            });
        });

        updateButtons();
    });
</script>


@endsection