@extends('layouts.panel')

@section('title', 'Registrations')
@section('page-title', '')

@section('content')
    @php $user = auth()->user(); @endphp
    @if(!$user || !optional($user->role)->name === 'admin')
        <div class="alert alert-danger">You do not have permission to access this page.</div>
    @endif

    <div class="card">
        <div class="card-header">
            <ul class="nav nav-tabs" id="dataTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="reg-tab" data-bs-toggle="tab" data-bs-target="#reg" type="button" role="tab" aria-controls="reg" aria-selected="true">Registrations</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="listener-tab" data-bs-toggle="tab" data-bs-target="#listener" type="button" role="tab" aria-controls="listener" aria-selected="false">Listeners</button>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
            <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
            <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
            <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

            <div class="tab-content">
                <div class="tab-pane fade show active" id="reg" role="tabpanel" aria-labelledby="reg-tab">
                    <div class="d-flex justify-content-between align-items-center">
                        <a href="{{ route('panel.data.export.registrations') }}" class="btn btn-sm btn-outline-success">Export Registrations (CSV)</a>
                    </div>

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

                    <div id="excelImportAlert" class="alert d-none mt-2" role="alert"></div>

                    <div class="table-responsive mt-3">
                        <table id="registerTable" class="table table-striped table-bordered" style="width:100%">
                            <thead>
                            <tr>
                                <th>Paper ID</th>
                                <th>Name Surname</th>
                                <th>Email</th>
                               {{-- <th>Phone Number</th> --}}
                                <th>Payment Total</th>
                                <th>Payment Status</th>
                                <th>Payment Details</th>
                                <th>Degree</th>
                                <th>Membership</th>
                                <th>IEEE Certificate</th>
                                <th>Student Certificate</th>
                                <th>ASCS Member?</th>
                                <th>Presentation Type</th>
                                <th>Presenter Name</th>
                                <th>Extra Papers</th>
                                <th>Note</th>
                                <th>Last Update</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($registrations as $reg)
                                <tr>
                                    <td>{{ $reg->current_paper_id ?? '-' }}</td>
                                    <td>{{ trim(($reg->user->name ?? '-') . ' ' . ($reg->user->surname ?? '')) }}</td>
                                    <td>{{ $reg->user->email ?? '-' }}</td>
                                  {{-- <td>{{ $reg->phone_number ?? '-' }}</td> --}}
                                    <td>${{ number_format((float) ($reg->payment_total ?? 0), 2) }}</td>
                                    <td>
                                        <button class="btn btn-sm {{ $reg->is_paid ? 'btn-success' : 'btn-danger' }} payment-toggle"
                                                data-id="{{ $reg->id }}"
                                                data-type="registration"
                                                data-current="{{ $reg->is_paid ? 'true' : 'false' }}"
                                                data-amount="{{ $reg->payment_received_amount }}"
                                                data-method="{{ $reg->payment_method }}"
                                                data-currency="{{ $reg->payment_currency }}">
                                            {{ $reg->is_paid ? 'Paid' : 'Not Paid' }}
                                        </button>
                                    </td>
                                    <td class="text-nowrap payment-details">
                                        @php
                                            $symbol = '$';

                                            if ($reg->payment_currency === 'EUR') $symbol = '€';
                                            elseif ($reg->payment_currency === 'TRY') $symbol = '₺';
                                        @endphp

                                        <div class="small">
                                            <div>
                                                <strong>Received:</strong>
                                                {{ $reg->payment_received_amount !== null
                                                    ? $symbol . number_format((float)$reg->payment_received_amount, 2)
                                                    : '-' }}
                                            </div>

                                            <div>
                                                <strong>Method:</strong>
                                                {{ $reg->payment_method
                                                    ? ($reg->payment_method === 'paypal' ? 'PayPal' : 'IBAN')
                                                    : '-' }}
                                            </div>
                                        </div>
                                    </td>
                                    <td>{{ $reg->unvan_label ?? '-' }}</td>
                                    <td>{{ $reg->membership_type_label ?? '-' }}</td>
                                    <td>
                                        @if(!empty($reg->ieee_certificate) && in_array($reg->membership_type, [1, 3]))
                                            <a href="{{ asset($reg->ieee_certificate) }}" target="_blank" class="btn btn-sm btn-outline-info">View</a>
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td>
                                        @if(!empty($reg->student_certificate) && in_array($reg->membership_type, [3, 4]))
                                            <a href="{{ asset($reg->student_certificate) }}" target="_blank" class="btn btn-sm btn-outline-info">View</a>
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td>{{ $reg->is_ascs_member ? 'Yes' : 'No' }}</td>
                                    <td>{{ $reg->presentation_type_label ?? '-' }}</td>
                                    <td>{{ $reg->presenter_name ?? '-' }}</td>
                                    <td>
                                        @php
                                            $paperIds = is_array($reg->selected_papers) ? $reg->selected_papers : [];
                                        @endphp

                                        {{ count($paperIds) }}

                                        @if(count($paperIds))
                                            <button type="button"
                                                    class="btn btn-sm btn-outline-info extra-papers-btn extra-papers-btn-circle ms-1"
                                                    data-papers="{{ implode(',', $paperIds) }}">
                                                i
                                            </button>
                                        @endif
                                    </td>
                                    <td class="note-cell">
                                        @php $note = $reg->note ?? ''; @endphp

                                        @if($note)
                                            <div class="note-wrapper">
            <span class="note-preview">
                {{ $note }}
            </span>

                                                @if(strlen($note) > 50)
                                                    <button type="button"
                                                            class="btn btn-sm btn-outline-secondary note-btn note-circle-btn"
                                                            data-note="{{ e($note) }}">
                                                        i
                                                    </button>
                                                @endif
                                            </div>
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td>
                                        {{ $reg->updated_at ? $reg->updated_at->format('d.m.Y') : '-' }}
                                    </td>
                                    <td>
                                        <div class="d-flex flex-column gap-2 align-items-start">
                                            <button class="btn btn-sm btn-outline-warning update-btn action-btn"
                                                    data-id="{{ $reg->id }}">
                                                Update
                                            </button>

                                            <button class="btn btn-sm btn-outline-danger delete-btn action-btn"
                                                    data-id="{{ $reg->id }}"
                                                    data-type="registration">
                                                Delete
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="tab-pane fade" id="listener" role="tabpanel" aria-labelledby="listener-tab">
                    <div class="d-flex justify-content-start">
                        <a href="{{ route('panel.data.export.listeners') }}" class="btn btn-sm btn-outline-success">Export Listeners (CSV)</a>
                    </div>
                    <div class="table-responsive mt-3">
                        <table id="listenerTable" class="table table-striped table-bordered" style="width:100%">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Surname</th>
                                <th>Email</th>
                                <th>Institution</th>
                                <th>Phone</th>
                                <th>Degree</th>
                                <th>Participation</th>
                                <th>Payment Status</th>
                                <th>Payment Details</th>
                                <th>Note</th>
                                <th>Last Update</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($listeners as $l)
                                <tr>
                                    <td>{{ $l->id }}</td>
                                    <td>{{ $l->name }}</td>
                                    <td>{{ $l->surname }}</td>
                                    <td>{{ $l->email }}</td>
                                    <td>{{ $l->institution }}</td>
                                    <td>{{ $l->phone_number }}</td>
                                    <td>{{ $l->degree_label ?? '-' }}</td>
                                    <td>{{ $l->participation_type_label ?? '-' }}</td>
                                    <td>
                                        <button class="btn btn-sm {{ $l->is_paid ? 'btn-success' : 'btn-danger' }} payment-toggle"
                                                data-id="{{ $l->id }}"
                                                data-type="listener"
                                                data-current="{{ $l->is_paid ? 'true' : 'false' }}"
                                                data-amount="{{ $l->payment_received_amount }}"
                                                data-method="{{ $l->payment_method }}"
                                                data-currency="{{ $l->payment_currency }}">
                                            {{ $l->is_paid ? 'Paid' : 'Not Paid' }}
                                        </button>
                                    </td>
                                    <td class="payment-details">
                                        @php
                                            $symbol = '$';
                                            if ($l->payment_currency === 'EUR') $symbol = '€';
                                            elseif ($l->payment_currency === 'TRY') $symbol = '₺';
                                        @endphp

                                        <div class="small">
                                            <div>
                                                <strong>Received:</strong>
                                                {{ $l->payment_received_amount !== null
                                                    ? $symbol . number_format($l->payment_received_amount, 2)
                                                    : '-' }}
                                            </div>
                                            <div>
                                                <strong>Method:</strong>
                                                {{ $l->payment_method
                                                    ? ($l->payment_method === 'paypal' ? 'PayPal' : 'IBAN')
                                                    : '-' }}
                                            </div>
                                        </div>
                                    </td>
                                    <td class="note-cell">
                                        @php $note = $l->note ?? ''; @endphp

                                        @if($note)
                                            <div class="note-wrapper">
            <span class="note-preview">
                {{ $note }}
            </span>

                                                @if(strlen($note) > 50)
                                                    <button type="button"
                                                            class="btn btn-sm btn-outline-secondary note-btn note-circle-btn"
                                                            data-note="{{ e($note) }}">
                                                        i
                                                    </button>
                                                @endif
                                            </div>
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td>
                                        {{ $l->updated_at ? $l->updated_at->format('d.m.Y') : '-' }}
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-danger ms-2 delete-btn"
                                                data-id="{{ $l->id }}"
                                                data-type="listener">Delete</button>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Update Modal -->
    <div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <form id="updateForm">
                @csrf
                <input type="hidden" name="id" id="update_id">
                <!-- orijinal membership ve dosya bilgileri -->
                <input type="hidden" id="orig_membership_type" value="">
                <input type="hidden" id="has_ieee_file" value="0">
                <input type="hidden" id="has_student_file" value="0">

                <!-- remove flag'leri -->
                <input type="hidden" id="ieee_certificate_remove" name="ieee_certificate_remove" value="0">
                <input type="hidden" id="student_certificate_remove" name="student_certificate_remove" value="0">

                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="updateModalLabel">Update Registration</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row g-4">
                            <!-- 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="update_phone_number"
                                               class="form-control"
                                               type="text"
                                               name="phone_number"
                                               pattern="[0-9]+"
                                               title="Please enter numbers only"
                                               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 update-unvan"
                                                           type="radio"
                                                           name="unvan"
                                                           id="update_unvan_{{ $value }}"
                                                           value="{{ $value }}"
                                                           required>
                                                    <label class="form-check-label" for="update_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 update-membership-radio"
                                                           type="radio"
                                                           name="membership_type"
                                                           id="update_membership_{{ $value }}"
                                                           value="{{ $value }}"
                                                           required>
                                                    <label class="form-check-label" for="update_membership_{{ $value }}">
                                                        {{ $label }}
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>

                                        <!-- Dosya yükleme alanları -->
                                        <!-- IEEE -->
                                        <div id="updateIeeeFile" class="mt-4 d-none">
                                            <label for="update_ieee_certificate" class="form-label fw-semibold">IEEE Membership Certificate (PDF only)</label>
                                            <input type="file"
                                                   id="update_ieee_certificate"
                                                   name="ieee_certificate"
                                                   class="form-control"
                                                   accept="application/pdf"
                                                   oninvalid="this.setCustomValidity('Please select a file.')"
                                                   oninput="this.setCustomValidity('')">

                                            <!-- preview alanı -->
                                            <div class="mt-2 d-none" id="ieeeCurrentFile">
                                                <span class="text-muted">
                                                    Currently uploaded:
                                                    <a href="#" target="_blank" class="text-decoration-none" id="ieeeCurrentLink">View current file</a>
                                                    |
                                                    <a href="javascript:void(0)"
                                                       class="text-danger fw-semibold text-decoration-none"
                                                       id="removeIeeeBtn">Remove file</a>
                                                </span>
                                            </div>
                                        </div>

                                        <!-- Student -->
                                        <div id="updateStudentFile" class="mt-4 d-none">
                                            <label for="update_student_certificate" class="form-label fw-semibold">Student Certificate (PDF only)</label>
                                            <input type="file"
                                                   id="update_student_certificate"
                                                   name="student_certificate"
                                                   class="form-control"
                                                   accept="application/pdf"
                                                   oninvalid="this.setCustomValidity('Please select a file.')"
                                                   oninput="this.setCustomValidity('')">

                                            <!-- preview alanı -->
                                            <div class="mt-2 d-none" id="studentCurrentFile">
                                                <span class="text-muted">
                                                    Currently uploaded:
                                                    <a href="#" target="_blank" class="text-decoration-none" id="studentCurrentLink">View current file</a>
                                                    |
                                                    <a href="javascript:void(0)"
                                                       class="text-danger fw-semibold text-decoration-none"
                                                       id="removeStudentBtn">Remove file</a>
                                                </span>
                                            </div>
                                        </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="update_ascs_yes"
                                                       value="1"
                                                       required>
                                                <label class="form-check-label" for="update_ascs_yes">Yes</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input"
                                                       type="radio"
                                                       name="is_ascs_member"
                                                       id="update_ascs_no"
                                                       value="0">
                                                <label class="form-check-label" for="update_ascs_no">No</label>
                                            </div>
                                        </div>
                                    </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="update_presentation_{{ $value }}"
                                                           value="{{ $value }}"
                                                           required>
                                                    <label class="form-check-label" for="update_presentation_{{ $value }}">
                                                        {{ $label }}
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>

                                        <div class="mt-4">
                                            <label for="update_presenter_name" class="form-label">Enter Presenter Name</label>
                                            <input id="update_presenter_name"
                                                   name="presenter_name"
                                                   type="text"
                                                   class="form-control">
                                        </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="updatePaperSelect" class="form-select">
                                                <option value="">-- Select a paper --</option>
                                            </select>
                                            <button type="button" id="updateAddPaperBtn" class="btn btn-primary">Add</button>
                                        </div>

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

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

                            <!-- Payment Total Display -->
                            <div class="col-12">
                                <div class="card border">
                                    <div class="card-body">
                                        <h5 class="card-title text-dark mb-3">Payment Calculation</h5>
                                        <div id="updatePaymentBreakdown" class="mb-3">
                                            <p class="mb-1"><strong>Membership fee:</strong> $<span id="updateMembershipFee">0.00</span></p>
                                            <p class="mb-1"><strong>Extra papers:</strong> $<span id="updateExtraTotal">0.00</span></p>
                                        </div>
                                        <div class="fs-4"><strong>Total:</strong> $<span id="updatePaymentTotal">0.00</span></div>
                                    </div>
                                </div>
                            </div>

                            <!-- Note -->
                            <div class="col-12">
                                <div class="card border">
                                    <div class="card-body">
                                        <label for="update_note" class="form-label">Note</label>
                                        <textarea name="note" id="update_note" rows="3" class="form-control"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- Note Modal -->
    <div class="modal fade" id="noteModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Full Note</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="noteModalContent" class="note-modal-content"></div>

                </div>
            </div>
        </div>
    </div>
    <style>
        .extra-papers-btn-circle {
            border-radius: 50%;
            width: 24px;
            height: 24px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            line-height: 1;
            cursor: pointer;
        }
        .extra-papers-btn-circle:hover {
            background-color: #0dcaf0;
            color: white;
        }
        .note-cell {
            max-width: 260px;
        }

        .note-wrapper {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .note-preview {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
            min-width: 0;
        }

        .note-circle-btn {
            flex-shrink: 0;
            border-radius: 50%;
            width: 22px;
            height: 22px;
            padding: 0;
            font-size: 11px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .note-modal-content {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            white-space: pre-wrap;
            word-break: break-word;
            overflow-wrap: anywhere;
            line-height: 1.6;
            max-height: 60vh;
            overflow-y: auto;
        }
    </style>
    <style>
        .action-btn{
            width: 86px;
            padding: 4px 10px;
            line-height: 1.2;
            text-align: center;
        }
    </style>
    <style>
        .pay-swal-popup .swal2-html-container{
            text-align: left !important;
            margin: 0 !important;
        }

        .pay-swal-form{
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .pay-swal-label{
            display: block;
            margin-bottom: 6px;
            font-weight: 600;
            color: #6c757d;
            font-size: 14px;
        }

        .pay-swal-popup .pay-swal-control{
            width: 100% !important;
            box-sizing: border-box !important;
            margin: 0 !important;
            height: 40px !important;
            padding: 0 12px !important;
            border-radius: 8px !important;
        }

        .pay-swal-popup .swal2-actions{
            margin-top: 18px !important;
        }
    </style>

    <script>
        $(document).ready(function() {
            $('#registerTable, #listenerTable').DataTable({
                order: [],
                pageLength: 25,
                lengthMenu: [10,25,50,100],
                autoWidth:false
            });
            $('#dataTab button').on('shown.bs.tab', function(){
                $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
            });

            const getRealRow = (btn) => {
                const $tr = $(btn).closest('tr');
                return $tr.hasClass('child') ? $tr.prev() : $tr;
            };

            const setPaymentDetails = (btn, receivedAmount, method, currency) => {
                const $row = getRealRow(btn);
                const $cell = $row.find('td.payment-details');

                if (!$cell.length) return;

                let symbol = '$';

                if (currency === 'EUR') {
                    symbol = '€';
                } else if (currency === 'TRY') {
                    symbol = '₺';
                }

                const receivedText = (receivedAmount === null || receivedAmount === undefined || receivedAmount === '')
                    ? '-'
                    : symbol + Number(receivedAmount).toFixed(2);

                const methodText = (!method)
                    ? '-'
                    : (method === 'paypal' ? 'PayPal' : (method === 'iban' ? 'IBAN' : method));

                $cell.html(`
        <div class="small">
            <div><strong>Received:</strong> ${receivedText}</div>
            <div><strong>Method:</strong> ${methodText}</div>
        </div>
    `);
            };

            // Payment toggle
            $(document).on('click', '.payment-toggle', function() {
                const button = this;
                const id = button.dataset.id;
                const type = button.dataset.type;
                const current = button.dataset.current === 'true';
                const newStatus = !current;
                const currentText = current ? 'Paid' : 'Not Paid';
                const newText = newStatus ? 'Paid' : 'Not Paid';

                // ortak fetch helper
                const postTogglePayment = async (bodyObj) => {
                    const res = await fetch('{{ route("panel.data.toggle-payment") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify(bodyObj)
                    });

                    const text = await res.text();

                    let data = null;
                    try { data = JSON.parse(text); } catch (e) {}

                    if (!data) {
                        console.log('Non-JSON response:', text);
                        throw new Error(`Server returned non-JSON (HTTP ${res.status}). Possible 419 CSRF / redirect.`);
                    }

                    if (!res.ok) {
                        throw new Error(data.message || `Request failed (HTTP ${res.status})`);
                    }

                    return data;
                };

                // Paid -> Not Paid: details sormadan direkt
                if (!newStatus) {
                    Swal.fire({
                        title: 'Payment Status Change',
                        text: `Change payment status from "${currentText}" to "${newText}"?`,
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, change it!',
                        cancelButtonText: 'Cancel'
                    }).then(async (result) => {
                        if (!result.isConfirmed) return;

                        try {
                            const data = await postTogglePayment({
                                id: id,
                                type: type,
                                is_paid: false,
                                payment_received_amount: null,
                                payment_method: null,
                                payment_currency: null

                        });

                            if (data.success) {
                                button.dataset.current = 'false';
                                button.className = 'btn btn-sm btn-danger payment-toggle';
                                button.textContent = 'Not Paid';
                                setPaymentDetails(button, null, null);

                                Swal.fire({
                                    title: 'Success!',
                                    text: data.message,
                                    icon: 'success',
                                    timer: 1600,
                                    showConfirmButton: false
                                });
                            } else {
                                Swal.fire('Error!', data.message || 'Unknown error', 'error');
                            }
                        } catch (err) {
                            Swal.fire('Error!', err.message || 'Network error', 'error');
                        }
                    });

                    return;
                }

                // Not Paid -> Paid yaparken: received + method sor
                Swal.fire({
                    title: 'Payment Status Change',
                    html: `
                    <div class="pay-swal-form">
                        <div class="pay-swal-group">
    <label class="pay-swal-label">Received Amount</label>

    <div style="display:flex; gap:8px;">
        <input id="swal_received_amount"
               class="swal2-input pay-swal-control"
               placeholder="e.g. 495.00"
               inputmode="decimal"
               style="margin:0;">

        <select id="swal_payment_currency"
                class="swal2-select pay-swal-control"
                style="width:110px; margin:0;">
            <option value="USD" selected>USD</option>
            <option value="EUR">EUR</option>
            <option value="TRY">TRY</option>
        </select>
    </div>
<div class="pay-swal-group">
                            <label class="pay-swal-label">Payment Method</label>
                            <select id="swal_payment_method" class="swal2-select pay-swal-control">
                                <option value="">-- Select --</option>
                                <option value="paypal">PayPal</option>
                                <option value="iban">IBAN</option>
                            </select>
                        </div>
</div>
                `,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, change it!',
                    cancelButtonText: 'Cancel',
                    customClass: {
                        popup: 'pay-swal-popup'
                    },
                    didOpen: () => {
                        const inp = document.getElementById('swal_received_amount');
                        if (inp) inp.focus();
                    },
                    preConfirm: () => {
                        const amountRaw = (document.getElementById('swal_received_amount')?.value || '').trim();
                        const method = (document.getElementById('swal_payment_method')?.value || '').trim();
                        const currency = (document.getElementById('swal_payment_currency')?.value || 'USD');
                        const normalized = amountRaw.replace(',', '.');

                        if (!normalized) {
                            Swal.showValidationMessage('Received Amount is required.');
                            return false;
                        }
                        if (isNaN(Number(normalized)) || Number(normalized) < 0) {
                            Swal.showValidationMessage('Received Amount must be a valid number.');
                            return false;
                        }
                        if (!method) {
                            Swal.showValidationMessage('Payment Method is required.');
                            return false;
                        }

                        return { amount: Number(normalized), method, currency };
                    }
                }).then(async (result) => {
                    if (!result.isConfirmed) return;

                    const payload = result.value;

                    try {
                        const data = await postTogglePayment({
                            id: id,
                            type: type,
                            is_paid: true,
                            payment_received_amount: payload.amount,
                            payment_currency: payload.currency,
                            payment_method: payload.method
                        });

                        if (data.success) {
                            button.dataset.current = 'true';
                            button.className = 'btn btn-sm btn-success payment-toggle';
                            button.textContent = 'Paid';

                            setPaymentDetails(button, payload.amount, payload.method, payload.currency);


                            Swal.fire({
                                title: 'Success!',
                                text: data.message,
                                icon: 'success',
                                timer: 1600,
                                showConfirmButton: false
                            });
                        } else {
                            Swal.fire('Error!', data.message || 'Unknown error', 'error');
                        }
                    } catch (err) {
                        Swal.fire('Error!', err.message || 'Network error', 'error');
                    }
                });
            });

            // Delete button
            $(document).on('click', '.delete-btn', function(){
                const button=this;
                const id=button.dataset.id;
                const type=button.dataset.type;

                Swal.fire({
                    title:'Are you sure?',
                    text:"This action cannot be undone!",
                    icon:'warning',
                    showCancelButton:true,
                    confirmButtonColor:'#d33',
                    cancelButtonColor:'#3085d6',
                    confirmButtonText:'Yes, delete it!',
                    cancelButtonText:'Cancel'
                }).then((result)=>{
                    if(result.isConfirmed){
                        const formData=new FormData();
                        formData.append('id',id);
                        formData.append('type',type);
                        formData.append('_token','{{ csrf_token() }}');

                        fetch('{{ route("panel.data.delete") }}',{
                            method:'POST',
                            body:formData
                        }).then(res=>res.json()).then(data=>{
                            if(data.success){
                                button.closest('tr').remove();
                                Swal.fire({
                                    title:'Deleted!',
                                    text:data.message,
                                    icon:'success',
                                    timer:1500,
                                    showConfirmButton:false
                                });
                            } else {
                                Swal.fire('Error!',data.message||'Unknown error','error');
                            }
                        }).catch(()=>Swal.fire('Error!','Network error','error'));
                    }
                });
            });
            // Note modal
            $(document).on('click', '.note-btn', function () {
                const note = $(this).data('note') || '';
                $('#noteModalContent').text(note);

                const modal = new bootstrap.Modal(document.getElementById('noteModal'));
                modal.show();
            });

            // Update Modal open
            $(document).on('click', '.update-btn', function() {
                const tr=$(this).closest('tr');
                const id=$(this).data('id');
                $('#update_id').val(id);
                $('#ieee_certificate_remove').val('0');
                $('#student_certificate_remove').val('0');

                fetch(`{{ url('panel/data/get-registration') }}/${id}`)
                    .then(res => res.json())
                    .then(data => {
                        if(data.success) {
                            const reg = data.registration;
                            const otherPapers = data.otherPapers || [];

                            $('#update_phone_number').val(reg.phone_number || '');
                            $('#update_note').val(reg.note || '');
                            $('#update_presenter_name').val(reg.presenter_name || '');
                            $(`#update_unvan_${reg.unvan}`).prop('checked', true);
                            $(`#update_membership_${reg.membership_type}`).prop('checked', true);
                            $(`#update_ascs_${reg.is_ascs_member ? 'yes' : 'no'}`).prop('checked', true);
                            $(`#update_presentation_${reg.presentation_type}`).prop('checked', true);
                            $('#orig_membership_type').val(String(reg.membership_type || ''));

                            const hasIeee = !!reg.ieee_certificate;
                            const hasStudent = !!reg.student_certificate;

                            $('#has_ieee_file').val(hasIeee ? '1' : '0');
                            $('#has_student_file').val(hasStudent ? '1' : '0');

                            function normalizePdfUrl(rawPath) {
                                if (!rawPath) return '#';

                                if (rawPath.startsWith('http://') || rawPath.startsWith('https://')) {
                                    return rawPath;
                                }

                                rawPath = rawPath.replace(/^\/?panel\/pdf\//, 'pdf/');

                                if (rawPath.startsWith('pdf/')) {
                                    return window.location.origin + '/' + rawPath;
                                }

                                return window.location.origin + '/' + rawPath.replace(/^\//, '');
                            }

                            // IEEE preview link
                            if (hasIeee) {
                                const ieeeHref = normalizePdfUrl(reg.ieee_certificate_url || reg.ieee_certificate);
                                $('#ieeeCurrentLink').attr('href', ieeeHref);
                                $('#ieeeCurrentFile').removeClass('d-none');
                            } else {
                                $('#ieeeCurrentFile').addClass('d-none');
                            }

                            // Student preview link
                            if (hasStudent) {
                                const studentHref = normalizePdfUrl(reg.student_certificate_url || reg.student_certificate);
                                $('#studentCurrentLink').attr('href', studentHref);
                                $('#studentCurrentFile').removeClass('d-none');
                            } else {
                                $('#studentCurrentFile').addClass('d-none');
                            }
                            toggleUpdateFileFields();

                            const paperSelect = $('#updatePaperSelect');
                            paperSelect.find('option:not(:first)').remove();
                            otherPapers.forEach(function(paper) {
                                const shortTitle = paper.paper_title.length > 40
                                    ? paper.paper_title.substring(0, 40) + '...'
                                    : paper.paper_title;
                                paperSelect.append(
                                    $('<option></option>')
                                        .attr('value', paper.id)
                                        .attr('data-title', shortTitle)
                                        .text(paper.id + ' - ' + shortTitle)
                                );
                            });
                            paperSelect.append(
                                $('<option></option>')
                                    .attr('value', 'other')
                                    .text('Other (Enter Paper ID manually)')
                            );
                            updateSelectedSet.clear();
                            loadUpdateSelectedPapers(reg.selected_papers || []);
                            setTimeout(() => {
                                calculateUpdatePayment();
                            }, 100);

                            $('#updateModal').modal('show');
                        } else {
                            Swal.fire('Error!', 'Failed to load registration data', 'error');
                        }
                    })
                    .catch(() => Swal.fire('Error!', 'Network error', 'error'));
            });

            function applyPreviewVisibility(currentType) {
                const origType = $('#orig_membership_type').val();
                const ieeeRemoved = $('#ieee_certificate_remove').val() === '1';
                const studentRemoved = $('#student_certificate_remove').val() === '1';

                // IEEE
                if (
                    (currentType === '1' || currentType === '3') &&
                    currentType === origType &&
                    !ieeeRemoved &&
                    $('#has_ieee_file').val() === '1'
                ) {
                    $('#ieeeCurrentFile').removeClass('d-none');
                } else {
                    $('#ieeeCurrentFile').addClass('d-none');
                }

                // Student
                if (
                    (currentType === '3' || currentType === '4') &&
                    currentType === origType &&
                    !studentRemoved &&
                    $('#has_student_file').val() === '1'
                ) {
                    $('#studentCurrentFile').removeClass('d-none');
                } else {
                    $('#studentCurrentFile').addClass('d-none');
                }
            }

            function toggleUpdateFileFields() {
                const type = $('input[name="membership_type"]:checked').val();
                const origType = $('#orig_membership_type').val();
                const hasIeee = $('#has_ieee_file').val() === '1';
                const hasStudent = $('#has_student_file').val() === '1';
                const ieeeRemoved = $('#ieee_certificate_remove').val() === '1';
                const studentRemoved = $('#student_certificate_remove').val() === '1';

                $('#updateIeeeFile, #updateStudentFile').addClass('d-none');
                $('#update_ieee_certificate').prop('required', false);
                $('#update_student_certificate').prop('required', false);
                if (type === '1') {
                    $('#updateIeeeFile').removeClass('d-none');
                } else if (type === '3') {
                    $('#updateIeeeFile').removeClass('d-none');
                    $('#updateStudentFile').removeClass('d-none');
                } else if (type === '4') {
                    $('#updateStudentFile').removeClass('d-none');
                }

                // IEEE
                if (type === '1' || type === '3') {
                    const needIeee = (type !== origType) || ieeeRemoved || !hasIeee;
                    if (needIeee) {
                        $('#update_ieee_certificate').prop('required', true);
                    }
                }

                // Student
                if (type === '3' || type === '4') {
                    const needStudent = (type !== origType) || studentRemoved || !hasStudent;
                    if (needStudent) {
                        $('#update_student_certificate').prop('required', true);
                    }
                }
                applyPreviewVisibility(type);
            }

            $(document).on('click', '#removeIeeeBtn', function() {
                $('#ieee_certificate_remove').val('1');
                $('#ieeeCurrentFile').addClass('d-none');
                $('#update_ieee_certificate').prop('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'
                });
            });

            $(document).on('click', '#removeStudentBtn', function() {
                $('#student_certificate_remove').val('1');
                $('#studentCurrentFile').addClass('d-none');
                $('#update_student_certificate').prop('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'
                });
            });
            $(document).on('change', '.update-membership-radio', function() {
                toggleUpdateFileFields();
                calculateUpdatePayment();
            });
            $(document).on('change', 'input[name="is_ascs_member"]', calculateUpdatePayment);
            const updateSelectedSet = new Set();

            function loadUpdateSelectedPapers(selectedPapers) {
                const selectedPapersList = $('#updateSelectedPapersList');
                selectedPapersList.empty();
                updateSelectedSet.clear();

                selectedPapers.forEach(id => {
                    addUpdateSelectedPaper(id);
                });
            }

            function createUpdateTagElement(id, title) {
                const wrapper = $('<div class="badge bg-secondary d-inline-flex align-items-center gap-2 px-2 py-2"></div>');
                const text = $(`<span>${id} - ${title}</span>`);
                const removeBtn = $('<button type="button" class="btn-close btn-close-white btn-sm ms-1" aria-label="Remove"></button>');
                const hidden = $(`<input type="hidden" name="selected_papers[]" value="${id}">`);

                removeBtn.on('click', function() {
                    updateSelectedSet.delete(String(id));
                    wrapper.remove();
                    calculateUpdatePayment();
                });

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

            function addUpdateSelectedPaper(id) {
                const key = String(id);
                if (updateSelectedSet.has(key)) return;
                updateSelectedSet.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')) {
                            updateSelectedSet.delete(key);
                            throw new Error('Unexpected response 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 = createUpdateTagElement(id, title);
                            $('#updateSelectedPapersList').append(tag);
                            calculateUpdatePayment();
                        } else {
                            const errorMessage = data.message || `No paper found with ID ${id}`;
                            updateSelectedSet.delete(key);
                            Swal.fire({
                                icon: 'error',
                                title: 'Paper Not Found',
                                text: errorMessage,
                                confirmButtonText: 'OK'
                            });
                        }
                    })
                    .catch((error) => {
                        updateSelectedSet.delete(key);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: error.message || `Error fetching paper with ID ${id}`,
                            confirmButtonText: 'OK'
                        });
                    });
            }

            function calculateUpdatePayment() {
                const membershipType = parseInt($('input[name="membership_type"]:checked').val()) || 0;
                const isAscsMember = $('input[name="is_ascs_member"]:checked').val() === '1';
                const extraCount = $('#updateSelectedPapersList input[name="selected_papers[]"]').length;

                let membershipBase = 0;

                // 1 => IEEE Member                      -> 550$ (ASC yes/no fark etmez)
                // 2 => Non-IEEE Member                  -> ASC yes: 550$ / ASC no: 650$
                // 3 => IEEE Student Member              -> 450$ (ASC yes/no fark etmez)
                // 4 => Student Non-IEEE Member          -> 550$ (ASC yes/no fark etmez)
                if (membershipType === 1) {
                    membershipBase = 550;
                } else if (membershipType === 2) {
                    membershipBase = isAscsMember ? 550 : 650;
                } else if (membershipType === 3) {
                    membershipBase = 450;
                } else if (membershipType === 4) {
                    membershipBase = 550;
                }

                const extraTotal = extraCount * 300;
                const total = membershipBase + extraTotal;

                $('#updateMembershipFee').text(membershipBase.toFixed(2));
                $('#updateExtraTotal').text(extraTotal.toFixed(2));
                $('#updatePaymentTotal').text(total.toFixed(2));
            }

            $('#updateAddPaperBtn').on('click', function() {
                const val = $('#updatePaperSelect').val() || '';
                if (!val) { return; }
                if (val === 'other') {
                    $('#updateManualPaperInput').removeClass('d-none');
                    return;
                }
                addUpdateSelectedPaper(val);
                $('#updatePaperSelect').val('');
            });

            $('#updatePaperSelect').on('change', function() {
                if ($(this).val() === 'other') {
                    $('#updateManualPaperInput').removeClass('d-none');
                } else {
                    $('#updateManualPaperInput').addClass('d-none');
                }
            });

            $('#updateConfirmManualPaperBtn').on('click', function() {
                const id = $('#updateManualPaperId').val().trim();
                if (!id) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Invalid Input',
                        text: 'Please enter a valid Paper ID.',
                        confirmButtonText: 'OK'
                    });
                    return;
                }
                addUpdateSelectedPaper(id);
                $('#updateManualPaperId').val('');
                $('#updateManualPaperInput').addClass('d-none');
                $('#updatePaperSelect').val('');
            });

            // Submit
            $('#updateForm').submit(function(e){
                e.preventDefault();

                const membershipType = $('input[name="membership_type"]:checked').val();
                const origType = $('#orig_membership_type').val();
                const hasIeee = $('#has_ieee_file').val() === '1';
                const hasStudent = $('#has_student_file').val() === '1';

                const ieeeRemoved = $('#ieee_certificate_remove').val() === '1';
                const studentRemoved = $('#student_certificate_remove').val() === '1';

                const ieeeInput = $('#update_ieee_certificate')[0];
                const studentInput = $('#update_student_certificate')[0];

                let needIeee = false;
                let needStudent = false;

                // Type 1: IEEE Member -> IEEE lazım
                // Type 3: IEEE Student Member -> IEEE + Student lazım
                // Type 4: Student Non-IEEE Member -> Student lazım
                if (membershipType === '1') {
                    needIeee = (membershipType !== origType) || ieeeRemoved || !hasIeee;
                } else if (membershipType === '3') {
                    needIeee = (membershipType !== origType) || ieeeRemoved || !hasIeee;
                    needStudent = (membershipType !== origType) || studentRemoved || !hasStudent;
                } else if (membershipType === '4') {
                    needStudent = (membershipType !== origType) || studentRemoved || !hasStudent;
                }

                function isMissingPdf(reqNeeded, inputEl) {
                    if (!reqNeeded) return false;
                    if (!inputEl || !inputEl.files || !inputEl.files.length) return true;
                    const file = inputEl.files[0];
                    const name = file.name.toLowerCase();
                    if (!name.endsWith('.pdf')) return true;
                    return false;
                }

                if (isMissingPdf(needIeee, ieeeInput)) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Missing File',
                        text: 'IEEE Membership Certificate (PDF) is required.',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                if (isMissingPdf(needStudent, studentInput)) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Missing File',
                        text: 'Student Certificate (PDF) is required.',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                const formData = new FormData(this);
                const selectedPapers = [];
                $('#updateSelectedPapersList input[name="selected_papers[]"]').each(function() {
                    selectedPapers.push($(this).val());
                });
                formData.append('selected_papers', JSON.stringify(selectedPapers));

                fetch('{{ route("panel.data.update-registration") }}', {
                    method: 'POST',
                    body: formData
                })
                    .then(res => res.json())
                    .then(data => {
                        if(data.success) {
                            Swal.fire('Updated!', data.message, 'success').then(() => location.reload());
                        } else {
                            Swal.fire('Error!', data.message, 'error');
                        }
                    })
                    .catch(() => Swal.fire('Error!', 'Network error', 'error'));
            });
            $(document).on('change', 'input[name="membership_type"]', function() {
                toggleUpdateFileFields();
            });
            // Extra papers info (i) butonu
            $(document).on('click', '.extra-papers-btn', function () {
                const papersData = $(this).data('papers');
                console.log('Extra papers button clicked, data-papers:', papersData, 'Type:', typeof papersData);

                if (!papersData) {
                    Swal.fire({
                        icon: 'info',
                        title: 'Extra Papers',
                        text: 'There are no extra papers for this registration.'
                    });
                    return;
                }

                // jQuery data() metodu bazen array olarak parse edebilir
                let ids = [];
                if (Array.isArray(papersData)) {
                    ids = papersData.map(id => String(id).trim()).filter(Boolean);
                } else if (typeof papersData === 'string') {
                    ids = papersData.split(',').map(s => s.trim()).filter(Boolean);
                } else {
                    // Eğer number ise direkt kullan
                    ids = [String(papersData).trim()].filter(Boolean);
                }

                console.log('Parsed paper IDs:', ids);

                const requests = ids.map(id =>
                    fetch(`{{ url('panel/papers') }}/${id}/title`, {
                        method: 'GET',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        credentials: 'same-origin'
                    })
                        .then(res => {
                            if (!res.ok) {
                                throw new Error(`HTTP error! status: ${res.status}`);
                            }
                            return res.json();
                        })
                        .then(data => ({ id, data }))
                        .catch(error => {
                            console.error(`Error fetching paper ${id}:`, error);
                            return { id, data: { success: false, message: error.message } };
                        })
                );

                Promise.all(requests)
                    .then(results => {
                        let html = '<ol style="text-align:left;">';

                        results.forEach(({ id, data }) => {
                            if (data && data.success) {
                                html += `<li><strong>${id}</strong> - ${data.title}</li>`;
                            } else {
                                html += `<li><strong>${id}</strong> - <em>Title not found</em></li>`;
                            }
                        });

                        html += '</ol>';

                        Swal.fire({
                            icon: 'info',
                            title: 'Extra Papers',
                            html: html
                        });
                    })
                    .catch((error) => {
                        console.error('Error loading extra papers:', error);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Error loading extra papers. Please try again.'
                        });
                    });
            });
        });
    </script>
@endsection