@extends('layouts.app')

@section('title', 'Rates')
@section('page-title', 'Rate Management')

@section('content')
<div class="mb-6 flex justify-between items-center">
    <div>
        <h3 class="text-xl font-semibold text-gray-800">All Rates</h3>
        <p class="text-gray-600">Manage pricing for services and cargo types</p>
    </div>
    <a href="{{ route('rates.create') }}" class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white px-6 py-3 rounded-lg hover:shadow-lg transition">
        <i class="fas fa-plus mr-2"></i>New Rate
    </a>
</div>

<div class="bg-white rounded-lg shadow-md overflow-hidden">
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Customer</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Country</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Rate Type</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Base Rate</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Special Rate</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Cargo Type</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Valid From</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
            @foreach($rates as $rate)
            <tr class="hover:bg-gray-50">
                <td class="px-6 py-4 whitespace-nowrap text-gray-700">{{ $rate->customer ? $rate->customer->name : 'General' }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-gray-700 capitalize">{{ $rate->type }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-gray-700">{{ $rate->country ?? '-' }}</td>
                <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">{{ $rate->rate_type }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-gray-700">{{ \App\Helpers\CurrencyHelper::format($rate->base_rate) }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-gray-700">{{ $rate->special_rate ? \App\Helpers\CurrencyHelper::format($rate->special_rate) : 'N/A' }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-gray-700">{{ $rate->cargo_type }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-gray-700">{{ $rate->valid_from->format('Y-m-d') }}</td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-3 py-1 rounded-full text-xs font-semibold {{ $rate->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                        {{ $rate->is_active ? 'Active' : 'Inactive' }}
                    </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm">
                    <a href="{{ route('rates.edit', $rate) }}" class="text-green-600 hover:text-green-800 mr-3">
                        <i class="fas fa-edit"></i>
                    </a>
                    <form action="{{ route('rates.destroy', $rate) }}" method="POST" class="inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" onclick="return confirm('Are you sure?')" class="text-red-600 hover:text-red-800">
                            <i class="fas fa-trash"></i>
                        </button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

<div class="mt-6">
    {{ $rates->links() }}
</div>
@endsection