@extends('admin.layouts.app')
@section('title', 'Add Employee')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.employees.index') }}">Employees</a></li>
    <li class="breadcrumb-item active">Add Employee</li>
@endsection
@section('content')
    <div class="page-header">
        <h1 class="page-title">Add Employee</h1>
    </div>
    <form id="createEmployeeForm" class="formSubmit fileUpload" method="POST" action="{{ route('admin.employees.store') }}"
        enctype="multipart/form-data">
        @csrf
        <div class="container-fluid">
            <!-- Personal & Account Details -->
            <h4 class="mt-4">Personal & Account Details</h4>
            <div class="card">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Full Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" id="name" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Email</label>
                            <input type="email" name="email" id="email" class="form-control"
                                placeholder="name@xaviersburdwan.ac.in">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Type <span class="text-danger">*</span></label>
                            <select name="type" id="type" class="form-select">
                                <option value="teacher">Teacher</option>
                                <option value="staff">Staff</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Gender</label>
                            <select name="gender" id="gender" class="form-select">
                                <option value="">—</option>
                                <option value="male">Male</option>
                                <option value="female">Female</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Phone(Login ID) <span class="text-danger">*</span></label>
                            <input type="text" name="phone" id="phone" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Designation</label>
                            <select name="designation_id" id="designation_id" class="form-select">
                                <option value="">— Select —</option>
                                @foreach ($designations as $d)
                                    <option value="{{ $d->id }}">{{ $d->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Department</label>
                            <select name="department_id" id="department_id" class="form-select">
                                <option value="">— Select —</option>
                                @foreach ($departments as $dept)
                                    <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Qualification</label>
                            <input type="text" name="qualification" id="qualification" class="form-control"
                                placeholder="e.g. Ph.D., M.A.">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Experience (Years)</label>
                            <input type="number" name="experience_years" id="experience_years" class="form-control"
                                min="0">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Salary (₹)</label>
                            <input type="number" name="salary" id="salary" class="form-control" step="0.01">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Date of Joining</label>
                            <input type="date" name="date_of_joining" id="date_of_joining" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Date of Birth</label>
                            <input type="date" name="date_of_birth" id="date_of_birth" class="form-control">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Address</label>
                            <textarea name="address" id="address" class="form-control" rows="2"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Personal & Account Details -->

            <!-- Educational Qualifications -->
            <h4 class="mt-4">Educational Qualifications</h4>
            <div id="educationalQualificationsContainer" class="card">
                <div class="card-body">
                    <div class="row g-3 educational-qualification-row">
                        <div class="col-md-4">
                            <label class="form-label">Qualification</label>
                            <select name="educational_qualifications[0][qualification]" class="form-select">
                                <option value="">Select Qualification</option>
                                <option value="Ph.D">Ph.D</option>
                                <option value="M.Phil">M.Phil</option>
                                <option value="Post-Graduation">Post-Graduation</option>
                                <option value="Graduation">Graduation</option>
                                <option value="Higher Secondary">Higher Secondary</option>
                                <option value="Secondary">Secondary</option>
                                <option value="NET/SLET/SET">NET/SLET/SET</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Board/University</label>
                            <input type="text" name="educational_qualifications[0][board_university]"
                                class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Year of Passing</label>
                            <input type="number" name="educational_qualifications[0][year_of_passing]"
                                class="form-control">
                        </div>
                        <div class="col-6">
                            <label class="form-label">Name of the school/college/University</label>
                            <input type="text" name="educational_qualifications[0][institution]" class="form-control">
                        </div>
                        <div class="col-6">
                            <label class="form-label">Percentage/Grade</label>
                            <input type="text" name="educational_qualifications[0][percentage_grade]"
                                class="form-control">
                        </div>
                        <div class="col-12 text-end">
                            <button type="button" class="btn btn-danger btn-sm remove-qualification">Remove</button>
                        </div>
                    </div>
                </div>
                <div class="card-footer text-end">
                    <button type="button" class="btn btn-primary" id="addQualificationButton">Add Qualification</button>
                </div>
            </div>
            <!-- Educational Qualifications -->


            <!-- Professional Qualifications -->
            <h4 class="mt-4">Professional Qualifications</h4>
            <div class="card">
                <div class="card-body"> <!-- Corrected class name to card-body -->
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Name of the Examination</label>
                            <input type="text" name="professional_qualifications[0][name]" class="form-control"
                                placeholder="Enter name of the examination">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Board/University</label>
                            <input type="text" name="professional_qualifications[0][board_university]"
                                class="form-control" placeholder="Enter board or university name">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Year of Passing</label>
                            <input type="number" name="professional_qualifications[0][year_of_passing]"
                                class="form-control" placeholder="Enter year of passing">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Name of the School/College/University</label>
                            <input type="text" name="professional_qualifications[0][institution]" class="form-control"
                                placeholder="Enter name of institution">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Percentage/Grade</label>
                            <input type="text" name="professional_qualifications[0][percentage_grade]"
                                class="form-control" placeholder="Enter percentage or grade">
                        </div>
                    </div>
                </div>
            </div>
            <!-- Professional Qualifications -->

            <!-- Academic Specialization -->
            <h4 class="mt-4">Academic Specialization</h4>
            <div class="card">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">Subject Specialization in PG and Research</label>
                            <textarea name="academic_specialization" class="form-control" rows="2" placeholder="Your specialization..."></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Academic Specialization -->

            <!-- Fieldwork / Industrial Experience -->
            <h4 class="mt-4">Fieldwork / Industrial Experience</h4>
            <div id="fieldwork-experience-container">
                <div class="fieldwork-experience-item card mb-3">
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Designation of the Post Held</label>
                                <input type="text" name="fieldwork_experience[0][designation]" class="form-control"
                                    placeholder="e.g. Intern, Manager">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Period</label>
                                <input type="text" name="fieldwork_experience[0][period]" class="form-control"
                                    placeholder="e.g. Jan 2020 - Dec 2021">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Full Address of the Office/Firm or Institution</label>
                                <textarea name="fieldwork_experience[0][address]" class="form-control" rows="2"
                                    placeholder="Address details..."></textarea>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Reasons for Leaving</label>
                                <textarea name="fieldwork_experience[0][reason]" class="form-control" rows="2"
                                    placeholder="Reasons for leaving..."></textarea>
                            </div>
                        </div>
                        <button type="button" class="btn btn-danger btn-sm float-end"
                            onclick="removeFieldworkExperience(this)">Remove</button>
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-primary mt-3" onclick="addFieldworkExperience()">Add Another
                Fieldwork/Industrial Experience</button>
            <!-- Fieldwork / Industrial Experience -->

            <!-- Professional Experience and Activities -->
            <h4 class="mt-4">Professional Experience and Activities</h4>
            <div class="card">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">( Academic and Administrative Responsibilities in Educational
                                Institutions)</label>
                            <textarea name="professional_experience" class="form-control" rows="4"
                                placeholder="List your professional experience and activities here..."></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Professional Experience and Activities -->

            <!-- Books Written -->
            <h4 class="mt-4">Books Written</h4>
            <div class="card">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">List of Books Written</label>
                            <textarea name="books_written" class="form-control" rows="4" placeholder="List your books here..."></textarea>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Research Publications -->
            <h4 class="mt-4">Research Publications</h4>
            <div class="card">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">Title of the Paper</label>
                            <input type="text" name="research_publications[0][title]" class="form-control"
                                placeholder="Enter title of the paper">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Name of the Journal/Book/Book Chapter/Proceeding of the
                                Conference</label>
                            <input type="text" name="research_publications[0][publication_name]" class="form-control"
                                placeholder="Enter name of the publication">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Publisher</label>
                            <input type="text" name="research_publications[0][publisher]" class="form-control"
                                placeholder="Enter publisher name">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Year of Publication</label>
                            <input type="number" name="research_publications[0][year]" class="form-control"
                                placeholder="Enter year of publication">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">ISSN/ISBN No.</label>
                            <input type="text" name="research_publications[0][issn_isbn]" class="form-control"
                                placeholder="Enter ISSN/ISBN number">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Vol. No.</label>
                            <input type="text" name="research_publications[0][volume]" class="form-control"
                                placeholder="Enter volume number">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Page No.</label>
                            <input type="text" name="research_publications[0][page]" class="form-control"
                                placeholder="Enter page number(s)">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Journal Indexing</label>
                            <input type="text" name="research_publications[0][indexing]" class="form-control"
                                placeholder="Enter journal indexing details">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Impact Factor</label>
                            <input type="text" name="research_publications[0][impact_factor]" class="form-control"
                                placeholder="Enter impact factor">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Link of the Paper</label>
                            <input type="url" name="research_publications[0][link]" class="form-control"
                                placeholder="Enter link to the paper">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Title of the book/chapters published</label>
                            <input type="text" name="research_publications[0][book_chapter_title]"
                                class="form-control" placeholder="Enter title of the book/chapters published">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Title of the proceedings of the conference</label>
                            <input type="text" name="research_publications[0][conference_proceedings_title]"
                                class="form-control" placeholder="Enter title of the conference proceedings">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Name of the conference</label>
                            <input type="text" name="research_publications[0][conference_name]" class="form-control"
                                placeholder="Enter name of the conference">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">National / International</label>
                            <input type="text" name="research_publications[0][national_international]"
                                class="form-control"
                                placeholder="Indicate if the conference was national or international">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Year of publication</label>
                            <input type="number" name="research_publications[0][publication_year]" class="form-control"
                                placeholder="Enter year of publication">
                        </div>
                    </div>
                </div>
            </div>
            <!-- Research Publications -->

            <!-- Number of books and chapters in edited volumes/books published and papers published in national/international conference proceedings -->
            <h4 class="mt-4">Number of books and chapters in edited volumes/books published and papers published in
                national/international conference proceedings</h4>
            <div class="card">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">ISBN number of the proceeding</label>
                            <input type="text" name="publications[0][isbn_proceeding]" class="form-control"
                                placeholder="Enter ISBN number of the proceeding">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Name of the publisher</label>
                            <input type="text" name="publications[0][publisher]" class="form-control"
                                placeholder="Enter name of the publisher">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Link of the Paper</label>
                            <input type="url" name="publications[0][paper_link]" class="form-control"
                                placeholder="Enter link to the paper">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Title of the book/chapters published</label>
                            <input type="text" name="publications[0][book_chapter_title]" class="form-control"
                                placeholder="Enter title of the book/chapters published">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Title of the paper</label>
                            <input type="text" name="publications[0][paper_title]" class="form-control"
                                placeholder="Enter title of the paper">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Title of the proceedings of the conference</label>
                            <input type="text" name="publications[0][conference_proceedings_title]"
                                class="form-control" placeholder="Enter title of the conference proceedings">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Name of the conference</label>
                            <input type="text" name="publications[0][conference_name]" class="form-control"
                                placeholder="Enter name of the conference">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">National / International</label>
                            <input type="text" name="publications[0][national_international]" class="form-control"
                                placeholder="Indicate if the conference was national or international">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Year of publication</label>
                            <input type="number" name="publications[0][publication_year]" class="form-control"
                                placeholder="Enter year of publication">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">ISBN number of the proceeding</label>
                            <input type="text" name="publications[0][isbn_proceeding_2]" class="form-control"
                                placeholder="Enter ISBN number of the proceeding">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Name of the publisher</label>
                            <input type="text" name="publications[0][publisher_2]" class="form-control"
                                placeholder="Enter name of the publisher">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Link of the Paper</label>
                            <input type="url" name="publications[0][paper_link_2]" class="form-control"
                                placeholder="Enter link to the paper">
                        </div>
                    </div>
                </div>
            </div>
            <!-- Number of books and chapters in edited volumes/books published and papers published in national/international conference proceedings -->

            <!-- Seminars / Conference presented (only participation will not be considered) -->
            <h4 class="mt-4">Seminars / Conference presented (only participation will not be considered)</h4>
            <div id="conference-presentations-container">
                <div class="conference-presentation-item card mb-3">
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label">Title of the Paper</label>
                                <input type="text" name="conference_presentations[0][title]" class="form-control"
                                    placeholder="Enter title of the paper">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Organization</label>
                                <input type="text" name="conference_presentations[0][organization]"
                                    class="form-control" placeholder="Enter organization name">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Date</label>
                                <input type="text" name="conference_presentations[0][date]" class="form-control"
                                    placeholder="Enter date of presentation">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Mode</label>
                                <select name="conference_presentations[0][mode]" class="form-select">
                                    <option value="">Select mode</option>
                                    <option value="offline">Offline</option>
                                    <option value="online">Online</option>
                                </select>
                            </div>
                        </div>
                        <button type="button" class="btn btn-danger btn-sm float-end"
                            onclick="removeConferencePresentation(this)">Remove</button>
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-primary mt-3" onclick="addConferencePresentation()">Add Another Seminar
                / Conference Presentation</button>
            <!-- Seminars / Conference presented (only participation will not be considered) -->

            <!-- Workshops/ Webinar participated in Seminar/ Conferences/ Training Programmes -->
            <h4 class="mt-4">Workshops/ Webinar participated in Seminar/ Conferences/ Training Programmes</h4>
            <div id="workshops-conferences-container">
                <div class="workshop-conference-item card mb-3">
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label">Name of the Workshop/Seminar/Webinar/Conference/Training
                                    Programme</label>
                                <input type="text" name="workshops_conferences[0][name]" class="form-control"
                                    placeholder="Enter name of the event">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Organization</label>
                                <input type="text" name="workshops_conferences[0][organization]" class="form-control"
                                    placeholder="Enter organization name">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Date (From-to)</label>
                                <input type="text" name="workshops_conferences[0][date]" class="form-control"
                                    placeholder="Enter date range">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Mode</label>
                                <select name="workshops_conferences[0][mode]" class="form-select">
                                    <option value="">Select mode</option>
                                    <option value="offline">Offline</option>
                                    <option value="online">Online</option>
                                </select>
                            </div>
                        </div>
                        <button type="button" class="btn btn-danger btn-sm float-end"
                            onclick="removeWorkshopConference(this)">Remove</button>
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-primary mt-3" onclick="addWorkshopConference()">Add Another
                Workshop/Seminar/Webinar/Conference/Training Programme</button>
            <!-- Workshops/ Webinar participated in Seminar/ Conferences/ Training Programmes -->


            <!-- Participation in Faculty development Programmes (FDP), Management Development Programmes (MDPs) professional development /administrative training programs  -->
            <h4 class="mt-4">Participation in Faculty development Programmes (FDP), Management Development Programmes
                (MDPs) professional development /administrative training programs </h4>
            <div id="participation-programs-container">
                <div class="participation-program-item card mb-3">
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label">Title of the FDP /MDP/ professional development / administrative
                                    training program</label>
                                <input type="text" name="participation_programs[0][title]" class="form-control"
                                    placeholder="Enter program title">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Organization</label>
                                <input type="text" name="participation_programs[0][organization]" class="form-control"
                                    placeholder="Enter organization name">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Date (From-to)</label>
                                <input type="text" name="participation_programs[0][date]" class="form-control"
                                    placeholder="Enter date range">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Mode</label>
                                <select name="participation_programs[0][mode]" class="form-select">
                                    <option value="">Select mode</option>
                                    <option value="offline">Offline</option>
                                    <option value="online">Online</option>
                                </select>
                            </div>
                        </div>
                        <button type="button" class="btn btn-danger btn-sm float-end"
                            onclick="removeParticipationProgram(this)">Remove</button>
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-primary mt-3" onclick="addParticipationProgram()">Add Another
                Workshop/Seminar/Webinar/Conference/Training Programme</button>
            <!-- Participation in Faculty development Programmes (FDP), Management Development Programmes (MDPs) professional development /administrative training programs  -->


            <!-- Awards / Honors -->
            <h2>Awards / Honors or recognitions received</h2>
            <div id="awards-recognitions-container">
                <div class="award-recognition-item card mb-3">
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label">Name of the Award/ Recognition</label>
                                <input type="text" name="awards_recognitions[0][name]" class="form-control"
                                    placeholder="Enter name of the award/recognition">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Name of the awarding Govt./Govt. Recognised /Pvt. Bodies</label>
                                <input type="text" name="awards_recognitions[0][awarding_body]" class="form-control"
                                    placeholder="Enter name of the awarding body">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Purpose</label>
                                <input type="text" name="awards_recognitions[0][purpose]" class="form-control"
                                    placeholder="Enter the purpose of the award">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Year of Award</label>
                                <input type="text" name="awards_recognitions[0][year]" class="form-control"
                                    placeholder="Enter the year of the award">
                            </div>
                        </div>
                        <button type="button" class="btn btn-danger btn-sm float-end"
                            onclick="removeAwardRecognition(this)">Remove</button>
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-primary mt-3" onclick="addAwardRecognition()">Add Another
                Award/Recognition</button>
            <!-- Awards / Honors -->

            <div class="card">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <h4>Life Memberships / Subscriptions (if any)</h4>
                            <div class="form-group">
                                <label for="life-memberships">Give Details of Organization</label>
                                <textarea class="form-control" id="life-memberships" name="life_memberships" rows="3"
                                    placeholder="Enter details of life memberships or subscriptions"></textarea>
                            </div>
                        </div>
                        <div class="col-12">
                            <h4>Extra-curricular Interests and Activities</h4>
                            <div class="form-group">
                                <label for="extra-curricular">Enter details of your extra-curricular interests and
                                    activities</label>
                                <textarea class="form-control" id="extra-curricular" name="extra_curricular" rows="3"
                                    placeholder="Enter details of extra-curricular interests and activities"></textarea>
                            </div>
                        </div>
                        <div class="col-12">
                            <h4>Volunteer Experience</h4>
                            <div class="form-group">
                                <label for="volunteer-experience">Enter details of your volunteer experience</label>
                                <textarea class="form-control" id="volunteer-experience" name="volunteer_experience" rows="3"
                                    placeholder="Enter details of volunteer experience"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bank Details -->
            <h4 class="mt-4">Bank Details</h4>
            <div class="card">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Bank Name</label>
                            <input type="text" name="bank[0][name]" class="form-control"
                                placeholder="Name of the Bank">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Account Number</label>
                            <input type="text" name="bank[0][account_number]" class="form-control"
                                placeholder="Account Number">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">IFSC Code</label>
                            <input type="text" name="bank[0][ifsc_code]" class="form-control"
                                placeholder="IFSC Code">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">MMID Code</label>
                            <input type="text" name="bank[0][mmid_code]" class="form-control"
                                placeholder="MMID Code">
                        </div>
                    </div>
                </div>
            </div>
            <!-- Bank Details -->

            <!-- Other Details -->
            <h4 class="mt-4">Other Details</h4>
            <div class="card">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">PAN Card Number</label>
                            <input type="text" name="pan_card" class="form-control" placeholder="PAN Card Number">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Voter Card Number</label>
                            <input type="text" name="voter_card" class="form-control" placeholder="Voter Card Number">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">AADHAR Card Number</label>
                            <input type="text" name="aadhar_card" class="form-control"
                                placeholder="AADHAR Card Number">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Passport Number</label>
                            <input type="text" name="passport_number" class="form-control"
                                placeholder="Passport Number">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">PF Number</label>
                            <input type="text" name="pf_number" class="form-control" placeholder="PF Number">
                        </div>
                    </div>
                </div>
            </div>
            <!-- Other Details -->

            <!-- References -->
            <h4 class="mt-4">Name of two responsible persons of your locality or two referees to whom you are known:</h4>
            <div class="card">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">SI. No.</label>
                            <input type="text" name="references[0][sl_no]" class="form-control"
                                placeholder="Enter SI. No.">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Name</label>
                            <input type="text" name="references[0][name]" class="form-control"
                                placeholder="Enter Name">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Contact No.</label>
                            <input type="text" name="references[0][contact_no]" class="form-control"
                                placeholder="Enter Contact No.">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">E-Mail Id</label>
                            <input type="email" name="references[0][email]" class="form-control"
                                placeholder="Enter E-Mail Id">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">SI. No.</label>
                            <input type="text" name="references[1][sl_no]" class="form-control"
                                placeholder="Enter SI. No.">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Name</label>
                            <input type="text" name="references[1][name]" class="form-control"
                                placeholder="Enter Name">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Contact No.</label>
                            <input type="text" name="references[1][contact_no]" class="form-control"
                                placeholder="Enter Contact No.">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">E-Mail Id</label>
                            <input type="email" name="references[1][email]" class="form-control"
                                placeholder="Enter E-Mail Id">
                        </div>
                    </div>
                </div>
            </div>
            <!-- References -->

            <!-- Submit Button -->
            <div class="col-12 mt-4">
                <div class="card">
                    <div class="card-body">
                        <div class="alert alert-info py-2 px-3" style="font-size:0.82rem">
                            <i class="bi bi-info-circle me-1"></i>
                            Default password will be set to <strong>Pass@123</strong>. Employee should change it on first
                            login.
                        </div>
                        <button type="submit" class="btn btn-primary w-100 mt-2">
                            <i class="bi bi-person-check me-2"></i>Add Employee
                        </button>
                        <a href="{{ route('admin.employees.index') }}" class="btn btn-light w-100 mt-2">Cancel</a>
                    </div>
                </div>
            </div>
        </div>

    </form>
    @push('scripts')
        <script>
            const container = document.getElementById('educationalQualificationsContainer');
            const addButton = document.getElementById('addQualificationButton');
            let qualificationIndex = 0;
            addButton.addEventListener('click', () => {
                const row = document.createElement('div');
                row.classList.add('row', 'g-3', 'educational-qualification-row');
                row.innerHTML = `
                    <div class="col-md-4">
                        <label class="form-label">Qualification</label>
                        <select name="educational_qualifications[${qualificationIndex}][qualification]" class="form-select">
                        <option value="">Select Qualification</option>
                        <option value="Ph.D">Ph.D</option>
                        <option value="M.Phil">M.Phil</option>
                        <option value="Post-Graduation">Post-Graduation</option>
                        <option value="Graduation">Graduation</option>
                        <option value="Higher Secondary">Higher Secondary</option>
                        <option value="Secondary">Secondary</option>
                        <option value="NET/SLET/SET">NET/SLET/SET</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Board/University</label>
                        <input type="text" name="educational_qualifications[${qualificationIndex}][board_university]" class="form-control">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Year of Passing</label>
                        <input type="number" name="educational_qualifications[${qualificationIndex}][year_of_passing]" class="form-control">
                    </div>
                    <div class="col-6">
                        <label class="form-label">Name of the school/college/University</label>
                        <input type="text" name="educational_qualifications[${qualificationIndex}][institution]" class="form-control">
                    </div>
                    <div class="col-6">
                        <label class="form-label">Percentage/Grade</label>
                        <input type="text" name="educational_qualifications[${qualificationIndex}][percentage_grade]" class="form-control">
                    </div>
                    <div class="col-12 text-end">
                        <button type="button" class="btn btn-danger btn-sm remove-qualification">Remove</button>
                    </div>
                `;
                container.querySelector('.card-body').appendChild(row);
                qualificationIndex++;

                const removeButtons = document.querySelectorAll('.remove-qualification');
                removeButtons.forEach((button) => {
                    button.addEventListener('click', () => {
                        button.closest('.educational-qualification-row').remove();
                    });
                });
            });


            let fieldworkExperienceCount = 1;

            function addFieldworkExperience() {
                const container = document.getElementById('fieldwork-experience-container');
                const newItem = document.createElement('div');
                newItem.classList.add('fieldwork-experience-item', 'card', 'mb-3');
                newItem.innerHTML = `
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Designation of the Post Held</label>
                                <input type="text" name="fieldwork_experience[${fieldworkExperienceCount}][designation]" class="form-control"
                                    placeholder="e.g. Intern, Manager">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Period</label>
                                <input type="text" name="fieldwork_experience[${fieldworkExperienceCount}][period]" class="form-control"
                                    placeholder="e.g. Jan 2020 - Dec 2021">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Full Address of the Office/Firm or Institution</label>
                                <textarea name="fieldwork_experience[${fieldworkExperienceCount}][address]" class="form-control" rows="2" placeholder="Address details..."></textarea>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Reasons for Leaving</label>
                                <textarea name="fieldwork_experience[${fieldworkExperienceCount}][reason]" class="form-control" rows="2" placeholder="Reasons for leaving..."></textarea>
                            </div>
                        </div>
                        <button type="button" class="btn btn-danger btn-sm float-end" onclick="removeFieldworkExperience(this)">Remove</button>
                    </div>
                `;
                container.appendChild(newItem);
                fieldworkExperienceCount++;
            }

            function removeFieldworkExperience(btn) {
                const item = btn.closest('.fieldwork-experience-item');
                item.remove();
            }
        </script>
        <script>
            let conferencePresentationCount = 1;

            function addConferencePresentation() {
                const container = document.getElementById('conference-presentations-container');
                const newItem = document.createElement('div');
                newItem.classList.add('conference-presentation-item', 'card', 'mb-3');
                newItem.innerHTML = `
        <div class="card-body">
            <div class="row g-3">
                <div class="col-12">
                    <label class="form-label">Title of the Paper</label>
                    <input type="text" name="conference_presentations[${conferencePresentationCount}][title]" class="form-control" placeholder="Enter title of the paper">
                </div>
                <div class="col-12">
                    <label class="form-label">Organization</label>
                    <input type="text" name="conference_presentations[${conferencePresentationCount}][organization]" class="form-control" placeholder="Enter organization name">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Date</label>
                    <input type="text" name="conference_presentations[${conferencePresentationCount}][date]" class="form-control" placeholder="Enter date of presentation">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Mode</label>
                    <select name="conference_presentations[${conferencePresentationCount}][mode]" class="form-select">
                        <option value="">Select mode</option>
                        <option value="offline">Offline</option>
                        <option value="online">Online</option>
                    </select>
                </div>
            </div>
            <button type="button" class="btn btn-danger btn-sm float-end" onclick="removeConferencePresentation(this)">Remove</button>
        </div>
    `;
                container.appendChild(newItem);
                conferencePresentationCount++;
            }

            function removeConferencePresentation(btn) {
                const item = btn.closest('.conference-presentation-item');
                item.remove();
            }
        </script>
        <script>
            let workshopConferenceCount = 1;

            function addWorkshopConference() {
                const container = document.getElementById('workshops-conferences-container');
                const newItem = document.createElement('div');
                newItem.classList.add('workshop-conference-item', 'card', 'mb-3');
                newItem.innerHTML = `
        <div class="card-body">
            <div class="row g-3">
                <div class="col-12">
                    <label class="form-label">Name of the Workshop/Seminar/Webinar/Conference/Training Programme</label>
                    <input type="text" name="workshops_conferences[${workshopConferenceCount}][name]" class="form-control" placeholder="Enter name of the event">
                </div>
                <div class="col-12">
                    <label class="form-label">Organization</label>
                    <input type="text" name="workshops_conferences[${workshopConferenceCount}][organization]" class="form-control" placeholder="Enter organization name">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Date (From-to)</label>
                    <input type="text" name="workshops_conferences[${workshopConferenceCount}][date]" class="form-control" placeholder="Enter date range">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Mode</label>
                    <select name="workshops_conferences[${workshopConferenceCount}][mode]" class="form-select">
                        <option value="">Select mode</option>
                        <option value="offline">Offline</option>
                        <option value="online">Online</option>
                    </select>
                </div>
            </div>
            <button type="button" class="btn btn-danger btn-sm float-end" onclick="removeWorkshopConference(this)">Remove</button>
        </div>
    `;
                container.appendChild(newItem);
                workshopConferenceCount++;
            }

            function removeWorkshopConference(btn) {
                const item = btn.closest('.workshop-conference-item');
                item.remove();
            }
        </script>
        <script>
            let participationProgramCount = 1;

            function addParticipationProgram() {
                const container = document.getElementById('participation-programs-container');
                const newItem = document.createElement('div');
                newItem.classList.add('participation-program-item', 'card', 'mb-3');
                newItem.innerHTML = `
          <div class="card-body">
              <div class="row g-3">
                  <div class="col-12">
                      <label class="form-label">Title of the FDP /MDP/ professional development / administrative training program</label>
                      <input type="text" name="participation_programs[${participationProgramCount}][title]" class="form-control" placeholder="Enter program title">
                  </div>
                  <div class="col-12">
                      <label class="form-label">Organization</label>
                      <input type="text" name="participation_programs[${participationProgramCount}][organization]" class="form-control" placeholder="Enter organization name">
                  </div>
                  <div class="col-md-6">
                      <label class="form-label">Date (From-to)</label>
                      <input type="text" name="participation_programs[${participationProgramCount}][date]" class="form-control" placeholder="Enter date range">
                  </div>
                  <div class="col-md-6">
                      <label class="form-label">Mode</label>
                      <select name="participation_programs[${participationProgramCount}][mode]" class="form-select">
                          <option value="">Select mode</option>
                          <option value="offline">Offline</option>
                          <option value="online">Online</option>
                      </select>
                  </div>
              </div>
              <button type="button" class="btn btn-danger btn-sm float-end" onclick="removeParticipationProgram(this)">Remove</button>
          </div>
      `;
                container.appendChild(newItem);
                participationProgramCount++;
            }

            function removeParticipationProgram(button) {
                const item = button.closest('.participation-program-item');
                item.remove();
                participationProgramCount--;
            }
        </script>
        <script>
            let awardRecognitionCount = 1;

            function addAwardRecognition() {
                const container = document.getElementById('awards-recognitions-container');
                const newItem = document.createElement('div');
                newItem.classList.add('award-recognition-item', 'card', 'mb-3');
                newItem.innerHTML = `
          <div class="card-body">
              <div class="row g-3">
                  <div class="col-12">
                      <label class="form-label">Name of the Award/ Recognition</label>
                      <input type="text" name="awards_recognitions[${awardRecognitionCount}][name]" class="form-control" placeholder="Enter name of the award/recognition">
                  </div>
                  <div class="col-12">
                      <label class="form-label">Name of the awarding Govt./Govt. Recognised /Pvt. Bodies</label>
                      <input type="text" name="awards_recognitions[${awardRecognitionCount}][awarding_body]" class="form-control" placeholder="Enter name of the awarding body">
                  </div>
                  <div class="col-md-6">
                      <label class="form-label">Purpose</label>
                      <input type="text" name="awards_recognitions[${awardRecognitionCount}][purpose]" class="form-control" placeholder="Enter the purpose of the award">
                  </div>
                  <div class="col-md-6">
                      <label class="form-label">Year of Award</label>
                      <input type="text" name="awards_recognitions[${awardRecognitionCount}][year]" class="form-control" placeholder="Enter the year of the award">
                  </div>
              </div>
              <button type="button" class="btn btn-danger btn-sm float-end" onclick="removeAwardRecognition(this)">Remove</button>
          </div>
      `;
                container.appendChild(newItem);
                awardRecognitionCount++;
            }

            function removeAwardRecognition(button) {
                const item = button.closest('.award-recognition-item');
                item.remove();
                awardRecognitionCount--;
            }
        </script>
    @endpush
@endsection