@extends('layouts.app')

@section('title', 'Create Rate')
@section('page-title', 'Create New Rate')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow-md p-8">
        <form action="{{ route('rates.store') }}" method="POST" x-data="{ type: 'domestic' }">
            @csrf
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Customer (Optional)</label>
                    <select name="customer_id"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600">
                        <option value="">General Rate</option>
                        @foreach($customers as $customer)
                            <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Type *</label>
                    <select name="type" x-model="type" required
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600">
                        <option value="domestic">Domestic</option>
                        <option value="international">International</option>
                    </select>
                </div>

                <div x-show="type === 'international'" style="display: none;">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Country *</label>
                    <input type="text" name="country" :required="type === 'international'"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600" placeholder="e.g. UAE, UK, USA">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Rate Type *</label>
                    <select name="rate_type" required
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600">
                        <option value="">Select Type</option>
                        <option value="KG">Per KG</option>
                        <option value="CBM">Per CBM</option>
                        <option value="Per Carton">Per Carton</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Base Rate *</label>
                    <input type="number" step="0.01" name="base_rate" value="{{ old('base_rate') }}" required
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Special Rate</label>
                    <input type="number" step="0.01" name="special_rate" value="{{ old('special_rate') }}"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Cargo Type *</label>
                    <input type="text" name="cargo_type" value="{{ old('cargo_type') }}" required
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Service Type *</label>
                    <input type="text" name="service_type" value="{{ old('service_type') }}" required
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Valid From *</label>
                    <input type="date" name="valid_from" value="{{ old('valid_from') }}" required
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Valid To</label>
                    <input type="date" name="valid_to" value="{{ old('valid_to') }}"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600">
                </div>
            </div>

            <div class="mt-8 flex justify-end space-x-4">
                <a href="{{ route('rates.index') }}" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
                    Cancel
                </a>
                <button type="submit" class="px-6 py-2 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-lg hover:shadow-lg">
                    Create Rate
                </button>
            </div>
        </form>
    </div>
</div>
@endsection