@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-6">
    <h1 class="text-2xl font-bold text-gray-800 mb-6">Service Order Details: #{{ $serviceOrder->id }}</h1>
    <div class="bg-white p-6 rounded-lg shadow-md max-w-4xl">
        <!-- Service Order Details -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- Row 1 -->
            <div>
                <p class="text-sm font-medium text-gray-700">Service:</p>
                <p class="text-gray-900">{{ $serviceOrder->service->name }} (${{ $serviceOrder->service->cost, 2 }})</p>
            </div>
            <div>
                <p class="text-sm font-medium text-gray-700">Customer:</p>
                <p class="text-gray-900">{{ $serviceOrder->customer->name }} ({{ $serviceOrder->customer->mobile_no }})</p>
            </div>
            <div>
                <p class="text-sm font-medium text-gray-700">Agent:</p>
                <p class="text-gray-900">{{ $serviceOrder->agent ? $serviceOrder->agent->name : 'None' }}</p>
            </div>
            <div>
                <p class="text-sm font-medium text-gray-700">Branch:</p>
                <p class="text-gray-900">{{ $serviceOrder->branch->name }}</p>
            </div>
            <!-- Row 2 -->
            <div>
                <p class="text-sm font-medium text-gray-700">Status:</p>
                <p class="text-gray-900 {{ $serviceOrder->status === 'cancelled' ? 'text-red-500' : ($serviceOrder->status === 'completed' ? 'text-green-500' : '') }}">
                    {{ ucfirst($serviceOrder->status) }}
                </p>
            </div>
            <div>
                <p class="text-sm font-medium text-gray-700">Total Cost:</p>
                <p class="text-gray-900">${{ number_format($serviceOrder->total_cost, 2) }}</p>
            </div>
            <div>
                <p class="text-sm font-medium text-gray-700">Agent Commission:</p>
                <p class="text-gray-900">${{ number_format($serviceOrder->agent_commission, 2) }}</p>
            </div>
            <div>
                <p class="text-sm font-medium text-gray-700">Commission Paid:</p>
                <p class="text-gray-900">${{ number_format($serviceOrder->agent_commission_paid, 2) }}</p>
            </div>
            <div>
                <p class="text-sm font-medium text-gray-700">Deadline:</p>
                <p class="text-gray-900 {{ now()->gt($serviceOrder->deadline) && $serviceOrder->status !== 'completed' ? 'text-red-500' : '' }}">
                    {{ $serviceOrder->deadline->format('Y-m-d H:i') }}
                </p>
            </div>
            <div>
                <p class="text-sm font-medium text-gray-700">Invoice:</p>
                <p class="text-gray-900">
                    <a href="{{ route('invoices.show', $serviceOrder->invoice->invoice_id) }}" class="text-blue-500 hover:underline">{{ $serviceOrder->invoice->invoice_id }}</a>
                </p>
            </div>
            <div>
                <p class="text-sm font-medium text-gray-700">Created By:</p>
                <p class="text-gray-900">{{ $serviceOrder->user->name }}</p>
            </div>
            <div>
                <p class="text-sm font-medium text-gray-700">Created At:</p>
                <p class="text-gray-900">{{ $serviceOrder->created_at->format('Y-m-d H:i') }}</p>
            </div>
        </div>

        <!-- Due Amount and Make Payment Button -->
        <div class="mt-6 flex justify-end">
            <div class="text-right">
                <p class="text-sm font-medium text-gray-700">Due Amount:</p>
                <p class="text-lg font-bold text-gray-900 {{ $serviceOrder->total_cost - $serviceOrder->invoice->payments->sum('amount') > 0 ? 'text-red-500' : 'text-green-500' }}">
                    ${{ number_format($serviceOrder->total_cost - $serviceOrder->invoice->payments->sum('amount'), 2) }}
                </p>
                @if($serviceOrder->total_cost - $serviceOrder->invoice->payments->sum('amount') > 0)
                    <a href="{{ route('invoices.make-payment', $serviceOrder->invoice->invoice_id) }}" class="mt-2 inline-block bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">
                        Make Payment
                    </a>
                @endif
            </div>
        </div>

        <!-- Payment History -->
        <div class="mt-8">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">Payment History</h2>
            @if($serviceOrder->invoice->payments->isEmpty())
                <p class="text-gray-600">No payments recorded for this invoice.</p>
            @else
                <div class="overflow-x-auto">
                    <table class="min-w-full bg-white border border-gray-200">
                        <thead>
                            <tr class="bg-gray-100">
                                <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Payment ID</th>
                                <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Amount</th>
                                <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Payment Date</th>
                                <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Payment Method</th>
                                <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Transaction ID</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($serviceOrder->invoice->payments as $payment)
                                <tr class="border-t">
                                    <td class="px-4 py-2 text-gray-900">{{ $payment->id }}</td>
                                    <td class="px-4 py-2 text-gray-900">${{ number_format($payment->amount, 2) }}</td>
                                    <td class="px-4 py-2 text-gray-900">{{ $payment->payment_date->format('Y-m-d H:i') }}</td>
                                    <td class="px-4 py-2 text-gray-900">{{ $payment->payment_method ?? 'N/A' }}</td>
                                    <td class="px-4 py-2 text-gray-900">{{ $payment->trx_id ?? 'N/A' }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>

        <!-- Action Buttons -->
        <div class="mt-6 flex justify-end">
            <a href="{{ route('service-orders.edit', $serviceOrder->id) }}" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 mr-2">Edit</a>
            <a href="{{ route('service-orders.index') }}" class="bg-gray-500 text-white px-4 py-2 rounded-md hover:bg-gray-600">Back to List</a>
        </div>
    </div>
</div>
@endsection