@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="max-w-md mx-auto">
        <h1 class="text-2xl font-bold mb-6 text-gray-800">Create Service</h1>
        @if (session('success'))
            <div class="bg-green-100 text-green-700 p-4 rounded mb-6">
                {{ session('success') }}
            </div>
        @endif
        @if ($errors->any())
            <div class="bg-red-100 text-red-700 p-4 rounded mb-6">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <form action="{{ route('services.store') }}" method="POST" class="space-y-4" id="serviceForm">
            @csrf
            <div>
                <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
                <input
                    type="text"
                    name="name"
                    id="name"
                    value="{{ old('name') }}"
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 sm:text-sm"
                    required
                >
                @error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div>
                <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
                <textarea
                    name="description"
                    id="description"
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 sm:text-sm"
                >{{ old('description') }}</textarea>
                @error('description') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div class="flex space-x-4">
                <div class="flex-1">
                    <label for="cost_lower" class="block text-sm font-medium text-gray-700">Cost (From)</label>
                    <input
                        type="number"
                        name="cost_lower"
                        id="cost_lower"
                        value="{{ old('cost_lower') }}"
                        min="0"
                        step="0.01"
                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 sm:text-sm"
                        required
                    >
                    @error('cost_lower') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div class="flex-1">
                    <label for="cost_upper" class="block text-sm font-medium text-gray-700">Cost (To)</label>
                    <input
                        type="number"
                        name="cost_upper"
                        id="cost_upper"
                        value="{{ old('cost_upper') }}"
                        min="0"
                        step="0.01"
                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 sm:text-sm"
                        required
                    >
                    @error('cost_upper') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>
            <div>
                <label for="need_days" class="block text-sm font-medium text-gray-700">Need Days</label>
                <input
                    type="number"
                    name="need_days"
                    id="need_days"
                    value="{{ old('need_days') }}"
                    min="1"
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 sm:text-sm"
                    required
                >
                @error('need_days') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div>
                <button
                    type="submit"
                    class="w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
                >
                    Save Service
                </button>
            </div>
        </form>
    </div>
</div>
<script>
    document.getElementById('serviceForm').addEventListener('submit', (event) => {
        const lower = parseFloat(document.getElementById('cost_lower').value);
        const upper = parseFloat(document.getElementById('cost_upper').value);
        if (lower > upper) {
            event.preventDefault();
            alert('The upper cost must be greater than or equal to the lower cost.');
        }
    });
</script>
@endsection