@extends('layouts.main')

@section('title', 'Opera - ' . $module->name)
@section('description', 'Opera - ' . $module->name)

@push('styles')
    <style>
        .fc-slats tr {height: 50px; }
        .fc-axis { vertical-align: top; }
    </style>
@endpush

@section('content')
    <h1 class="text-center">{{ $module->name }}</h1>

    <p class="mt-4 mb-5">
        Pour inscrire un participant, cliquez sur le créneau de formation qui convient.<br>
        Vous pourrez ensuite sélectionner le(s) participant(s) à partir de la liste que vous avez fourni ou ajouter un participant manuellement le cas échéant.<br>
        Vous pouvez inscrire sur différents créneaux disponibles. Une fois que vous avez terminé, veuillez cliquer sur le bouton « terminer » avant de quitter la page pour recevoir un e-mail contenant le récapitulatif de vos inscriptions.
        <br><br><a href="mailto:inscription_opera@groupe-euris.com" class="btn btn-primary btn-sm">Besoin d'aide ? Contactez-nous !</a>
    </p>
    {{ Form::open(['route' => ['module.store', [$refinery->url, $module->url]], 'method' => 'POST']) }}
        {{ Form::hidden('email', $email) }}
        {{ Form::hidden('last_name', $last_name) }}
        {{ Form::hidden('first_name', $first_name) }}

        <div id="calendar"></div>

        @foreach($availabilities as $availability)
            {{ Form::hidden('availabilities[' . $availability->id . ']', null, ['class' => 'availabilityField', 'id' => 'availability-' . $availability->id]) }}
        @endforeach

        <div class="my-3 text-center">
            <button class="btn btn-primary">Valider mes inscriptions</button>
        </div>
    {{ Form::close() }}

    @include('module.partials._modal')
@endsection

@push('scripts')
    <script>
        let current_event = null;
        let max = {{ $module->max }};

        $('#company_id').on('change',function () {
            $('#selected_employees').html('');
            $('#available_employees').html('');
            $('#left_places_error').hide();

            if($(this).val() != '') {
                $('#company_select').hide();

                axios.post('{{ route('company.employees') }}', {module_id: {{ $module->id }}, company_id: $(this).val()}).then((r) => {
                    $('#available_employees').html('');
                    let employees_selected = [];
                    let total_employees_selected = [];

                    if($('#availability_id').val() != '') {
                        let selected = $('#availability-' + $('#availability_id').val()).val().split(',');
                        selected.forEach(function(item) {
                            if(!employees_selected.includes(item)) {
                                employees_selected.push(item);
                            }
                        });

                        $('.availabilityField').each(function() {
                            if($(this).attr('id') != 'availability-' + $('#availability_id').val()) {
                                let total_selected = $(this).val().split(',');
                                total_selected.forEach(function(item) {
                                    if(!total_employees_selected.includes(item)) {
                                        total_employees_selected.push(item);
                                    }
                                });
                            }
                        });
                    } else {
                        $('.availabilityField').each(function() {
                            let total_selected = $(this).val().split(',');
                            total_selected.forEach(function(item) {
                                if(!total_employees_selected.includes(item)) {
                                    total_employees_selected.push(item);
                                }
                            });
                        });
                    }

                    Object.entries(r.data.employees).forEach(function(employee, index) {
                        if(!employees_selected.includes(employee[0]) && !total_employees_selected.includes(employee[0])) {
                            $('#available_employees').append('<option value="' + employee[0] + '">' + employee[1] + '</option>');
                        } else if(employees_selected.includes(employee[0])) {
                            $('#selected_employees').append('<option value="' + employee[0] + '">' + employee[1] + '</option>');
                        }
                    });
                });
            } else {
                $('#company_select').show();
            }
        });

        $('.newEmployee').on('click', function(event) {
            event.preventDefault();

            if($('#company_id').val() != '') {
                $('.add-employee').show();
            }
        });

        $('.addEmployee').on('click', function(event) {
            event.preventDefault();
            let company_id = $('#company_id').val();
            let module_id = {{ $module->id }};
            let last_name = $('#last_name').val();
            let first_name = $('#first_name').val();
            let added = $('#selected_employees option').length;

            $('#employee_error').hide();
            $('#left_places_error').hide();

            if(company_id !== '' && last_name !== '' && first_name !== '' && (added + 1) <= $('#left_places').val()) {
                axios.post("{{ route('employee.add') }}", {
                    company_id: company_id,
                    module_id: module_id,
                    first_name: first_name,
                    last_name: last_name,
                }).then((r) => {
                    if(r.data.success) {
                        $('#selected_employees').append('<option value="' + r.data.id + '">' + r.data.name + '</option>');
                        $('#first_name').val('');
                        $('#last_name').val('');
                    } else {
                        $('#employee_error').show();
                    }
                });
            } else if(added + 1 > $('#left_places').val()) {
                $('#left_places_error').show();
            }
        });

        $('.addSelection').on('click', function() {
            let values = $('#available_employees').val();
            let added = $('#selected_employees option').length;

            $('#left_places_error').hide();
            if((values.length + added) <= $('#left_places').val()) {
                values.forEach(function(value) {
                    let $option = $("#available_employees option[value='" + value + "']");
                    $('#selected_employees').append('<option value="' + value + '">' + $option.text() + '</option>');
                    $option.remove();
                });
            } else {
                $('#left_places_error').show();
            }
        });

        $('.removeSelection').on('click', function() {
            let values = $('#selected_employees').val();

            values.forEach(function(value) {
                let $option = $("#selected_employees option[value='" + value + "']");
                $('#available_employees').append('<option value="' + value + '">' + $option.text() + '</option>');
                $option.remove();
            });
        });

        $("#calendar").fullCalendar({
            defaultView: 'month',
            header: {
                left: 'prev,next today',
                center: 'title',
                right : 'month,agendaWeek,agendaDay'
            },
            locale: 'fr',
            height: 700,
            firstDay: 1,
            allDaySlot: false,
            selectOverlap: false,
            views: {
                month: { columnHeaderFormat: 'ddd', displayEventEnd: true, eventLimit: 3 },
                week: { columnHeaderFormat: 'ddd DD', titleRangeSeparator: ' \u2013 ' },
                day: { columnHeaderFormat: 'dddd' },
            },
            minTime: '08:00',
            maxTime: '20:00',
            slotDuration: {hours: '1'},
            slotLabelInterval: {hours: '1'},
            slotEventOverlap: false,

            eventTextColor: '#fff',
            displayEventTime: true,
            events: {!! $calendar !!},
            eventClick: function(event) {
                current_event = event;
                let availability_id = event.availability_id;

                axios.post("{{ route('availability.find', $module) }}", {availability_id: availability_id}).then((r) => {
                    $('#left_places_error').hide();
                    $('#creneau_date_begin').text(r.data.date_begin);
                    $('#creneau_date_end').text(r.data.date_end);
                    $('#salle').text(r.data.room);
                    $('#availability_id').val(availability_id);
                    $('#left_places').val(r.data.left_places);
                    $('#company_id').trigger('change');

                    $('#exampleModal').modal('show');
                });
            },
        });

        $('#exampleModal').on('hidden.bs.modal', function (event) {
            $('#creneau_date_begin').text('');
            $('#creneau_date_end').text('');
            $('#salle').text('');
            $('#availability_id').val(null);
            $('#left_places').val(null);
            current_event = null;
        });

        $('.confirmInscription').on('click', function(event) {
            event.preventDefault();
            $('#selected_employees option').attr('selected', 'selected');
            let values = $('#selected_employees').val();
            let availability_id = $('#availability_id').val();

            $('#left_places_error').hide();
            if(values.length <= $('#left_places').val()) {
                $('#availability-' + availability_id).val(values.join(','));
                $('#selected_employees').html('');

                current_event.leftPlaces;
                current_event.title = ((current_event.leftPlaces - values.length > 0) ? ' ✅' : ' ❌') + (current_event.leftPlaces - values.length) + current_event.title.substring(current_event.title.indexOf('pl') - 1);

                $('#calendar').fullCalendar('updateEvent', current_event);

                $('#exampleModal').modal('hide');
            } else {
                $('#left_places_error').show();
            }
        });
    </script>
@endpush