@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/adminHeader.css') }}">
<link rel="stylesheet" href="{{ asset('css/surveysAdmin.css') }}">
@endpush

@section('content')
<div class="container">
    {{-- Header --}}
    <div class="admin-header-box">
        <div>
            <h4>Senarai Borang soal selidik</h4>
            <p>Beserta statistik dan analisis Post-Mortem.</p>
        </div>
        <a href="{{ route('admin.surveys.create') }}" class="btn btn-sm btn-light px-3 fw-bold text-primary">
            <i class="bi bi-plus-lg"></i> Daftar soal selidik
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    {{-- Carian borang --}}
    <form method="GET" action="{{ route('admin.surveys.index') }}" class="mb-4">
        <div class="input-group shadow-sm">
            <input type="text" name="search" value="{{ request('search') }}" class="form-control border-end-0" placeholder="Cari tajuk atau kata kunci...">
            <button class="btn btn-primary" type="submit"><i class="bi bi-search"></i> </button>
            <a href="{{ route('admin.surveys.index') }}" class="btn btn-outline-secondary"><i class="bi bi-arrow-counterclockwise"></i></a>
        </div>
    </form>

    <div class="card survey-table-card shadow-sm border-0">
        <div class="card-header bg-secondary text-white py-3">
            <h5 class="mb-0 text-center fw-bold">Senarai Soal Selidik</h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive-lg">
                <table class="table table-hover table-striped table-bordered align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center">#</th>
                            <th style="width: 40%;">Tajuk</th>
                            <th style="width: 20%;">Dibuat oleh</th>
                            <th class="text-center">Respons</th>
                            <th>Tarikh</th>
                            <th class="text-center">Stats & Analisis</th>
                            <th class="text-center">Tindakan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($surveys as $index => $survey)
                        <tr>
                            <td class="text-center">{{ $index + 1 }}</td>
                            <td>
                                <div class="fw-semibold text-uppercase text-primary position-relative survey-title-container">
                                    <a href="{{ route('surveys.show', $survey) }}" 
                                       target="_blank" 
                                       class="text-decoration-none fw-bold text-primary">
                                        {{ $survey->title }}
                                    </a>
                                    <button class="btn btn-link btn-sm p-0 ms-2 text-secondary" 
                                            onclick="copySurveyLink('{{ $survey->uuid }}')" 
                                            title="Copy Link">
                                        <i class="bi bi-copy"></i>
                                    </button>
                                </div>
                            </td>
                            <td>{{ $survey->user->name }}</td>
                            <td class="text-center">
                                <span class="badge rounded-pill bg-info text-white px-3">
                                    {{ $survey->responses->count() }}
                                </span>
                            </td>
                            <td>{{ $survey->date }}</td>
                            <td class="text-center">
                                <a href="{{ route('admin.surveys.statistics', $survey->id) }}" class="btn btn-sm btn-info text-white fw-semibold">
                                    <i class="bi bi-bar-chart"></i> Graf
                                </a>

                                <button type="button" class="btn btn-sm btn-warning fw-semibold" data-bs-toggle="modal" data-bs-target="#modalUlasan{{ $survey->id }}">
                                    <i class="bi bi-clipboard-check"></i> Ulasan
                                </button>
                            </td>
                            <td class="text-center">
                                <div class="dropdown">
                                    <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                        <i class="bi bi-three-dots-vertical"></i>
                                    </button>
                                    <ul class="dropdown-menu shadow border-0">
                                        <li>
                                            <a class="dropdown-item" href="{{ route('admin.surveys.edit', $survey->id) }}">
                                                <i class="bi bi-pencil me-2 text-primary"></i> Edit Borang
                                            </a>
                                        </li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <form action="{{ route('admin.surveys.destroy', $survey->id) }}" method="POST" onsubmit="return confirm('Padam borang ini?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="dropdown-item text-danger">
                                                    <i class="bi bi-trash me-2"></i> Hapus
                                                </button>
                                            </form>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>

                        <div class="modal fade" id="modalUlasan{{ $survey->id }}" tabindex="-1" aria-labelledby="modalLabel{{ $survey->id }}" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content border-0 shadow-lg">
                                    <div class="modal-header bg-warning">
                                        <h5 class="modal-title fw-bold" id="modalLabel{{ $survey->id }}">
                                            <i class="bi bi-pencil-square me-2"></i>Ulasan Post-Mortem
                                        </h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>

                                    <form action="{{ route('admin.surveys.update_ulasan', $survey->id) }}" method="POST">
                                    @csrf
                                        <div class="modal-body py-4">
                                            <div class="mb-3">
                                                <label class="form-label fw-bold">Tajuk Borang:</label>
                                                <p class="text-muted border-bottom pb-2">{{ $survey->title }}</p>
                                            </div>
                                            <div class="mb-3">
                                                <label for="ulasan" class="form-label fw-bold text-dark">Nota Penambahbaikan:</label>
                                                <textarea name="ulasan" class="form-control border-warning shadow-sm" rows="6" placeholder="Tulis ulasan penambahbaikan di sini">{{ $survey->ulasan }}</textarea>
                                                <div class="form-text mt-2">
                                                    <i class="bi bi-info-circle me-1"></i> Perkara yang perlu ditambah baik pada masa akan datang.
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer bg-light text-end">
                                            <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Batal</button>
                                            <button type="submit" class="btn btn-primary px-4 shadow-sm">
                                                <i class="bi bi-save me-1"></i> Simpan Ulasan
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                        @empty
                        <tr>
                            <td colspan="7" class="text-center p-5 text-muted">
                                <i class="bi bi-clipboard-x display-4 d-block mb-3 opacity-25"></i>
                                Tiada borang soal selidik ditemui.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Pagination --}}
    <div class="d-flex justify-content-center mt-4">
        {{ $surveys->withQueryString()->links() }}
    </div>

    <!-- Toast Notification for Copy Success -->
    <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
        <div id="copyToast" class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                    <i class="bi bi-check-circle-fill me-2"></i>Link berjaya disalin!
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function copySurveyLink(surveyUuid) {
    const baseUrl = "{{ url('/') }}";
    const surveyUrl = `${baseUrl}/survey/${surveyUuid}`;
    
    if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(surveyUrl).then(function() {
            showCopyToast();
        }).catch(function(err) {
            console.error('Clipboard API failed: ', err);
            fallbackCopy(surveyUrl);
        });
    } else {
        fallbackCopy(surveyUrl);
    }
}

function fallbackCopy(text) {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    textarea.style.position = 'fixed';
    textarea.style.opacity = '0';
    document.body.appendChild(textarea);
    textarea.focus();
    textarea.select();
    
    try {
        const successful = document.execCommand('copy');
        if (successful) {
            showCopyToast();
        } else {
            alert('Gagal menyalin link. Sila cuba lagi.');
        }
    } catch (err) {
        console.error('Fallback copy failed: ', err);
        alert('Gagal menyalin link. Sila cuba lagi.');
    }
    
    document.body.removeChild(textarea);
}

// Show toast notification
function showCopyToast() {
    const toastEl = document.getElementById('copyToast');
    const toast = new bootstrap.Toast(toastEl);
    toast.show();
}


</script>
@endpush
@endsection