@extends('layouts.app')

@section('content')
<div class="container mx-auto px-2 py-6">
    <h1 class="text-2xl font-bold text-gray-800 mb-6">Pending Cancellation Refunds</h1>

    @if (session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
            <span class="block sm:inline">{{ session('success') }}</span>
        </div>
    @endif
    @if (session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
            <span class="block sm:inline">{{ session('error') }}</span>
        </div>
    @endif

    @if ($pendingCancellations->isEmpty())
        <div class="bg-gray-100 border border-gray-400 text-gray-700 px-4 py-3 rounded relative mb-4" role="alert">
            <span class="block sm:inline">No pending cancellations found.</span>
        </div>
    @else
        <table class="min-w-full border">
            <thead>
                <tr class="bg-gray-200">
                    <th class="border px-4 py-2 text-left">Order ID</th>
                    <th class="border px-4 py-2 text-left">Customer</th>
                    <th class="border px-4 py-2 text-left">Service</th>
                    <th class="border px-4 py-2 text-left">Paid Amount</th>
                    <th class="border px-4 py-2 text-left">Status</th>
                    <th class="border px-4 py-2 text-left">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($pendingCancellations as $order)
                    <tr>
                        <td class="border px-4 py-2">{{ $order->id }}</td>
                        <td class="border px-4 py-2">{{ $order->customer->name }}</td>
                        <td class="border px-4 py-2">{{ $order->service->name }}</td>
                        <td class="border px-4 py-2">SR {{ number_format($order->invoice ? $order->invoice->payments->sum('amount') : 0, 2) }}</td>
                        <td class="border px-4 py-2 text-orange-500">Cancellation Processing</td>
                        <td class="border px-4 py-2">
                            <button type="button" class="bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600 confirm-refunded-cancel mr-2" 
                                    data-order-id="{{ $order->id }}"
                                    data-csrf-token="{{ csrf_token() }}"
                                    aria-label="Confirm refund for service order {{ $order->id }}">
                                Confirm Refund
                            </button>
                            <button type="button" class="bg-gray-500 text-white px-4 py-2 rounded-md hover:bg-gray-600 revert-cancel" 
                                    data-order-id="{{ $order->id }}"
                                    data-csrf-token="{{ csrf_token() }}"
                                    aria-label="Revert cancellation for service order {{ $order->id }}">
                                Revert
                            </button>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @endif
</div>

@push('scripts')
<script>
    document.querySelectorAll('.confirm-refunded-cancel').forEach(button => {
        button.addEventListener('click', function() {
            const orderId = this.dataset.orderId;
            const csrfToken = this.dataset.csrfToken;

            if (!confirm('Are you sure you want to proceed with the cancellation for this service order?')) {
                console.log('Refund confirmation cancelled for service order ' + orderId);
                return;
            }

            this.disabled = true;
            this.textContent = 'Processing...';

            fetch(`/service-orders/${orderId}/process-refunded-cancel`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json'
                },
                body: JSON.stringify({})
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => {
                        throw new Error(err.error || `HTTP error! Status: ${response.status}`);
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data.message) {
                    alert(data.message);
                    if (data.redirect) {
                        window.location.href = data.redirect; // Redirect to cancel form
                    }
                } else {
                    throw new Error(data.error || 'No message received from server');
                }
            })
            .catch(error => {
                console.error('Error processing refund for service order ' + orderId + ':', error.message);
                alert('Error: ' + error.message);
                this.disabled = false;
                this.textContent = 'Confirm Refund';
            });
        });
    });

    document.querySelectorAll('.revert-cancel').forEach(button => {
        button.addEventListener('click', function() {
            const orderId = this.dataset.orderId;
            const csrfToken = this.dataset.csrfToken;

            if (!confirm('Are you sure you want to revert the cancellation for this service order? This will set the status back to pending.')) {
                console.log('Revert cancelled for service order ' + orderId);
                return;
            }

            this.disabled = true;
            this.textContent = 'Processing...';

            fetch(`/service-orders/${orderId}/revert-cancellation`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json'
                },
                body: JSON.stringify({})
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => {
                        throw new Error(err.error || `HTTP error! Status: ${response.status}`);
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data.message) {
                    alert(data.message);
                    window.location.reload(); // Refresh to update the list
                } else {
                    throw new Error(data.error || 'No message received from server');
                }
            })
            .catch(error => {
                console.error('Error reverting cancellation for service order ' + orderId + ':', error.message);
                alert('Error: ' + error.message);
                this.disabled = false;
                this.textContent = 'Revert';
            });
        });
    });
</script>

@endpush
@endsection