@extends('layouts.main')

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

@section('content')
    <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('editphaseact', $act->activation_phase, $act->id) }}
                <h2 class="page-title">Edit Phase Act <b>"{{$act->name}}"</b></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
        {{--        @dd($phase)--}}

        <form class="phase-top-form" action="{{route('phase.acts.update', ['phaseAct' => $act->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"
                           value="{{$act->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">{{$act->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" value="{{$act->view_name}}">
                </div>
                {{--                <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 }}--}}
                {{--                            @if(!is_null($act->roles) && in_array($role->name, $act->roles)) selected @endif>{{ $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()}}"--}}
                {{--                                    @if(!is_null($act->users) && in_array($user->id, $act->users)) selected @endif>{{ $user->firstname}} {{$user->lastname}}</option>--}}
                {{--                        @endforeach--}}
                {{--                    </select>--}}
                {{--                </div>--}}
                {{--                <div class="btn-container">--}}
                <button type="submit" class="button-blue phase-btn">Update Act</button>
            </div>
        </form>
        <hr>
        <br><br>
        <form action="{{route('phase.act.users.excel',['phaseAct' => $act->id])}}" method="POST" enctype="multipart/form-data">
            @csrf
            <label class="role-categories-label" for="roles"> Select the Role(s) users in Excel file will be bound to:</label>
            <select class="form-select role-categories-select multiple-select" name="roles[]" id="roles" multiple>
                @foreach(\App\Models\Role::all() as $role)
                    <option value="{{$role->id}}">
                        {{$role->name}}
                    </option>
                @endforeach
            </select>
            <br><br>
            <label class="role-categories-label" for="work_relation"> Select the Work Relation users in Excel have with NCSR-D</label>
            <select class="form-select staff-categories-select multiple-select" name="type" id="work_relation">
                <option value="1">
                    ΤΑΚΤΙΚΟ
                </option>
                <option value="2">
                    ΕΚΤΑΚΤΟ
                </option>

            </select>

            <br><br>
            <div class="form-group excel-uploader">
                <label class="role-categories-label" for="upload">Users Excel file:</label>
                <input type="file" class="form-control full-name file-input" name="upload" id="upload">
            </div>

            <div class="btn-container upload-container">
                <button type="submit" class="btn close-modal phase-btn">Upload File</button>
            </div>
        </form>

    </div>
@endsection

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

        $('select.roles').on('change', function () {
            console.log('changed')
            console.log(options)
            // options.hide()

            // options.hide()

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

            options.each(function (i) {

                console.log(i)
                const opt = $(this)

                const roles = opt.data('roles')


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

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


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

        })

    </script>
@endsection