@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <!-- Header Info -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow-lg border-0" style="background-color: #008384; border-radius: 15px;">
                    <div class="card-body text-white py-4">
                        <div class="row align-items-center">
                            <div class="col-md-4">
                                <h4 class="text-white mb-1 fw-bold">App - Survey</h4>
                                <p class="mb-0 opacity-9">MSJ Survey - v1.0</p>
                            </div>
                            <div class="col-md-8">
                                <div class="row text-center">
                                    <div class="col-3">
                                        <div class="d-flex flex-column align-items-center">
                                            <h3 class="text-white mb-0 fw-bold">{{ $total_surveys ?? 0 }}</h3>
                                            <small class="text-white opacity-9">Total Survey</small>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="d-flex flex-column align-items-center">
                                            <h3 class="text-white mb-0 fw-bold">{{ $surveys_entri ?? 0 }}</h3>
                                            <small class="text-white opacity-9">Entri</small>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="d-flex flex-column align-items-center">
                                            <h3 class="text-white mb-0 fw-bold">{{ $surveys_proses->count() ?? 0 }}</h3>
                                            <small class="text-white opacity-9">Proses</small>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="d-flex flex-column align-items-center">
                                            <h3 class="text-white mb-0 fw-bold">{{ $surveys_selesai ?? 0 }}</h3>
                                            <small class="text-white opacity-9">Selesai</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- CARD 1: Survey Sedang Berjalan (Status: Proses) -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow-sm border-0" style="border-radius: 15px; overflow: hidden;">
                    <div class="card-header bg-white border-0 py-3" style="border-radius: 15px 15px 0 0;">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0 fw-bold text-dark">
                                Survey Sedang Berjalan
                            </h5>
                            <span class="badge bg-warning">
                                {{ $surveys_proses->count() }} Survey Aktif
                            </span>
                        </div>
                    </div>
                    <div class="card-body p-4" style="overflow-x: hidden;">
                        @if($surveys_proses && $surveys_proses->count() > 0)
                            <div class="survey-grid-container" style="max-height: 700px; overflow-y: auto; overflow-x: hidden;">
                                <div class="row g-3" style="margin: 0;">
                                    @foreach($surveys_proses as $survey)
                                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-3" style="padding-left: 0.75rem; padding-right: 0.75rem;">
                                        <div class="survey-card-process h-100" onclick="window.location.href='{{ url('trsurvey/show/' . $survey->idsurvei) }}'">
                                            <div class="card h-100 border-0 shadow survey-card-hoverable" style="border-radius: 12px; background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%); transition: all 0.3s ease; box-shadow: 0 -2px 4px -1px rgba(0, 0, 0, 0.06), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; cursor: pointer;">
                                                <div class="card-body p-3">
                                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                                        <span class="badge bg-warning px-2 py-1 rounded-pill small">
                                                            <i class="fas fa-clock"></i> {{ ucfirst($survey->status) }}
                                                        </span>
                                                        @if($authorize->idroles === 'admins')
                                                            <small class="text-muted">{{ $survey->departemen_nama ?? 'N/A' }}</small>
                                                        @endif
                                                    </div>
                                                    <!-- Tanggal Dibuat -->
                                                    <div class="mb-2">
                                                        <small class="text-muted" style="font-size: 0.8rem;">
                                                            <i class="fas fa-plus-circle me-1"></i>
                                                            Dibuat: {{ \Carbon\Carbon::parse($survey->created_at)->format('d M Y') }}
                                                        </small>
                                                    </div>
                                                    <h6 class="fw-bold text-dark mb-2" style="font-size: 0.95rem; line-height: 1.4; max-width: 250px; word-wrap: break-word; overflow-wrap: break-word; white-space: normal;">
                                                        {{ $survey->judul_form }}
                                                    </h6>
                                                    
                                                    @if($survey->subjudul)
                                                    <p class="text-muted small mb-3" style="font-size: 0.85rem; max-width: 250px; word-wrap: break-word; overflow-wrap: break-word; white-space: normal;">
                                                        {{ $survey->subjudul }}
                                                    </p>
                                                    @endif

                                                    <!-- Progress Bar -->
                                                    @php
                                                        $progress = $survey->total_undangan > 0 ? 
                                                            round(($survey->sudah_mengisi / $survey->total_undangan) * 100) : 0;
                                                    @endphp
                                                    <div class="mb-3">
                                                        <div class="d-flex justify-content-between align-items-center mb-1">
                                                            <small class="text-muted fw-medium">Progres Partisipasi</small>
                                                            <small class="fw-bold text-primary">{{ $progress }}%</small>
                                                        </div>
                                                        <div class="progress" style="height: 6px; border-radius: 3px;">
                                                            <div class="progress-bar bg-primary" role="progressbar" 
                                                                 style="width: {{ $progress }}%; border-radius: 3px;" 
                                                                 aria-valuenow="{{ $progress }}" aria-valuemin="0" aria-valuemax="100"></div>
                                                        </div>
                                                    </div>

                                                    <!-- Stats -->
                                                    <div class="row g-2 mb-3">
                                                        <div class="col-4 text-center">
                                                            <div class="border rounded py-2" style="background: rgba(220, 53, 69, 0.1);">
                                                                <div class="fw-bold text-danger small">{{ $survey->belum_mengisi }}</div>
                                                                <div class="text-muted" style="font-size: 0.7rem;">Pending</div>
                                                            </div>
                                                        </div>
                                                        <div class="col-4 text-center">
                                                            <div class="border rounded py-2" style="background: rgba(40, 167, 69, 0.1);">
                                                                <div class="fw-bold text-success small">{{ $survey->sudah_mengisi }}</div>
                                                                <div class="text-muted" style="font-size: 0.7rem;">Selesai</div>
                                                            </div>
                                                        </div>
                                                        <div class="col-4 text-center">
                                                            <div class="border rounded py-2" style="background: rgba(0, 131, 132, 0.1);">
                                                                <div class="fw-bold text-primary small">{{ $survey->total_undangan }}</div>
                                                                <div class="text-muted" style="font-size: 0.7rem;">Total</div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Periode Survey -->
                                                    <div class="text-center border-top pt-2 position-relative">
                                                        <small class="text-muted">
                                                            <i class="fas fa-calendar-alt me-1"></i>
                                                            {{ \Carbon\Carbon::parse($survey->tanggal_mulai)->format('d M') }} - 
                                                            {{ \Carbon\Carbon::parse($survey->tanggal_selesai)->format('d M Y') }}
                                                        </small>
                                                        
                                                        <!-- Click indicator -->
                                                        <div class="click-indicator position-absolute top-0 end-0 me-2" style="opacity: 0; transition: opacity 0.3s ease;">
                                                            <i class="fas fa-external-link-alt text-primary"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        @else
                            <div class="text-center py-5">
                                <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                <p class="text-muted mb-0">Tidak ada survey yang sedang berjalan</p>
                                <small class="text-muted">Survey dengan status "Proses" akan muncul di sini</small>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- CARD 2: Riwayat Survey dengan Tab -->
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm border-0" style="border-radius: 15px;">
                    <div class="card-header bg-white border-0 py-3" style="border-radius: 15px 15px 0 0;">
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                            <h5 class="mb-0 fw-bold text-dark">
                                <i class="fas fa-history me-2"></i>Riwayat Survey
                            </h5>
                            
                            <!-- Tab Navigation -->
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-primary active" id="tabSemua" onclick="switchTab('semua')">
                                    <i class="fas fa-list me-2"></i>Semua
                                </button>
                                <button type="button" class="btn btn-outline-primary" id="tabEntri" onclick="switchTab('entri')">
                                    <i class="fas fa-edit me-2"></i>Entri
                                </button>
                                <button type="button" class="btn btn-outline-primary" id="tabProses" onclick="switchTab('proses')">
                                    <i class="fas fa-clock me-2"></i>Proses
                                </button>
                                <button type="button" class="btn btn-outline-primary" id="tabSelesai" onclick="switchTab('selesai')">
                                    <i class="fas fa-check-circle me-2"></i>Selesai
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-4">
                        <!-- DataTable -->
                        <div class="table-responsive">
                            <table class="table table-hover align-middle" id="surveyTable" style="width: 100%;">
                                <thead style="background: linear-gradient(135deg, #a8e6cf 0%, #88d8c0 100%);">
                                    <tr>
                                        <th class="text-center" style="width: 4%;">No</th>
                                        @if($authorize->idroles === 'admins')
                                        <th class="text-center" style="width: 18%;">Judul Survey</th>
                                        <th class="text-center" style="width: 9%;">Departemen</th>
                                        <th class="text-center" style="width: 18%;">Deskripsi</th>
                                        <th class="text-center" style="width: 10%;">Dibuat</th>
                                        @else
                                        <th class="text-center" style="width: 25%;">Judul Survey</th>
                                        <th class="text-center" style="width: 20%;">Deskripsi</th>
                                        <th class="text-center" style="width: 12%;">Dibuat</th>
                                        @endif
                                        <th class="text-center" style="width: 12%;">Tanggal Mulai</th>
                                        <th class="text-center" style="width: 12%;">Tanggal Selesai</th>
                                        <th class="text-center" style="width: 10%;">Status</th>
                                        <th style="display: none;">Status Order</th>
                                        <th style="display: none;">Created At</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($surveys as $index => $survey)
                                    <tr data-status="{{ $survey->status }}">
                                        <td class="text-center">{{ $index + 1 }}</td>
                                        <td style="max-width: 250px; min-width: 250px;">
                                            <div class="d-flex flex-column" style="max-width: 250px; word-wrap: break-word; overflow-wrap: break-word; white-space: normal;">
                                                <span class="fw-bold text-dark" style="word-wrap: break-word; overflow-wrap: break-word; white-space: normal;">{{ $survey->judul_form }}</span>
                                                <small class="text-muted" style="word-wrap: break-word; overflow-wrap: break-word; white-space: normal;">{{ $survey->subjudul ?? '-' }}</small>
                                            </div>
                                        </td>
                                        @if($authorize->idroles === 'admins')
                                        <td class="text-center">
                                            <span class="badge bg-info text-white">
                                                {{ $survey->departemen_nama ?? 'N/A' }}
                                            </span>
                                        </td>
                                        @endif
                                        <td>
                                            <div style="max-width: 200px;">
                                                @if($survey->deskripsi)
                                                    <small class="text-muted" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4;">
                                                        {!! Str::limit(strip_tags($survey->deskripsi), 80) !!}
                                                    </small>
                                                @else
                                                    <small class="text-muted fst-italic">Tidak ada deskripsi</small>
                                                @endif
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <small>{{ \Carbon\Carbon::parse($survey->created_at)->format('d M Y') }}</small>
                                        </td>
                                        <td class="text-center">
                                            <small>{{ \Carbon\Carbon::parse($survey->tanggal_mulai)->format('d M Y') }}</small>
                                        </td>
                                        <td class="text-center">
                                            <small>{{ \Carbon\Carbon::parse($survey->tanggal_selesai)->format('d M Y') }}</small>
                                        </td>
                                        <td class="text-center">
                                            @if($survey->status == 'entri')
                                                <span class="badge bg-secondary">Entri</span>
                                            @elseif($survey->status == 'proses')
                                                <span class="badge bg-warning">Proses</span>
                                            @else
                                                <span class="badge bg-success">Selesai</span>
                                            @endif
                                        </td>
                                        <td style="display: none;">
                                            @if($survey->status == 'entri')
                                                1
                                            @elseif($survey->status == 'proses')
                                                2
                                            @else
                                                3
                                            @endif
                                        </td>
                                        <td style="display: none;">{{ $survey->created_at }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('css')
<style>
    /* Survey Process Card Hover Effect */
    .survey-card-process {
        cursor: pointer;
        background: white;
    }
    
    .survey-card-hoverable {
        position: relative;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .survey-card-hoverable:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 10px 25px rgba(0, 131, 132, 0.15), 
                    0 6px 12px rgba(0, 0, 0, 0.1), 
                    0 -4px 8px rgba(0, 131, 132, 0.05) !important;
        background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%) !important;
        border: 1px solid rgba(0, 131, 132, 0.2) !important;
    }
    
    .survey-card-hoverable:before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(0, 131, 132, 0.1), transparent);
        transition: left 0.5s;
        z-index: 1;
    }
    
    .survey-card-hoverable:hover:before {
        left: 100%;
    }
    
    .survey-card-hoverable .card-body {
        position: relative;
        z-index: 2;
        transition: all 0.3s ease;
    }
    
    .survey-card-hoverable:hover .card-body {
        color: #2c3e50;
    }
    
    .survey-card-hoverable:hover .badge {
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
    }
    
    .survey-card-hoverable:hover .progress-bar {
        animation: progressPulse 1.5s ease-in-out infinite;
    }
    
    @keyframes progressPulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.8; }
    }
    
    .survey-card-hoverable:hover .fw-bold {
        color: #008384 !important;
    }
    
    .survey-card-hoverable:active {
        transform: translateY(-4px) scale(1.01);
        transition: all 0.1s ease;
    }
    
    .survey-card-hoverable:hover .click-indicator {
        opacity: 1 !important;
        animation: bounce 1s infinite;
    }
    
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0);
        }
        40% {
            transform: translateY(-4px);
        }
        60% {
            transform: translateY(-2px);
        }
    }
    
    /* Add hover effect to the entire card area */
    .survey-card-process:hover {
        transition: all 0.3s ease;
    }
    


    /* Tab Buttons */
    .btn-group .btn {
        border-radius: 8px;
        padding: 0.5rem 1.5rem;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-group .btn.active {
        background: linear-gradient(135deg, #008384 0%, #00a8a9 100%);
        border-color: #008384;
        color: white !important;
    }

    .btn-group .btn:not(.active) {
        background: white;
        border-color: #008384;
        color: #008384;
    }

    .btn-group .btn:not(.active):hover {
        background: #f8f9fa;
    }

    /* DataTables Custom Styling */
    table.dataTable thead th {
        border: none !important;
        font-weight: 600;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 15px 10px !important;
    }

    table.dataTable tbody td {
        border: none !important;
        border-bottom: 1px solid #e9ecef !important;
        vertical-align: middle;
        padding: 12px 10px !important;
    }

    table.dataTable tbody tr:hover {
        background-color: #f8f9fa !important;
    }

    .badge {
        font-size: 0.75rem;
        padding: 0.5em 0.75em;
        border-radius: 50px;
    }

    /* Survey Grid Container Scrollbar */
    .survey-grid-container {
        scrollbar-width: thin;
        scrollbar-color: #008384 #f1f1f1;
    }

    .survey-grid-container::-webkit-scrollbar {
        width: 8px;
    }

    .survey-grid-container::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .survey-grid-container::-webkit-scrollbar-thumb {
        background: #008384;
        border-radius: 10px;
    }

    .survey-grid-container::-webkit-scrollbar-thumb:hover {
        background: #006666;
    }

    /* Survey Cards Grid Responsive */
    @media (max-width: 576px) {
        .survey-grid-container .col-12 {
            margin-bottom: 1rem;
        }
    }

    /* Prevent horizontal overflow */
    .survey-grid-container,
    .survey-grid-container .row,
    .survey-grid-container .row > * {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    .survey-grid-container .row {
        --bs-gutter-x: 1.5rem;
        margin-left: calc(-0.5 * var(--bs-gutter-x));
        margin-right: calc(-0.5 * var(--bs-gutter-x));
    }
</style>
@endpush

@push('js')
<script>
    let surveyTable;
    // Set column indexes based on user role (global variables)
    const isAdmin = {{ $authorize->idroles === 'admins' ? 'true' : 'false' }};
    const statusOrderCol = isAdmin ? 8 : 7;
    const createdAtCol = isAdmin ? 9 : 8;

    $(document).ready(function() {
        
        // Initialize DataTable
        surveyTable = $('#surveyTable').DataTable({
            "language": {
                "search": "Cari:",
                "lengthMenu": "Tampilkan _MENU_ data per halaman",
                "zeroRecords": "Tidak ada data yang ditemukan",
                "info": "Menampilkan halaman _PAGE_ dari _PAGES_",
                "infoEmpty": "Tidak ada data tersedia",
                "infoFiltered": "(difilter dari _MAX_ total data)",
                "paginate": {
                    "first": "Pertama",
                    "last": "Terakhir", 
                    "next": "Selanjutnya",
                    "previous": "Sebelumnya"
                }
            },
            "pageLength": 10,
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Semua"]],
            @if($authorize->idroles === 'admins')
            // Multi-column sorting: Status Order (asc), then Created At (asc)
            "order": [[8, 'asc'], [9, 'asc']], // Status Order (hidden col 8), Created At (hidden col 9)
            @else
            // Multi-column sorting: Status Order (asc), then Created At (asc)  
            "order": [[7, 'asc'], [8, 'asc']], // Status Order (hidden col 7), Created At (hidden col 8)
            @endif
            "columnDefs": [
                { "orderable": false, "targets": 0 }, // Disable sorting on No column
                { "visible": false, "targets": [@if($authorize->idroles === 'admins')[8, 9]@else[7, 8]@endif] } // Hide status order and created_at columns
            ]
        });

        // Show semua status by default (dengan urutan entri-proses-selesai)
        switchTab('semua');
    });

    // Function to switch tabs
    function switchTab(status) {
        // Update button states
        $('.btn-group .btn').removeClass('active btn-primary').addClass('btn-outline-primary');
        
        if (status === 'semua') {
            $('#tabSemua').removeClass('btn-outline-primary').addClass('btn-primary active');
            // Apply multi-column sorting for "Semua" tab: Status Order (asc), then Created At (asc)
            surveyTable.order([[statusOrderCol, 'asc'], [createdAtCol, 'asc']]).draw();
        } else if (status === 'entri') {
            $('#tabEntri').removeClass('btn-outline-primary').addClass('btn-primary active');
            // For specific status tabs, sort by created_at asc
            surveyTable.order([[createdAtCol, 'asc']]).draw();
        } else if (status === 'proses') {
            $('#tabProses').removeClass('btn-outline-primary').addClass('btn-primary active');
            // For specific status tabs, sort by created_at asc
            surveyTable.order([[createdAtCol, 'asc']]).draw();
        } else if (status === 'selesai') {
            $('#tabSelesai').removeClass('btn-outline-primary').addClass('btn-primary active');
            // For specific status tabs, sort by created_at asc
            surveyTable.order([[createdAtCol, 'asc']]).draw();
        }

        // Filter DataTable
        filterByStatus(status);
    }

    // Function to filter table by status
    function filterByStatus(status) {
        // Custom filter function
        $.fn.dataTable.ext.search.push(
            function(settings, data, dataIndex) {
                if (status === 'semua') {
                    return true; // Show all rows
                }
                var rowStatus = $(surveyTable.row(dataIndex).node()).data('status');
                return rowStatus === status;
            }
        );
        
        // Redraw table with new filter
        surveyTable.draw();
        
        // Remove custom filter after drawing
        $.fn.dataTable.ext.search.pop();
    }

    // Card click handler for survey process cards
    $('.survey-card-process').click(function(e) {
        // Prevent double clicks and ensure clean navigation
        e.preventDefault();
        e.stopPropagation();
        
        // Get the onclick attribute value from the div
        var onclickAttr = $(this).attr('onclick');
        if (onclickAttr) {
            // Extract URL from onclick attribute
            var match = onclickAttr.match(/window\.location\.href='([^']+)'/);
            if (match && match[1]) {
                // Add loading effect
                $(this).find('.card').addClass('loading-card');
                
                // Navigate after short delay for smooth transition
                setTimeout(function() {
                    window.location.href = match[1];
                }, 100);
            }
        }
    });
    
    // Add loading effect CSS
    $('<style>')
        .prop('type', 'text/css')
        .html(`
            .loading-card {
                opacity: 0.7;
                pointer-events: none;
                transform: scale(0.98);
                transition: all 0.2s ease;
            }
        `)
        .appendTo('head');
</script>
@endpush