@extends('layouts.app')

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

@section('header', 'Riwayat Sewa')

@section('content')
<div class="bg-white rounded-lg shadow-lg p-6">
    @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">No</th>
                    <th class="py-3 px-4 text-left">Tanggal</th>
                    <th class="py-3 px-4 text-left">Paket</th>
                    <th class="py-3 px-4 text-left">Total Harga</th>
                    <th class="py-3 px-4 text-left">Nominal Pembayaran</th>
                    <th class="py-3 px-4 text-left">Sisa Pembayaran</th>
                    <th class="py-3 px-4 text-left">Status</th>
                    <th class="py-3 px-4 text-left">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @foreach($sewas as $index => $sewa)
                <tr class="border-b hover:bg-gray-50">
                    <td class="py-3 px-4">{{ $index + 1 }}</td>
                    <td class="py-3 px-4">{{ $sewa->created_at->format('d/m/Y') }}</td>
                    <td class="py-3 px-4">{{ $sewa->paket->nama_paket }}</td>
                    <td class="py-3 px-4">Rp {{ number_format($sewa->total_harga, 0, ',', '.') }}</td>
                    <td class="py-3 px-4">
                        @if($sewa->nominal_pembayaran)
                            Rp {{ number_format($sewa->nominal_pembayaran, 0, ',', '.') }}
                        @else
                            <span class="text-gray-500">-</span>
                        @endif
                    </td>
                    <td class="py-3 px-4">
                        @php
                            $sisaPembayaran = $sewa->total_harga - ($sewa->nominal_pembayaran ?? 0);
                        @endphp
                        @if($sisaPembayaran > 0)
                            <span class="text-red-600 font-medium">
                                Rp {{ number_format($sisaPembayaran, 0, ',', '.') }}
                            </span>
                        @else
                            <span class="text-green-600 font-medium">Lunas</span>
                        @endif
                    </td>
                    <td class="py-3 px-4">
                        <span class="px-2 py-1 rounded-full text-xs font-semibold
                            @if($sewa->status == 'pending') bg-yellow-100 text-yellow-800
                            @elseif($sewa->status == 'confirmed') bg-blue-100 text-blue-800
                            @elseif($sewa->status == 'selesai') bg-green-100 text-green-800
                            @elseif($sewa->status == 'dibatalkan') bg-red-100 text-red-800
                            @elseif($sewa->status == 'ditolak') bg-red-100 text-red-800
                            @endif">
                            {{ ucfirst($sewa->status) }}
                        </span>
                        @if($sewa->status == 'ditolak' && $sewa->detail_status)
                            <div class="mt-1">
                                <button type="button" 
                                        onclick="showAlasanPenolakan('{{ $sewa->detail_status }}')"
                                        class="text-xs text-blue-600 underline">
                                    Lihat Alasan Penolakan
                                </button>
                            </div>
                        @endif
                    </td>
                    <td class="py-3 px-4">
                        <div class="space-y-2">
                            <!-- Tombol Detail dengan Modal -->
                            <button type="button" 
                                onclick="showDetail('{{ $sewa->id }}')"
                                class="w-full bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700">
                                Detail
                            </button>

                            @if(!in_array($sewa->status, ['selesai', 'dibatalkan', 'ongoing']))
                                <button type="button"
                                        onclick="showCancelForm('{{ $sewa->id }}', '{{ $sewa->paket->nama_paket }}', '{{ $sewa->status }}')"
                                        class="w-full bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600">
                                    Batalkan Pesanan
                                </button>
                            @endif

                            @if(in_array($sewa->status, ['dibatalkan', 'selesai']))
                                <form action="{{ route('riwayat.hapus', $sewa->id) }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                        onclick="return confirm('Apakah Anda yakin ingin menghapus riwayat pesanan ini?')"
                                        class="w-full bg-gray-500 text-white px-3 py-1 rounded hover:bg-gray-600">
                                        Hapus Riwayat
                                    </button>
                                </form>
                            @endif
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Modal Detail -->
    <div id="detailModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto">
            <div class="p-6">
                <div class="flex justify-between items-start mb-4">
                    <h3 class="text-xl font-bold text-gray-800">Detail Pesanan</h3>
                    <button onclick="closeDetail()" class="text-gray-400 hover:text-gray-600">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                <div id="modalContent" class="space-y-4">
                    <!-- Konten modal akan diisi melalui JavaScript -->
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Alasan Penolakan -->
    <div id="alasanPenolakanModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
            <div class="p-6">
                <div class="flex justify-between items-start mb-4">
                    <h3 class="text-lg font-bold text-gray-800">Alasan Penolakan</h3>
                    <button onclick="closeAlasanPenolakan()" class="text-gray-400 hover:text-gray-600">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded">
                    <p id="alasanPenolakanText" class="text-red-700"></p>
                </div>
                <div class="mt-4 flex justify-end">
                    <button onclick="closeAlasanPenolakan()" 
                            class="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400">
                        Tutup
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Form Pembatalan -->
    <div id="cancelFormModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
            <div class="p-6">
                <div class="flex justify-between items-start mb-4">
                    <h3 class="text-lg font-bold text-gray-800">Form Pembatalan Pesanan</h3>
                    <button onclick="closeCancelForm()" class="text-gray-400 hover:text-gray-600">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                
                <div class="mb-4">
                    <h4 class="font-semibold text-gray-700 mb-2">Detail Pesanan</h4>
                    <div class="bg-gray-50 p-3 rounded text-sm">
                        <p><strong>ID Pesanan:</strong> <span id="cancelOrderId"></span></p>
                        <p><strong>Paket:</strong> <span id="cancelOrderPackage"></span></p>
                        <p><strong>Status:</strong> <span id="cancelOrderStatus"></span></p>
                    </div>
                </div>

                <form id="cancelOrderForm" method="POST">
                    @csrf
                    @method('PUT')
                    
                    <div class="mb-4">
                        <label for="alasan_pembatalan" class="block text-sm font-medium text-gray-700 mb-2">
                            Alasan Pembatalan <span class="text-red-500">*</span>
                        </label>
                        <select id="alasan_pembatalan" name="alasan_pembatalan" 
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent" 
                                required>
                            <option value="">-- Pilih Alasan --</option>
                            <option value="Perubahan rencana">Perubahan rencana</option>
                            <option value="Kendala keuangan">Kendala keuangan</option>
                            <option value="Tidak sesuai ekspektasi">Tidak sesuai ekspektasi</option>
                            <option value="Masalah teknis">Masalah teknis</option>
                            <option value="Lainnya">Lainnya</option>
                        </select>
                    </div>

                    <div class="mb-4" id="alasanLainnyaDiv" style="display:none;">
                        <label for="alasan_lainnya" class="block text-sm font-medium text-gray-700 mb-2">
                            Jelaskan alasan lainnya
                        </label>
                        <textarea id="alasan_lainnya" name="alasan_lainnya" rows="3" 
                                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"
                                  placeholder="Silakan jelaskan alasan pembatalan Anda..."></textarea>
                    </div>

                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-sm font-medium text-yellow-800">Peringatan</h3>
                                <div class="mt-2 text-sm text-yellow-700">
                                    <p>Dengan membatalkan pesanan ini, Anda tidak akan dapat mengembalikannya. Alasan pembatalan akan dikirim ke admin untuk evaluasi.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-end space-x-3">
                        <button type="button" onclick="closeCancelForm()" 
                                class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                            Batal
                        </button>
                        <button type="submit" 
                                class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
                            Batalkan Pesanan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @else
    <div class="text-center py-8">
        <p class="text-gray-500">Belum ada riwayat pemesanan</p>
        @auth
            @if(auth()->user()->tipe_pengguna === 'customer')
                <a href="{{ route('customer.sewa') }}" class="mt-4 inline-block bg-blue-800 text-white py-2 px-4 rounded hover:bg-blue-900 transition duration-200">
                    Pesan Sekarang
                </a>
            @else
                <a href="{{ route('paket.index') }}" class="mt-4 inline-block bg-blue-800 text-white py-2 px-4 rounded hover:bg-blue-900 transition duration-200">
                    Lihat Paket
                </a>
            @endif
        @else
            <a href="{{ route('login') }}" class="mt-4 inline-block bg-blue-800 text-white py-2 px-4 rounded hover:bg-blue-900 transition duration-200">
                Login untuk Memesan
            </a>
        @endauth
    </div>
    @endif
</div>

@push('scripts')
<script>
async function showDetail(sewaId) {
    try {
        const response = await fetch(`/riwayat/${sewaId}`, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        });
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        
        const modalContent = document.getElementById('modalContent');
        modalContent.innerHTML = `
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Status Pembayaran -->
                <div class="space-y-2">
                    <h4 class="font-semibold">Status Pembayaran</h4>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <p class="text-sm">Tanggal Pembayaran: ${data.tanggal_pembayaran || '-'}</p>
                        <p class="text-sm">Status: ${data.status_pembayaran}</p>
                        ${data.detail_status ? `<p class="text-sm text-red-600">Alasan Penolakan: ${data.detail_status}</p>` : ''}
                    </div>
                </div>

                <!-- Informasi Pengiriman -->
                <div class="space-y-2">
                    <h4 class="font-semibold">Informasi Pengiriman</h4>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <p class="text-sm">Lokasi: ${data.lokasi || '-'}</p>
                        <p class="text-sm">Kota: ${data.kota?.nama_kota || '-'}</p>
                        <p class="text-sm">Ongkir: ${data.ongkir ? `Rp ${parseInt(data.ongkir).toLocaleString('id-ID')}` : '-'}</p>
                    </div>
                </div>

                <!-- Nomor Rekening -->
                ${data.nomor_rekening ? `
                <div class="space-y-2 md:col-span-2">
                    <h4 class="font-semibold">Nomor Rekening Pembayaran</h4>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <p class="text-sm">${data.nomor_rekening}</p>
                    </div>
                </div>
                ` : ''}

                <!-- Bukti Pembayaran -->
                ${data.bukti_pembayaran ? `
                <div class="space-y-2">
                    <h4 class="font-semibold">Bukti Pembayaran</h4>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <a href="/storage/${data.bukti_pembayaran}" target="_blank" 
                           class="text-blue-600 hover:text-blue-800">Lihat Bukti Pembayaran</a>
                    </div>
                </div>
                ` : ''}

                <!-- Jaminan -->
                ${data.foto_jaminan ? `
                <div class="space-y-2">
                    <h4 class="font-semibold">Jaminan</h4>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <p class="text-sm">Jenis: ${data.jenis_jaminan || '-'}</p>
                        <a href="/storage/${data.foto_jaminan}" target="_blank"
                           class="text-blue-600 hover:text-blue-800">Lihat Jaminan</a>
                    </div>
                </div>
                ` : ''}
            </div>
        `;

        document.getElementById('detailModal').classList.remove('hidden');
        document.getElementById('detailModal').classList.add('flex');
        document.body.style.overflow = 'hidden';
    } catch (error) {
        console.error('Error:', error);
        alert('Terjadi kesalahan saat memuat detail. Silakan coba lagi.');
    }
}

function closeDetail() {
    document.getElementById('detailModal').classList.add('hidden');
    document.getElementById('detailModal').classList.remove('flex');
    document.body.style.overflow = 'auto';
}

// Menutup modal saat mengklik area di luar modal
document.getElementById('detailModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeDetail();
    }
});

function showAlasanPenolakan(alasan) {
    const alasanPenolakanText = document.getElementById('alasanPenolakanText');
    alasanPenolakanText.textContent = alasan;
    document.getElementById('alasanPenolakanModal').classList.remove('hidden');
    document.getElementById('alasanPenolakanModal').classList.add('flex');
    document.body.style.overflow = 'hidden';
}

function closeAlasanPenolakan() {
    document.getElementById('alasanPenolakanModal').classList.add('hidden');
    document.getElementById('alasanPenolakanModal').classList.remove('flex');
    document.body.style.overflow = 'auto';
}

function showCancelForm(sewaId, paketNama, status) {
    document.getElementById('cancelOrderId').textContent = sewaId;
    document.getElementById('cancelOrderPackage').textContent = paketNama;
    document.getElementById('cancelOrderStatus').textContent = status;
    document.getElementById('cancelFormModal').classList.remove('hidden');
    document.getElementById('cancelFormModal').classList.add('flex');
    document.body.style.overflow = 'hidden';
}

function closeCancelForm() {
    document.getElementById('cancelFormModal').classList.add('hidden');
    document.getElementById('cancelFormModal').classList.remove('flex');
    document.body.style.overflow = 'auto';
}

// Handle alasan pembatalan dropdown
document.addEventListener('DOMContentLoaded', function() {
    const alasanSelect = document.getElementById('alasan_pembatalan');
    const alasanLainnyaDiv = document.getElementById('alasanLainnyaDiv');
    const alasanLainnyaTextarea = document.getElementById('alasan_lainnya');
    
    if (alasanSelect) {
        alasanSelect.addEventListener('change', function() {
            if (this.value === 'Lainnya') {
                alasanLainnyaDiv.style.display = 'block';
                alasanLainnyaTextarea.required = true;
            } else {
                alasanLainnyaDiv.style.display = 'none';
                alasanLainnyaTextarea.required = false;
                alasanLainnyaTextarea.value = '';
            }
        });
    }

    // Handle form submission
    const cancelForm = document.getElementById('cancelOrderForm');
    if (cancelForm) {
        cancelForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const alasanPembatalan = document.getElementById('alasan_pembatalan').value;
            const alasanLainnya = document.getElementById('alasan_lainnya').value;
            const sewaId = document.getElementById('cancelOrderId').textContent;
            
            if (!alasanPembatalan) {
                alert('Silakan pilih alasan pembatalan!');
                return;
            }
            
            if (alasanPembatalan === 'Lainnya' && !alasanLainnya.trim()) {
                alert('Silakan isi alasan lainnya!');
                return;
            }
            
            // Gabungkan alasan
            const finalAlasan = alasanPembatalan === 'Lainnya' ? alasanLainnya : alasanPembatalan;
            
            // Konfirmasi pembatalan
            if (!confirm('Apakah Anda yakin ingin membatalkan pesanan ini? Alasan pembatalan akan dikirim ke admin.')) {
                return;
            }
            
            // Kirim data ke server
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('_method', 'PUT');
            formData.append('alasan_pembatalan', finalAlasan);
            
            fetch(`/riwayat/${sewaId}/batal`, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Pesanan berhasil dibatalkan! Alasan pembatalan telah dikirim ke admin.');
                    window.location.reload();
                } else {
                    alert('Terjadi kesalahan: ' + (data.message || 'Gagal membatalkan pesanan'));
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Terjadi kesalahan saat membatalkan pesanan. Silakan coba lagi.');
            });
        });
    }
});

// Menutup modal saat mengklik area di luar modal
document.getElementById('cancelFormModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeCancelForm();
    }
});
</script>
@endpush
@endsection