@extends('admin.crud.callforproposal.base')

@section('subcontent')
    <div class="row">
        <div class="col-12 mb-5 mb-xl-8">
            <div class="card card-flush py-5 mb-xl-10">
                <div class="card-header">
                    <div class="card-title flex-column">
                        <h3 class="fw-bold mb-1 d-flex align-items-center">Gestion de "{{ $selection->title }}"</h3>
                    </div>
                    <div class="card-toolbar my-1">
                        <div class="top_buttons">
                            <a href="{{ route('proposalmanagement.callforproposal.selection.show', ['callForProposal' => $callforproposal, 'selection' => $selection]) }}"
                                class="btn btn-sm btn-light-primary">Retour à la liste</a>
                        </div>
                    </div>
                </div>
                <div class="card-body py-0" id="form-container">
                    <div class="row">
                        <div class="col-8 mb-5 mb-xl-8">
                            <h4>Configuration des groupes</h4>
                            <div class="row mb-2">
                                <div class="col-6">
                                    <div class="form-group row">
                                        <label for="staticEmail" class="col-sm-3 col-form-label">Nb de groupe</label>
                                        <div class="col-sm-9">
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <button class="btn btn-outline-secondary" type="button"
                                                        id="removeButton">-</button>
                                                </div>
                                                <input type="text" class="form-control" id="groupCount"
                                                    value="{{ count($groups) }}" min="1" autocomplete="off" readonly>
                                                <div class="input-group-append">
                                                    <button class="btn btn-outline-secondary" type="button"
                                                        id="addButton">+</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group row">
                                        <label for="staticEmail" class="col-sm-4 col-form-label">Nom des groupes</label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" id="groupeNamePattern"
                                                value="{{$groupNamePattern}}">
                                            <small class="form-text text-muted">
                                                Utilisé # pour l'emplacement de numérotation automatique.
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="list_container" class="row">
                                @foreach ($groups as $group)
                                    <div class="col-6 mb-3">
                                        <div class="selection_group" data-group-id="{{ $group->id }}">
                                            <input type="text" name="groupName" value="{{ $group->name }}"
                                                placeholder="Nom du groupe" class="form-control form-control-sm" readonly />
                                            <ul class="sortable connectedSortable">
                                                @foreach ($group->applicationSelections as $applicationSelection)
                                                    <li class="ui-state-default" id="setid_{{ $applicationSelection->id }}">
                                                        {{ $applicationSelection->application->project_title }}
                                                    </li>
                                                @endforeach
                                            </ul>
                                            <div class="reviewers_container">
                                                <h5>Évaluateurs</h5>
                                                <select name="reviewers" autocomplete="off"
                                                         style="width: 100%" data-init-function="bpFieldInitSimpleSelect2MultipleElement"
                                                        data-field-is-inline="false"
                                                        data-select-all="false"
                                                        data-language="{{ str_replace('_', '-', app()->getLocale()) }}"
                                                        data-allows-null="true" data-placeholder="Rechercher par nom"
                                                        bp-field-main-input @include('crud::fields.inc.attributes', [
        'default_class' => 'form-control form-control-solid select2_multiple',
    ]) multiple>
                                                    @foreach ($reviewerOptions as $key => $optionName)
                                                        @if (in_array($key, $group->reviewers->pluck('user_id')->toArray()))
                                                            <option value="{{ $key }}" selected>{{ $optionName }}</option>
                                                        @else
                                                            <option value="{{ $key }}">{{ $optionName }}</option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <button type="button" class="btn btn-primary" id="submitGroups">Sauvegarder les
                                groupes</button>
                        </div>
                        <div class="col-1"></div>
                        <div class="col-3">
                            <h4>Candidatures non reparties</h4>
                            <ul id="sortable1" class="defaultsortable connectedSortable">
                                @foreach ($applicationSelectionWithoutGroups as $applicationSelection)
                                    <li class="ui-state-default" id="setid_{{ $applicationSelection->id }}">
                                        {{ $applicationSelection->application->project_title }}
                                        @if ($applicationSelection->groups->count() > 0 )
                                            ({{ $applicationSelection->groups->count() }})
                                        @endif
                                    </li>
                                @endforeach
                            </ul>
                            <h4>Candidatures déjà reparties (nb groupes)</h4>
                            <ul id="sortable2" class="defaultsortable2 connectedSortable">
                                @foreach ($applicationSelectionWithGroups as $applicationSelection)
                                    <li class="ui-state-default" id="setid_{{ $applicationSelection->id }}">
                                        {{ $applicationSelection->application->project_title }}
                                        @if ($applicationSelection->groups->count() > 0 )
                                            ({{ $applicationSelection->groups->count() }})
                                        @endif
                                    </li>
                                @endforeach
                            </ul>


                            <div class="alert alert-info">
                                <i class="bi bi-info-circle-fill"></i>
                                <strong>Attention</strong>
                                Pour ajouter plusieurs fois la même candidature, Il est necessaire de sauvegarder les groupes entre chaque ajout supplémentaire.
                            </div>
                            <button type="button" class="btn btn-secondary w-100 d-none" id="randomGroup">Répartition
                                auto.</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <template id="list_template">
        <div class="col-6 mb-3">
            <div class="selection_group" data-group-id="">
                <input type="text" name="groupName" placeholder="Nom du groupe" class="form-control form-control-sm"
                    readonly />
                <ul class="sortable connectedSortable">
                </ul>
                <div class="reviewers_container">
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle-fill"></i>
                        Les évaluateurs ne peuvent pas être configurés avant d'avoir sauvegarder le groupe une première fois.
                    </div>
                </div>
            </div>
        </div>
    </template>
@endsection

@section('after_styles')
    <style media="screen">
        .selection_group {
            border: 1px solid grey;
            border-radius: 5px;
        }

        .connectedSortable {
            list-style-type: none;
            padding: 0;
            margin: 0;
            min-height: 200px;
        }

        .connectedSortable li {
            margin: 2px;
            padding: 5px;
            background-color: #eee;
            border: 1px solid #ccc;
        }

        .ui-state-highlight {
            margin: 5px;
            padding: 10px;
            height: 32px;
        }

        .reviewers_container {
            background: lightgrey;
            padding: 5px;
            border-radius: 0 0 5px 5px;
            border-top: 1px solid grey;
        }
    </style>

@endsection

@section('after_scripts')
    @loadOnce('packages/select2/dist/js/select2.full.min.js')
<script src="{{ asset('packages/jquery-ui-dist/jquery-ui.min.js') }}" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var currentCount = {{ count($groups) }};
        var idCounter = 1;

        function updateGroupsName() {
            let groupNamePattern = $("#groupeNamePattern").val();
            var groupCount = parseInt($("#groupCount").val());
            var count = 0;
            $(".selection_group").each(function() {
                count++;
                var groupName = groupNamePattern.replace('#', count);
                var groupNameField = $(this).find('input[name="groupName"]');
                groupNameField.val(groupName);
            });
        }

        function updateList() {
            // Get the value from the input field
            var groupCount = parseInt($("#groupCount").val());
            let groupNamePattern = $("#groupeNamePattern").val();

            // Remove excess lists if the count has decreased
            if (groupCount < currentCount) {
                $("#list_container").children().slice(groupCount).remove();
            }

            // Add more lists if the count has increased
            while (currentCount < groupCount) {
                // Clone the template content
                var template = $($("#list_template").html());
                var newId = "sortable" + idCounter;
                template.attr("id", newId);


                // Append the cloned element with unique ID to the list container
                $("#list_container").append(template);

                $("#" + newId + " .sortable").sortable({
                    placeholder: "ui-state-highlight",
                    connectWith: ".connectedSortable"
                }).disableSelection();
                // Increment the ID counter
                idCounter++;
                currentCount++;
            }

            // Update the current count
            currentCount = groupCount;

            updateGroupsName();
        }

        // Add button event
        $("#addButton").on("click", function() {
            $("#groupCount").val(function(i, val) {
                return ++val;
            });
            updateList();
        });

        // Remove button event
        $("#removeButton").on("click", function() {
            $("#groupCount").val(function(i, val) {
                return val > 1 ? --val : 1;
            });
            updateList();
        });

        $("#groupeNamePattern").on("keyup", function() {
            updateGroupsName();
        });
        $("#groupCount").on("change", function() {
            updateList();
        });
        updateList();
    });

    jQuery(document).ready(function($) {
        // Enable default
        $(function() {
            $(".sortable, .defaultsortable, .defaultsortable2").sortable({
                placeholder: "ui-state-highlight",
                connectWith: ".connectedSortable"
            }).disableSelection();
        });

        $("#submitGroups").on("click", function() {
            // prepare groups to be posted as array
            var groups = new Array();
            $(".selection_group").each(function() {
                var groupId = $(this).data('group-id');
                var serializationString = $(this).find('.sortable').sortable("serialize", {
                    key: "id"
                });
                const applicationSelectionIds = (serializationString === "id=" || !serializationString) ?
                    [] : serializationString.split('&').map(
                        pair => parseInt(pair.split(
                            '=')[1], 10));

                var groupName = $(this).find('input[name="groupName"]').val();
                var reviewersVal = $(this).find('select[name="reviewers"]').val();
                var reviewerIds = !reviewersVal ? [] : reviewersVal;

                let group = {
                    'name': groupName,
                    'id': groupId,
                    'applicationSelectionIds': applicationSelectionIds,
                    'reviewerIds': reviewerIds
                };
                groups.push(group);
            });

            let formBody = {
                'groups': groups
            };

            const csrfToken = $('meta[name="csrf-token"]').attr('content');
            fetch('{{ route('proposalmanagement.callforproposal.selection.groups.update', ['callForProposal' => $callforproposal, 'selection' => $selection]) }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: JSON.stringify(formBody),
                })
                .then(response => response.json())
                .then(data => {
                    if (data.redirect) {
                        window.location.href = data.redirect;
                    }
                })
                .then(result => console.log(result))
                .catch(error => console.error('Error:', error));
        });
    });
</script>


    @loadOnce('bpFieldInitSimpleSelect2MultipleElement')
    <script>
        function bpFieldInitSimpleSelect2MultipleElement(element) {
            if (!element.hasClass("select2-hidden-accessible")) {
                let $isFieldInline = element.data('field-is-inline');
                let $allowClear = element.data('allows-null');
                let $multiple = element.attr('multiple') ?? false;
                let $placeholder = element.attr('placeholder');

                var $obj = element.select2({
                    allowClear: $allowClear,
                    multiple: $multiple,
                    placeholder: $placeholder,
                    minimumResultsForSearch: 16,
                    dropdownParent: $isFieldInline ? $('#inline-create-dialog .modal-content') : $(document.body)
                });
            }
        }
    </script>
    @endLoadOnce

<script>
    function initializeFieldsWithJavascript(container) {
        var selector;
        if (container instanceof jQuery) {
            selector = container;
        } else {
            selector = $(container);
        }
        selector.find("[data-init-function]").not("[data-initialized=true]").each(function () {
            var element = $(this);
            var functionName = element.data('init-function');

            if (typeof window[functionName] === "function") {
                window[functionName](element);

                // mark the element as initialized, so that its function is never called again
                element.attr('data-initialized', 'true');
            }
        });
    }
    initializeFieldsWithJavascript($('#form-container'));
</script>

@endsection