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

@section('main-content-tab')
    <div class="card mb-6">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div class="pe-5">
                    <h1 class="fs-18px fw-500 mb-0">Contact Person</h1>
                    <p class="fs-14 text-cs-gray mb-2">The information required to contact someone, such as an address or telephone number.</p>
                    {{--                    <a href="{{route('institute.profile.teacher-management.create', $slug)}}" class="btn btn--primary rounded-btn text-cs-gray"  style="background: rgba(117,117,117,0.1);">--}}
                    {{--                        <i class="fa fa-pen"></i> Add Contact Person--}}
                    {{--                    </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 Contact Person</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">Contact Person</h1>
            {{--        <a href="{{route('institute.profile.contact-person.create', $slug)}}" class="btn btn--primary rounded-btn" style="background: rgba(117,117,117,0.1);">--}}
            {{--            <i class="fa fa-plus"></i> Add Contact Person--}}
            {{--        </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 Contact Person</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">Phone Number</th>--}}
{{--                    <th class="text-center">Email</th>--}}
{{--                    <th class="text-center">Is Primary</th>--}}
{{--                    <th class="text-center">Is Academic</th>--}}
{{--                    <th class="text-center">Is Billing</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>
    {{--<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".modal" id="faculty-modal">Open Modal</button>--}}
    <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 Contact Person</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.contact-person.store', $slug)}}" class="form mb-15" name="institute" method="POST" id="kt_contact_form" enctype="multipart/form-data">
                        @csrf
                    <div class="px-lg-10 px-0">
                        <div class="row g-10">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="name" class="required">Name</label>
                                    <input type="text" class="form-control form-control-solid" name="name" placeholder="Enter Name" required>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="designation">Designation</label>
                                    <input type="text" class="form-control form-control-solid" name="designation" placeholder="Enter Designation">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="phone_number" class="required">Phone Number</label>
                                    <input type="text" class="form-control form-control-solid"  name="phone_number" placeholder="Enter Phone Number" required>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="alternative_phone_number">Alternative Phone Number</label>
                                    <input type="text" class="form-control form-control-solid" name="alternative_phone_number" placeholder="Enter Alternative Phone Number">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="email">Email</label>
                                    <input type="text" class="form-control form-control-solid" name="email" placeholder="Enter Email">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="name">Alternative Email</label>
                                    <input type="text" class="form-control form-control-solid" name="alternative_email" placeholder="Enter Alternative Email">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="faculty_id">Faculty Name</label>
                                    <select class="form-select form-select-solid" data-control="select2" data-placeholder="Select Faculty" name="faculty_id">
                                        <option selected disabled>Select Faculty</option>
                                        @foreach($faculties as $faculty)
                                            <option value="{{$faculty->id}}"> {{$faculty->name}}</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">N/A</label>
                                    <input type="text" class="form-control form-control-solid" 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="row g-5">
                                    <div class="col-xl-3 col-md-6">
                                        <label class="form-check-label mb-1" for="flexSwitchDefault">
                                            Is Primary
                                        </label>
                                        <div class="form-check form-switch form-check-custom form-check-primary form-check-solid">
                                            <input class="form-check-input radio-btn" name="is_primary" type="checkbox" value="1" checked="checked"/>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-md-6">
                                        <label class="form-check-label mb-1" for="flexSwitchDefault">
                                            Is Academic
                                        </label>
                                        <div class="form-check form-switch form-check-custom form-check-primary form-check-solid">
                                            <input class="form-check-input radio-btn" name="is_academic" type="checkbox" value="1" checked="checked"/>

                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-md-6">
                                        <label class="form-check-label mb-1" for="flexSwitchDefault">
                                            Is Billing
                                        </label>
                                        <div class="form-check form-switch form-check-custom form-check-primary form-check-solid">
                                            <input class="form-check-input radio-btn" name="is_billing" type="checkbox" value="1" checked="checked"/>

                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-md-6">
                                        <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 radio-btn" name="status" type="checkbox" value="1" checked="checked"/>

                                        </div>
                                    </div>
                                </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="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 Contact Person</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">Name</label>
                                        <input type="text" class="form-control form-control-solid" id="editname" name="name" placeholder="Enter Name">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="designation">Designation</label>
                                        <input type="text" class="form-control form-control-solid" id="editdesignation" name="designation" placeholder="Enter Designation">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="phone_number">Phone Number</label>
                                        <input type="text" class="form-control form-control-solid" name="phone_number" id="phone_number" placeholder="Enter Phone Number">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="alternative_phone_number">Alternative Phone Number</label>
                                        <input type="text" class="form-control form-control-solid" id="editalternative_phone_number" name="alternative_phone_number" placeholder="Enter Alternative Phone Number">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="email">Email</label>
                                        <input type="text" class="form-control form-control-solid" id="editemail" name="email" placeholder="Enter Email">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="alternative_email">Alternative Email</label>
                                        <input type="text" class="form-control form-control-solid" id="editalternative_email" name="alternative_email" placeholder="Enter Alternative Email">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="faculty_id">Faculty Name</label>
                                        <select class="form-select form-select-solid" data-control="select2" id="editfaculty_id" data-placeholder="Select Faculty" name="faculty_id">
                                            <option selected disabled>Select Faculty</option>
                                            @foreach($faculties as $faculty)
                                                <option value="{{$faculty->id}}"> {{$faculty->name}}</option>
                                                {{-- <option {{$organization->id == $user->instituteBasic->approved_by ? 'selected' : ''}} value="{{$department->id}}"> {{$department->title}}</option> --}}
                                            @endforeach
                                        </select>
                                        {{--                                <input type="text" 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="n_a">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="avatar">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="row g-5">
                                        <div class="col-xl-3 col-md-6">
                                            <label class="form-check-label mb-1" for="flexSwitchDefault">
                                                Is Primary
                                            </label>
                                            <div class="form-check form-switch form-check-custom form-check-primary form-check-solid">
                                                <input class="form-check-input radio-btn" id="is_primary_edit" name="is_primary" type="checkbox" value="1" checked="checked"/>
                                                {{--                                        <input class="form-check-input" type="checkbox" value="" id="flexSwitchDefault"/>--}}
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-md-6">
                                            <label class="form-check-label mb-1" for="flexSwitchDefault">
                                                Is Academic
                                            </label>
                                            <div class="form-check form-switch form-check-custom form-check-primary form-check-solid">
                                                <input class="form-check-input" type="checkbox" name="is_academic" id="is_academic_edit" value="1" checked="checked"/>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-md-6">
                                            <label class="form-check-label mb-1" for="flexSwitchDefault">
                                                Is Billing
                                            </label>
                                            <div class="form-check form-switch form-check-custom form-check-primary form-check-solid">
                                                <input class="form-check-input" type="checkbox" name="is_billing" id="is_billing_edit" value="1" checked="checked"/>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-md-6">
                                            <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" name="status" id="status_edit" value="1" checked="checked"/>
                                            </div>
                                        </div>
                                    </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="viewModal">
        <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 Contact Person</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">
                        <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">Name</label>
                                        <input type="text" disabled class="form-control form-control-solid" id="viewname" name="name" placeholder="Enter Name">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="designation">Designation</label>
                                        <input type="text" disabled class="form-control form-control-solid" id="viewdesignation" name="designation" placeholder="Enter Designation">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="phone_number">Phone Number</label>
                                        <input type="text" disabled class="form-control form-control-solid" name="viewphone_number" id="phone_number" placeholder="Enter Phone Number">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="alternative_phone_number">Alternative Phone Number</label>
                                        <input type="text" disabled class="form-control form-control-solid" id="viewalternative_phone_number" name="alternative_phone_number" placeholder="Enter Alternative Phone Number">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="email">Email</label>
                                        <input type="text" disabled class="form-control form-control-solid" id="viewemail" name="email" placeholder="Enter Email">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="alternative_email">Alternative Email</label>
                                        <input type="text" disabled class="form-control form-control-solid" id="viewalternative_email" name="alternative_email" placeholder="Enter Alternative Email">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="faculty_id">Faculty Name</label>
                                        <select disabled class="form-select form-select-solid" data-control="select2" id="view_faculty_id" data-placeholder="Select Faculty" name="faculty_id">
                                            <option selected disabled>Select Faculty</option>
                                            @foreach($faculties as $faculty)
                                                <option value="{{$faculty->id}}"> {{$faculty->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="n_a">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="avatar">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="row g-5">
                                        <div class="col-xl-3 col-md-6">
                                            <label class="form-check-label mb-1" for="flexSwitchDefault">
                                                Is Primary
                                            </label>
                                            <div class="form-check form-switch form-check-custom form-check-primary form-check-solid">
                                                <input disabled class="form-check-input radio-btn" id="is_primary_view" name="is_primary" type="checkbox" value="1" checked="checked"/>
                                                {{--                                        <input class="form-check-input" type="checkbox" value="" id="flexSwitchDefault"/>--}}
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-md-6">
                                            <label class="form-check-label mb-1" for="flexSwitchDefault">
                                                Is Academic
                                            </label>
                                            <div class="form-check form-switch form-check-custom form-check-primary form-check-solid">
                                                <input disabled class="form-check-input" type="checkbox" name="is_academic" value="" id="is_academic_view"/>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-md-6">
                                            <label class="form-check-label mb-1" for="flexSwitchDefault">
                                                Is Billing
                                            </label>
                                            <div class="form-check form-switch form-check-custom form-check-primary form-check-solid">
                                                <input disabled class="form-check-input" type="checkbox" value="" name="is_billing" id="is_billing_view"/>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-md-6">
                                            <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 disabled class="form-check-input" type="checkbox" value="" name="status" id="status_view"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </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();
            console.log('slug', slug)
            console.log('id', id)
            var actionUrl = "{{ route('institute.profile.contact-person.update', ['slug' => ':slug', 'id' => ':id']) }}";
            actionUrl = actionUrl.replace(':slug', slug).replace(':id', id);
            console.log('actionUrl', actionUrl)
            $.ajax({
                url: actionUrl,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    location.reload();
                    $('#editModal').modal('hide');
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        });
    </script>
    <script>
        function loadEdit(id) {
            $("input[name='id']").val(id);
            var form = document.getElementById('kt_contact_form');
            $.ajax({
                url: '{{ url('get-contact-person') }}?id=' + id,
                method: 'GET',
                success: function (returnData) {
                    $("#editname").val(returnData.name);
                    $("#editemail").val(returnData.email);
                    $("#phone_number").val(returnData.phone_number);
                    $("#editdesignation").val(returnData.designation);

                    $("#editalternative_phone_number").val(returnData.alternative_phone_number);
                    $("#editalternative_email").val(returnData.alternative_email);
                    $("#editn_a").val(returnData.n_a);

                    $('#editfaculty_id option').prop('selected', true);
                    $('#editfaculty_id').val(returnData.faculty_id);
                    $('#editfaculty_id').trigger('change');

                    if (returnData.is_primary == 1) {
                        $('#is_primary_edit').prop('checked', true);
                    } else {
                        $('#is_primary_edit').prop('checked', false);
                    }

                    if (returnData.is_academic == 1) {
                        $('#is_academic_edit').prop('checked', true);
                    } else {
                        $('#is_academic_edit').prop('checked', false);
                    }
                    if (returnData.is_billing == 1) {
                        $('#is_billing_edit').prop('checked', true);
                    } else {
                        $('#is_billing_edit').prop('checked', false);
                    }
                    if (returnData.status == 1) {
                        $('#status_edit').prop('checked', true);
                    } else {
                        $('#status_edit').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>
        function loadView(id) {
            $.ajax({
                url: '{{ url('get-contact-person') }}?id=' + id,
                method: 'GET',
                success: function (returnData) {
                    $("#viewname").val(returnData.name);
                    $("#viewemail").val(returnData.email);
                    $("#viewphone_number").val(returnData.phone_number);
                    $("#viewdesignation").val(returnData.designation);
                    $("#viewalternative_phone_number").val(returnData.alternative_phone_number);
                    $("#viewalternative_email").val(returnData.alternative_email);
                    $("#viewn_a").val(returnData.n_a);
                    $('#view_faculty_id option').prop('selected', true);
                    $('#view_faculty_id').val(returnData.faculty_id);
                    $('#view_faculty_id').trigger('change');
                    if (returnData.is_primary == 1) {
                        $('#is_primary_view').prop('checked', true);
                    } else {
                        $('#is_primary_view').prop('checked', false);
                    }

                    if (returnData.is_academic == 1) {
                        $('#is_academic_view').prop('checked', true);
                    } else {
                        $('#is_academic_view').prop('checked', false);
                    }
                    if (returnData.is_billing == 1) {
                        $('#is_billing_view').prop('checked', true);
                    } else {
                        $('#is_billing_view').prop('checked', false);
                    }
                    if (returnData.status == 1) {
                        $('#status_view').prop('checked', true);
                    } else {
                        $('#status_view').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');
                    }

                    if (avatarUrl) {
                        $("input[name='avatar_data']").val(avatarUrl);
                    }
                    $('#viewModal').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.contact-person', $slug) }}",
                dom: 'Blfrtip',
                buttons: [
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: [0, 1, 3, 4, 5, 6, 7, 8, 9] // Column index which needs to export
                        }
                    },
                    {
                        extend: 'csv',
                        exportOptions: {
                            columns: [0, 1, 3, 4, 5, 6, 7, 8, 9] // Column index which needs to export
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: [0, 1, 3, 4, 5, 6, 7, 8, 9] // 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 src=\"" + data + "\" height=\"26\"/>";
                                if(!isValidURL(data)){
                                    imageUrl = "<img src=\"" + "{{URL::asset('/')}}" + data + "\" height=\"26\"/>";
                                }
                                return imageUrl;
                            } else {
                                return '';
                            }
                        }
                    },

                    // {data: 'phone_number', name: 'phone_number'},
                    // {data: 'email', name: 'email'},
                    // {data: 'is_primary', name: 'is_primary'},
                    // {data: 'is_academic', name: 'is_academic'},
                    // {data: 'is_billing', name: 'is_billing'},
                    {data: 'view', name: 'view'},
                    {data: 'status', name: 'status'},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
            });

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