@extends('layouts.main')

@once
    @push('stylesheets')
        <link rel="stylesheet" href="{{asset('css/invitations-links.css')}}"/>
    @endpush
@endonce

@section('content')
    <div blade="{{ $viewName ?? 'unknown' }}">

    <x-page-header>
        VIEWING TOTAL INVITATION LINKS
    </x-page-header>
    <div class="d-flex justify-content-end gap-3 select-container">
        <form id="invitation-links-form" style="display:contents;">

            <x-ui.select.filter
                name="type"
                id="type-select"
                :options="$typeOptions"
                :selected="request('type')"
            >


            </x-ui.select.filter>

            <div id="phase-select"

            >
                <x-ui.select.filter
                    disabled
                    name="phase"
                    title="ΕΠΙΛΕΞΕ ΦΑΣΗ"
                    :options="$activation_phases"
                    :clearable="true"
                    :selected="request('phase')"
                >
                </x-ui.select.filter>
            </div>

            {{--ACTS FILTERS--}}

            <div id="act-select" class="phase-acts"

            >

                <x-ui.select.filter
                    name="act"
                    :options="$acts"
                    title="ΕΠΙΛΕΞΕ ΔΡΑΣΗ"
                    optionAttr="activation_phase_id"
                    disabled
                >

                </x-ui.select.filter>
            </div>


        </form>
    </div>

    <div id="listDataContainer">
        @include('management-activation.partials.links-list')
    </div>

    </div>
@endsection

@push('scripts-stack')
    <script defered>
        $s = jQuery.noConflict();

        $s(document).ready(function () {

            const urlParams = new URLSearchParams(window.location.search)

            const typeSelect = $s('select[name="type"]')
            const phaseSelect = $s('select[name="phase"]')
            const actSelect = $s('select[name="act"]')

            const form = document.getElementById('invitation-links-form');

            updateActFilter(urlParams.get('phase'), true)
            if(urlParams.get('type') === 'in_act' ) {
                enablePhaseSelects()
            }



            const criteria = {
                page: 1,
                page_size: urlParams.get('page_size') ?? '10',
                type: urlParams.get('type') ?? 'all',
                phase: urlParams.get('phase') ?? '',
                act: urlParams.get('act') ?? '',
            };



            typeSelect.on('change', (e) => {


                const type = e.target.value

                if (type === 'in_act') {
                    enablePhaseSelects()
                } else {

                    form.submit()
                }


            })
            phaseSelect.on('change', (e) => {

                updateActFilter(e.target.value)

            })

            actSelect.on('change', (e) => {
                form.submit()
            })


            /**
             * filters the acts that belongs to the phase
             * if init is true it take the select value from the search query
             */
            function updateActFilter(phaseID, init=false) {
                // if (!phaseID) return
                $s('select[name="act"]').find('option').each(function () {
                    const opt = $s(this);
                    opt.data('activation_phase_id') == phaseID ? opt.show() : opt.hide();

                    actSelect.val(init ? urlParams.get('act') : '');
                    actSelect.selectpicker('destroy');
                    actSelect.selectpicker('render');

                })
            }

            function enablePhaseSelects() {
                actSelect.attr("disabled",false);
                actSelect.selectpicker("destroy");
                actSelect.selectpicker("render");

                phaseSelect.attr("disabled",false);
                phaseSelect.selectpicker("destroy");
                phaseSelect.selectpicker("render");
            }

        });

    </script>
@endpush