@php
$breadcrumb = [
['label' => 'Dashboard', 'url' => route('admin.dashboard')],
['label' => 'Team', 'url' => route('admin.team')],
['label' => 'Add a member']
];
@endphp

@extends('admin.layouts.app')
@section('title', 'Add a member')
@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <form id="addTeamMemberForm" action="">
                    <p class="text-uppercase text-sm">Team Member Information</p>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="member-name" class="form-control-label">Full Name <span class="text-danger">*</span></label>
                                <input class="form-control _required _name" type="text" id="member-name" placeholder="Enter the name" />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="member_type" class="form-control-label">Select Type<span class="text-danger">*</span></label>
                                <select class="form-control _required" name="member_type" id="member_type">
                                    <option disabled selected hidden value="">Select Type</option>
                                    <option value="our_team">Our Team</option>
                                    <option value="associate_practitioners">Associate Practitioners</option>
                                    <option value="operational_backbone">Operational Backbone</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="designation" class="form-control-label">Select Designation</label>
                                <select class="form-control" name="designation" id="designation">
                                    <option disabled selected hidden value="">Select Designation</option>
                                    <option value="Advocate">Advocate</option>
                                    <option value="Legal Advisor / Counsel">Legal Advisor / Counsel</option>
                                    <option value="Notary Public">Notary Public</option>
                                    <option value="Public Prosecutor">Public Prosecutor</option>
                                    <option value="Solicitor">Solicitor</option>
                                    <option value="Accountant">Accountant</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="qualification" class="form-control-label">Select Qualification</label>
                                <select class="form-control" name="qualification" id="qualification">
                                    <option disabled selected hidden value="">Select Qualification</option>
                                    <option value="LL.B (Bachelor of Laws)">LL.B (Bachelor of Laws)</option>
                                    <option value="B.A. LL.B / B.Com LL.B">B.A. LL.B / B.Com LL.B</option>
                                    <option value="LL.M (Master of Laws)">LL.M (Master of Laws)</option>
                                    <option value="Ph.D. in Law">Ph.D. in Law</option>
                                    <option value="AIBE (All India Bar Exam)">AIBE (All India Bar Exam)</option>
                                    <option value="Notary License">Notary License</option>
                                    <option value="B.Com">B.Com</option>
                                    <option value="Company Secretary (CS)">Company Secretary (CS)</option>
                                    <option value="Chartered Accountant (CA)">Chartered Accountant (CA)</option>
                                    <option value="Cost and Management Accountant (CMA)">Cost and Management Accountant (CMA)</option>
                                    <option value="Diploma in Corporate Laws">Diploma in Corporate Laws</option>
                                    <option value="Post Graduate Diploma in Business Law (PGDBL)">Post Graduate Diploma in Business Law (PGDBL)</option>
                                    <option value="LL.M in Corporate and Commercial Law">LL.M in Corporate and Commercial Law</option>
                                    <option value="Diploma in Intellectual Property Rights (IPR)">Diploma in Intellectual Property Rights (IPR)</option>
                                    <option value="Diploma in Cyber Law">Diploma in Cyber Law</option>
                                    <option value="Diploma in Taxation Laws">Diploma in Taxation Laws</option>
                                    <option value="Certified Compliance Professional">Certified Compliance Professional</option>
                                    <option value="MBA in Business Law">MBA in Business Law</option>
                                    <option value="LL.M in International Business Law">LL.M in International Business Law</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="expertise" class="form-control-label">Select Expertise</label>
                                <select class="form-control select2" name="expertise[]" id="expertise" multiple>
                                    <option disabled hidden value="">Select Expertise</option>
                                    @foreach ($Expertise as $e )
                                    <option value="{{$e['name']}}">{{$e['name']}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <hr class="horizontal dark" />
                    <p class="text-uppercase text-sm">Contact Information</p>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="email" class="form-control-label">Email</label>
                                <input class="form-control _email" type="text" id="email" name="email" placeholder="Enter the email"/>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="contact" class="form-control-label">Contact</label>
                                <input class="form-control _phone" type="text" id="contact" placeholder="Enter the contact"/>
                            </div>
                        </div>
                        <div class="col-md-4 d-none">
                            <div class="form-group">
                                <label for="m_link" class="form-control-label">Member Link</label>
                                <input class="form-control" type="text" id="m_link" name="m_link" placeholder="Enter Member Link"/>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="fb_link" class="form-control-label">Facebook</label>
                                <input class="form-control _url" type="text" id="fb_link" name="fb_link" placeholder="Enter Facebook Link" />

                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="li_link" class="form-control-label">LinkedIn</label>
                                <input class="form-control _url" type="text" id="li_link" name="li_link" placeholder="Enter LinkedIn Link"  />
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="x_link" class="form-control-label">X</label>
                                <input class="form-control _url" type="text" id="x_link" name="x_link" placeholder="Enter X Link"  />

                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="address" class="form-control-label">Address</label>
                                <input class="form-control" type="text" id="address" placeholder="Enter Address of the member"  />
                            </div>
                        </div>
                    </div>
                    <hr class="horizontal dark" />
                    <p class="text-uppercase text-sm">About member</p>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="image" class="form-control-label">Select Image</label>
                                <div id="imagePreview"
                                    title="Click to select image"
                                    style="background-image:  url('{{ asset('backend/assets/img/image_placeholder.svg') }}');">
                                </div>
                                <input type="file" id="imageInput" class="_image" accept="image/png, image/jpeg, image/jpg, image/webp">
                            </div>

                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="summarytext" class="form-control-label">Summary</label>
                                <textarea id="summarytext" name="summarytext"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-end">
                        <button id="submit-form" class="btn btn-primary" type="button">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    const previewDiv = document.getElementById('imagePreview');
    const fileInput = document.getElementById('imageInput');

    previewDiv.addEventListener('click', () => {
        fileInput.click();
    });

    fileInput.addEventListener('change', function() {
        const file = this.files[0];
        if (file && file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = function(e) {
                previewDiv.style.backgroundImage = `url('${e.target.result}')`;
            };
            reader.readAsDataURL(file);
        }
    });
</script>
<script>
    const storeRoute = "{{ route('admin.team.store') }}";
    const redirectRoute = "{{ route('admin.team') }}";
    var summaryText = "";
</script>
<script src="{{ asset('backend/assets/tinymce/tinymce.min.js')}}"></script>
<script src="{{ asset('backend/assets/tinymce/jquery.tinymce.min.js')}}"></script>
<script>
    tinymce.init({
        selector: '#summarytext',
        height: 300,
        plugins: 'link image code table lists',
        toolbar: ['code preview image removeformat link h2 h3 h4 h5 forecolor| bold italic underline fontsizeselect| subscript superscript charmap | alignleft aligncenter alignright outdent indent | bullist numlist  selectall fullscreen', ],
        menubar: false,
        file_picker_types: 'image',
        contextmenu: "link image imagetools table spellchecker",
        quickbars_selection_toolbar: 'bold italic | quicklink h1 h2 h3',
        toolbar_drawer: 'sliding',
        menubar: false,
        relative_urls: false,
        remote_scripts_host: false,
        convert_urls: true,
        setup: function(ed) {
            ed.on('keyup', function(e) {
                summaryText = ed.getContent();
            });
        },
        automatic_uploads: false,
        media_alt_source: false
    });
</script>
<script>
    $(document).ready(function() {
        $('.select2').select2({
            placeholder: "Choose expertise",
            allowClear: true
        });
    });
</script>
<script src="{{asset('backend/assets/js/admin/skj-validations@v1.js')}}"></script>
<script src="{{asset('backend/assets/js/admin/addTeamMember.js')}}"></script>
@endpush