@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">Cancel Service Order #{{ $serviceOrder->id }}</h1>
    <div class="bg-gray-50 p-4 rounded-lg shadow-sm mb-6">
        <p><strong>Customer:</strong> {{ $serviceOrder->customer->name }}</p>
        <p><strong>Service:</strong> {{ $serviceOrder->service->name }}</p>
        <p><strong>Total Cost:</strong> ${{ number_format($serviceOrder->total_cost, 2) }}</p>
        <p><strong>Paid Amount:</strong> ${{ number_format($serviceOrder->invoice->payments->sum('amount'), 2) }}</p>
        <p><strong>Due Amount:</strong> ${{ number_format($serviceOrder->total_cost - $serviceOrder->invoice->payments->sum('amount'), 2) }}</p>
    </div>

    <form method="POST" action="{{ route('service-orders.cancel', $serviceOrder->id) }}" class="bg-white p-4 rounded-lg shadow-sm">
        @csrf
        <div class="form-group mb-4">
            <label for="deduction" class="block text-sm font-bold text-gray-600">Service Charge Deduction</label>
            <input type="number" name="deduction" id="deduction" 
                   class="mt-1 block w-full border-gray-200 rounded-lg shadow-sm focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 text-sm" 
                   min="0" 
                   step="0.01" 
                   value="100" 
                   required>
            @error('deduction')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>
        <p class="mb-4"><strong>Refund Amount:</strong> <span id="refund-amount">{{ number_format(max(0, $serviceOrder->total_cost - 100), 2) }}</span></p>
        <p class="mb-4 text-yellow-600 text-sm" id="warning" style="display: none;">Note: Refund exceeds paid amount, resulting in a liability.</p>
        <button type="submit" class="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600">Confirm Cancellation</button>
        <a href="{{ route('service-orders.show', $serviceOrder->id) }}" class="bg-gray-500 text-white px-4 py-2 rounded-md hover:bg-gray-600">Back</a>
    </form>
</div>

@push('scripts')
<script>
    document.getElementById('deduction').addEventListener('input', function() {
        const totalCost = {{ $serviceOrder->total_cost }};
        const paidAmount = {{ $serviceOrder->invoice->payments->sum('amount') }};
        const deduction = parseFloat(this.value) || 0;
        const refund = Math.max(0, totalCost - deduction);
        document.getElementById('refund-amount').textContent = refund.toFixed(2);
        document.getElementById('warning').style.display = refund > paidAmount ? 'block' : 'none';
    });

    document.querySelector('form').addEventListener('submit', function(e) {
        const totalCost = {{ $serviceOrder->total_cost }};
        const paidAmount = {{ $serviceOrder->invoice->payments->sum('amount') }};
        const deduction = parseFloat(document.getElementById('deduction').value) || 0;
        const refund = Math.max(0, totalCost - deduction);
        if (deduction < 0) {
            alert('Deduction cannot be negative.');
            e.preventDefault();
        } else if (refund > paidAmount && !confirm('The refund ($' + refund.toFixed(2) + ') exceeds the paid amount ($' + paidAmount.toFixed(2) + '). This will create a liability. Proceed?')) {
            e.preventDefault();
        } else if (!confirm('Are you sure you want to cancel this service order?')) {
            e.preventDefault();
        }
    });
</script>
@endpush
@endsection