@extends('layouts.app')
@section('content')
<style>
    .status-toggle-container {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .switch {
        margin: 0;
    }

    .switch label {
        margin: 0;
    }

    .switch label .lever {
        margin: 0;
        background-color: #ccc;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
    }

    .switch label input[type=checkbox]:checked + .lever {
        background-color: #4CAF50;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
    }

    .switch label .lever:after {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    .switch label input[type=checkbox]:checked + .lever:after {
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    .status-text {
        font-weight: 500;
        transition: all 0.3s ease;
        min-width: 50px;
        text-align: center;
    }

    .green-text {
        color: #4CAF50 !important;
        text-shadow: 0 0 1px rgba(76, 175, 80, 0.3);
    }

    .grey-text {
        color: #9e9e9e !important;
    }

    .switch:not(.disabled) label {
        cursor: pointer;
    }

    .switch.disabled label {
        cursor: not-allowed;
        opacity: 0.6;
    }

    /* Hover effects */
    .switch:not(.disabled) label:hover .lever {
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
    }

    .switch:not(.disabled) label:hover input[type=checkbox]:checked + .lever {
        background-color: #45a049;
    }

    /* Loading state */
    .switch.loading label .lever {
        opacity: 0.7;
    }

    .switch.loading label .lever:after {
        animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.5; }
        100% { opacity: 1; }
    }
</style>

<div class="row">
    <div class="col s12">
        <div class="card">
            <div class="card-content">
                <div class="d-flex justify-content-between align-items-center">
                    <span class="card-title">Daftar Saran & Masukan</span>
                </div>

                @if (session('success'))
                    <div id="card-alert" class="card green" style="position: fixed; top: 20px; right: 20px; z-index: 1000; min-width: 300px;">
                        <div class="card-content white-text">
                            <p><i class="mdi-navigation-check"></i> {{ session('success') }}</p>
                        </div>
                        <button type="button" class="close white-text" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                @endif

                <table class="centered striped responsive-table">
                    <thead>
                        <tr>
                            <th style="width: 5%">No</th>
                            <th style="width: 15%">Pengguna</th>
                            <th style="width: 30%">Saran & Masukan</th>
                            <th style="width: 10%">Status</th>
                            <th style="width: 10%">Tanggal</th>
                            <th style="width: 10%">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($saranMasukan as $item)
                            <tr>
                                <td>{{ ($saranMasukan->currentPage() - 1) * $saranMasukan->perPage() + $loop->iteration }}</td>
                                <td>{{ $item->user->name ?? 'Anonim' }}</td>
                                <td style="text-align: left;">{{ Str::limit($item->saran_masukan, 100) }}</td>
                                <td>
                                    @if($item->status == 'Deleted')
                                        <div class="chip white-text red">
                                            {{ $item->status }}
                                        </div>
                                    @elseif(in_array($item->status, ['Aktif', 'NonAktif']))
                                        <div class="status-toggle-container">
                                            <div class="switch tooltipped" data-position="top" data-delay="50" data-tooltip="Klik untuk mengubah status">
                                                <label>
                                                    <input type="checkbox"
                                                           class="status-toggle"
                                                           data-id="{{ $item->id }}"
                                                           data-url="{{ route('esaran.toggle-status', $item->id) }}"
                                                           {{ $item->status == 'Aktif' ? 'checked' : '' }}>
                                                    <span class="lever"></span>
                                                </label>
                                            </div>
                                            <small class="status-text {{ $item->status == 'Aktif' ? 'green-text' : 'grey-text' }}">
                                                {{ $item->status }}
                                            </small>
                                        </div>
                                    @else
                                        <div class="chip white-text blue">
                                            {{ $item->status }}
                                        </div>
                                    @endif
                                </td>
                                <td>{{ $item->created_at->format('d/m/Y') }}</td>
                                <td>
                                    @if($item->status == 'Deleted')
                                        <a href="{{ route('esaran.restore', $item->id) }}" class="btn-floating btn-flat waves-effect waves-light green accent-2 white-text tooltipped restore-btn" data-position="top" data-delay="50" data-tooltip="Pulihkan Data" data-action="restore">
                                            <i class="mdi-action-restore"></i>
                                        </a>
                                        <a href="{{ route('esaran.destroy', $item->id) }}" class="btn-floating btn-flat waves-effect waves-light red accent-2 white-text tooltipped delete-btn" data-position="top" data-delay="50" data-tooltip="Hapus Permanen" data-action="permanent-delete">
                                            <i class="mdi-action-delete"></i>
                                        </a>
                                    @else
                                        <a href="{{ route('esaran.mark-deleted', $item->id) }}" class="btn-floating btn-flat waves-effect waves-light red accent-2 white-text tooltipped delete-btn" data-position="top" data-delay="50" data-tooltip="Masukan Ke List Dihapus" data-action="mark-deleted">
                                            <i class="mdi-action-visibility-off"></i>
                                        </a>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="center-align">Tidak ada data saran & masukan</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>

                <div class="center-align mt-3">
                    {{ $saranMasukan->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {

        const statusToggles = document.querySelectorAll('.status-toggle');
        statusToggles.forEach(toggle => {
            toggle.addEventListener('change', function() {
                const id = this.getAttribute('data-id');
                const url = this.getAttribute('data-url');
                const isChecked = this.checked;
                const container = this.closest('.status-toggle-container');
                const statusText = container.querySelector('.status-text');

                this.disabled = true;
                this.closest('.switch').classList.add('loading');

                fetch(url, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        statusText.textContent = data.newStatus;
                        statusText.className = `status-text ${data.newStatus === 'Aktif' ? 'green-text' : 'grey-text'}`;

                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: data.message,
                            timer: 2000,
                            showConfirmButton: false
                        });
                    } else {
                        this.checked = !isChecked;
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal!',
                            text: 'Terjadi kesalahan saat mengubah status'
                        });
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    this.checked = !isChecked;
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal!',
                        text: 'Terjadi kesalahan saat mengubah status'
                    });
                })
                .finally(() => {
                    this.disabled = false;
                    this.closest('.switch').classList.remove('loading');
                });
            });
        });

        const actionButtons = document.querySelectorAll('.delete-btn, .restore-btn');
        actionButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const href = this.getAttribute('href');
                const action = this.getAttribute('data-action');

                let title, text, confirmText;

                if (action === 'permanent-delete') {
                    title = "Apakah Anda yakin?";
                    text = "Data saran & masukan akan dihapus secara permanen!";
                    confirmText = "Ya, hapus permanen!";
                } else if (action === 'restore') {
                    title = "Pulihkan Data?";
                    text = "Saran & masukan akan dipulihkan ke status Aktif.";
                    confirmText = "Ya, pulihkan!";
                } else {
                    title = "Pindahkan ke List Dihapus?";
                    text = "Saran & masukan akan dipindahkan ke list dihapus. Data masih dapat dipulihkan.";
                    confirmText = "Ya, pindahkan!";
                }

                Swal.fire({
                    title: title,
                    text: text,
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: action === 'restore' ? "#4CAF50" : "#DD6B55",
                    confirmButtonText: confirmText,
                    cancelButtonText: "Batal",
                    allowOutsideClick: false
                }).then((result) => {
                    if (result.isConfirmed) {
                        if (action === 'permanent-delete') {
                            const form = document.createElement('form');
                            form.method = 'POST';
                            form.action = href;

                            const csrfToken = document.createElement('input');
                            csrfToken.type = 'hidden';
                            csrfToken.name = '_token';
                            csrfToken.value = '{{ csrf_token() }}';

                            const methodField = document.createElement('input');
                            methodField.type = 'hidden';
                            methodField.name = '_method';
                            methodField.value = 'DELETE';

                            form.appendChild(csrfToken);
                            form.appendChild(methodField);
                            document.body.appendChild(form);
                            form.submit();
                        } else {
                            const form = document.createElement('form');
                            form.method = 'POST';
                            form.action = href;

                            const csrfToken = document.createElement('input');
                            csrfToken.type = 'hidden';
                            csrfToken.name = '_token';
                            csrfToken.value = '{{ csrf_token() }}';

                            const methodField = document.createElement('input');
                            methodField.type = 'hidden';
                            methodField.name = '_method';
                            methodField.value = 'PATCH';

                            form.appendChild(csrfToken);
                            form.appendChild(methodField);
                            document.body.appendChild(form);
                            form.submit();
                        }
                    } else {
                        let cancelMessage;
                        if (action === 'permanent-delete') {
                            cancelMessage = "Data saran & masukan tidak dihapus";
                        } else if (action === 'restore') {
                            cancelMessage = "Saran & masukan tidak dipulihkan";
                        } else {
                            cancelMessage = "Saran & masukan tidak dipindahkan";
                        }
                        Swal.fire("Dibatalkan", cancelMessage, "error");
                    }
                });
            });
        });
    });
</script>
@endpush