@extends('frontend.mediknode.layout.mainlayout')
@section('content')
    @component('frontend.mediknode.components.breadcrumb')
        @slot('title')
            {{ $form->name }}
        @endslot
        @slot('li_1')
            {{ $form->name }}
        @endslot
    @endcomponent
    <div class="about-content">
        <div class="container">
            @component('frontend.mediknode.components.buttons', ['event' => $event])
            @endcomponent
            <div class="dashboard-details mt-4 mb-4">
                <div class="row dashboard-info">
                    <div class="col-lg-12">
                        <div class="card dash-cards">
                            <div class="card-body">
                                <div class="profile-form">
                                    <div class="row">
                                        <div class="col-lg-12 col-md-12 pt-2">
                                            @if (session('success'))
                                                <div class="alert alert-success">
                                                    {{ session('success') }}
                                                </div>
                                            @endif

                                            @if (session('error'))
                                                <div class="alert alert-danger">
                                                    {{ session('error') }}
                                                </div>
                                            @endif

                                            @if (!session('success'))
                                                @if ($form->description)
                                                    <div class="mb-4">
                                                        {!! $form->description !!}
                                                    </div>
                                                @endif

                                                @if ($form->is_closed)
                                                    {{-- Formulaire clôturé : on garde les conditions ci-dessus, on masque les champs et on affiche le message de clôture --}}
                                                    <div class="alert alert-warning text-center mt-3">
                                                        La soumission est clôturée.
                                                    </div>
                                                @else
                                                <form method="POST"
                                                    action="{{ route('form.store', ['slug' => $event->slug, 'formSlug' => $form->slug]) }}"
                                                    class="needs-validation" novalidate>
                                                    @csrf

                                                    @foreach ($form->fields as $field)
                                                        @php
                                                            $settings = $field->settings ?? null;
                                                            if ($settings && is_array($settings) && isset($settings['is_backoffice_only']) && $settings['is_backoffice_only']) {
                                                                continue;
                                                            }

                                                            $fieldKey = 'field_' . $field->id;
                                                            $resolvedValue = old($fieldKey, $field->default_value);
                                                            $isReadonly = false;

                                                            if ($settings && is_array($settings)) {
                                                                if (isset($settings['prefill'])) {
                                                                    $prefill = $settings['prefill'];
                                                                    if (is_string($prefill)) {
                                                                        if (str_starts_with($prefill, 'user->')) {
                                                                            $attr = substr($prefill, strlen('user->'));
                                                                            if (isset($user) && isset($user->$attr)) {
                                                                                $resolvedValue = $user->$attr;
                                                                            }
                                                                        } elseif (
                                                                            str_starts_with($prefill, 'event->')
                                                                        ) {
                                                                            $attr = substr($prefill, strlen('event->'));
                                                                            if (isset($event) && isset($event->$attr)) {
                                                                                $resolvedValue = $event->$attr;
                                                                            }
                                                                        } else {
                                                                            // literal value or direct user attribute name
                                                                            if (
                                                                                isset($user) &&
                                                                                isset($user->{$prefill})
                                                                            ) {
                                                                                $resolvedValue = $user->{$prefill};
                                                                            } else {
                                                                                $resolvedValue = $prefill;
                                                                            }
                                                                        }
                                                                    }
                                                                }

                                                                if (
                                                                    isset($settings['readonly']) &&
                                                                    $settings['readonly']
                                                                ) {
                                                                    $isReadonly = true;
                                                                }
                                                            }
                                                        @endphp

                                                        <div class="form-group mb-3">
                                                            @switch($field->type)
                                                                @case('text')
                                                                    <label class="col-form-label" for="field_{{ $field->id }}">
                                                                        {{ $field->label }}
                                                                        @if ($field->required)
                                                                            <span class="asterisk">*</span>
                                                                        @endif
                                                                    </label>
                                                                    <input type="text"
                                                                        class="form-control @error('field_' . $field->id) is-invalid @enderror"
                                                                        name="field_{{ $field->id }}"
                                                                        id="field_{{ $field->id }}" value="{{ $resolvedValue }}"
                                                                        placeholder="{{ $field->placeholder }}"
                                                                        {{ $field->required ? 'required' : '' }}
                                                                        {{ $isReadonly ? 'readonly' : '' }} autocomplete="off">
                                                                @break

                                                                @case('textarea')
                                                                    <label class="col-form-label" for="field_{{ $field->id }}">
                                                                        {{ $field->label }}
                                                                        @if ($field->required)
                                                                            <span class="asterisk">*</span>
                                                                        @endif
                                                                    </label>
                                                                    <textarea class="form-control @error('field_' . $field->id) is-invalid @enderror" name="field_{{ $field->id }}"
                                                                        id="field_{{ $field->id }}" rows="4" placeholder="{{ $field->placeholder }}"
                                                                        {{ $field->required ? 'required' : '' }} {{ $isReadonly ? 'readonly' : '' }}>{{ $resolvedValue }}</textarea>
                                                                    @if ($field->settings && isset($field->settings['max_words']))
                                                                        <div class="word-limit-message"
                                                                            data-max="{{ $field->settings['max_words'] }}"
                                                                            data-textarea="field_{{ $field->id }}"></div>
                                                                    @endif
                                                                @break

                                                                @case('select')
                                                                    <label class="col-form-label" for="field_{{ $field->id }}">
                                                                        {{ $field->label }}
                                                                        @if ($field->required)
                                                                            <span class="asterisk">*</span>
                                                                        @endif
                                                                    </label>
                                                                    <select
                                                                        class="form-control @error('field_' . $field->id) is-invalid @enderror"
                                                                        name="field_{{ $field->id }}"
                                                                        id="field_{{ $field->id }}"
                                                                        {{ $field->required ? 'required' : '' }}
                                                                        {{ $isReadonly ? 'disabled' : '' }}>
                                                                        <option value="">-- Sélectionner --</option>
                                                                        @if ($field->options)
                                                                            @foreach ($field->options as $option)
                                                                                <option value="{{ trim($option) }}"
                                                                                    {{ old('field_' . $field->id, $resolvedValue) == trim($option) ? 'selected' : '' }}>
                                                                                    {{ trim($option) }}
                                                                                </option>
                                                                            @endforeach
                                                                        @endif
                                                                    </select>
                                                                    @if ($isReadonly)
                                                                        <input type="hidden" name="field_{{ $field->id }}"
                                                                            value="{{ $resolvedValue }}">
                                                                    @endif
                                                                @break

                                                                @case('radio')
                                                                    <label class="col-form-label">
                                                                        {{ $field->label }}
                                                                        @if ($field->required)
                                                                            <span class="asterisk">*</span>
                                                                        @endif
                                                                    </label>
                                                                    @if ($field->options)
                                                                        @foreach ($field->options as $optIndex => $option)
                                                                            <div class="form-check">
                                                                                <input
                                                                                    class="form-check-input @error('field_' . $field->id) is-invalid @enderror"
                                                                                    type="radio" name="field_{{ $field->id }}"
                                                                                    id="field_{{ $field->id }}_{{ $optIndex }}"
                                                                                    value="{{ trim($option) }}"
                                                                                    {{ old('field_' . $field->id, $resolvedValue) == trim($option) ? 'checked' : '' }}
                                                                                    {{ $field->required ? 'required' : '' }}
                                                                                    {{ $isReadonly ? 'disabled' : '' }}>
                                                                                <label class="form-check-label"
                                                                                    for="field_{{ $field->id }}_{{ $optIndex }}">
                                                                                    {{ trim($option) }}
                                                                                </label>
                                                                            </div>
                                                                        @endforeach
                                                                        @if ($isReadonly)
                                                                            <input type="hidden" name="field_{{ $field->id }}"
                                                                                value="{{ $resolvedValue }}">
                                                                        @endif
                                                                    @endif
                                                                @break

                                                                @case('checkbox')
                                                                    <div class="form-check">
                                                                        <input
                                                                            class="form-check-input @error('field_' . $field->id) is-invalid @enderror"
                                                                            type="checkbox" name="field_{{ $field->id }}"
                                                                            id="field_{{ $field->id }}" value="1"
                                                                            {{ old('field_' . $field->id) ? 'checked' : '' }}
                                                                            {{ $field->required ? 'required' : '' }}>
                                                                        <label class="form-check-label"
                                                                            for="field_{{ $field->id }}">
                                                                            {{ $field->label }}
                                                                            @if ($field->required)
                                                                                <span class="asterisk">*</span>
                                                                            @endif
                                                                        </label>
                                                                    </div>
                                                                @break

                                                                @case('number')
                                                                    <label class="col-form-label" for="field_{{ $field->id }}">
                                                                        {{ $field->label }}
                                                                        @if ($field->required)
                                                                            <span class="asterisk">*</span>
                                                                        @endif
                                                                    </label>
                                                                    <input type="number"
                                                                        class="form-control @error('field_' . $field->id) is-invalid @enderror"
                                                                        name="field_{{ $field->id }}"
                                                                        id="field_{{ $field->id }}"
                                                                        value="{{ $resolvedValue }}"
                                                                        placeholder="{{ $field->placeholder }}"
                                                                        {{ $field->required ? 'required' : '' }}
                                                                        @if ($field->settings && isset($field->settings['min'])) min="{{ $field->settings['min'] }}" @endif
                                                                        @if ($field->settings && isset($field->settings['max'])) max="{{ $field->settings['max'] }}" @endif>
                                                                @break

                                                                @case('url')
                                                                    <label class="col-form-label" for="field_{{ $field->id }}">
                                                                        {{ $field->label }}
                                                                        @if ($field->required)
                                                                            <span class="asterisk">*</span>
                                                                        @endif
                                                                    </label>
                                                                    <input type="url"
                                                                        class="form-control @error('field_' . $field->id) is-invalid @enderror"
                                                                        name="field_{{ $field->id }}"
                                                                        id="field_{{ $field->id }}"
                                                                        value="{{ $resolvedValue }}"
                                                                        placeholder="{{ $field->placeholder ?? 'https://' }}"
                                                                        {{ $field->required ? 'required' : '' }}
                                                                        {{ $isReadonly ? 'readonly' : '' }}>
                                                                @break

                                                                @case('date')
                                                                    <label class="col-form-label" for="field_{{ $field->id }}">
                                                                        {{ $field->label }}
                                                                        @if ($field->required)
                                                                            <span class="asterisk">*</span>
                                                                        @endif
                                                                    </label>
                                                                    <input type="date"
                                                                        class="form-control @error('field_' . $field->id) is-invalid @enderror"
                                                                        name="field_{{ $field->id }}"
                                                                        id="field_{{ $field->id }}"
                                                                        value="{{ $resolvedValue }}"
                                                                        {{ $field->required ? 'required' : '' }}
                                                                        {{ $isReadonly ? 'readonly' : '' }}>
                                                                @break

                                                                @case('video')
                                                                    <label class="col-form-label">
                                                                        {{ $field->label }}
                                                                        @if ($field->required)
                                                                            <span class="asterisk">*</span>
                                                                        @endif
                                                                    </label>

                                                                    {{-- Champ caché qui recevra le driveFileId après upload --}}
                                                                    <input type="hidden"
                                                                        name="field_{{ $field->id }}"
                                                                        id="field_{{ $field->id }}_hidden"
                                                                        value="">

                                                                    <div id="video-zone-{{ $field->id }}">
                                                                        <input type="file"
                                                                            id="video-input-{{ $field->id }}"
                                                                            accept="video/mp4,video/quicktime"
                                                                            class="form-control @error('field_' . $field->id) is-invalid @enderror"
                                                                            {{ $field->required ? 'required' : '' }}
                                                                            data-field-id="{{ $field->id }}"
                                                                            data-required="{{ $field->required ? '1' : '0' }}">

                                                                        <div id="progress-container-{{ $field->id }}" style="display:none; margin-top:12px;">
                                                                            <div style="background:#e0e0e0; border-radius:6px; height:18px; overflow:hidden;">
                                                                                <div id="progress-bar-{{ $field->id }}"
                                                                                    style="background:#2196F3; height:100%; width:0%; transition:width 0.3s; border-radius:6px;">
                                                                                </div>
                                                                            </div>
                                                                            <p id="progress-text-{{ $field->id }}"
                                                                                style="font-size:13px; color:#555; margin-top:5px; font-weight:bold;">
                                                                                Préparation de l'envoi...
                                                                            </p>
                                                                        </div>

                                                                        <p style="font-size:12px; color:#666; margin-top:10px; border-left:3px solid #2196F3; padding-left:10px;">
                                                                            🔒 <strong>Confidentialité :</strong>
                                                                            Votre vidéo est transférée directement vers l'espace de stockage sécurisé de l'organisation.
                                                                            Aucun autre participant ne peut consulter votre travail.
                                                                            <strong>Ne fermez pas cette page avant la confirmation.</strong>
                                                                        </p>
                                                                    </div>
                                                                @break
                                                            @endswitch

                                                            @if ($field->help_text)
                                                                <div class="text-information text-info">
                                                                    {{ $field->help_text }}</div>
                                                            @endif

                                                            @error('field_' . $field->id)
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror

                                                            <div class="invalid-feedback">
                                                                Le champ "{{ $field->label }}" est obligatoire.
                                                            </div>
                                                        </div>
                                                    @endforeach

                                                    <div class="row justify-content-md-center mt-3">
                                                        <div class="col-lg-3 col-md-4 col-md-auto">
                                                            <button class="btn btn-success w-100 login-btn"
                                                                type="submit">Soumettre</button>
                                                        </div>
                                                    </div>
                                                </form>
                                                @endif

                                                @if ($form->footer_html)
                                                    <div class="mt-4">
                                                        {!! $form->footer_html !!}
                                                    </div>
                                                @endif
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .word-limit-message {
            color: #7D3C98;
            font-size: 0.9em;
            margin: 5px 0;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.word-limit-message[data-max]').forEach(function(el) {
                const maxWords = parseInt(el.dataset.max);
                const textareaId = el.dataset.textarea;
                const textarea = document.getElementById(textareaId);
                if (!textarea) return;

                textarea.addEventListener('input', function() {
                    const words = textarea.value.trim().split(/\s+/);
                    const wordCount = words.filter(w => w !== "").length;
                    if (wordCount > maxWords) {
                        textarea.value = words.slice(0, maxWords).join(" ");
                        el.textContent = `Limite de ${maxWords} mots atteinte.`;
                    } else {
                        el.textContent = `Nombre de mots : ${wordCount}/${maxWords}`;
                    }
                });

                // Trigger on load for pre-filled fields
                textarea.dispatchEvent(new Event('input'));
            });
        });
    </script>
    @component('frontend.mediknode.components.scrolltotop')
    @endcomponent

    <script>
    (function () {
        const CHUNK_SIZE = 5 * 1024 * 1024; // 5 Mo

        document.querySelectorAll('input[type="file"][data-field-id]').forEach(function (input) {
            input.addEventListener('change', async function () {
                const fieldId  = this.dataset.fieldId;
                const required = this.dataset.required === '1';
                const file     = this.files[0];
                if (!file) return;

                const hidden      = document.getElementById('field_' + fieldId + '_hidden');
                const container   = document.getElementById('progress-container-' + fieldId);
                const bar         = document.getElementById('progress-bar-' + fieldId);
                const text        = document.getElementById('progress-text-' + fieldId);
                const submitBtn   = document.querySelector('button[type="submit"]');

                container.style.display = 'block';
                text.textContent = 'Vérification du fichier...';
                if (submitBtn) submitBtn.disabled = true;

                // Étape 1 : demander l'URI resumable au serveur
                let uploadUri;
                try {
                    const initResp = await fetch('{{ route("form.video.init-upload") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content
                                            || '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            mimeType: file.type,
                            fileSize: file.size,
                            fileName: file.name,
                        })
                    });

                    const initData = await initResp.json();

                    if (initData.error) {
                        text.textContent = '❌ ' + initData.error;
                        bar.style.background = '#f44336';
                        if (submitBtn) submitBtn.disabled = false;
                        return;
                    }

                    uploadUri = initData.uploadUri;

                } catch (err) {
                    text.textContent = '❌ Erreur de connexion au serveur.';
                    bar.style.background = '#f44336';
                    if (submitBtn) submitBtn.disabled = false;
                    return;
                }

                // Étape 2 : upload direct en chunks vers Google Drive
                let offset = 0;
                let driveFileId = null;
                text.textContent = 'Envoi en cours... 0%';

                while (offset < file.size) {
                    const chunk = file.slice(offset, offset + CHUNK_SIZE);
                    const end   = Math.min(offset + CHUNK_SIZE, file.size) - 1;

                    let chunkResp;
                    try {
                        chunkResp = await fetch(uploadUri, {
                            method: 'PUT',
                            headers: {
                                'Content-Range': 'bytes ' + offset + '-' + end + '/' + file.size,
                                'Content-Type':  file.type,
                            },
                            body: chunk,
                        });
                    } catch (err) {
                        text.textContent = '❌ Connexion interrompue. Veuillez réessayer.';
                        bar.style.background = '#f44336';
                        if (submitBtn) submitBtn.disabled = false;
                        return;
                    }

                    offset += CHUNK_SIZE;
                    const percent = Math.min(Math.round((offset / file.size) * 100), 100);
                    bar.style.width  = percent + '%';
                    text.textContent = 'Envoi en cours... ' + percent + '%';

                    if (chunkResp.status === 200 || chunkResp.status === 201) {
                        const result = await chunkResp.json();
                        driveFileId  = result.id;
                        break;
                    }

                    if (chunkResp.status !== 308) {
                        text.textContent = '❌ Erreur lors de l\'envoi (code ' + chunkResp.status + ').';
                        bar.style.background = '#f44336';
                        if (submitBtn) submitBtn.disabled = false;
                        return;
                    }
                }

                if (driveFileId) {
                    hidden.value = driveFileId;
                    bar.style.background = '#4CAF50';
                    text.textContent     = '✅ Vidéo envoyée avec succès ! Vous pouvez maintenant soumettre le formulaire.';
                    if (submitBtn) submitBtn.disabled = false;
                } else {
                    text.textContent = '❌ L\'upload n\'a pas pu être finalisé.';
                    bar.style.background = '#f44336';
                    if (submitBtn) submitBtn.disabled = false;
                }
            });
        });
    })();
    </script>
@endsection