@extends('layouts.admin')

@section('title', 'Detail Pesanan Dibatalkan - INUFA')

@section('header', 'Detail Pesanan Dibatalkan')

@section('content')
<div class="bg-white rounded-lg shadow-md p-6">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-xl font-semibold text-gray-800">Detail Pesanan #{{ $sewa->id }}</h2>
        <div class="flex space-x-2">
            <a href="{{ route('admin.cancelled-orders') }}" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-md text-sm">
                Kembali ke Daftar
            </a>
            <a href="{{ route('admin.dashboard') }}" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm">
                Dashboard
            </a>
        </div>
    </div>

    @if(session('success'))
        <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4 rounded">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4 rounded">
            {{ session('error') }}
        </div>
    @endif

    <!-- Status Badge -->
    <div class="mb-6">
        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
            Dibatalkan oleh Customer
        </span>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Informasi Customer -->
        <div class="bg-gray-50 p-6 rounded-lg">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Informasi Customer</h3>
            <div class="space-y-3">
                <div>
                    <label class="block text-sm font-medium text-gray-600">Nama</label>
                    <p class="text-sm text-gray-900">{{ $sewa->user->name ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-600">Email</label>
                    <p class="text-sm text-gray-900">{{ $sewa->user->email ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-600">No. Telepon</label>
                    <p class="text-sm text-gray-900">{{ $sewa->user->no_telp ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-600">Alamat</label>
                    <p class="text-sm text-gray-900">{{ $sewa->user->alamat ?? 'N/A' }}</p>
                </div>
            </div>
        </div>

        <!-- Informasi Pesanan -->
        <div class="bg-gray-50 p-6 rounded-lg">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Informasi Pesanan</h3>
            <div class="space-y-3">
                <div>
                    <label class="block text-sm font-medium text-gray-600">ID Pesanan</label>
                    <p class="text-sm text-gray-900">#{{ $sewa->id }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-600">Paket</label>
                    <p class="text-sm text-gray-900">{{ $sewa->paket->nama ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-600">Total Harga</label>
                    <p class="text-sm text-gray-900">Rp {{ number_format($sewa->total_harga, 0, ',', '.') }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-600">Tanggal Pesanan</label>
                    <p class="text-sm text-gray-900">{{ $sewa->created_at->format('d/m/Y H:i') }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-600">Tanggal Dibatalkan</label>
                    <p class="text-sm text-gray-900">{{ $sewa->updated_at->format('d/m/Y H:i') }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Alasan Pembatalan -->
    <div class="mt-6 bg-red-50 border border-red-200 p-6 rounded-lg">
        <h3 class="text-lg font-semibold text-red-800 mb-4">
            <svg class="w-5 h-5 inline mr-2" fill="currentColor" viewBox="0 0 20 20">
                <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>
            Alasan Pembatalan
        </h3>
        
        @if($sewa->detail_status)
            <div class="bg-white p-4 rounded border border-red-200">
                <p class="text-gray-800 leading-relaxed">{{ $sewa->detail_status }}</p>
            </div>
        @else
            <div class="bg-white p-4 rounded border border-red-200">
                <p class="text-gray-500 italic">Customer tidak memberikan alasan pembatalan.</p>
            </div>
        @endif
    </div>

    <!-- Detail Tambahan -->
    @if($sewa->lokasi || $sewa->kota)
    <div class="mt-6 bg-gray-50 p-6 rounded-lg">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Detail Lokasi</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            @if($sewa->lokasi)
            <div>
                <label class="block text-sm font-medium text-gray-600">Lokasi</label>
                <p class="text-sm text-gray-900">{{ $sewa->lokasi }}</p>
            </div>
            @endif
            @if($sewa->kota)
            <div>
                <label class="block text-sm font-medium text-gray-600">Kota</label>
                <p class="text-sm text-gray-900">{{ $sewa->kota->nama ?? 'N/A' }}</p>
            </div>
            @endif
            @if($sewa->ongkir)
            <div>
                <label class="block text-sm font-medium text-gray-600">Ongkir</label>
                <p class="text-sm text-gray-900">Rp {{ number_format($sewa->ongkir, 0, ',', '.') }}</p>
            </div>
            @endif
        </div>
    </div>
    @endif

    <!-- File Uploads -->
    @if($sewa->bukti_pembayaran || $sewa->foto_jaminan)
    <div class="mt-6 bg-gray-50 p-6 rounded-lg">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">File yang Diupload</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            @if($sewa->bukti_pembayaran)
            <div>
                <label class="block text-sm font-medium text-gray-600 mb-2">Bukti Pembayaran</label>
                <img src="{{ asset('storage/' . $sewa->bukti_pembayaran) }}" 
                     alt="Bukti Pembayaran" 
                     class="w-full h-32 object-cover rounded border">
            </div>
            @endif
            @if($sewa->foto_jaminan)
            <div>
                <label class="block text-sm font-medium text-gray-600 mb-2">Foto Jaminan</label>
                <img src="{{ asset('storage/' . $sewa->foto_jaminan) }}" 
                     alt="Foto Jaminan" 
                     class="w-full h-32 object-cover rounded border">
            </div>
            @endif
        </div>
    </div>
    @endif
</div>
@endsection