@extends('layouts.panel')

@section('title', 'Registration Update')
@section('page-title', '')

@section('content')
    @php
        $activeType = old('membership_type', $registration->membership_type ?? null);
        $isPaid     = (bool) ($registration->is_paid ?? false);
    @endphp

    <div class="mb-4 text-center">
        <h2 class="h3 mb-3">ISDFS 2026 - Participation Details</h2>
        <p class="text-muted">
            Welcome,
            <span class="fw-semibold">
                {{ trim($paper->user->name . ' ' . ($paper->user->surname ?? '')) }}
            </span>!
            Please complete your registration.
            <br>
            You are executing a process with <span class="fw-semibold">Paper ID {{ $paper->id }}</span>.
        </p>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger" role="alert">
            <strong>Whoops! Something went wrong.</strong>
            <ul class="mb-0 mt-2">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if($registration)
        <form id="registrationForm" action="{{ route('panel.registration.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="registration_id" value="{{ $registration->id }}">

            <div class="row g-4">

                {{-- Paper ID - Title bilgisi --}}
                <div class="col-12">
                    <div class="mb-1 small">
        <span class="text-muted fw-semibold">
            {{ $paper->id }} - {{ \Illuminate\Support\Str::limit($paper->paper_title, 100) }}
        </span>
                    </div>
                </div>

                <!-- Phone Number -->
                <div class="col-12">
                    <div class="card border">
                        <div class="card-body">
                            <h5 class="card-title text-dark mb-3">Phone Number</h5>
                            <input id="phone_number"
                                   class="form-control"
                                   type="text"
                                   name="phone_number"
                                   pattern="[0-9]+"
                                   title="Please enter numbers only"
                                   value="{{ old('phone_number', $registration->phone_number) }}"
                                   required>
                        </div>
                    </div>
                </div>

                <!-- Degree -->
                <div class="col-12">
                    <div class="card border">
                        <div class="card-body">
                            <h5 class="card-title text-dark mb-3">Degree</h5>
                            <div class="d-flex flex-column gap-2">
                                @foreach(\App\Models\Registration::getUnvanOptions() as $value => $label)
                                    <div class="form-check">
                                        <input class="form-check-input"
                                               type="radio"
                                               name="unvan"
                                               id="unvan_{{ $value }}"
                                               value="{{ $value }}"
                                               {{ old('unvan', $registration->unvan) == $value ? 'checked' : '' }}
                                               required>
                                        <label class="form-check-label" for="unvan_{{ $value }}">
                                            {{ $label }}
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Type of Participation -->
                <div class="col-12">
                    <div class="card border">
                        <div class="card-body">
                            <h5 class="card-title text-dark mb-3">Type of Participation</h5>
                            <div class="d-flex flex-column gap-2">
                                @foreach(\App\Models\Registration::getMembershipTypeOptions() as $value => $label)
                                    <div class="form-check">
                                        <input class="form-check-input membership-radio"
                                               type="radio"
                                               name="membership_type"
                                               id="membership_{{ $value }}"
                                               value="{{ $value }}"
                                               {{ (string)old('membership_type', $registration->membership_type) === (string)$value ? 'checked' : '' }}
                                               required>
                                        <label class="form-check-label" for="membership_{{ $value }}">
                                            {{ $label }}
                                        </label>
                                    </div>
                                @endforeach
                            </div>

                            @if($isPaid)
                                <p class="text-muted small mt-2">
                                    <strong>Note:</strong> Your payment has been approved, so the
                                    <em>Type of Participation</em> cannot be changed.
                                </p>
                            @endif

                            <!-- Dosya yükleme alanları -->
                            <!-- IEEE File -->
                            <div id="ieeeFile"
                                 class="mb-3 {{ in_array((string)$activeType, ['1','3']) ? '' : 'd-none' }}">
                                <label for="ieee_certificate" class="form-label fw-semibold">IEEE Membership
                                    Certificate (PDF)</label>
                                <input type="file"
                                       class="form-control"
                                       name="ieee_certificate"
                                       id="ieee_certificate"
                                       accept=".pdf"
                                       oninvalid="this.setCustomValidity('Please select a file.')"
                                       oninput="this.setCustomValidity('')">

                                @if(in_array((string)$activeType, ['1','3']) && !empty($registration->ieee_certificate))
                                    <div class="mt-2" id="ieeeCurrentFile">
                                        <span class="text-muted">
                                            Currently uploaded:
                                            <a href="{{ asset($registration->ieee_certificate) }}" target="_blank"
                                               class="text-decoration-none">View current file</a>
                                            |
                                            <a href="javascript:void(0)"
                                               class="text-danger fw-semibold text-decoration-none"
                                               id="removeIeeeBtn">Remove file</a>
                                        </span>
                                    </div>
                                @endif

                                <input type="hidden" name="ieee_certificate_remove" id="ieee_certificate_remove"
                                       value="0">
                            </div>

                            <!-- Student File -->
                            <div id="studentFile"
                                 class="mb-3 {{ in_array((string)$activeType, ['3','4']) ? '' : 'd-none' }}">
                                <label for="student_certificate" class="form-label fw-semibold">Student Certificate
                                    (PDF)</label>
                                <input type="file"
                                       class="form-control"
                                       name="student_certificate"
                                       id="student_certificate"
                                       accept=".pdf"
                                       oninvalid="this.setCustomValidity('Please select a file.')"
                                       oninput="this.setCustomValidity('')">

                                @if(in_array((string)$activeType, ['3','4']) && !empty($registration->student_certificate))
                                    <div class="mt-2" id="studentCurrentFile">
                                        <span class="text-muted">
                                            Currently uploaded:
                                            <a href="{{ asset($registration->student_certificate) }}" target="_blank"
                                               class="text-decoration-none">View current file</a>
                                            |
                                            <a href="javascript:void(0)"
                                               class="text-danger fw-semibold text-decoration-none"
                                               id="removeStudentBtn">Remove file</a>
                                        </span>
                                    </div>
                                @endif

                                <input type="hidden" name="student_certificate_remove" id="student_certificate_remove"
                                       value="0">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Association Member -->
                <div class="col-12">
                    <div class="card border">
                        <div class="card-body">
                            <h5 class="card-title text-dark mb-3">Are you Association of Software and Cyber Security
                                Members?</h5>
                            <div class="d-flex gap-3">
                                <div class="form-check">
                                    <input class="form-check-input"
                                           type="radio"
                                           name="is_ascs_member"
                                           id="ascs_yes"
                                           value="1"
                                           {{ old('is_ascs_member', $registration->is_ascs_member) == '1' ? 'checked' : '' }}
                                           required>
                                    <label class="form-check-label" for="ascs_yes">Yes</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input"
                                           type="radio"
                                           name="is_ascs_member"
                                           id="ascs_no"
                                           value="0"
                                        {{ old('is_ascs_member', $registration->is_ascs_member) == '0' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="ascs_no">No</label>
                                </div>
                            </div>

                            @if($isPaid)
                                <p class="text-muted small mt-2">
                                    <strong>Note:</strong> Your payment has been approved, so the ASC membership status
                                    cannot be changed.
                                </p>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Presentation Type -->
                <div class="col-12">
                    <div class="card border">
                        <div class="card-body">
                            <h5 class="card-title text-dark mb-3">Presentation Type</h5>
                            <div class="d-flex flex-column gap-2">
                                @foreach(\App\Models\Registration::getPresentationTypeOptions() as $value => $label)
                                    <div class="form-check">
                                        <input class="form-check-input"
                                               type="radio"
                                               name="presentation_type"
                                               id="presentation_{{ $value }}"
                                               value="{{ $value }}"
                                               {{ old('presentation_type', $registration->presentation_type) == $value ? 'checked' : '' }}
                                               required>
                                        <label class="form-check-label" for="presentation_{{ $value }}">
                                            {{ $label }}
                                        </label>
                                    </div>
                                @endforeach
                            </div>

                            <div class="mt-4">
                                <label for="presenter_name" class="form-label">Enter Presenter Name</label>
                                <input id="presenter_name"
                                       name="presenter_name"
                                       type="text"
                                       class="form-control"
                                       value="{{ old('presenter_name', $registration->presenter_name ?? '') }}">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Other Papers -->
                <div class="col-12">
                    <div class="card border">
                        <div class="card-body">
                            <h5 class="card-title text-dark mb-3">Extra Papers</h5>

                            <div class="d-flex gap-2 mb-4">
                                <select id="paperSelect" class="form-select">
                                    <option value="">-- Select a paper --</option>
                                    @foreach($otherPapers as $p)
                                        @php
                                            $shortTitle = strlen($p->paper_title) > 40 ? substr($p->paper_title, 0, 40) . '...' : $p->paper_title;
                                        @endphp
                                        <option value="{{ $p->id }}"
                                                data-title="{{ $shortTitle }}">{{ $p->id }}
                                            - {{ $shortTitle }}</option>
                                    @endforeach
                                    <option value="other">Other (Enter Paper ID manually)</option>
                                </select>
                                <button type="button" id="addPaperBtn" class="btn btn-primary">Add</button>
                            </div>

                            <div id="manualPaperInput" class="d-none mb-3">
                                <label for="manualPaperId" class="form-label">Enter Paper ID</label>
                                <input type="text" id="manualPaperId" class="form-control" placeholder="e.g., 123">
                                <button type="button" id="confirmManualPaperBtn"
                                        class="btn btn-secondary mt-2">Add This Paper
                                </button>
                            </div>

                            <div id="selectedPapers" class="mt-4">
                                <h6 class="text-muted mb-2">Selected Papers:</h6>
                                <div id="selectedPapersList" class="d-flex flex-wrap gap-2"
                                     style="max-height: 150px; overflow-y: auto;"></div>
                            </div>

                            @if($isPaid)
                                <p class="text-muted small mt-2">
                                    <strong>Note:</strong> Your payment has been approved, so extra papers cannot be
                                    added or removed.
                                </p>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Note -->
                <div class="col-12">
                    <div class="card border">
                        <div class="card-body">
                            <label for="note" class="form-label">Note</label>
                            <textarea name="note" id="note" rows="3"
                                      class="form-control">{{ old('note', $registration->note) }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-end mt-4 gap-2">
                <button type="button"
                        class="btn px-4 py-2"
                        style="background-color: #6c757d;color: #fff;font-weight: 500;border-radius: 10px;border: none;"
                        onclick="window.location.href='{{ route('panel.papers.index') }}'">
                    Close
                </button>

                <button type="submit"
                        class="btn px-4 py-2"
                        style="background-color: #1a73e8;color: #fff;font-weight: 500;border-radius: 10px;border: none;">
                    Update Registration
                </button>
            </div>
        </form>
    @else
        <div class="alert alert-danger">No registration data found for this paper.</div>
    @endif

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('registrationForm');
            if (!form) return;

            let hardSubmitInput = document.createElement('input');
            hardSubmitInput.type = 'hidden';
            hardSubmitInput.name = '_hard_submit';
            hardSubmitInput.value = '0';
            form.appendChild(hardSubmitInput);

            const originalType = "{{ (string)old('membership_type', $registration->membership_type) }}";
            const isPaid = @json((bool)($registration->is_paid ?? false));

            const ieeeFileDiv = document.getElementById('ieeeFile');
            const studentFileDiv = document.getElementById('studentFile');

            const ieeeInput = document.getElementById('ieee_certificate');
            const studentInput = document.getElementById('student_certificate');

            const ieeePreviewDiv = document.getElementById('ieeeCurrentFile');
            const studentPreviewDiv = document.getElementById('studentCurrentFile');

            const ieeeRemoveBtn = document.getElementById('removeIeeeBtn');
            const studentRemoveBtn = document.getElementById('removeStudentBtn');

            const ieeeRemoveHidden = document.getElementById('ieee_certificate_remove');
            const studentRemoveHidden = document.getElementById('student_certificate_remove');

            function applyPreviewVisibility(currentType) {
                if (ieeePreviewDiv) {
                    if ((currentType === '1' || currentType === '3') && currentType === originalType && ieeeRemoveHidden.value !== '1') {
                        ieeePreviewDiv.style.display = '';
                    } else {
                        ieeePreviewDiv.style.display = 'none';
                    }
                }
                if (studentPreviewDiv) {
                    if ((currentType === '3' || currentType === '4') && currentType === originalType && studentRemoveHidden.value !== '1') {
                        studentPreviewDiv.style.display = '';
                    } else {
                        studentPreviewDiv.style.display = 'none';
                    }
                }
            }

            function setRequiredRules(currentType) {
                if (currentType === '1' || currentType === '3') {
                    const needIeee = (currentType !== originalType) || (ieeeRemoveHidden.value === '1');
                    ieeeInput.required = needIeee;
                } else {
                    ieeeInput.required = false;
                }

                if (currentType === '3' || currentType === '4') {
                    const needStudent = (currentType !== originalType) || (studentRemoveHidden.value === '1');
                    studentInput.required = needStudent;
                } else {
                    studentInput.required = false;
                }
            }

            function toggleFileFields() {
                const currentType = document.querySelector('input[name="membership_type"]:checked')?.value;

                ieeeFileDiv.classList.add('d-none');
                studentFileDiv.classList.add('d-none');

                if (currentType === '1') {
                    ieeeFileDiv.classList.remove('d-none');
                } else if (currentType === '3') {
                    ieeeFileDiv.classList.remove('d-none');
                    studentFileDiv.classList.remove('d-none');
                } else if (currentType === '4') {
                    studentFileDiv.classList.remove('d-none');
                }

                applyPreviewVisibility(currentType);
                setRequiredRules(currentType);
            }

            document.querySelectorAll('input[name="membership_type"]').forEach(radio => {
                radio.addEventListener('change', toggleFileFields);
            });

            toggleFileFields();

            if (ieeeRemoveBtn) {
                ieeeRemoveBtn.addEventListener('click', function () {
                    if (ieeePreviewDiv) {
                        ieeePreviewDiv.style.display = 'none';
                    }
                    ieeeRemoveHidden.value = '1';
                    ieeeInput.required = true;

                    Swal.fire({
                        icon: 'info',
                        title: 'File Removed',
                        text: 'You removed the IEEE Membership file. Please upload a new one before saving.',
                        confirmButtonText: 'OK'
                    });
                });
            }

            if (studentRemoveBtn) {
                studentRemoveBtn.addEventListener('click', function () {
                    if (studentPreviewDiv) {
                        studentPreviewDiv.style.display = 'none';
                    }
                    studentRemoveHidden.value = '1';
                    studentInput.required = true;

                    Swal.fire({
                        icon: 'info',
                        title: 'File Removed',
                        text: 'You removed the Student Certificate file. Please upload a new one before saving.',
                        confirmButtonText: 'OK'
                    });
                });
            }

            // Ödeme onaylıysa Type of Participation ve ASC üyeliği alanlarını formda değiştirmeyi engelle
            if (isPaid) {
                document.querySelectorAll('input[name="membership_type"]').forEach(function (radio) {
                    radio.addEventListener('click', function (e) {
                        e.preventDefault();
                    });
                    radio.addEventListener('keydown', function (e) {
                        e.preventDefault();
                    });
                });

                document.querySelectorAll('input[name="is_ascs_member"]').forEach(function (radio) {
                    radio.addEventListener('click', function (e) {
                        e.preventDefault();
                    });
                    radio.addEventListener('keydown', function (e) {
                        e.preventDefault();
                    });
                });
            }

            // valid ise önce başarı swal gösteriyoruz, OK'e basınca gerçek submit yapıyoruz -> redirect panel/papers.
            form.addEventListener('submit', function (e) {
                if (hardSubmitInput.value === '1') {
                    return;
                }
                e.preventDefault();
                const currentType = document.querySelector('input[name="membership_type"]:checked')?.value;
                let valid = true;
                let msg = '';
                const ieeeNeedsNow =
                    (currentType === '1' || currentType === '3') &&
                    (
                        currentType !== originalType ||
                        ieeeRemoveHidden.value === '1'
                    ) &&
                    (!ieeeInput.files || !ieeeInput.files.length);
                const studentNeedsNow =
                    (currentType === '3' || currentType === '4') &&
                    (
                        currentType !== originalType ||
                        studentRemoveHidden.value === '1'
                    ) &&
                    (!studentInput.files || !studentInput.files.length);
                if (ieeeNeedsNow) {
                    valid = false;
                    msg = 'Uploading the IEEE Membership Certificate is mandatory.';
                } else if (studentNeedsNow) {
                    valid = false;
                    msg = 'Uploading the Student Certificate is mandatory.';
                }
                const allFiles = [ieeeInput?.files?.[0], studentInput?.files?.[0]].filter(Boolean);
                allFiles.forEach(file => {
                    if (file && !file.name.toLowerCase().endsWith('.pdf')) {
                        valid = false;
                        msg = 'Only PDF files can be uploaded.';
                    }
                });
                if (!valid) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Warning',
                        text: msg,
                        confirmButtonText: 'OK',
                        didOpen: () => {
                            const okBtn = document.querySelector('.swal2-confirm');
                            if (okBtn) {
                                okBtn.style.display = 'inline-block';
                                okBtn.style.visibility = 'visible';
                                okBtn.style.opacity = '1';
                                okBtn.style.minWidth = '100px';
                                okBtn.style.background = '#3085d6';
                                okBtn.style.color = '#fff';
                                okBtn.style.fontWeight = '500';
                                okBtn.style.borderRadius = '5px';
                                okBtn.style.padding = '8px 20px';
                            }
                        }
                    });
                    return;
                }
                Swal.fire({
                    icon: 'success',
                    title: 'Updated',
                    text: 'Registration updated successfully.',
                    confirmButtonText: 'OK',
                    didOpen: () => {
                        const okBtn = document.querySelector('.swal2-confirm');
                        if (okBtn) {
                            okBtn.style.display = 'inline-block';
                            okBtn.style.visibility = 'visible';
                            okBtn.style.opacity = '1';
                            okBtn.style.minWidth = '100px';
                            okBtn.style.background = '#3085d6';
                            okBtn.style.color = '#fff';
                            okBtn.style.fontWeight = '500';
                            okBtn.style.borderRadius = '5px';
                            okBtn.style.padding = '8px 20px';
                        }
                    }
                }).then(() => {
                    hardSubmitInput.value = '1';
                    form.submit();
                });
            });

            // Extra Papers: add/remove ve başlangıç verileri
            const paperSelect = document.getElementById('paperSelect');
            const addPaperBtn = document.getElementById('addPaperBtn');
            const selectedPapersList = document.getElementById('selectedPapersList');

            const initialSelected = Array.isArray(@json($registration->selected_papers ?? []))
                ? @json($registration->selected_papers ?? [])
                : [];
            const selectedSet = new Set();

            function createTagElement(id, title) {
                const wrapper = document.createElement('div');
                wrapper.className = 'badge bg-secondary d-inline-flex align-items-center gap-2 px-2 py-2';

                const text = document.createElement('span');
                text.textContent = `${id} - ${title}`;

                const removeBtn = document.createElement('button');
                removeBtn.type = 'button';
                removeBtn.className = 'btn-close btn-close-white btn-sm ms-1';
                removeBtn.setAttribute('aria-label', 'Remove');

                const hidden = document.createElement('input');
                hidden.type = 'hidden';
                hidden.name = 'selected_papers[]';
                hidden.value = id;

                removeBtn.addEventListener('click', function () {
                    if (isPaid) {
                        return; // ödemesi onaylı ise silmeye izin verme
                    }
                    selectedSet.delete(String(id));
                    wrapper.remove();
                });

                wrapper.appendChild(text);
                wrapper.appendChild(removeBtn);
                wrapper.appendChild(hidden);
                return wrapper;
            }

            function addSelectedPaper(id) {
                const key = String(id);
                if (selectedSet.has(key)) return;
                selectedSet.add(key);

                fetch(`{{ url('panel/papers') }}/${id}/title`, {
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                    .then(response => {
                        const contentType = response.headers.get('content-type');
                        if (!contentType || !contentType.includes('application/json')) {
                            selectedSet.delete(key);
                            throw new Error('An unexpected response was received from the server. Please refresh the page and try again.');
                        }
                        if (!response.ok) {
                            throw new Error(`HTTP error! status: ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data.success && data.title && !data.title.startsWith("Paper ")) {
                            const title = data.title;
                            const tag = createTagElement(id, title);
                            selectedPapersList.appendChild(tag);
                        } else {
                            const errorMessage = data.message || `No paper found with ID ${id}`;
                            selectedSet.delete(key);
                            Swal.fire({
                                icon: 'error',
                                title: 'Paper Not Found',
                                text: errorMessage,
                                confirmButtonText: 'OK',
                            });
                        }
                    })
                    .catch((error) => {
                        selectedSet.delete(key);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: error.message || `Error fetching paper with ID ${id}`,
                            confirmButtonText: 'OK',
                        });
                    });
            }

            initialSelected.forEach(function (id) {
                addSelectedPaper(id);
            });

            if (addPaperBtn) {
                addPaperBtn.addEventListener('click', function () {
                    if (isPaid) {
                        return; // payment approved -> yeni paper ekleme
                    }
                    const val = paperSelect?.value || '';
                    if (!val) {
                        return;
                    }
                    if (val === 'other') {
                        manualPaperInput.classList.remove('d-none');
                        return;
                    }
                    addSelectedPaper(val);
                });
            }

            const manualPaperInput = document.getElementById('manualPaperInput');
            const manualPaperId = document.getElementById('manualPaperId');
            const confirmManualPaperBtn = document.getElementById('confirmManualPaperBtn');

            if (paperSelect) {
                paperSelect.addEventListener('change', function () {
                    if (this.value === 'other') {
                        manualPaperInput.classList.remove('d-none');
                    } else {
                        manualPaperInput.classList.add('d-none');
                    }
                });
            }

            if (confirmManualPaperBtn) {
                confirmManualPaperBtn.addEventListener('click', function () {
                    if (isPaid) {
                        return; // payment approved -> yeni paper ekleme
                    }
                    const id = manualPaperId.value.trim();
                    if (!id) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Invalid Input',
                            text: 'Please enter a valid Paper ID.',
                            confirmButtonText: 'OK',
                        });
                        return;
                    }
                    addSelectedPaper(id);
                    manualPaperId.value = '';
                    manualPaperInput.classList.add('d-none');
                    paperSelect.value = '';
                });
            }

            // Ödeme onaylıysa mevcut etiketlerdeki x butonlarını pasifleştir
            if (isPaid) {
                setTimeout(() => {
                    document.querySelectorAll('#selectedPapersList .btn-close').forEach(function (btn) {
                        btn.style.pointerEvents = 'none';
                        btn.style.opacity = '0.5';
                    });
                }, 500);
            }
        });
    </script>
@endsection