@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>Service Rate:</strong> SR {{ number_format($serviceOrder->total_cost, 2) }}</p>
        <p><strong>Paid Amount:</strong> SR {{ number_format($serviceOrder->invoice ? $serviceOrder->invoice->payments->sum('amount') : 0, 2) }}</p>
        <p><strong>Due Amount:</strong> SR {{ number_format($serviceOrder->total_cost - ($serviceOrder->invoice ? $serviceOrder->invoice->payments->sum('amount') : 0), 2) }}</p>
    </div>

    @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 ($errors->any())
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if ($serviceOrder->invoice)
        <form method="POST" action="{{ route('service-orders.cancel', $serviceOrder->id) }}" class="bg-white p-4 rounded-lg shadow-sm" id="cancel-form">
            @csrf
            <div class="form-group mb-4">
                <label for="refund_amount" class="block text-sm font-bold text-gray-600">Refund Amount</label>
                <input type="number" name="refund_amount" id="refund_amount" 
                       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" 
                       max="{{ $serviceOrder->invoice ? $serviceOrder->invoice->payments->sum('amount') : 0 }}"
                       value="{{ $serviceOrder->invoice ? $serviceOrder->invoice->payments->sum('amount') : 0 }}" 
                       aria-describedby="refund-amount-error" 
                       aria-label="Refund amount in SR">
                @error('refund_amount')
                    <span id="refund-amount-error" class="text-red-500 text-sm">{{ $message }}</span>
                @enderror
            </div>
            <p class="mb-4"><strong>Service Charge Deduction:</strong> <span id="deduction-amount">SR {{ number_format(0, 2) }}</span></p>
            <button type="submit" class="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600" id="submit-button">Initiate 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>
    @else
        <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">No invoice found for this service order. Cancellation is not possible.</span>
        </div>
    @endif
</div>

@push('scripts')
<script>
    document.getElementById('refund_amount')?.addEventListener('input', function() {
        try {
            const paidAmount = {{ $serviceOrder->invoice ? $serviceOrder->invoice->payments->sum('amount') : 0 }};
            const refundAmount = parseFloat(this.value) || 0;
            if (this.value && !/^\d*\.?\d{0,2}$/.test(this.value)) {
                alert('Please enter a valid number with up to 2 decimal places.');
                this.value = paidAmount.toFixed(2);
                document.getElementById('deduction-amount').textContent = 'SR 0.00';
                return;
            }
            const deduction = Math.max(0, paidAmount - refundAmount);
            document.getElementById('deduction-amount').textContent = 'SR ' + deduction.toFixed(2);
            console.log('Refund amount updated:', { refundAmount, deduction, paidAmount });
        } catch (error) {
            console.error('Error updating deduction amount:', error.message);
            alert('Error calculating deduction amount: ' + error.message);
        }
    });

    document.getElementById('cancel-form')?.addEventListener('submit', function(e) {
        try {
            console.log('Form submission attempt for service order {{ $serviceOrder->id }}');
            const submitButton = this.querySelector('#submit-button');
            submitButton.disabled = true;
            submitButton.textContent = 'Processing...';

            const paidAmount = {{ $serviceOrder->invoice ? $serviceOrder->invoice->payments->sum('amount') : 0 }};
            const refundAmount = parseFloat(document.getElementById('refund_amount').value) || 0;

            if (isNaN(refundAmount) || refundAmount < 0) {
                console.error('Invalid refund amount:', refundAmount);
                alert('Refund amount cannot be negative or invalid.');
                e.preventDefault();
                submitButton.disabled = false;
                submitButton.textContent = 'Initiate Cancellation';
                return;
            }
            if (refundAmount > paidAmount && !confirm('The refund amount (SR ' + refundAmount.toFixed(2) + ') exceeds the paid amount (SR ' + paidAmount.toFixed(2) + '). Proceed?')) {
                console.log('Submission cancelled by user: refund amount exceeds paid amount');
                e.preventDefault();
                submitButton.disabled = false;
                submitButton.textContent = 'Initiate Cancellation';
                return;
            }
            if (!confirm('Are you sure you want to initiate cancellation for this service order?')) {
                console.log('Submission cancelled by user: confirmation declined');
                e.preventDefault();
                submitButton.disabled = false;
                submitButton.textContent = 'Initiate Cancellation';
                return;
            }
            console.log('Submitting form with:', { refundAmount, deduction: paidAmount - refundAmount, paidAmount });
        } catch (error) {
            console.error('Form submission error:', error.message);
            alert('Error submitting form: ' + error.message + '. Check console for details.');
            e.preventDefault();
            const submitButton = this.querySelector('#submit-button');
            submitButton.disabled = false;
            submitButton.textContent = 'Initiate Cancellation';
        }
    });
</script>
@endpush
@endsection