@extends('layouts_old.main')

@section('stylesheets')
    <link rel="stylesheet" href="{{asset('css/edit.css')}}"/>
@endsection

@section('content')
    <div blade="{{ $viewName ?? 'unknown' }}">
    <div class="main-wrapper">
        <div class="row justify-content-between Header mb-5">
            <div class="col-md-8 d-flex flex-column justify-content-center justify-content-md-start Header-breadcrumbs">

                                {{ Breadcrumbs::render('createphaseact', $phase) }}
                <h2 class="page-title">Create New Phase Act for "{{$phase->view_name}}"</h2>
            </div>
            <div class="col-md-4 d-flex justify-content-center justify-content-md-end Header-buttons">

            </div>
        </div>

        @if ($errors->any())
            <div class="alert alert-danger">
                <strong>Whoops!</strong> There were some problems with your input.<br><br>
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <form action="{{ route('phase.acts.store', ['activationPhase' => $phase->id]) }}" method="POST">
            @csrf
            <div class="form-inner-container">
                <div class="form-group">
                    <label for="name">Name:</label>
                    <input type="text" name="name" class="form-control name" placeholder="Name" id="name">
                </div>

                <div class="form-group">
                    <label for="description">Description:</label>
                    <textarea class="form-control description" style="height:150px" name="description"
                              placeholder="Detail" id="description"></textarea>
                </div>

                <div class="form-group">
                    <label for="view_name">View Name:</label>
                    <input type="text" name="view_name" class="form-control view-name" placeholder="View Name"
                           id="view_name">
                </div>

{{--                <div style="display: flex; justify-content: space-between;" class="form-group-select-container">--}}
{{--                    <div class="form-group">--}}
{{--                        <label>Select The Roles for this Phase Act:</label><br/>--}}
{{--                        <select class="selectpicker roles" id="select-roles" multiple data-live-search="true" name="roles[]"--}}
{{--                                data-hide-disabled='true'>--}}
{{--                            @foreach($roles as $role)--}}
{{--                                <option value={{ $role->name }}>{{ $role->name }}</option>--}}
{{--                            @endforeach--}}
{{--                        </select>--}}
{{--                    </div>--}}
{{--                    <div class="form-group">--}}
{{--                        <label>Select The Users you want to bind to the Phase Act</label><br/>--}}
{{--                        <select class="selectpicker users" id="select-users" multiple data-live-search="true" name="users[]"--}}
{{--                                data-hide-disabled='true'>--}}
{{--                            @foreach($users as $user)--}}
{{--                                <option  value="{{ $user->id }}" data-roles="{{$user->roles->pluck('name')->toJson()}}"--}}
{{--                                         }>{{ $user->firstname}} {{$user->lastname}}</option>--}}
{{--                            @endforeach--}}
{{--                        </select>--}}
{{--                    </div>--}}
{{--                </div>--}}


                <div class="btn-container">
                    <button type="submit" class="btn">Submit</button>
                </div>
                <div style="display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 2rem;">
                    <p>Important note:</p><p>By submitting your phase you do not send the invitation emails to the interested party</p>
                </div>
            </div>
        </form>
    </div>
    </div>
@endsection

@section('javascripts')
{{--    <script defer>--}}
{{--        const options = $('.users option');--}}

{{--        $('select.roles').on('change', function () {--}}
{{--            // options.hide()--}}

{{--            // options.hide()--}}

{{--            const filtered = $(this).val();--}}
{{--            if (filtered.length === 0) {--}}
{{--                options.show()--}}
{{--                $('.users').selectpicker('destroy');--}}
{{--                $('.users').selectpicker('render');--}}
{{--                return--}}
{{--            }--}}

{{--            options.each(function (i){--}}

{{--                const opt = $(this)--}}

{{--                const roles = opt.data('roles')--}}


{{--                const contains = roles.some(element => {--}}
{{--                    return filtered.includes(element.toString());--}}
{{--                });--}}

{{--                if (contains) {--}}
{{--                    opt.show()--}}
{{--                }--}}
{{--                /**--}}
{{--                 * hide and deselect filtered out options--}}
{{--                 */--}}
{{--                else{--}}
{{--                    opt.hide()--}}
{{--                    opt.prop("selected", false)--}}


{{--                }--}}
{{--            })--}}
{{--            $('.users').selectpicker('destroy');--}}
{{--            $('.users').selectpicker('render');--}}

{{--        })--}}

{{--    </script>--}}
@endsection