@extends('admin.layouts.master')
@section('css')
   {{--  <style type="text/css">
        textarea.form-control {
            padding-top: 0.2rem !important;
        }
    </style> --}}
@endsection
@section('content')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">

            <div class="col-sm-6">
                <ol class="breadcrumb ">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item "><a href="#">{{$submenu->name}}</a></li>
                    <li class="breadcrumb-item active">Add</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="container-fluid">

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Add {{$submenu->name}} Content</h3>
                         <div class="card-tools">
                            <a href="{{route('admin.scientist-profile.index',$submenu->id)}}" class="btn btn-sm btn-primary">View</a>
                        </div>
                    </div>
                    <form action="{{route('admin.store.scientist-profile')}}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="card-body">

                            <div class="form-group">
                                <label for="exampleInputFile">Department</label>
                                <div class="input-group">
                                    <div class="custom-file">
                                        @php
                                            $departments = App\Models\Department::get();
                                        @endphp
                                       <select class="form-control" name="department">
                                           <option value="">Select</option>
                                           @foreach($departments as $department)
                                                <option value="{{$department->id}}">{{$department->name}}</option>
                                           @endforeach
                                       </select>
                                    </div>
                                </div>
                            </div>

                             <div class="form-group">
                                <label for="exampleInputFile">Profile Image</label>
                                <div class="input-group">
                                    <div class="custom-file">
                                        <input type="file" id="" name="file">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="exampleInputFile">Name</label>
                                        <div class="input-group">
                                            <div class="custom-file">
                                                <input type="text" class="form-control" id="exampleInputFile" name="name">
                                                <input type="hidden" class="form-control" id="" name="staff_id" value={{$submenu->id}}>
                                                <input type="hidden" class="form-control" id="" name="menu_id" value={{$submenu->menu_id}}>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                         <label for="exampleInputFile">Designation</label>
                                        <div class="input-group">
                                            <div class="custom-file">
                                                {{-- <input type="text" class="form-control" id="exampleInputFile" name="designation"> --}}
                                                <select class="form-control" id="exampleInputFile" name="designation">
                                                    <option value="">--Select-- </option>
                                                    @foreach($designation as $pro)
                                                    <option value="{{($pro->id)}}">{{($pro->name)}} </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="exampleInputFile">Mobile Number</label>
                                        <div class="input-group">
                                            <div class="custom-file">
                                                <input type="number" class="form-control" id="exampleInputFile" name="mobile_no">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="exampleInputFile">Email</label>
                                        <div class="input-group">
                                            <div class="custom-file">
                                                <input type="email" class="form-control" id="exampleInputFile" name="email">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>





                            <div class="form-group">
                                <label for="exampleInputFile">Academic Qualifiications</label>
                                <div class="input-group" style="padding-top: 5rem; padding-bottom: 5rem;">
                                    <div class="custom-file">
                                        <textarea class="form-control" name="educational_qualifications" id="edu"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputFile">Address</label>
                                <div class="input-group" style="padding-top: 5rem; padding-bottom: 5rem">
                                    <div class="custom-file">
                                        <textarea class="form-control" id="address" name="address"></textarea>
                                    </div>
                                </div>
                            </div>
                             <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="exampleInputFile">Facebook Url</label>
                                        <div class="input-group">
                                            <div class="custom-file">
                                                <input type="text" class="form-control" id="exampleInputFile" name="facebook_url">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                   <div class="form-group">
                                        <label for="exampleInputFile">Twitter Url</label>
                                        <div class="input-group">
                                            <div class="custom-file">
                                                <input type="text" class="form-control" id="exampleInputFile" name="twitter_url">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                             <div class="row">
                                <div class="col-md-6">
                                   <div class="form-group">
                                        <label for="exampleInputFile">LinkedIn Url</label>
                                        <div class="input-group">
                                            <div class="custom-file">
                                                <input type="text" class="form-control" id="exampleInputFile" name="linkedin_url">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                    <label for="exampleInputFile">Instagram Url</label>
                                    <input type="text" class="form-control" id="exampleInputFile" name="instagram_url">
                                </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="exampleInputFile"> About </label>
                                <textarea class="form-control" id="about_content" name="about_content" style="padding-top: 5rem; padding-bottom: 5rem;"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputFile">Area of Interest</label>
                                <div class="input-group" style="padding-top: 5rem; padding-bottom: 5rem;">
                                    <div class="custom-file">
                                        <textarea class="form-control" name="area_of_interest" id="prof_exp"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputFile">Add Research Experience</label>
                                <textarea class="form-control" id="research_exp" name="research_exp"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputFile">Professional Experience</label>
                                <div class="input-group" style="padding-top: 5rem; padding-bottom: 5rem;">
                                    <div class="custom-file">
                                       <textarea class="form-control"  name="professional_exp" id="area_interest"></textarea>
                                    </div>
                                </div>
                            </div>
                             <div class="form-group">
                                <label for="exampleInputFile">Awards & Acheivements</label>
                                <div class="input-group" style="padding-top: 5rem; padding-bottom: 5rem;">
                                    <div class="custom-file">
                                       <textarea class="form-control"  name="awards" id="awards"></textarea>
                                    </div>
                                </div>
                            </div>
                             <div class="form-group">
                                <label for="exampleInputFile">Publications</label>
                                <div class="input-group" style="padding-top: 5rem; padding-bottom: 5rem;">
                                    <div class="custom-file">
                                       <textarea class="form-control"  name="publications" id="publications"></textarea>
                                    </div>
                                </div>
                            </div>
                             <div class="form-group">
                                <label for="exampleInputFile">Projects </label>
                                <div class="input-group" style="padding-top: 5rem; padding-bottom: 5rem;">
                                    <div class="custom-file">
                                       <textarea class="form-control"  name="projects" id="projects"></textarea>
                                    </div>
                                </div>
                            </div>
                             <div class="form-group">
                                <label for="exampleInputFile">Staff</label>
                                <div class="input-group" style="padding-top: 5rem; padding-bottom: 5rem;">
                                    <div class="custom-file">
                                       <textarea class="form-control"  name="staff" id="staff"></textarea>
                                    </div>
                                </div>
                            </div>

                            <hr>
                            {{-- <h4>More Content</h4>
                            <div class="form-group ">

                                <div class="row">
                                        <div class="col-md-3">
                                            <label>Add Header</label>
                                            <input type="text" name="add_header[]" class="form-control">
                                        </div>
                                        <div class="col-md-8">
                                            <label>Content</label>
                                             <textarea class="form-control" id="add_content" name="add_content[]"></textarea>
                                        </div>

                                    <div class="col-md-1" style="padding-top: 10px;">
                                        <button type="button" class="btn btn-primary btn-sm add">+</button>
                                    </div>

                                </div>
                                <div class="documents" id="documents"></div>

                            </div> --}}
                        </div>

                        <div class="card-footer">
                            <div class="text-center">
                                <button type="submit" class="btn btn-primary btn-sm">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- /.card -->
            </div>
        </div>


    </div><!-- /.container-fluid -->
</div>

@endsection

@section('js')

<script>

    $(document).ready(function() {
    // Initialize CKEditor for the initial "About Content" textarea
        CKEDITOR.replace('about_content', {
            filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
            customConfig : "{{asset('ckeditor/config.js')}}",
            filebrowserUploadMethod: 'form',
            allowedContent:true,
            height: '100px',
            width: '100%',
        // removePlugins: 'sourcearea'
        })
        //add_content
        CKEDITOR.replace('add_content', {
            filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
            customConfig : "{{asset('ckeditor/config.js')}}",
            filebrowserUploadMethod: 'form',
            allowedContent:true,
            height: '100px',
            width: '100%',
        // removePlugins: 'sourcearea'
        })
        CKEDITOR.replace('research_exp', {
            filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
            customConfig : "{{asset('ckeditor/config.js')}}",
            filebrowserUploadMethod: 'form',
            allowedContent:true,
            height: '100px',
            width: '100%',
        // removePlugins: 'sourcearea'
        })
        CKEDITOR.replace('prof_exp', {
            filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
            customConfig : "{{asset('ckeditor/config.js')}}",
            filebrowserUploadMethod: 'form',
            allowedContent:true,
            height: '100px',
            width: '100%',
        // removePlugins: 'sourcearea'
        })
        CKEDITOR.replace('area_interest', {
            filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
            customConfig : "{{asset('ckeditor/config.js')}}",
            filebrowserUploadMethod: 'form',
            allowedContent:true,
            height: '100px',
            width: '100%',
        // removePlugins: 'sourcearea'
        })

        
        CKEDITOR.replace('edu', {
            filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
            customConfig : "{{asset('ckeditor/config.js')}}",
            filebrowserUploadMethod: 'form',
            allowedContent:true,
            height: '100px',
            width: '100%',
        // removePlugins: 'sourcearea'
        })
        CKEDITOR.replace('address', {
            filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
            customConfig : "{{asset('ckeditor/config.js')}}",
            filebrowserUploadMethod: 'form',
            allowedContent:true,
            height: '100px',
            width: '100%',
        // removePlugins: 'sourcearea'
        })
        CKEDITOR.replace('awards', {
            filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
            customConfig : "{{asset('ckeditor/config.js')}}",
            filebrowserUploadMethod: 'form',
            allowedContent:true,
            height: '100px',
            width: '100%',
        // removePlugins: 'sourcearea'
        })
        CKEDITOR.replace('publications', {
            filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
            customConfig : "{{asset('ckeditor/config.js')}}",
            filebrowserUploadMethod: 'form',
            allowedContent:true,
            height: '100px',
            width: '100%',
        // removePlugins: 'sourcearea'
        })
        CKEDITOR.replace('projects', {
            filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
            customConfig : "{{asset('ckeditor/config.js')}}",
            filebrowserUploadMethod: 'form',
            allowedContent:true,
            height: '100px',
            width: '100%',
        // removePlugins: 'sourcearea'
        })
        CKEDITOR.replace('staff', {
            filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
            customConfig : "{{asset('ckeditor/config.js')}}",
            filebrowserUploadMethod: 'form',
            allowedContent:true,
            height: '100px',
            width: '100%',
        // removePlugins: 'sourcearea'
        })

        // Event handler for adding more content areas
        $('.add').click(function() {
            var $newContent = createNewContentRow();
            $('.documents').append($newContent);

            // Initialize CKEditor for the newly added content
            initializeCKEditorForNewContent($newContent);
        });

        // Event handler for removing content areas
        $(document).on('click', '.remove', function() {
            $(this).closest('.row').remove();
        });

        // Function to create a new content row
        function createNewContentRow() {
            var html = `<div class="row">
                            <div class="col-md-3">
                                <label>Add Header</label>
                                <input type="text" name="add_header[]" class="form-control">
                            </div>
                            <div class="col-md-8">
                                <label>Content</label>
                                <textarea class="form-control add_content" name="add_content[]"></textarea>
                            </div>
                            <div class="col-md-1" style="padding-top: 10px;">
                                <button type="button" class="btn btn-danger btn-sm remove">-</button>
                            </div>
                        </div>`;
            return $(html);
        }

        // Initialize CKEditor for the initial "About Content" textarea
        function initializeCKEditorForNewContent($content) {
            $content.find('.add_content').each(function() {
                CKEDITOR.replace(this, {
                    filebrowserUploadUrl: "{{ route('upload', ['_token' => csrf_token() ]) }}",
                    customConfig: "{{ asset('ckeditor/config.js') }}",
                    filebrowserUploadMethod: 'form',
                    allowedContent: true,
                    height: '100px',
                    width: '100%',
                });
            });

        }


    });
</script>


@endsection