@extends('admin.layouts.app')
@section('title', 'Shipping Rates')

@section('content')
<div class="space-y-5" x-data="{ showForm: false, editing: null, form: { title: '', price: '', free_above: '', min_days: 1, max_days: 7 } }">

    {{-- Header --}}
    <div class="flex items-center justify-between">
        <p class="text-sm text-slate-500">Configure delivery options shown during checkout.</p>
        <button @click="showForm = !showForm; editing = null; form = { title: '', price: '', free_above: '', min_days: 1, max_days: 7 }"
            class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition-colors">
            + Add Rate
        </button>
    </div>

    {{-- Add / Edit Form --}}
    <div x-show="showForm" x-cloak class="bg-white rounded-xl border border-slate-200 p-5">
        <h3 class="font-semibold text-slate-700 mb-4" x-text="editing ? 'Edit Shipping Rate' : 'Add New Rate'"></h3>
        <form :action="editing ? `/admin/shipping/${editing}` : '{{ route('admin.shipping.store') }}'"
              method="POST" class="grid grid-cols-1 md:grid-cols-3 gap-4">
            @csrf
            <span x-show="editing" x-html="'<input name=\'_method\' type=\'hidden\' value=\'PUT\'>'"></span>

            <div class="md:col-span-3">
                <label class="block text-xs font-medium text-slate-500 mb-1">Title *</label>
                <input type="text" name="title" x-model="form.title" required placeholder="e.g. Standard Delivery"
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
            </div>

            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Price (₹) *</label>
                <input type="number" name="price" x-model="form.price" required min="0" step="0.01" placeholder="49.00"
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
            </div>

            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Free above (₹)</label>
                <input type="number" name="free_above" x-model="form.free_above" min="0" step="0.01" placeholder="500.00"
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                <p class="text-xs text-slate-400 mt-1">Leave empty to never offer free shipping</p>
            </div>

            <div class="grid grid-cols-2 gap-2">
                <div>
                    <label class="block text-xs font-medium text-slate-500 mb-1">Min days *</label>
                    <input type="number" name="min_days" x-model="form.min_days" required min="1"
                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-500 mb-1">Max days *</label>
                    <input type="number" name="max_days" x-model="form.max_days" required min="1"
                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
            </div>

            <div class="md:col-span-3 flex gap-3">
                <button type="submit" class="px-5 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700">Save Rate</button>
                <button type="button" @click="showForm = false" class="px-5 py-2 bg-slate-100 text-slate-600 text-sm font-medium rounded-lg hover:bg-slate-200">Cancel</button>
            </div>
        </form>
    </div>

    {{-- Rates List --}}
    <div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-slate-50 border-b border-slate-200">
                <tr class="text-left text-xs text-slate-500 font-medium">
                    <th class="px-5 py-3">Title</th>
                    <th class="px-5 py-3">Price</th>
                    <th class="px-5 py-3">Free Above</th>
                    <th class="px-5 py-3">Delivery</th>
                    <th class="px-5 py-3">Status</th>
                    <th class="px-5 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse($rates as $rate)
                <tr class="hover:bg-slate-50">
                    <td class="px-5 py-3.5 font-medium">{{ $rate->title }}</td>
                    <td class="px-5 py-3.5">{{ $rate->price == 0 ? 'FREE' : '₹'.$rate->price }}</td>
                    <td class="px-5 py-3.5 text-slate-500">{{ $rate->free_above ? '₹'.$rate->free_above : '—' }}</td>
                    <td class="px-5 py-3.5 text-slate-500">{{ $rate->min_days }}–{{ $rate->max_days }} days</td>
                    <td class="px-5 py-3.5">
                        <span class="{{ $rate->is_active ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-500' }} px-2 py-0.5 rounded-full text-xs font-medium">
                            {{ $rate->is_active ? 'Active' : 'Inactive' }}
                        </span>
                    </td>
                    <td class="px-5 py-3.5 flex gap-3">
                        <button type="button"
                            @click="editing = {{ $rate->id }}; showForm = true; form = { title: '{{ addslashes($rate->title) }}', price: '{{ $rate->price }}', free_above: '{{ $rate->free_above }}', min_days: {{ $rate->min_days }}, max_days: {{ $rate->max_days }} }"
                            class="text-indigo-600 hover:text-indigo-700 text-xs font-medium">Edit</button>
                        <form method="POST" action="{{ route('admin.shipping.destroy', $rate->id) }}"
                              onsubmit="return confirm('Delete this rate?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="text-red-500 hover:text-red-700 text-xs font-medium">Delete</button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr><td colspan="6" class="px-5 py-12 text-center text-slate-400">No shipping rates yet. Add your first rate above.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection