@extends('layouts.app')

@section('title', 'Manajemen Riwayat - INUFA')

@section('header', 'Manajemen Riwayat Pemesanan')

@section('content')
<div class="bg-white rounded-lg shadow-lg p-6">
    <div class="mb-6">
        <h2 class="text-xl font-bold mb-2">Daftar Semua Pemesanan</h2>
        <p class="text-gray-600">Menampilkan semua pesanan dari seluruh pengguna.</p>
    </div>
    
    <!-- Filter dan Pencarian -->
    <div class="mb-6 flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
        <div class="w-full md:w-1/3">
            <label for="status-filter" class="block text-sm font-medium text-gray-700 mb-1">Filter Status</label>
            <select id="status-filter" class="w-full border-gray-300 rounded-md shadow-sm p-2 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
                <option value="">Semua Status</option>
                <option value="pending">Pending</option>
                <option value="confirmed">Confirmed</option>
                <option value="ongoing">Ongoing</option>
                <option value="completed">Completed</option>
                <option value="cancelled">Cancelled</option>
            </select>
        </div>
        <div class="w-full md:w-2/3">
            <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Cari Pemesanan</label>
            <input type="text" id="search" placeholder="Cari berdasarkan ID, nama pengguna, atau lokasi..." class="w-full border-gray-300 rounded-md shadow-sm p-2 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
        </div>
    </div>
    
    <!-- Tabel Riwayat -->
    @if(count($sewas) > 0)
    <div class="overflow-x-auto">
        <table class="min-w-full bg-white">
            <thead>
                <tr class="bg-gray-100">
                    <th class="py-3 px-4 text-left">ID</th>
                    <th class="py-3 px-4 text-left">Pengguna</th>
                    <th class="py-3 px-4 text-left">Paket</th>
                    <th class="py-3 px-4 text-left">Tanggal Mulai</th>
                    <th class="py-3 px-4 text-left">Tanggal Selesai</th>
                    <th class="py-3 px-4 text-left">Total Harga</th>
                    <th class="py-3 px-4 text-left">Status</th>
                    <th class="py-3 px-4 text-left">Aksi</th>
                </tr>
            </thead>
            <tbody id="orders-table-body">
                @foreach($sewas as $sewa)
                <tr class="border-b hover:bg-gray-50 order-row" data-status="{{ $sewa->status }}">
                    <td class="py-3 px-4 font-medium">#{{ $sewa->id }}</td>
                    <td class="py-3 px-4">{{ $sewa->user->name }}</td>
                    <td class="py-3 px-4">{{ $sewa->paket->nama }}</td>
                    <td class="py-3 px-4">{{ date('d/m/Y', strtotime($sewa->tanggal_mulai)) }}</td>
                    <td class="py-3 px-4">{{ date('d/m/Y', strtotime($sewa->tanggal_selesai)) }}</td>
                    <td class="py-3 px-4">Rp {{ number_format($sewa->total_harga, 0, ',', '.') }}</td>
                    <td class="py-3 px-4">
                        <span class="px-2 py-1 rounded-full text-xs font-semibold 
                            {{ $sewa->status == 'pending' ? 'bg-yellow-100 text-yellow-800' : 
                              ($sewa->status == 'confirmed' ? 'bg-blue-100 text-blue-800' : 
                               ($sewa->status == 'ongoing' ? 'bg-purple-100 text-purple-800' : 
                                ($sewa->status == 'completed' ? 'bg-green-100 text-green-800' : 
                                 'bg-red-100 text-red-800'))) }}">
                            {{ ucfirst($sewa->status) }}
                        </span>
                    </td>
                    <td class="py-3 px-4">
                        <div class="flex space-x-2">
                            <a href="#" onclick="openStatusModal({{ $sewa->id }}, '{{ $sewa->status }}')" class="bg-blue-500 text-white py-1 px-2 rounded hover:bg-blue-600 transition-colors">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                                </svg>
                            </a>
                            <a href="{{ route('riwayat.show', $sewa->id) }}" class="bg-green-500 text-white py-1 px-2 rounded hover:bg-green-600 transition-colors">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                                    <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
                                </svg>
                            </a>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @else
    <div class="text-center py-8">
        <p class="text-gray-500">Belum ada data pemesanan.</p>
    </div>
    @endif
</div>

<!-- Modal Update Status -->
<div id="status-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center">
    <div class="bg-white rounded-lg p-6 max-w-md w-full">
        <h3 class="text-xl font-bold mb-4">Update Status Pemesanan</h3>
        <form id="status-form" action="" method="POST">
            @csrf
            @method('PUT')
            <div class="mb-4">
                <label for="status" class="block text-gray-700 font-medium mb-2">Status Baru</label>
                <select id="status" name="status" class="w-full border-gray-300 rounded-md shadow-sm p-2 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
                    <option value="pending">Pending</option>
                    <option value="confirmed">Confirmed</option>
                    <option value="ongoing">Ongoing</option>
                    <option value="completed">Completed</option>
                    <option value="cancelled">Cancelled</option>
                </select>
            </div>
            <div class="flex justify-end space-x-2">
                <button type="button" onclick="closeStatusModal()" class="bg-gray-300 text-gray-800 py-2 px-4 rounded hover:bg-gray-400 transition-colors">
                    Batal
                </button>
                <button type="submit" class="bg-blue-800 text-white py-2 px-4 rounded hover:bg-blue-900 transition-colors">
                    Simpan
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Filter berdasarkan status
    document.getElementById('status-filter').addEventListener('change', function() {
        const status = this.value;
        const rows = document.querySelectorAll('.order-row');
        
        rows.forEach(row => {
            if (status === '' || row.dataset.status === status) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    });
    
    // Pencarian
    document.getElementById('search').addEventListener('keyup', function() {
        const searchTerm = this.value.toLowerCase();
        const rows = document.querySelectorAll('.order-row');
        
        rows.forEach(row => {
            const rowText = row.textContent.toLowerCase();
            if (rowText.includes(searchTerm)) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    });
    
    // Modal status
    function openStatusModal(id, currentStatus) {
        const modal = document.getElementById('status-modal');
        const form = document.getElementById('status-form');
        const statusSelect = document.getElementById('status');
        
        // Set action URL
        form.action = `/admin/riwayat/${id}/status`;
        
        // Set current status
        statusSelect.value = currentStatus;
        
        // Show modal
        modal.classList.remove('hidden');
    }
    
    function closeStatusModal() {
        const modal = document.getElementById('status-modal');
        modal.classList.add('hidden');
    }
    
    // Close modal jika klik di luar modal
    window.onclick = function(event) {
        const modal = document.getElementById('status-modal');
        if (event.target === modal) {
            closeStatusModal();
        }
    };
</script>
@endsection