@extends('backend.layouts.main')

@section('title', 'MLI ATS | Start Activity')

@section('content')
    <div class="container px-6 mx-auto grid">
        @include('backend.share.title', ['title' => 'Manage Start Activity'])
        <form action="{{ route('admin.projects.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="md:flex flex-none">
                <div class="lg:w-4/6">
                    @include('backend.project.items.add-form')

                    @include('backend.project.items.add-com-support')
                </div>
                <div class="lg:w-2/6">
                    @include('backend.project.items.add-assign-form')
                </div>
            </div>
            <div class="block mt-8 text-sm">
                @include('backend.share.add-button', ['name' => 'Add'])
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script type="text/javascript">
        function dropdown() {
            return {
                options: [],
                selected: [],
                show: false,
                open() {
                    this.show = true;
                },
                close() {
                    this.show = false;
                },
                isOpen() {
                    return this.show === true;
                },
                select(index, event) {
                    if (!this.options[index].selected) {
                        this.options[index].selected = true;
                        this.options[index].element = event.target;
                        this.selected.push(index);
                    } else {
                        this.selected.splice(this.selected.lastIndexOf(index), 1);
                        this.options[index].selected = false;
                    }
                },
                remove(index, option) {
                    this.options[option].selected = false;
                    this.selected.splice(index, 1);
                },
                loadOptions() {
                    const options = document.getElementById('select').options;
                    for (let i = 0; i < options.length; i++) {
                        this.options.push({
                            value: options[i].value,
                            text: options[i].innerText,
                            selected: options[i].getAttribute('selected') != null ? options[i].getAttribute(
                                'selected') : false,
                        });
                    }
                },
                selectedValues() {
                    return this.selected.map((option) => {
                        return this.options[option].value;
                    });
                },
            };
        }
    </script>
@endpush