@extends('layouts.admin')

@section('content')
<div class="container mx-auto p-6">
    <h1 class="text-2xl font-bold mb-4">Manage Shipment Rates</h1>

    {{-- Success/Error Messages --}}
    @if(session('success'))
        <div class="bg-green-100 text-green-800 p-3 rounded mb-4">{{ session('success') }}</div>
    @endif

    {{-- Add New Rate --}}
    <div class="mb-6">
        <form action="{{ route('admin.shipment_rates.store') }}" method="POST" class="flex gap-4 items-center">
            @csrf
            <select name="customer_type" class="border p-2 rounded">
                <option value="normal">Normal</option>
                <option value="premium">Premium</option>
            </select>
<input type="number" name="points" placeholder="Points" class="border p-2 rounded" step="0.01" min="0" required>
            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Add Rate</button>
        </form>
    </div>

    {{-- Rates Table --}}
    <table class="w-full border-collapse border border-gray-300">
        <thead>
            <tr class="bg-gray-100">
                <th class="border p-2">ID</th>
                <th class="border p-2">Customer Type</th>
                <th class="border p-2">Points</th>
                <th class="border p-2">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($rates as $rate)
            <tr>
                <td class="border p-2">{{ $rate->id }}</td>
                <td class="border p-2 capitalize">{{ $rate->customer_type }}</td>
                <td class="border p-2">
                    <form action="{{ route('admin.shipment_rates.update', $rate) }}" method="POST" class="flex gap-2 items-center">
                        @csrf
                        @method('PUT')
                        <input type="number" name="points" value="{{ $rate->points }}" class="border p-1 w-20" step="0.01" min="0" required>
                        <button type="submit" class="bg-yellow-500 text-white px-2 py-1 rounded hover:bg-yellow-600">Update</button>
                    </form>
                </td>
                <td class="border p-2">
                    <form action="{{ route('admin.shipment_rates.destroy', $rate) }}" method="POST" onsubmit="return confirm('Are you sure?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600">Delete</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection