@extends('layouts.app')

@section('title', isset($location) ? 'Edit Location' : 'Add New Location')

@section('content')
<div class="min-h-screen bg-gray-50 p-4 lg:p-6">
    <div class="max-w-4xl mx-auto">
        <div class="bg-white rounded-lg shadow-sm border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                <h5 class="text-lg font-semibold text-gray-900 m-0">
                    <i class="fas fa-map-marker-alt mr-2"></i>
                    @if(isset($location))
                        Edit Location
                    @else
                        Add New Location
                    @endif
                </h5>
                <a href="{{ route('locations.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>Back to List
                </a>
            </div>
            <div class="p-6">
                <form action="{{ isset($location) ? route('locations.update', $location->id) : route('locations.store') }}" method="POST">
                    @csrf
                    @if(isset($location))
                        @method('PUT')
                    @endif

                    <!-- Basic Information -->
                    <div class="mb-6">
                        <div class="w-full">
                            <h6 class="text-blue-600 font-semibold text-sm mb-3">
                                <i class="fas fa-info-circle mr-2"></i>
                                Basic Information
                            </h6>
                            <p class="text-gray-500 text-sm">Basic details about the location.</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <div class="mb-4">
                                <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Location Name</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror" id="name" name="name" 
                                       value="{{ old('name', $location->name ?? '') }}" required
                                       placeholder="e.g. Main Office">
                                @error('name')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div>
                            <div class="mb-4">
                                <label for="client_id" class="block text-sm font-medium text-gray-700 mb-2">Client</label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('client_id') border-red-500 @enderror" id="client_id" name="client_id" required>
                                    <option value="">Select Client</option>
                                    @foreach($clients as $clientId => $clientName)
                                        <option value="{{ $clientId }}" {{ old('client_id', $location->client_id ?? '') == $clientId ? 'selected' : '' }}>
                                            {{ $clientName }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('client_id')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Address Information -->
                    <div class="mb-6">
                        <div class="w-full">
                            <h6 class="text-blue-600 font-semibold text-sm mb-3">
                                <i class="fas fa-map-marker-alt mr-2"></i>
                                Address Information
                            </h6>
                            <p class="text-gray-500 text-sm">Physical address and location details.</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-6">
                        <div>
                            <div class="mb-4">
                                <label for="address" class="block text-sm font-medium text-gray-700 mb-2">Street Address</label>
                                <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('address') border-red-500 @enderror" id="address" name="address" rows="2" 
                                          placeholder="Building name, street, locality..." required>{{ old('address', $location->address ?? '') }}</textarea>
                                @error('address')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div>
                            <div class="mb-4">
                                <label for="city" class="block text-sm font-medium text-gray-700 mb-2">City</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('city') border-red-500 @enderror" id="city" name="city" 
                                       value="{{ old('city', $location->city ?? '') }}" required
                                       placeholder="Mumbai">
                                @error('city')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div>
                            <div class="mb-4">
                                <label for="country" class="block text-sm font-medium text-gray-700 mb-2">Country</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('country') border-red-500 @enderror" id="country" name="country" 
                                       value="{{ old('country', $location->country ?? '') }}" required
                                       placeholder="India">
                                @error('country')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div>
                            <div class="mb-4">
                                <label for="postal_code" class="block text-sm font-medium text-gray-700 mb-2">Postal Code</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('postal_code') border-red-500 @enderror" id="postal_code" name="postal_code" 
                                       value="{{ old('postal_code', $location->postal_code ?? '') }}"
                                       placeholder="400001">
                                @error('postal_code')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Coordinates -->
                    <div class="mb-6">
                        <div class="w-full">
                            <h6 class="text-blue-600 font-semibold text-sm mb-3">
                                <i class="fas fa-globe mr-2"></i>
                                GPS Coordinates
                            </h6>
                            <p class="text-gray-500 text-sm">Exact location coordinates for mapping and navigation.</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <div class="mb-4">
                                <label for="latitude" class="block text-sm font-medium text-gray-700 mb-2">Latitude</label>
                                <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('latitude') border-red-500 @enderror" id="latitude" name="latitude" 
                                       value="{{ old('latitude', $location->latitude ?? '') }}" step="any" required
                                       placeholder="19.0760">
                                @error('latitude')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div>
                            <div class="mb-4">
                                <label for="longitude" class="block text-sm font-medium text-gray-700 mb-2">Longitude</label>
                                <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('longitude') border-red-500 @enderror" id="longitude" name="longitude" 
                                       value="{{ old('longitude', $location->longitude ?? '') }}" step="any" required
                                       placeholder="72.8777">
                                @error('longitude')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Status -->
                    <div class="mb-6">
                        <div class="w-full">
                            <h6 class="text-blue-600 font-semibold text-sm mb-3">
                                <i class="fas fa-toggle-on mr-2"></i>
                                Status
                            </h6>
                            <p class="text-gray-500 text-sm">Enable or disable this location.</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <div class="mb-4">
                                <label for="is_active" class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('is_active') border-red-500 @enderror" id="is_active" name="is_active" required>
                                    <option value="1" {{ old('is_active', $location->is_active ?? 1) == 1 ? 'selected' : '' }}>Active</option>
                                    <option value="0" {{ old('is_active', $location->is_active ?? 1) == 0 ? 'selected' : '' }}>Inactive</option>
                                </select>
                                @error('is_active')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-end gap-3">
                        <a href="{{ route('locations.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors">
                            <i class="fas fa-times mr-2"></i>Cancel
                        </a>
                        <button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
                            <i class="fas fa-save mr-2"></i>
                            @if(isset($location))
                                Update Location
                            @else
                                Create Location
                            @endif
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection