@php
$breadcrumb = [
['label' => 'Dashboard', 'url' => route('admin.dashboard')],
['label' => 'Expertise', 'url' => route('admin.expertise')],
['label' => 'Add an expertise']
];
@endphp

@extends('admin.layouts.app')
@section('title', 'Add an expertise')
@section('content')


<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <form id="addExpertiseForm" action="">
                    <p class="text-uppercase text-sm">Expertise Information</p>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="exp-name" class="form-control-label">Name <span class="text-danger">*</span></label>
                                <input class="form-control _required _heading" type="text" id="exp-name" placeholder="Enter the name" />
                            </div>
                        </div>
                    </div>
                    <hr class="horizontal dark" />
                    <p class="text-uppercase text-sm">About Expertise</p>
                    <div class="d-flex justify-content-start gap-4">
                        <div>
                            <div class="form-group">
                                <label for="imageInput" 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 class="_image" type="file" id="imageInput" accept="image/*">
                            </div>
                        </div>
                        <div>
                            <div class="icon-selector">
                                <label>Select Icon</label>
                                <div class="icon-list">
                                    <input type="hidden" name="selected_icon" id="selected_icon">
                                    <img src="{{ asset('/backend/assets/icons/icon1.svg') }}" class="icon-option">
                                    <img src="{{ asset('/backend/assets/icons/icon2.svg') }}" class="icon-option">
                                    <img src="{{ asset('/backend/assets/icons/icon3.svg') }}" class="icon-option">
                                    <img src="{{ asset('/backend/assets/icons/icon4.svg') }}" class="icon-option">
                                    <img src="{{ asset('/backend/assets/icons/icon5.svg') }}" class="icon-option">
                                    <img src="{{ asset('/backend/assets/icons/icon6.svg') }}" class="icon-option">
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="summarytext" class="form-control-label">Expertise 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>
    
    $(document).ready(function() {
        // --- Image Preview ---
        $('#imagePreview').on('click', function() {
            $('#imageInput').click();
        });

        $('#imageInput').on('change', function() {
            const file = this.files[0];
            if (file && file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    $('#imagePreview').css('background-image', `url('${e.target.result}')`);
                };
                reader.readAsDataURL(file);
            }
        });

        // --- Icon Preview ---
        $('#iconPreview').on('click', function() {
            $('#iconInput').click();
        });

        $('#iconInput').on('change', function() {
            const file = this.files[0];
            if (file && file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    $('#iconPreview').css('background-image', `url('${e.target.result}')`);
                };
                reader.readAsDataURL(file);
            }
        });
    });
</script>
<script>
    const storeRoute = "{{ route('admin.expertise.store') }}";
    const redirectRoute = "{{ route('admin.expertise') }}";
    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 src="{{asset('backend/assets/js/admin/skj-validations@v1.js')}}"></script>
<script src="{{asset('backend/assets/js/admin/addExpertise.js')}}"></script>
@endpush