@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">Edit Employee</li>
@endsection
@section('content')
    <div class="page-header">
        <h1 class="page-title">Edit Employee</h1>
    </div>
    <form id="createEmployeeForm" class="formSubmit" method="POST"
        action="{{ route('admin.employees.update', $employee->id) }}">
        @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"
                                value="{{ $employee->user?->name ?? '' }}" placeholder="Enter Full Name">
                        </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" value="{{ $employee->user?->email ?? '' }}" disabled>
                        </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" @selected($employee->type === 'teacher')>Teacher</option>
                                <option value="staff" @selected($employee->type === '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" @selected($employee?->gender === 'male')>Male</option>
                                <option value="female" @selected($employee?->gender === 'female')>Female</option>
                                <option value="other" @selected($employee?->gender === '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"
                                value="{{ $employee->user?->phone ?? '' }}" disabled>
                        </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 }}" @selected($employee->designation_id == $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 }}" @selected($employee?->department_id == $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." value="{{ $employee?->qualification ?? '' }}">
                        </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" value="{{ $employee?->experience_years ?? '' }}">
                        </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"
                                value="{{ $employee?->salary ?? '' }}">
                        </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"
                                value="{{ $employee?->date_of_joining?->format('Y-m-d') ?? '' }}">
                        </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"
                                value="{{ $employee?->date_of_birth?->format('Y-m-d') ?? '' }}">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Address</label>
                            <textarea name="address" id="address" class="form-control" rows="2">{{ $employee?->address ?? '' }}</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">
                    @foreach ($educationalQualifications as $index => $qualification)
                        <div class="row g-3 educational-qualification-row">
                            <div class="col-md-4">
                                <label class="form-label">Qualification</label>
                                <select name="educational_qualifications[{{ $index }}][qualification]"
                                    class="form-select">
                                    <option value="">Select Qualification</option>
                                    <option value="Ph.D"
                                        {{ $qualification['qualification'] == 'Ph.D' ? 'selected' : '' }}>Ph.D</option>
                                    <option value="M.Phil"
                                        {{ $qualification['qualification'] == 'M.Phil' ? 'selected' : '' }}>M.Phil</option>
                                    <option value="Post-Graduation"
                                        {{ $qualification['qualification'] == 'Post-Graduation' ? 'selected' : '' }}>
                                        Post-Graduation</option>
                                    <option value="Graduation"
                                        {{ $qualification['qualification'] == 'Graduation' ? 'selected' : '' }}>Graduation
                                    </option>
                                    <option value="Higher Secondary"
                                        {{ $qualification['qualification'] == 'Higher Secondary' ? 'selected' : '' }}>
                                        Higher Secondary</option>
                                    <option value="Secondary"
                                        {{ $qualification['qualification'] == 'Secondary' ? 'selected' : '' }}>Secondary
                                    </option>
                                    <option value="NET/SLET/SET"
                                        {{ $qualification['qualification'] == 'NET/SLET/SET' ? 'selected' : '' }}>
                                        NET/SLET/SET</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Board/University</label>
                                <input type="text"
                                    name="educational_qualifications[{{ $index }}][board_university]"
                                    class="form-control"
                                    value="{{ old('educational_qualifications.' . $index . '.board_university', $qualification['board_university']) }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Year of Passing</label>
                                <input type="number"
                                    name="educational_qualifications[{{ $index }}][year_of_passing]"
                                    class="form-control"
                                    value="{{ old('educational_qualifications.' . $index . '.year_of_passing', $qualification['year_of_passing']) }}">
                            </div>
                            <div class="col-6">
                                <label class="form-label">Name of the school/college/University</label>
                                <input type="text" name="educational_qualifications[{{ $index }}][institution]"
                                    class="form-control"
                                    value="{{ old('educational_qualifications.' . $index . '.institution', $qualification['institution']) }}">
                            </div>
                            <div class="col-6">
                                <label class="form-label">Percentage/Grade</label>
                                <input type="text"
                                    name="educational_qualifications[{{ $index }}][percentage_grade]"
                                    class="form-control"
                                    value="{{ old('educational_qualifications.' . $index . '.percentage_grade', $qualification['percentage_grade']) }}">
                            </div>
                            <div class="col-12 text-end">
                                <button type="button" class="btn btn-danger btn-sm remove-qualification">Remove</button>
                            </div>
                        </div>
                    @endforeach
                </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 -->
                    @foreach ($professionalQualifications as $index => $qualification)
                        <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[{{ $index }}][name]"
                                    class="form-control"
                                    value="{{ old('professional_qualifications.' . $index . '.name', $qualification['name']) }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Board/University</label>
                                <input type="text"
                                    name="professional_qualifications[{{ $index }}][board_university]"
                                    class="form-control"
                                    value="{{ old('professional_qualifications.' . $index . '.board_university', $qualification['board_university']) }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Year of Passing</label>
                                <input type="number"
                                    name="professional_qualifications[{{ $index }}][year_of_passing]"
                                    class="form-control"
                                    value="{{ old('professional_qualifications.' . $index . '.year_of_passing', $qualification['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[{{ $index }}][institution]"
                                    class="form-control"
                                    value="{{ old('professional_qualifications.' . $index . '.institution', $qualification['institution']) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Percentage/Grade</label>
                                <input type="text"
                                    name="professional_qualifications[{{ $index }}][percentage_grade]"
                                    class="form-control"
                                    value="{{ old('professional_qualifications.' . $index . '.percentage_grade', $qualification['percentage_grade']) }}">
                            </div>
                        </div>
                    @endforeach
                </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...">{{ $employee->academic_specialization ?? '' }}</textarea>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Academic Specialization -->

            <!-- Fieldwork / Industrial Experience -->
            <h4 class="mt-4">Fieldwork / Industrial Experience</h4>
            <div id="fieldwork-experience-container">
                @foreach ($fieldworkExperience as $index => $experience)
                    <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[{{ $index }}][designation]"
                                        class="form-control"
                                        value="{{ old('fieldwork_experience.' . $index . '.designation', $experience['designation']) }}"
                                        placeholder="e.g. Intern, Manager">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Period</label>
                                    <input type="text" name="fieldwork_experience[{{ $index }}][period]"
                                        class="form-control"
                                        value="{{ old('fieldwork_experience.' . $index . '.period', $experience['period']) }}"
                                        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[{{ $index }}][address]" class="form-control" rows="2"
                                        placeholder="Address details...">{{ old('fieldwork_experience.' . $index . '.address', $experience['address']) }}</textarea>
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Reasons for Leaving</label>
                                    <textarea name="fieldwork_experience[{{ $index }}][reason]" class="form-control" rows="2"
                                        placeholder="Reasons for leaving...">{{ old('fieldwork_experience.' . $index . '.reason', $experience['reason']) }}</textarea>
                                </div>
                            </div>
                            <button type="button" class="btn btn-danger btn-sm float-end"
                                onclick="removeFieldworkExperience(this)">Remove</button>
                        </div>
                    </div>
                @endforeach
            </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...">{{ $employee->professional_experience }}</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...">{{ $employee->books_written }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Research Publications -->
            <h4 class="mt-4">Research Publications</h4>
            <div class="card">
                <div class="card-body">
                    @foreach ($researchPublications as $index => $publication)
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label">Title of the Paper</label>
                                <input type="text" name="research_publications[{{ $index }}][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[{{ $index }}][publication_name]"
                                    class="form-control" placeholder="Enter name of the publication"
                                    value="{{ $publication['publication_name'] ?? '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Publisher</label>
                                <input type="text" name="research_publications[{{ $index }}][publisher]"
                                    class="form-control" placeholder="Enter publisher name"
                                    value="{{ $publication['publisher'] ?? '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Year of Publication</label>
                                <input type="number" name="research_publications[{{ $index }}][year]"
                                    class="form-control" placeholder="Enter year of publication"
                                    value="{{ $publication['year'] ?? '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">ISSN/ISBN No.</label>
                                <input type="text" name="research_publications[{{ $index }}][issn_isbn]"
                                    class="form-control" placeholder="Enter ISSN/ISBN number"
                                    value="{{ $publication['issn_isbn'] ?? '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Vol. No.</label>
                                <input type="text" name="research_publications[{{ $index }}][volume]"
                                    class="form-control" placeholder="Enter volume number"
                                    value="{{ $publication['volume'] ?? '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Page No.</label>
                                <input type="text" name="research_publications[{{ $index }}][page]"
                                    class="form-control" placeholder="Enter page number(s)"
                                    value="{{ $publication['page'] ?? '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Journal Indexing</label>
                                <input type="text" name="research_publications[{{ $index }}][indexing]"
                                    class="form-control" placeholder="Enter journal indexing details"
                                    value="{{ $publication['indexing'] ?? '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Impact Factor</label>
                                <input type="text" name="research_publications[{{ $index }}][impact_factor]"
                                    class="form-control" placeholder="Enter impact factor"
                                    value="{{ $publication['impact_factor'] ?? '' }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Link of the Paper</label>
                                <input type="url" name="research_publications[{{ $index }}][link]"
                                    class="form-control" placeholder="Enter link to the paper"
                                    value="{{ $publication['link'] ?? '' }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Title of the book/chapters published</label>
                                <input type="text"
                                    name="research_publications[{{ $index }}][book_chapter_title]"
                                    class="form-control" placeholder="Enter title of the book/chapters published"
                                    value="{{ $publication['book_chapter_title'] ?? '' }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Title of the proceedings of the conference</label>
                                <input type="text"
                                    name="research_publications[{{ $index }}][conference_proceedings_title]"
                                    class="form-control" placeholder="Enter title of the conference proceedings"
                                    value="{{ $publication['conference_proceedings_title'] ?? '' }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Name of the conference</label>
                                <input type="text" name="research_publications[{{ $index }}][conference_name]"
                                    class="form-control" placeholder="Enter name of the conference"
                                    value="{{ $publication['conference_name'] ?? '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">National / International</label>
                                <input type="text"
                                    name="research_publications[{{ $index }}][national_international]"
                                    class="form-control"
                                    placeholder="Indicate if the conference was national or international"
                                    value="{{ $publication['national_international'] ?? '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Year of publication</label>
                                <input type="number" name="research_publications[{{ $index }}][publication_year]"
                                    class="form-control" placeholder="Enter year of publication"
                                    value="{{ $publication['publication_year'] ?? '' }}">
                            </div>
                        </div>
                    @endforeach
                </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">
                    @foreach ($publications as $key => $publication)
                        <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[{{ $key }}][isbn_proceeding]"
                                    class="form-control" placeholder="Enter ISBN number of the proceeding"
                                    value="{{ $publication['isbn_proceeding'] ?? '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Name of the publisher</label>
                                <input type="text" name="publications[{{ $key }}][publisher]"
                                    class="form-control" placeholder="Enter name of the publisher"
                                    value="{{ $publication['publisher'] ?? '' }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Link of the Paper</label>
                                <input type="url" name="publications[{{ $key }}][paper_link]"
                                    class="form-control" placeholder="Enter link to the paper"
                                    value="{{ $publication['paper_link'] ?? '' }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Title of the book/chapters published</label>
                                <input type="text" name="publications[{{ $key }}][book_chapter_title]"
                                    class="form-control" placeholder="Enter title of the book/chapters published"
                                    value="{{ $publication['book_chapter_title'] ?? '' }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Title of the paper</label>
                                <input type="text" name="publications[{{ $key }}][paper_title]"
                                    class="form-control" placeholder="Enter title of the paper"
                                    value="{{ $publication['paper_title'] ?? '' }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Title of the proceedings of the conference</label>
                                <input type="text"
                                    name="publications[{{ $key }}][conference_proceedings_title]"
                                    class="form-control" placeholder="Enter title of the conference proceedings"
                                    value="{{ $publication['conference_proceedings_title'] ?? '' }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Name of the conference</label>
                                <input type="text" name="publications[{{ $key }}][conference_name]"
                                    class="form-control" placeholder="Enter name of the conference"
                                    value="{{ $publication['conference_name'] ?? '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">National / International</label>
                                <input type="text" name="publications[{{ $key }}][national_international]"
                                    class="form-control"
                                    placeholder="Indicate if the conference was national or international"
                                    value="{{ $publication['national_international'] ?? '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Year of publication</label>
                                <input type="number" name="publications[{{ $key }}][publication_year]"
                                    class="form-control" placeholder="Enter year of publication"
                                    value="{{ $publication['publication_year'] ?? '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Name of the publisher</label>
                                <input type="text" name="publications[{{ $key }}][publisher_2]"
                                    class="form-control" placeholder="Enter name of the publisher"
                                    value="{{ $publication['publisher_2'] ?? '' }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Link of the Paper</label>
                                <input type="url" name="publications[{{ $key }}][paper_link_2]"
                                    class="form-control" placeholder="Enter link to the paper"
                                    value="{{ $publication['paper_link_2'] ?? '' }}">
                            </div>
                        </div>
                    @endforeach
                </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">
                        @foreach ($conferencePresentations as $key => $presentation)
                            <div class="row g-3">
                                <div class="col-12">
                                    <label class="form-label">Title of the Paper</label>
                                    <input type="text" name="conference_presentations[{{ $key }}][title]"
                                        class="form-control" placeholder="Enter title of the paper"
                                        value="{{ $presentation['title'] ?? '' }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Organization</label>
                                    <input type="text"
                                        name="conference_presentations[{{ $key }}][organization]"
                                        class="form-control" placeholder="Enter organization name"
                                        value="{{ $presentation['organization'] ?? '' }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Date</label>
                                    <input type="text" name="conference_presentations[{{ $key }}][date]"
                                        class="form-control" placeholder="Enter date of presentation"
                                        value="{{ $presentation['date'] ?? '' }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Mode</label>
                                    <select name="conference_presentations[{{ $key }}][mode]"
                                        class="form-select">
                                        <option value="">Select mode</option>
                                        <option value="offline" @selected($presentation['mode'] == 'offline')>Offline</option>
                                        <option value="online" @selected($presentation['mode'] == 'online')>Online</option>
                                    </select>
                                </div>
                            </div>
                            <button type="button" class="btn btn-danger btn-sm float-end"
                                onclick="removeConferencePresentation(this)">Remove</button>
                        @endforeach
                    </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">
                    @foreach ($workshopsConferences as $key => $workshop)
                        <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[{{ $key }}][name]"
                                        class="form-control" placeholder="Enter name of the event"
                                        value="{{ $workshop['name'] ?? '' }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Organization</label>
                                    <input type="text"
                                        name="workshops_conferences[{{ $key }}][organization]"
                                        class="form-control" placeholder="Enter organization name"
                                        value="{{ $workshop['organization'] ?? '' }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Date (From-to)</label>
                                    <input type="text" name="workshops_conferences[{{ $key }}][date]"
                                        class="form-control" placeholder="Enter date range"
                                        value="{{ $workshop['date'] ?? '' }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Mode</label>
                                    <select name="workshops_conferences[{{ $key }}][mode]" class="form-select">
                                        <option value="">Select mode</option>
                                        <option value="offline" @selected($workshop['mode'] == 'offline')>Offline</option>
                                        <option value="online" @selected($workshop['mode'] == 'online')>Online</option>
                                    </select>
                                </div>
                            </div>
                            <button type="button" class="btn btn-danger btn-sm float-end"
                                onclick="removeWorkshopConference(this)">Remove</button>
                        </div>
                    @endforeach
                </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">
                    @foreach ($participationPrograms as $key => $program)
                        <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[{{ $key }}][title]"
                                        class="form-control" placeholder="Enter program title"
                                        value="{{ $program['title'] ?? '' }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Organization</label>
                                    <input type="text"
                                        name="participation_programs[{{ $key }}][organization]"
                                        class="form-control" placeholder="Enter organization name"
                                        value="{{ $program['organization'] ?? '' }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Date (From-to)</label>
                                    <input type="text" name="participation_programs[{{ $key }}][date]"
                                        class="form-control" placeholder="Enter date range"
                                        value="{{ $program['date'] ?? '' }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Mode</label>
                                    <select name="participation_programs[{{ $key }}][mode]"
                                        class="form-select">
                                        <option value="">Select mode</option>
                                        <option value="offline" @selected($program['mode'] ?? '')>Offline</option>
                                        <option value="online" @selected($program['mode'] ?? '')>Online</option>
                                    </select>
                                </div>
                            </div>
                            <button type="button" class="btn btn-danger btn-sm float-end"
                                onclick="removeParticipationProgram(this)">Remove</button>
                        </div>
                    @endforeach
                </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">
                    @foreach ($awardsRecognitions as $key => $award)
                        <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[{{ $key }}][name]"
                                        class="form-control" placeholder="Enter name of the award/recognition"
                                        value="{{ $award['name'] }}">
                                </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[{{ $key }}][awarding_body]"
                                        class="form-control" placeholder="Enter name of the awarding body"
                                        value="{{ $award['awarding_body'] }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Purpose</label>
                                    <input type="text" name="awards_recognitions[{{ $key }}][purpose]"
                                        class="form-control" placeholder="Enter the purpose of the award"
                                        value="{{ $award['purpose'] }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Year of Award</label>
                                    <input type="text" name="awards_recognitions[{{ $key }}][year]"
                                        class="form-control" placeholder="Enter the year of the award"
                                        value="{{ $award['year'] }}">
                                </div>
                            </div>
                            <button type="button" class="btn btn-danger btn-sm float-end"
                                onclick="removeAwardRecognition(this)">Remove</button>
                        </div>
                    @endforeach
                </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">{{ $employee->life_memberships ?? '' }}</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">{{ $employee->extra_curricular ?? '' }}</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">{{ $employee->volunteer_experience ?? '' }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bank Details -->
            <h4 class="mt-4">Bank Details</h4>
            <div class="card">
                @foreach ($bank as $key => $bankDetail)
                    <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[{{ $key }}][name]" class="form-control"
                                    placeholder="Name of the Bank" value="{{ $bankDetail['name'] ?? '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Account Number</label>
                                <input type="text" name="bank[{{ $key }}][account_number]"
                                    class="form-control" placeholder="Account Number"
                                    value="{{ $bankDetail['account_number'] ?? '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">IFSC Code</label>
                                <input type="text" name="bank[{{ $key }}][ifsc_code]" class="form-control"
                                    placeholder="IFSC Code" value="{{ $bankDetail['ifsc_code'] ?? '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">MMID Code</label>
                                <input type="text" name="bank[{{ $key }}][mmid_code]" class="form-control"
                                    placeholder="MMID Code" value="{{ $bankDetail['mmid_code'] ?? '' }}">
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <!-- Bank Details -->

            <!-- Other Details -->
            <h4 class="mt-4">Other Details</h4>
            <div class="card">
                @foreach ($other as $key => $otherDetail)
                    <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="other[{{ $key }}][pan_card]" class="form-control"
                                    placeholder="PAN Card Number" value="{{ $otherDetail['pan_card'] ?? '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Voter Card Number</label>
                                <input type="text" name="other[{{ $key }}][voter_card]"
                                    class="form-control" placeholder="Voter Card Number"
                                    value="{{ $otherDetail['voter_card'] ?? '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">AADHAR Card Number</label>
                                <input type="text" name="other[{{ $key }}][aadhar_card]"
                                    class="form-control" placeholder="AADHAR Card Number"
                                    value="{{ $otherDetail['aadhar_card'] ?? '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Passport Number</label>
                                <input type="text" name="other[{{ $key }}][passport_number]"
                                    class="form-control" placeholder="Passport Number"
                                    value="{{ $otherDetail['passport_number'] ?? '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">PF Number</label>
                                <input type="text" name="other[{{ $key }}][pf_number]" class="form-control"
                                    placeholder="PF Number">
                            </div>
                        </div>
                    </div>
                @endforeach
            </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">
                @foreach ($references as $key => $reference)
                    <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[{{ $key }}][sl_no]"
                                    class="form-control" placeholder="Enter SI. No." value="{{ $reference['sl_no'] }}">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Name</label>
                                <input type="text" name="references[{{ $key }}][name]" class="form-control"
                                    placeholder="Enter Name" value="{{ $reference['name'] }}">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Contact No.</label>
                                <input type="text" name="references[{{ $key }}][contact_no]"
                                    class="form-control" placeholder="Enter Contact No."
                                    value="{{ $reference['contact_no'] }}">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">E-Mail Id</label>
                                <input type="email" name="references[{{ $key }}][email]"
                                    class="form-control" placeholder="Enter E-Mail Id"
                                    value="{{ $reference['email'] }}">
                            </div>
                            {{-- <div class="col-md-3">
                                <label class="form-label">SI. No.</label>
                                <input type="text" name="references[{{ $key }}][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[{{ $key }}][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[{{ $key }}][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[{{ $key }}][email]" class="form-control"
                                    placeholder="Enter E-Mail Id">
                            </div> --}}
                        </div>
                    </div>
                @endforeach
            </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>Edit 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 = {{ count($educationalQualifications) ?? 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 = {{ count($fieldworkExperience) ?? 0 }};

            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 = {{ count($conferencePresentations) ?? 0 }};

            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 = {{ count($workshopsConferences) ?? 0 }};

            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 = {{ count($participationPrograms) ?? 0 }};

            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 = {{ count($awardsRecognitions) ?? 0 }};

            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