{% extends "base.html" %}
{% block content %}
<div class="container mt-5">
    <h2 class="mb-4 text-primary">User Master Form</h2>
    <form method="POST" enctype="multipart/form-data">
        <ul class="nav nav-tabs" id="userMasterTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active text-white bg-primary" id="basic-tab" data-bs-toggle="tab" data-bs-target="#basic" type="button" role="tab">Basic Details</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link text-white bg-primary" id="professional-tab" data-bs-toggle="tab" data-bs-target="#professional" type="button" role="tab">Professional Details</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link text-white bg-primary" id="education-tab" data-bs-toggle="tab" data-bs-target="#education" type="button" role="tab">Educational Details</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link text-white bg-primary" id="documents-tab" data-bs-toggle="tab" data-bs-target="#documents" type="button" role="tab">Documents</button>
            </li>
        </ul>

        <div class="tab-content mt-3" id="userMasterTabsContent">
            <div class="tab-pane fade show active" id="basic" role="tabpanel">
                <div class="mb-3">
                    <label class="form-label">Full Name</label>
                    <input type="text" name="full_name" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">Email</label>
                    <input type="email" name="email" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">Phone</label>
                    <input type="text" name="phone" class="form-control" required>
                </div>
            </div>

            <div class="tab-pane fade" id="professional" role="tabpanel">
                <div class="mb-3">
                    <label class="form-label">Designation</label>
                    <input type="text" name="designation" class="form-control">
                </div>
                <div class="mb-3">
                    <label class="form-label">Department</label>
                    <input type="text" name="department" class="form-control">
                </div>
                <div class="mb-3">
                    <label class="form-label">Date of Joining</label>
                    <input type="date" name="doj" class="form-control">
                </div>
            </div>

            <div class="tab-pane fade" id="education" role="tabpanel">
                <div class="mb-3">
                    <label class="form-label">Qualification</label>
                    <input type="text" name="qualification" class="form-control">
                </div>
                <div class="mb-3">
                    <label class="form-label">Institute</label>
                    <input type="text" name="institute" class="form-control">
                </div>
            </div>

            <div class="tab-pane fade" id="documents" role="tabpanel">
                <div class="mb-3">
                    <label class="form-label">Resume</label>
                    <input type="file" name="resume" class="form-control">
                </div>
                <div class="mb-3">
                    <label class="form-label">ID Proof</label>
                    <input type="file" name="id_proof" class="form-control">
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-warning text-dark mt-3">Submit</button>
    </form>
</div>
{% endblock %}