@extends('layouts.apex')

@section('title', 'Sampah Pemakaian Barang')

@section('header-title', 'Sampah Pemakaian Barang')

@section('content')
<div style="margin-bottom: 1.5rem;">
    <a href="{{ route('pemakaian-barang.index') }}" class="btn btn-secondary">
        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display: inline; vertical-align: middle;">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        Kembali
    </a>
    <button onclick="restoreAllTrashed()" class="btn btn-success">
        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display: inline; vertical-align: middle; margin-right: 0.5rem;">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
        </svg>
        Restore Semua
    </button>
    <button onclick="emptyTrash()" class="btn btn-danger">
        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display: inline; vertical-align: middle; margin-right: 0.5rem;">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
        </svg>
        Kosongkan Sampah
    </button>
</div>

<!-- Trashed Pakan List -->
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Data Pakan Terhapus ({{ $pemakaianBarang->count() }} data)</h3>
    </div>
    <div class="card-body">
        @if($pemakaianBarang->count() > 0)
        <div style="overflow-x: auto;">
            <table class="table table-striped table-bordered" style="width: 100%;">
                <thead>
                    <tr>
                        <th style="width: 40px; text-align: center;">
                            <input type="checkbox" id="selectAllTrashed" onchange="toggleSelectAllTrashed()">
                        </th>
                        <th style="min-width: 100px;">Kolam</th>
                        <th style="min-width: 100px;">Tanggal</th>
                        <th style="min-width: 80px;">Jam</th>
                        <th style="min-width: 150px;">Jenis Pakan</th>
                        <th style="min-width: 80px; text-align: right;">Jumlah</th>
                        <th style="min-width: 60px;">Satuan</th>
                        <th style="min-width: 150px;">Keterangan</th>
                        <th style="min-width: 120px;">Diinput Oleh</th>
                        <th style="min-width: 130px;">Tanggal Dihapus</th>
                        <th style="width: 120px; text-align: center;">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($pemakaianBarang as $item)
                    <tr>
                        <td style="text-align: center;">
                            <input type="checkbox" class="trashed-checkbox" data-id="{{ $item->id }}">
                        </td>
                        <td>{{ $item->kolam }}</td>
                        <td>{{ $item->tanggal ? $item->tanggal->format('d/m/Y') : '-' }}</td>
                        <td>{{ $item->waktu_pemberian ? $item->waktu_pemberian->format('H:i') : '-' }}</td>
                        <td>{{ $item->jenis_barang }}</td>
                        <td style="text-align: right;">{{ number_format($item->jumlah, 1) }}</td>
                        <td>{{ $item->satuan }}</td>
                        <td>{{ $item->keterangan ?? '-' }}</td>
                        <td>{{ $item->createdBy ? $item->createdBy->name : '-' }}</td>
                        <td>{{ $item->deleted_at ? $item->deleted_at->format('d/m/Y H:i') : '-' }}</td>
                        <td style="text-align: center;">
                            <div style="display: flex; gap: 0.25rem; justify-content: center;">
                                <button onclick="restoreSingle({{ $item->id }})" class="btn btn-sm btn-success" title="Restore" style="flex-shrink: 0;">
                                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
                                    </svg>
                                </button>
                                <button onclick="forceDeleteSingle({{ $item->id }})" class="btn btn-sm btn-danger" title="Hapus Permanen" style="flex-shrink: 0;">
                                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                    </svg>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
        <div class="text-center" style="padding: 2rem;">
            <svg width="64" height="64" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="margin: 0 auto; color: #6c757d;">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
            </svg>
            <p style="margin-top: 1rem; color: #6c757d;">Tidak ada data di sampah</p>
        </div>
        @endif
    </div>
</div>

@push('scripts')
<script>
let selectedTrashedRows = [];

function toggleSelectAllTrashed() {
    const checkboxes = $('.trashed-checkbox');
    const checked = $('#selectAllTrashed').is(':checked');

    checkboxes.prop('checked', checked);
    selectedTrashedRows = [];

    if (checked) {
        checkboxes.each(function() {
            selectedTrashedRows.push($(this).data('id'));
        });
    }
}

function restoreSingle(id) {
    Swal.fire({
        title: 'Restore Data?',
        text: 'Data akan dikembalikan ke daftar aktif',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Ya, Restore',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: `/pemakaian-barang/${id}/restore`,
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    Swal.fire('Success', response.message, 'success');
                    setTimeout(() => window.location.reload(), 1500);
                },
                error: function(xhr) {
                    Swal.fire('Error', 'Gagal restore data', 'error');
                }
            });
        }
    });
}

function forceDeleteSingle(id) {
    Swal.fire({
        title: 'Hapus Permanen?',
        text: 'Data akan dihapus permanen dan tidak bisa dikembalikan!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Ya, Hapus Permanen',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: `/pemakaian-barang/${id}/force-delete`,
                method: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    Swal.fire('Success', response.message, 'success');
                    setTimeout(() => window.location.reload(), 1500);
                },
                error: function(xhr) {
                    Swal.fire('Error', 'Gagal menghapus data', 'error');
                }
            });
        }
    });
}

function restoreAllTrashed() {
    if (selectedTrashedRows.length === 0) {
        Swal.fire('Info', 'Pilih data yang akan di-restore', 'info');
        return;
    }

    Swal.fire({
        title: 'Restore Semua?',
        text: `Anda akan me-restore ${selectedTrashedRows.length} data`,
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Ya, Restore Semua',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: '{{ route('pemakaian-barang.restore.multiple') }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    ids: selectedTrashedRows
                },
                success: function(response) {
                    Swal.fire('Success', response.message, 'success');
                    setTimeout(() => window.location.reload(), 1500);
                },
                error: function(xhr) {
                    Swal.fire('Error', 'Gagal restore data', 'error');
                }
            });
        }
    });
}

function emptyTrash() {
    Swal.fire({
        title: 'Kosongkan Sampah?',
        text: 'Semua data di sampah akan dihapus permanen!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Ya, Kosongkan',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            // Get all trashed IDs
            const allIds = [];
            $('.trashed-checkbox').each(function() {
                allIds.push($(this).data('id'));
            });

            $.ajax({
                url: '{{ route('pemakaian-barang.force-delete.multiple') }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    ids: allIds
                },
                success: function(response) {
                    Swal.fire('Success', response.message, 'success');
                    setTimeout(() => window.location.reload(), 1500);
                },
                error: function(xhr) {
                    Swal.fire('Error', 'Gagal mengosongkan sampah', 'error');
                }
            });
        }
    });
}

// Handle checkbox change
$('.trashed-checkbox').on('change', function() {
    const id = $(this).data('id');
    if ($(this).is(':checked')) {
        if (!selectedTrashedRows.includes(id)) {
            selectedTrashedRows.push(id);
        }
    } else {
        selectedTrashedRows = selectedTrashedRows.filter(rowId => rowId !== id);
    }
});
</script>
@endpush
@endsection