@extends('layouts.panel')

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

@section('content')
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Users</h5>
        </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="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-2 mb-3">
                <form id="excelImportForm" action="{{ route('panel.data.import.registrations') }}" method="POST" enctype="multipart/form-data"
                      class="d-flex align-items-center gap-2">
                    @csrf
                    <input type="file"
                           name="file"
                           id="excelFileInput"
                           accept=".xls,.xlsx,.csv"
                           class="form-control form-control-sm"
                           required
                           oninvalid="this.setCustomValidity('Please select a file.')"
                           oninput="this.setCustomValidity('')">

                    <button type="submit" id="excelImportBtn" class="btn btn-sm btn-primary">Excel Import</button>

                    <button type="button"
                            id="excelFormatInfoBtn"
                            class="btn btn-sm btn-outline-info info-btn-circle ms-1"
                            title="Import format info">
                        i
                    </button>
                </form>

                <a href="{{ route('panel.users.create') }}" class="btn btn-sm btn-success">Add User</a>
            </div>

            @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="usersTable" class="table table-striped table-bordered" style="width:100%">
                    <thead>
                    <tr>
                        <th>User ID</th>
                        <th>Name Surname</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($users as $u)
                        @php
                            $roleName = optional($u->role)->name; // admin / user / listener

                            if ($roleName === 'admin') {
                                $roleLabel = 'Admin';
                            } elseif ($roleName === 'listener') {
                                $roleLabel = 'Listener';
                            } else {
                                // user veya boş/bilinmeyen her şey
                                $roleLabel = 'Author';
                            }
                        @endphp
                        <tr>
                            <td>{{ $u->id }}</td>
                            <td>{{ trim(($u->name ?? '-') . ' ' . ($u->surname ?? '')) }}</td>
                            <td>{{ $u->email }}</td>

                            <td style="min-width: 200px;">
                                <span class="d-none">{{ $roleLabel }}</span>

                                <select class="form-select form-select-sm role-select"
                                        data-user-id="{{ $u->id }}">
                                    @foreach($roles as $r)
                                        <option value="{{ $r->id }}"
                                            {{ (int)$u->role_id === (int)$r->id ? 'selected' : '' }}>
                                            {{ $r->label ?? ($r->name === 'admin' ? 'Admin' : 'Author') }}
                                        </option>
                                    @endforeach
                                </select>
                            </td>

                            <td class="actions-col">
                                <button type="button"
                                        class="btn btn-sm btn-outline-warning update-role-btn action-btn"
                                        data-user-id="{{ $u->id }}">
                                    Update
                                </button>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <style>
        .info-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;
        }
    </style>
    <style>
        .action-btn{
            min-width: 86px;
            text-align: center;
        }
    </style>
    <style>
        #usersTable td.actions-col{
            text-align: center;
            vertical-align: middle;
        }
    </style>

    <script>
        $(function () {
            $('#usersTable').DataTable({
                order: [],
                pageLength: 25,
                lengthMenu: [10, 25, 50, 100],
                autoWidth: false,
                columnDefs: [
                    { orderable: true, targets: 3 } // Role sütunu indexi
                ]
            })

            $(document).on('click', '#excelFormatInfoBtn', function () {
                Swal.fire({
                    title: 'Excel Import Format',
                    icon: 'info',
                    width: 900,
                    html: `
                    <div style="text-align:left; font-size: 14px;">
                        <p><strong>Accepted files:</strong> .xlsx, .xls, .csv</p>

                        <p class="mb-1"><strong>Required columns (header names must match exactly):</strong></p>
                        <pre style="background:#f6f8fa; padding:12px; border-radius:8px; overflow:auto; margin-top:8px;">
Paper ID
Paper Title
Primary Contact Author Name
Primary Contact Author Email
                        </pre>

                        <p class="mb-1"><strong>Example row:</strong></p>
                        <pre style="background:#f6f8fa; padding:12px; border-radius:8px; overflow:auto; margin-top:8px;">
1 | Sample Paper Title | John Doe | john.doe@example.com
                        </pre>

                        <p class="mb-1"><strong>Notes:</strong></p>
                        <ul style="margin-top:6px;">
                            <li><code>Paper ID</code> must be numeric and unique.</li>
                            <li><code>Primary Contact Author Email</code> must be a valid email address.</li>
                            <li>Do not rename column headers; otherwise the import may fail.</li>
                        </ul>
                    </div>
                `,
                    confirmButtonText: 'OK'
                });
            });

            $(document).on('click', '.update-role-btn', function () {
                const userId = $(this).data('user-id');
                const roleId = $(`select.role-select[data-user-id="${userId}"]`).val();

                fetch(`{{ url('panel/users') }}/${userId}/role`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ role_id: roleId })
                })
                    .then(r => r.json().then(j => ({ ok: r.ok, j })))
                    .then(({ ok, j }) => {
                        if (ok && j.success) {
                            Swal.fire('Success', j.message, 'success');
                        } else {
                            Swal.fire('Error', j.message || 'Something went wrong', 'error');
                        }
                    })
                    .catch(() => Swal.fire('Error', 'Network error', 'error'));
            });
        });
    </script>

    @if(session('success'))
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                Swal.fire({
                    icon: 'success',
                    title: 'Success',
                    text: @json(session('success')),
                    confirmButtonText: 'OK'
                });
            });
        </script>
    @endif
@endsection