@extends('layouts.admin')

@section('title', 'Edit Shipping Method')

@section('content')
<div class="max-w-[1200px] mx-auto">
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10">
        <div class="flex items-center gap-4">
            <a href="{{ route('admin.delivery-types.index') }}" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 transition">
                <i class="fas fa-arrow-left text-xs"></i>
                Back
            </a>
            <div>
                <p class="text-xs text-gray-500">Delivery methods</p>
                <h1 class="text-2xl font-semibold text-gray-900 tracking-tight">Edit delivery method</h1>
                <p class="text-gray-500 text-sm mt-1">Updating settings for {{ $deliveryType->name }}.</p>
            </div>
        </div>
        <div class="flex items-center gap-2">
            <form action="{{ route('admin.delivery-types.destroy', $deliveryType) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this shipping method?');">
                @csrf
                @method('DELETE')
                <button type="submit" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-red-600 text-white hover:bg-red-700 shadow-sm shadow-red-200 transition">
                    <i class="fas fa-trash text-xs"></i>
                    Delete
                </button>
            </form>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
        <!-- Form Section -->
        <div class="lg:col-span-2 space-y-8">
            <form action="{{ route('admin.delivery-types.update', $deliveryType) }}" method="POST" id="delivery-form" class="space-y-8">
                @csrf
                @method('PUT')
                
                <div class="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">

                    <div class="mb-6">
                        <h3 class="text-lg font-semibold text-gray-900">Method details</h3>
                        <p class="text-sm text-gray-500">Configure name, cost and time</p>
                    </div>

                    <div class="space-y-6">
                            <div class="space-y-3">
                                <label for="name" class="text-sm font-medium text-gray-700">Method name</label>
                                <div class="relative">
                                    <input type="text" name="name" id="name" value="{{ old('name', $deliveryType->name) }}" required
                                        class="w-full bg-white border border-gray-200 rounded-lg px-4 py-2.5 text-gray-900 placeholder:text-gray-400 focus:border-brand focus:ring-2 focus:ring-brand/20 transition"
                                        placeholder="e.g. Standard Delivery">
                                </div>
                                @error('name') <p class="text-xs text-red-600 ml-1">{{ $message }}</p> @enderror
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div class="space-y-3">
                                    <label for="cost" class="text-sm font-medium text-gray-700">Shipping cost</label>
                                    <div class="relative">
                                        <input type="number" name="cost" id="cost" step="0.01" min="0" value="{{ old('cost', $deliveryType->cost) }}" required
                                            class="w-full bg-white border border-gray-200 rounded-lg px-4 py-2.5 text-gray-900 placeholder:text-gray-400 focus:border-brand focus:ring-2 focus:ring-brand/20 transition"
                                            placeholder="0.00">
                                    </div>
                                    @error('cost') <p class="text-xs text-red-600 ml-1">{{ $message }}</p> @enderror
                                </div>

                                <div class="space-y-3">
                                    <label for="estimated_time" class="text-sm font-medium text-gray-700">Estimated time</label>
                                    <div class="relative">
                                        <input type="text" name="estimated_time" id="estimated_time" value="{{ old('estimated_time', $deliveryType->estimated_time) }}"
                                            class="w-full bg-white border border-gray-200 rounded-lg px-4 py-2.5 text-gray-900 placeholder:text-gray-400 focus:border-brand focus:ring-2 focus:ring-brand/20 transition"
                                            placeholder="e.g. 3-5 business days">
                                    </div>
                                    @error('estimated_time') <p class="text-xs text-red-600 ml-1">{{ $message }}</p> @enderror
                                </div>
                            </div>

                            <div class="space-y-3">
                                <label for="description" class="text-sm font-medium text-gray-700">Description</label>
                                <div class="relative">
                                    <textarea name="description" id="description" rows="4"
                                        class="w-full bg-white border border-gray-200 rounded-lg px-4 py-2.5 text-gray-900 placeholder:text-gray-400 focus:border-brand focus:ring-2 focus:ring-brand/20 transition resize-none"
                                        placeholder="Add more details about this shipping method...">{{ old('description', $deliveryType->description) }}</textarea>
                                </div>
                                @error('description') <p class="text-xs text-red-600 ml-1">{{ $message }}</p> @enderror
                            </div>
                    </div>
                </div>

                <div class="p-4 bg-gray-50 rounded-xl border border-gray-200 flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-900">Status</p>
                        <p class="text-xs text-gray-500">Show at checkout</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" name="is_active" value="1" class="sr-only peer" {{ $deliveryType->is_active ? 'checked' : '' }}>
                        <div class="w-12 h-7 bg-gray-200 rounded-full peer peer-checked:after:translate-x-5 after:content-[''] after:absolute after:top-[3px] after:left-[3px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand shadow-inner"></div>
                    </label>
                </div>

                <div class="flex items-center justify-end pt-2">
                    <button type="submit" class="inline-flex items-center gap-2 btn-brand text-white px-6 py-3 rounded-lg font-medium">
                        Save changes
                    </button>
                </div>
            </form>
        </div>

        <div class="space-y-8">
            <div class="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">
                <h3 class="text-sm font-semibold text-gray-900 mb-4">Usage stats</h3>
                <div class="space-y-6">
                    <div class="p-4 bg-gray-50 rounded-xl border border-gray-200">
                        <p class="text-xs text-gray-500 mb-1">Created at</p>
                        <p class="text-sm font-medium text-gray-900">{{ $deliveryType->created_at->format('M d, Y') }}</p>
                    </div>
                    <div class="p-4 bg-gray-50 rounded-xl border border-gray-200">
                        <p class="text-xs text-gray-500 mb-1">Last update</p>
                        <p class="text-sm font-medium text-gray-900">{{ $deliveryType->updated_at->diffForHumans() }}</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">
                <h3 class="text-sm font-semibold text-gray-900 mb-4">Popularity</h3>
                <div class="space-y-4">
                    @php
                        $usageCount = \App\Models\Order::where('delivery_type_id', $deliveryType->id)->count();
                    @endphp
                    <div class="text-center py-4">
                        <p class="text-4xl font-semibold text-brand">{{ $usageCount }}</p>
                        <p class="text-xs text-gray-500 mt-1">Orders placed</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
