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

@section('main-content-tab')
    <div class="card mb-6">
        <div class="card-body">
            <div>
                <h1 class="fs-18px fw-500 mb-0">Career Insight</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>
                <button type="button" class="btn btn--primary rounded-btn me-2 text-cs-gray" style="background: rgba(117,117,117,0.1);" data-bs-toggle="modal" data-bs-target="#addModal" id="faculty-modal"><i class="fa fa-pen"></i> Add Career Insight</button>
            </div>
        </div>
    </div>
    <div class="card mb-6">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h1 class="fs-18px fw-500 mb-0">Career Insight</h1>
            <div class="d-flex align-items-center">
                <button type="button" class="btn btn--primary rounded-btn me-2" style="background: rgba(117,117,117,0.1);" data-bs-toggle="modal" data-bs-target="#addModal" id="faculty-modal"><i class="fa fa-pen"></i> Add Career Insight</button>
            </div>
        </div>
        <div class="card-body faculty-table-card">
            <div class="table-responsive">
                <table class="table table-row-bordered data-table">
                    @include('admin.institute-management.institute-profile.career-insight.sectionDescription')
                    <div style="clear:both;"></div>
                    <thead>
                    <tr>
                        <th class="text-center">SL.</th>
                        <th class="text-center">Related Role</th>
                        <th class="text-center">Job Satisfaction (0 to 5)</th>
                        <th class="text-center">Average Salary</th>
                        <th class="text-center">Jobs In BD</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>
    <div class="card mb-6">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h1 class="fs-18px fw-500 mb-0">Career Insight Description</h1>

            <button onclick="setData({{json_encode($career_insight_description)}});" data-bs-toggle="modal" data-bs-target="#sectionModal" style="background: rgba(117,117,117,0.1);" class="btn btn--primary rounded-btn me-2"><i class="fa fa-pen"></i> Edit Description</button>
        </div>
        <div class="card-body">
            <div class="career_insight_description">
                <p class="fs-14 text-cs-gray mb-2">{!! $career_insight_description->career_insight_description !!}</p>
            </div>
        </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 Career Insight</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.career-insight.store', $slug)}}" name="institute" class="form mb-15" 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="related_role" class="required">Related Role (EN)</label>
                                        <input type="text" class="form-control form-control-solid" id="related_role" name="related_role" placeholder="Enter Related Role (EN)" required>
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="related_role_bn">Related Role (BN)</label>
                                        <input type="text" class="form-control form-control-solid" id="related_role_bn" name="related_role_bn" placeholder="Enter Related Role (BN)">
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="job_satisfaction">Job Satisfaction (0 to 5)</label>
                                        <div class="rating">
                                            <!--begin::Reset rating-->
                                            <input class="rating-input" name="job_satisfaction" value="0" checked type="radio" id="kt_rating_2_input_0"/>
                                            <!--end::Reset rating-->

                                            <!--begin::Star 1-->
                                            <label class="rating-label" for="kt_rating_2_input_1">
                                                <i class="las la-star fs-1"></i>
                                            </label>
                                            <input class="rating-input" name="job_satisfaction" value="1" type="radio" id="kt_rating_2_input_1"/>
                                            <!--end::Star 1-->

                                            <!--begin::Star 2-->
                                            <label class="rating-label" for="kt_rating_2_input_2">
                                                <i class="las la-star fs-1"></i>
                                            </label>
                                            <input class="rating-input" name="job_satisfaction" value="2" type="radio" id="kt_rating_2_input_2"/>
                                            <!--end::Star 2-->

                                            <!--begin::Star 3-->
                                            <label class="rating-label" for="kt_rating_2_input_3">
                                                <i class="las la-star fs-1"></i>
                                            </label>
                                            <input class="rating-input" name="job_satisfaction" value="3" type="radio" id="kt_rating_2_input_3"/>
                                            <!--end::Star 3-->

                                            <!--begin::Star 4-->
                                            <label class="rating-label" for="kt_rating_2_input_4">
                                                <i class="las la-star fs-1"></i>
                                            </label>
                                            <input class="rating-input" name="job_satisfaction" value="4" type="radio" id="kt_rating_2_input_4"/>
                                            <!--end::Star 4-->

                                            <!--begin::Star 5-->
                                            <label class="rating-label" for="kt_rating_2_input_5">
                                                <i class="las la-star fs-1"></i>
                                            </label>
                                            <input class="rating-input" name="job_satisfaction" value="5" checked="checked" type="radio" id="kt_rating_2_input_5"/>
                                            <!--end::Star 5-->
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="average_salary_bn">Average Salary (EN)</label>
                                        <input type="text" class="form-control form-control-solid" id="average_salary_bn" name="average_salary_bn" placeholder="Average  Salary">
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="average_salary">Average Salary (BN)</label>
                                        <input type="text" class="form-control form-control-solid" id="average_salary" name="average_salary" placeholder="Average  Salary">
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="jobs_in_bd">Job In BD</label>
                                        <input type="number" class="form-control form-control-solid" id="jobs_in_bd" name="jobs_in_bd" placeholder="Job In BD">
                                    </div>
                                </div>

                                <div class="col-lg-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" id="status" 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="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 Career Insight</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="#" id="edit-form" name="institute" class="form mb-15" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method("PUT")
                        <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="related_role">Related Role (EN)</label>
                                        <input type="text" class="form-control form-control-solid" id="editrelated_role" name="related_role" placeholder="Enter Related Role (EN)">
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="related_role_bn">Related Role (BN)</label>
                                        <input type="text" class="form-control form-control-solid" id="editrelated_role_bn" name="related_role_bn" placeholder="Enter Related Role (BN)">
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="job_satisfaction">Job Satisfaction (0 to 5)</label>
                                        <div class="rating">
                                            <!--begin::Reset rating-->
                                            <input class="rating-input editjob_satisfaction" name="job_satisfaction" value="0" checked type="radio" id="editkt_rating_2_input_0"/>
                                            <!--end::Reset rating-->

                                            <!--begin::Star 1-->
                                            <label class="rating-label" for="editkt_rating_2_input_1">
                                                <i class="las la-star fs-1"></i>
                                            </label>
                                            <input class="rating-input editjob_satisfaction" name="job_satisfaction" value="1" type="radio" id="editkt_rating_2_input_1"/>
                                            <!--end::Star 1-->

                                            <!--begin::Star 2-->
                                            <label class="rating-label" for="editkt_rating_2_input_2">
                                                <i class="las la-star fs-1"></i>
                                            </label>
                                            <input class="rating-input editjob_satisfaction" name="job_satisfaction" value="2" type="radio" id="editkt_rating_2_input_2"/>
                                            <!--end::Star 2-->

                                            <!--begin::Star 3-->
                                            <label class="rating-label" for="editkt_rating_2_input_3">
                                                <i class="las la-star fs-1"></i>
                                            </label>
                                            <input class="rating-input editjob_satisfaction" name="job_satisfaction" value="3" type="radio" id="editkt_rating_2_input_3"/>
                                            <!--end::Star 3-->

                                            <!--begin::Star 4-->
                                            <label class="rating-label" for="editkt_rating_2_input_4">
                                                <i class="las la-star fs-1"></i>
                                            </label>
                                            <input class="rating-input editjob_satisfaction" name="job_satisfaction" value="4" type="radio" id="editkt_rating_2_input_4"/>
                                            <!--end::Star 4-->

                                            <!--begin::Star 5-->
                                            <label class="rating-label" for="editkt_rating_2_input_5">
                                                <i class="las la-star fs-1"></i>
                                            </label>
                                            <input class="rating-input editjob_satisfaction" name="job_satisfaction" value="5" type="radio" id="editkt_rating_2_input_5"/>
                                            <!--end::Star 5-->
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="average_salary_bn">Average Salary (EN)</label>
                                        <input type="text" class="form-control form-control-solid" id="editaverage_salary_bn" name="average_salary_bn" placeholder="Average  Salary">
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="average_salary">Average Salary (BN)</label>
                                        <input type="text" class="form-control form-control-solid" id="editaverage_salary" name="average_salary" placeholder="Average  Salary">
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="jobs_in_bd">Job In BD</label>
                                        <input type="number" class="form-control form-control-solid" id="editjobs_in_bd" name="jobs_in_bd" placeholder="Job In BD">
                                    </div>
                                </div>

                                <div class="col-lg-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" id="editstatus" 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="sectionModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="max-width: 900px;">
            <div class="modal-content">
                <div class="modal-header bg--primary text-white">
                    <h5 class="modal-title" id="exampleModalLabel">Career Insight Description</h5>
                    <button type="button" onclick="return editSectionFunction();" 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 id="sectionForm" method="POST" action="javascript:void(0)">
                        @csrf
                        <div class="alert alert-danger print-error-msg" style="display:none">
                            <ul></ul>
                        </div>
                        <input type="hidden" name="slug" value="{{$slug}}">
                        <div class="form-group row mb-4" style="text-align:right;">
                            <label for="inputEmail3" class="col-sm-3 col-form-label required">Section Description (EN)</label>
                            <div class="col-sm-9">
                                <textarea name="career_insight_description" id="editSectionDescription" class="summernote form-control form-control-solid" placeholder="Enter Description (EN)" autocomplete="off">{{$career_insight_description->career_insight_description}}</textarea>
                            </div>
                        </div>
                        <div class="form-group row mb-4" style="text-align:right;">
                            <label for="inputEmail3" class="col-sm-3 col-form-label">Section Description (BN)</label>
                            <div class="col-sm-9">
                                <textarea name="career_insight_description_bn" id="editSectionDescriptionBn" class="summernote form-control form-control-solid" placeholder="Enter Description (BN)" autocomplete="off">{{$career_insight_description->career_insight_description_bn}}</textarea>
                            </div>
                        </div>
                        <div class="mb-3" style="text-align:right;">
                            <button onclick="return editSectionFunction();" data-bs-dismiss="modal" aria-label="Close" style="margin-right:5px;" class="btn btn-secondary" type="button" class="btn-close">Close</button>
                            <button class="btn btn-primary btn-submit-edit">Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    {{--    <div class="modal fade custom-modal" id="editDescriptionModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">--}}
    {{--        <div class="modal-dialog" style="max-width: 900px;">--}}
    {{--            <div class="modal-content">--}}
    {{--                <div class="modal-header bg--primary text-white">--}}
    {{--                    <h5 class="modal-title" id="exampleModalLabel">Edit Career Insight Description</h5>--}}
    {{--                    <button type="button" onclick="return editSectionFunction();" 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 id="sectionForm" method="POST" action="javascript:void(0)">--}}
    {{--                        @csrf--}}
    {{--                        <div class="alert alert-danger print-error-msg" style="display:none">--}}
    {{--                            <ul></ul>--}}
    {{--                        </div>--}}
    {{--                        <input type="hidden" name="slug" value="{{$slug}}">--}}
    {{--                        <div class="form-group row mb-4" style="text-align:right;">--}}
    {{--                            <label for="inputEmail3" class="col-sm-3 col-form-label required">Description (EN)</label>--}}
    {{--                            <div class="col-sm-9">--}}
    {{--                                <textarea name="career_insight_description" id="editDescription" class="summernote form-control form-control-solid" placeholder="Enter Description (EN)" autocomplete="off">{{$career_insight_description->career_insight_description}}</textarea>--}}
    {{--                            </div>--}}
    {{--                        </div>--}}
    {{--                        <div class="form-group row mb-4" style="text-align:right;">--}}
    {{--                            <label for="inputEmail3" class="col-sm-3 col-form-label">Description (BN)</label>--}}
    {{--                            <div class="col-sm-9">--}}
    {{--                                <textarea name="career_insight_description_bn" id="editDescriptionBn" class="summernote form-control form-control-solid" placeholder="Enter Description (BN)" autocomplete="off">{{$career_insight_description->career_insight_description_bn}}</textarea>--}}
    {{--                            </div>--}}
    {{--                        </div>--}}
    {{--                        <div class="mb-3" style="text-align:right;">--}}
    {{--                            <button onclick="return editSectionFunction();" data-bs-dismiss="modal" aria-label="Close" style="margin-right:5px;" class="btn btn-secondary" type="button" class="btn-close">Close</button>--}}
    {{--                            <button class="btn btn-primary btn-submit-edit">Update</button>--}}
    {{--                        </div>--}}
    {{--                    </form>--}}
    {{--                </div>--}}
    {{--            </div>--}}
    {{--        </div>--}}
    {{--    </div>--}}

@endsection

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

        .note-editor.note-frame .note-editing-area {
            text-align: left;
        }
    </style>
@endsection

@section('extra-extra-script')
    @section('extra-sub-script')
    @show
    <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 src="{{ asset('summernote/summernote.min.js') }}"></script>
    <script>
        $('#edit-form').submit(function (event) {
            event.preventDefault();
            var formData = new FormData(this);
            var slug = $('input[name="slug_info"]').val();


            var id = $('input[name="id"]').val();
            var actionUrl = "{{ route('institute.profile.career-insight.update', ['slug' => ':slug', 'id' => ':id']) }}";
            actionUrl = actionUrl.replace(':slug', slug).replace(':id', id);
            $.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);
            $.ajax({
                url: '{{ url('get-career-insight') }}?id=' + id,
                method: 'GET',
                success: function (returnData) {
                    $("#editrelated_role").val(returnData.related_role);
                    $("#editrelated_role_bn").val(returnData.related_role_bn);
                    let jobSatisfaction = returnData.job_satisfaction;
                    $(".editjob_satisfaction[value='" + jobSatisfaction + "']").prop('checked', true);
                    $("#editaverage_salary").val(returnData.average_salary);
                    $("#editaverage_salary_bn").val(returnData.average_salary_bn);
                    $("#editjobs_in_bd").val(returnData.jobs_in_bd);
                    if (returnData.status == 1) {
                        $('#editstatus').prop('checked', true);
                    } else {
                        $('#editstatus').prop('checked', false);
                    }

                    $('#editModal').modal('show');
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        }
    </script>
    <script type="text/javascript">
        $(function () {
            var table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                aaSorting: [],
                lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                ajax: "{{ route('institute.profile.career-insight', $slug) }}?type=table",
                dom: 'Blfrtip',
                buttons: [
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5] // Column index which needs to export
                        }
                    },
                    {
                        extend: 'csv',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5] // Column index which needs to export
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5] // Column index which needs to export
                        }
                    }
                ],
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                    {data: 'related_role', name: 'related_role'},
                    {data: 'job_satisfaction', name: 'job_satisfaction'},
                    {data: 'average_salary', name: 'average_salary'},
                    {data: 'jobs_in_bd', name: 'jobs_in_bd'},
                    {data: 'status', name: 'status'},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
            });

        });
    </script>

    <script>
        function editSectionFunction() {
            $(".print-error-msg").css('display', 'none');
            document.getElementById("sectionForm").reset();
            return true;
        }

        function setData(career_insight_description) {
            $(".print-error-msg").css('display', 'none');
            document.getElementById("sectionForm").reset();

            var item = career_insight_description;

            $('#editSectionDescription').val(item ? (item.career_insight_description ? item.career_insight_description : '') : '');
            $('#editSectionDescriptionBn').val(item ? (item.career_insight_description_bn ? item.career_insight_description_bn : '') : '');
        }
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('.summernote').summernote({
                height: 200,
                popover: {
                    image: [],
                    link: [],
                    air: []
                }
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $('.institute-profile-tab-career-insight').addClass('active');
        });
    </script>
@endsection