@extends('admin/institute-management/institute-profile/index',['withoutCard' => true])

@section('main-content-tab')
    <div class="">
        <div class="card mb-6">
            <div class="card-body">

                <div class="d-flex justify-content-between align-items-center header-div" id="header-div">
                    <div class="pe-5">
                        <h1 class="fs-18px fw-500 mb-0">Faculty</h1>
                        <p class="fs-14 text-cs-gray mb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur delectus fugit necessitatibus numquam quod voluptates.</p>
                        {{--                    <a href="{{route('institute.profile.teacher-management.create', $slug)}}" class="btn btn--primary rounded-btn"  style="background: rgba(117,117,117,0.1);">--}}
                        {{--                        <i class="fa fa-plus"></i> Add Faculty--}}
                        {{--                    </a>--}}

                        <button type="button" class="btn btn--primary rounded-btn" style="background: rgba(117,117,117,0.1);" data-bs-toggle="modal" data-bs-target="#addModal" id="faculty-modal"><i class="las la-pen"></i> Add Faculty</button>
                    </div>
                    <button type="button" class="btn btn-icon btn-primary btn-lg rounded-circle"><i class="las la-play" style="font-size: 25px"></i></button>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h1 class="fs-18px fw-500 mb-0">Faculty</h1>
                {{--                <a href="{{route('institute.profile.teacher-management.create', $slug)}}" class="btn btn--primary rounded-btn" style="background: rgba(117,117,117,0.1);">--}}
                {{--                    <i class="las la-pen"></i> Add Faculty--}}
                {{--                </a>--}}
                <button type="button" class="btn btn--primary rounded-btn" style="background: rgba(117,117,117,0.1);" data-bs-toggle="modal" data-bs-target="#addModal" id="faculty-modal"><i class="las la-pen"></i> Add Faculty</button>

            </div>
            <div class="card-body faculty-table-card">
                <table class="table table-row-bordered data-table ">
                    <thead>
                    <tr>
                        <th class="text-center">SL.</th>
                        <th class="text-center">Name</th>
                        <th class="text-center">Designation</th>
                        <th class="text-center">Image</th>
                        <th class="text-center">View</th>
                        <th class="text-center">Status</th>
                        <th class="text-center">Actions</th>
                    </tr>
                    </thead>
                    <tbody class="text-gray-600 fw-bold">

                    </tbody>
                </table>
            </div>
        </div>
        <div class="modal fade custom-modal" id="addModal">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">
                    <div class="modal-header bg--primary text-white">
                        <h5 class="modal-title">Add Faculty Member</h5>
                        <button type="button" class="btn btn-icon btn-sm btn-secondary modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
                            <i class="las la-times"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="{{route('institute.profile.teacher-management.store', $slug)}}" class="form mb-15" name="institute" method="POST" id="kt_contact_form" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" value="{{$slug}}" name="slug_info"/>
                            <div class="px-lg-10 px-0">
                                <div class="row g-10">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="name">Member Name</label>
                                            <input type="text" class="form-control form-control-solid" name="name" id="name" placeholder="Enter Name">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="name">Employee ID</label>
                                            <input type="number" name="employee_id" class="form-control form-control-solid" id="name" placeholder="Enter ID">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="name">Email</label>
                                            <input type="text" name="email" class="form-control form-control-solid" id="name" placeholder="Enter Email">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="name">Phone</label>
                                            <input type="text" name="phone_number" class="form-control form-control-solid" id="name" placeholder="Enter Phone">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="name">Department</label>
                                            {{--                                        <input type="text" class="form-control form-control-solid" id="name" placeholder="Enter Department">--}}
                                            <select class="form-select form-select-solid" data-control="select2" id="department_id" data-placeholder="Select Department" name="department">
                                                <option selected disabled>Select Department</option>
                                                @foreach($departments as $department)
                                                    <option value="{{$department->id}}"> {{$department->title}}</option>
                                                    {{-- <option {{$organization->id == $user->instituteBasic->approved_by ? 'selected' : ''}} value="{{$department->id}}"> {{$department->title}}</option> --}}
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="name">Designation</label>
                                            <input type="text" name="designation" class="form-control form-control-solid" id="name" placeholder="Enter Designation">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="name">Faculty Name</label>
                                            <input type="text" name="faculty" class="form-control form-control-solid" id="name" placeholder="Enter Faculty Name">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="name">N/A</label>
                                            <input type="text" class="form-control form-control-solid" id="n_a" name="n_a" placeholder="Enter N/A">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="name">Photo</label>
                                            <div class="w-100 rounded form-solid-bg mb-2 py-6 d-flex justify-content-center">
                                                <div class="image-input image-input-empty image-input-outline image-input-placeholder" data-kt-image-input="true">
                                                    <!--begin::Preview existing avatar-->
                                                    <div class="image-input-wrapper w-125px h-125px upload-bg" style="background-image: url('{{ asset($institute_about['video_thumbnail'] ?? '') }}');"></div>
                                                    <!--end::Preview existing avatar-->
                                                    <!--begin::Label-->
                                                    <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" title="Change avatar">
                                                        <i class="bi bi-pencil-fill fs-7"></i>
                                                        <!--begin::Inputs-->
                                                        <input type="file" name="avatar" accept=".png, .jpg, .jpeg"/>
                                                        <input type="hidden" name="avatar_remove"/>
                                                        <!--end::Inputs-->
                                                    </label>
                                                    <!--end::Label-->
                                                    <!--begin::Cancel-->
                                                    <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="Cancel avatar">
													<i class="bi bi-x fs-2"></i>
												</span>
                                                    <!--end::Cancel-->
                                                    <!--begin::Remove-->
                                                    <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="Remove avatar">
													<i class="bi bi-x fs-2"></i>
												</span>
                                                    <!--end::Remove-->
                                                </div>
                                            </div>
                                            <span style="font-size: 12px;color: red;">Suggested Image ratio: 60 x 60 | max-size: 50 KB</span>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="name">Personal Information</label>
                                            <textarea name="personal_information" class="form-control form-control-solid" id="exampleTextarea" rows="5" placeholder="Personal Information"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="name">Academic Qualification</label>
                                            <textarea name="academic_qualification" class="form-control form-control-solid" id="exampleTextarea" rows="5" placeholder="Academic Qualification"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="name">Training Experience</label>
                                            <textarea name="training_experience" class="form-control form-control-solid" id="exampleTextarea" rows="5" placeholder="Training Experience"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="name">Publication</label>
                                            <textarea name="publication" class="form-control form-control-solid" id="exampleTextarea" rows="5" placeholder="Publication"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="name">Research</label>
                                            <textarea name="research" class="form-control form-control-solid" id="exampleTextarea" rows="5" placeholder="Research"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="name">Award & Scholarship</label>
                                            <textarea name="award" class="form-control form-control-solid" id="exampleTextarea" rows="5" placeholder="Award & Scholarship"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="name">Membership</label>
                                            <textarea name="membership" class="form-control form-control-solid" id="exampleTextarea" rows="5" placeholder="Membership"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="name">Previous Employment</label>
                                            <textarea name="previous_employment" class="form-control form-control-solid" id="exampleTextarea" rows="5" placeholder="Previous Employment"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <label class="form-check-label mb-1" for="flexSwitchDefault">
                                            Status
                                        </label>
                                        <div class="form-check form-switch form-check-custom form-check-primary form-check-solid">
                                            {{--                                        <input class="form-check-input" type="checkbox" value="" id="flexSwitchDefault"/>--}}
                                            <input class="form-check-input radio-btn" name="status" type="checkbox" value="1" checked="checked"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-center mt-10">
                                    <button type="submit" class="btn btn-primary btn--primary rounded-btn">Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade custom-modal" id="view-modal">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">
                    <div class="modal-header bg--primary text-white">
                        <h5 class="modal-title">View Faculty Member</h5>
                        <button type="button" class="btn btn-icon btn-sm btn-secondary modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
                            <i class="las la-times"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="px-lg-10 px-0">
                            <div class="row g-10">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="name">Member Name</label>
                                        <input type="text" class="form-control form-control-solid" disabled name="name" id="viewname" placeholder="Enter Name">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="name">Employee ID</label>
                                        <input type="number" name="employee_id" disabled class="form-control form-control-solid" id="viewemployee_id" placeholder="Enter ID">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="name">Email</label>
                                        <input type="text" name="email" disabled class="form-control form-control-solid" id="viewemail" placeholder="Enter Email">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="name">Phone</label>
                                        <input type="text" name="phone_number" disabled class="form-control form-control-solid" id="viewphone_number" placeholder="Enter Phone">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="name">Department</label>
                                        {{--                                        <input type="text" class="form-control form-control-solid" id="name" placeholder="Enter Department">--}}
                                        <select class="form-select form-select-solid" disabled data-control="select2" id="view_department_id" data-placeholder="Select Department" name="department">
                                            <option selected disabled>Select Department</option>
                                            @foreach($departments as $department)
                                                <option value="{{$department->id}}"> {{$department->title}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="name">Designation</label>
                                        <input type="text" name="designation" disabled class="form-control form-control-solid" id="viewdesignation" placeholder="Enter Designation">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="name">Faculty Name</label>
                                        <input type="text" name="faculty" disabled class="form-control form-control-solid" id="viewfaculty" placeholder="Enter Faculty Name">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="name">N/A</label>
                                        <input type="text" disabled class="form-control form-control-solid" id="viewn_a" name="n_a" placeholder="Enter N/A">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="name">Photo</label>
                                        <div class="w-100 rounded form-solid-bg mb-2 py-6 d-flex justify-content-center">
                                            <div class="image-input image-input-empty image-input-outline image-input-placeholder" data-kt-image-input="true">
                                                <!--begin::Preview existing avatar-->
                                                <div class="image-input-wrapper w-125px h-125px upload-bg" id="viewavatar"></div>
                                                <!--end::Preview existing avatar-->
                                                <!--begin::Label-->
                                                <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" title="Change avatar">
                                                    <i class="bi bi-pencil-fill fs-7"></i>
                                                    <!--begin::Inputs-->
                                                    <input type="file" name="avatar" accept=".png, .jpg, .jpeg"/>
                                                    <input type="hidden" name="avatar_remove"/>
                                                    <!--end::Inputs-->
                                                </label>
                                                <!--end::Label-->
                                                <!--begin::Cancel-->
                                                <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="Cancel avatar">
													<i class="bi bi-x fs-2"></i>
												</span>
                                                <!--end::Cancel-->
                                                <!--begin::Remove-->
                                                <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="Remove avatar">
													<i class="bi bi-x fs-2"></i>
												</span>
                                                <!--end::Remove-->
                                            </div>
                                        </div>
                                        <span style="font-size: 12px;color: red;">Suggested Image ratio: 60 x 60 | max-size: 50 KB</span>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="name">Personal Information</label>
                                        <textarea name="personal_information" disabled class="form-control form-control-solid" id="viewpersonal_information" rows="5" placeholder="Personal Information"></textarea>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="name">Academic Qualification</label>
                                        <textarea name="academic_qualification" disabled class="form-control form-control-solid" id="viewacademic_qualification" rows="5" placeholder="Academic Qualification"></textarea>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="name">Training Experience</label>
                                        <textarea name="training_experience" disabled class="form-control form-control-solid" id="viewtraining_experience" rows="5" placeholder="Training Experience"></textarea>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="name">Publication</label>
                                        <textarea name="publication" disabled class="form-control form-control-solid" id="viewpublication" rows="5" placeholder="Publication"></textarea>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="name">Research</label>
                                        <textarea name="research" disabled class="form-control form-control-solid" id="viewresearch" rows="5" placeholder="Research"></textarea>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="name">Award & Scholarship</label>
                                        <textarea name="award" disabled class="form-control form-control-solid" id="viewaward" rows="5" placeholder="Award & Scholarship"></textarea>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="name">Membership</label>
                                        <textarea name="membership" disabled class="form-control form-control-solid" id="viewmembership" rows="5" placeholder="Membership"></textarea>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="name">Previous Employment</label>
                                        <textarea name="previous_employment" disabled class="form-control form-control-solid" id="viewprevious_employment" rows="5" placeholder="Previous Employment"></textarea>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <label class="form-check-label mb-1" for="flexSwitchDefault">
                                        Status
                                    </label>
                                    <div class="form-check form-switch form-check-custom form-check-primary form-check-solid">
                                        {{--                                        <input class="form-check-input" type="checkbox" value="" id="flexSwitchDefault"/>--}}
                                        <input class="form-check-input radio-btn" disabled id="viewstatus" name="status" type="checkbox" value="1" checked="checked"/>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade custom-modal" id="editModal">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">
                    <div class="modal-header bg--primary text-white">
                        <h5 class="modal-title">Edit Faculty Member</h5>
                        <button type="button" class="btn btn-icon btn-sm btn-secondary modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
                            <i class="las la-times"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="#" class="form mb-15" name="institute" method="POST" id="edit-form" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="avatar_data" value="">
                            <input type="hidden" value="{{$slug}}" name="slug_info"/>
                            <input type="hidden" name="id"/>
                            <div class="px-lg-10 px-0">
                                <div class="row g-10">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="name">Member Name</label>
                                            <input type="text" class="form-control form-control-solid" name="name" id="editname" placeholder="Enter Name">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="name">Employee ID</label>
                                            <input type="number" name="employee_id" class="form-control form-control-solid" id="editemployee_id" placeholder="Enter ID">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="name">Email</label>
                                            <input type="text" name="email" class="form-control form-control-solid" id="editemail" placeholder="Enter Email">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="name">Phone</label>
                                            <input type="text" name="phone_number" class="form-control form-control-solid" id="editphone_number" placeholder="Enter Phone">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="name">Department</label>
                                            {{--                                        <input type="text" class="form-control form-control-solid" id="name" placeholder="Enter Department">--}}
                                            <select class="form-select form-select-solid" data-control="select2" id="editdepartment_id" data-placeholder="Select Department" name="department">
                                                <option selected disabled>Select Department</option>
                                                @foreach($departments as $department)
                                                    <option value="{{$department->id}}"> {{$department->title}}</option>
                                                    {{-- <option {{$organization->id == $user->instituteBasic->approved_by ? 'selected' : ''}} value="{{$department->id}}"> {{$department->title}}</option> --}}
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="name">Designation</label>
                                            <input type="text" name="designation" class="form-control form-control-solid" id="editdesignation" placeholder="Enter Designation">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="name">Faculty Name</label>
                                            <input type="text" name="faculty" class="form-control form-control-solid" id="editfaculty" placeholder="Enter Faculty Name">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="name">N/A</label>
                                            <input type="text" class="form-control form-control-solid" id="editn_a" name="n_a" placeholder="Enter N/A">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="name">Photo</label>
                                            <div class="w-100 rounded form-solid-bg mb-2 py-6 d-flex justify-content-center">
                                                <div class="image-input image-input-empty image-input-outline image-input-placeholder" data-kt-image-input="true">
                                                    <!--begin::Preview existing avatar-->
                                                    <div class="image-input-wrapper w-125px h-125px upload-bg" id="editavatar"></div>
                                                    <!--end::Preview existing avatar-->
                                                    <!--begin::Label-->
                                                    <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" title="Change avatar">
                                                        <i class="bi bi-pencil-fill fs-7"></i>
                                                        <!--begin::Inputs-->
                                                        <input type="file" name="avatar" accept=".png, .jpg, .jpeg"/>
                                                        <input type="hidden" name="avatar_remove"/>
                                                        <!--end::Inputs-->
                                                    </label>
                                                    <!--end::Label-->
                                                    <!--begin::Cancel-->
                                                    <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="Cancel avatar">
													<i class="bi bi-x fs-2"></i>
												</span>
                                                    <!--end::Cancel-->
                                                    <!--begin::Remove-->
                                                    <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="Remove avatar">
													<i class="bi bi-x fs-2"></i>
												</span>
                                                    <!--end::Remove-->
                                                </div>
                                            </div>
                                            <span style="font-size: 12px;color: red;">Suggested Image ratio: 60 x 60 | max-size: 50 KB</span>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="name">Personal Information</label>
                                            <textarea name="personal_information" class="form-control form-control-solid" id="editpersonal_information" rows="5" placeholder="Personal Information"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="name">Academic Qualification</label>
                                            <textarea name="academic_qualification" class="form-control form-control-solid" id="editacademic_qualification" rows="5" placeholder="Academic Qualification"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="name">Training Experience</label>
                                            <textarea name="training_experience" class="form-control form-control-solid" id="edittraining_experience" rows="5" placeholder="Training Experience"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="name">Publication</label>
                                            <textarea name="publication" class="form-control form-control-solid" id="editpublication" rows="5" placeholder="Publication"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="name">Research</label>
                                            <textarea name="research" class="form-control form-control-solid" id="editresearch" rows="5" placeholder="Research"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="name">Award & Scholarship</label>
                                            <textarea name="award" class="form-control form-control-solid" id="editaward" rows="5" placeholder="Award & Scholarship"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="name">Membership</label>
                                            <textarea name="membership" class="form-control form-control-solid" id="editmembership" rows="5" placeholder="Membership"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="name">Previous Employment</label>
                                            <textarea name="previous_employment" class="form-control form-control-solid" id="editprevious_employment" rows="5" placeholder="Previous Employment"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <label class="form-check-label mb-1" for="flexSwitchDefault">
                                            Status
                                        </label>
                                        <div class="form-check form-switch form-check-custom form-check-primary form-check-solid">
                                            {{--                                        <input class="form-check-input" type="checkbox" value="" id="flexSwitchDefault"/>--}}
                                            <input class="form-check-input radio-btn" id="statusedit" name="status" type="checkbox" value="1" checked="checked"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-center mt-10">
                                    <button type="submit" class="btn btn-primary btn--primary rounded-btn">Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@section('extra-extra-css')
    <link href="{{ asset('css/buttons.dataTables.min.css') }}" rel='stylesheet' type='text/css'>
    <style>
        a.badge.text-capitalize:hover {
            color: #fff;
        }
    </style>
@endsection

@section('extra-extra-script')
    <script src="{{asset('js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('js/dataTables.bootstrap4.min.js')}}"></script>
    <script src="{{asset('js/dataTables.buttons.min.js')}}"></script>
    <script src="{{asset('js/jszip.min.js')}}"></script>
    <script src="{{asset('js/pdfmake.min.js')}}"></script>
    <script src="{{asset('js/vfs_fonts.js')}}"></script>
    <script src="{{asset('js/buttons.html5.min.js')}}"></script>
    <script>
        $('#edit-form').submit(function (event) {
            event.preventDefault();
            var formData = new FormData(this);
            var slug = $('input[name="slug_info"]').val();
            var avatar_data = $('input[name="avatar_data"]').val();


            var id = $('input[name="id"]').val();
            var actionUrl = "{{ route('institute.profile.teacher-management.update', ['slug' => ':slug', 'id' => ':id','avatar_data'=>':avatar_data']) }}";
            actionUrl = actionUrl.replace(':slug', slug).replace(':id', id);
            $.ajax({
                url: actionUrl,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    console.log(response);
                    location.reload();
                    $('#editModal').modal('hide');
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        });
    </script>
    <script>
        function loadView(id) {
            $.ajax({
                url: '{{ url('get-teacher') }}?id=' + id,
                method: 'GET',
                success: function (returnData) {
                    $("#viewname").val(returnData.name);
                    $("#viewemployee_id").val(returnData.employee_id);
                    $("#viewemail").val(returnData.email);
                    $("#viewphone_number").val(returnData.phone_number);
                    $("#viewdesignation").val(returnData.designation);
                    $("#viewfaculty").val(returnData.faculty);
                    $("#viewn_a").val(returnData.n_a);
                    $("#viewpersonal_information").text(returnData.personal_information);
                    $("#viewacademic_qualification").text(returnData.academic_qualification);
                    $("#viewtraining_experience").text(returnData.training_experience);
                    $("#viewpublication").text(returnData.publication);
                    $("#viewmembership").text(returnData.membership);
                    $("#viewresearch").text(returnData.research);
                    $("#viewaward").text(returnData.award);
                    $("#viewprevious_employment").text(returnData.previous_employment);
                    $('#view_department_id option').prop('selected', true);
                    $('#view_department_id').val(returnData.department);
                    $('#view_department_id').trigger('change');
                    if (returnData.status == 1) {
                        $('#viewstatus').prop('checked', true);
                    } else {
                        $('#viewstatus').prop('checked', false);
                    }

                    var avatarUrl = returnData.avatar;
                    if (avatarUrl) {
                        var assetAvatarUrl = '{{ asset('') }}' + avatarUrl;
                        $('#viewavatar').css('background-image', 'url(' + assetAvatarUrl + ')');
                    } else {
                        $('#viewavatar').css('background-image', 'none');
                    }


                    $('#view-modal').modal('show');
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        }
    </script>
    <script>
        function loadEdit(id) {
            $("input[name='id']").val(id);
            $.ajax({
                url: '{{ url('get-teacher') }}?id=' + id,
                method: 'GET',
                success: function (returnData) {
                    $("#editname").val(returnData.name);
                    $("#editemployee_id").val(returnData.employee_id);
                    $("#editemail").val(returnData.email);
                    $("#editphone_number").val(returnData.phone_number);
                    $("#editdesignation").val(returnData.designation);
                    $("#editn_a").val(returnData.n_a);
                    $("#editfaculty").val(returnData.faculty);
                    $("#editpersonal_information").text(returnData.personal_information);
                    $("#editacademic_qualification").text(returnData.academic_qualification);
                    $("#edittraining_experience").text(returnData.training_experience);
                    $("#editpublication").text(returnData.publication);
                    $("#editmembership").text(returnData.membership);
                    $("#editresearch").text(returnData.research);
                    $("#editaward").text(returnData.award);
                    $("#editprevious_employment").text(returnData.previous_employment);
                    $('#editdepartment_id option').prop('selected', true);
                    $('#editdepartment_id').val(returnData.department);
                    $('#editdepartment_id').trigger('change');
                    if (returnData.status == 1) {
                        $('#statusedit').prop('checked', true);
                    } else {
                        $('#statusedit').prop('checked', false);
                    }

                    var avatarUrl = returnData.avatar;
                    if (avatarUrl) {
                        var assetAvatarUrl = '{{ asset('') }}' + avatarUrl;
                        $('#editavatar').css('background-image', 'url(' + assetAvatarUrl + ')');
                    } else {
                        $('#editavatar').css('background-image', 'none');
                    }

                    if (avatarUrl) {
                        $("input[name='avatar_data']").val(avatarUrl);
                    }

                    $('#editModal').modal('show');
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        }
    </script>
    <script type="text/javascript">
        function isValidURL(url) {
            try {
                new URL(url);
                return true;
            } catch (error) {
                return false;
            }
        }
        $(function () {
            var table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                aaSorting: [],
                lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                ajax: "{{ route('institute.profile.teacher-management', $slug) }}",
                dom: 'Blfrtip',
                buttons: [
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: [0, 1, 2, 4, 5, 6] // Column index which needs to export
                        }
                    },
                    {
                        extend: 'csv',
                        exportOptions: {
                            columns: [0, 1, 2, 4, 5, 6] // Column index which needs to export
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: [0, 1, 2, 4, 5, 6] // Column index which needs to export
                        }
                    }
                ],
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                    {data: 'name', name: 'name'},
                    {data: 'designation', name: 'designation'},
                    {
                        data: 'avatar', name: 'avatar',
                        render: function (data, type, full, meta) {
                            if (data) {
                                var imageUrl = "<img class='rounded-circle' src=\"" + data + "\" height=\"40\"/>";
                                if(!isValidURL(data)){
                                    imageUrl = "<img class='rounded-circle' src=\"" + "{{URL::asset('/')}}" + data + "\" height=\"40\"/>";
                                }
                                return imageUrl;
                            } else {
                                return '';
                            }
                        }
                    },
                    {data: 'view', name: 'view'},
                    {data: 'status', name: 'status'},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
                initComplete: function () {
                    var hasData = table.rows().count() > 0;
                    console.log(hasData);
                    if (hasData) {
                        $('#header-div').hide();
                    } else {
                        $('#header-div').show();
                    }
                }
            });

        });
    </script>
    <script>
        $(document).ready(function(){
            $('.institute-profile-tab-teacher-management').addClass('active');
        });
    </script>
@endsection