@extends('client-system::layouts.admin')

@section('title', 'Create Client')

@section('content')
<div class="bg-white shadow-md rounded-lg p-6">
    <div class="flex items-center mb-6">
        <a href="{{ route('admin.clients.index') }}" class="text-blue-600 hover:text-blue-800 mr-2">
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
        </a>
        <h1 class="text-2xl font-bold">Create New Client</h1>
    </div>
    
    <form action="{{ route('admin.clients.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
        @csrf
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Basic Information -->
            <div class="space-y-4">
                <h2 class="text-lg font-semibold border-b pb-2">Basic Information</h2>
                
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Client Name <span class="text-red-600">*</span></label>
                    <input type="text" name="name" id="name" value="{{ old('name') }}" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" placeholder="Enter client name">
                    @error('name')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label for="contact_name" class="block text-sm font-medium text-gray-700 mb-1">Contact Person <span class="text-red-600">*</span></label>
                    <input type="text" name="contact_name" id="contact_name" value="{{ old('contact_name') }}" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" placeholder="Enter contact person name">
                    @error('contact_name')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label for="contact_email" class="block text-sm font-medium text-gray-700 mb-1">Contact Email <span class="text-red-600">*</span></label>
                    <input type="email" name="contact_email" id="contact_email" value="{{ old('contact_email') }}" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" placeholder="Enter contact email">
                    @error('contact_email')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                
                <div class="flex items-center">
                    <input type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active') ? 'checked' : '' }} class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                    <label for="is_active" class="ml-2 block text-sm text-gray-700">Active</label>
                </div>
            </div>
            
            <!-- Branding Information -->
            <div class="space-y-4">
                <h2 class="text-lg font-semibold border-b pb-2">Branding Information</h2>
                
                <div>
                    <label for="display_name" class="block text-sm font-medium text-gray-700 mb-1">Display Name</label>
                    <input type="text" name="display_name" id="display_name" value="{{ old('display_name') }}" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" placeholder="Enter display name for header">
                    <p class="mt-1 text-xs text-gray-500">If left blank, the client name will be used</p>
                    @error('display_name')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label for="logo" class="block text-sm font-medium text-gray-700 mb-1">Logo</label>
                    <input type="file" name="logo" id="logo" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" accept="image/*">
                    <p class="mt-1 text-xs text-gray-500">Recommended size: 200x80px. Max file size: 2MB</p>
                    @error('logo')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label for="primary_color" class="block text-sm font-medium text-gray-700 mb-1">Primary Color</label>
                        <div class="flex">
                            <input type="color" name="primary_color" id="primary_color" value="{{ old('primary_color', '#3b82f6') }}" class="h-10 w-10 rounded-l-md border-gray-300">
                            <input type="text" name="primary_color_hex" id="primary_color_hex" value="{{ old('primary_color', '#3b82f6') }}" class="w-full rounded-r-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" placeholder="#3b82f6">
                        </div>
                        @error('primary_color')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div>
                        <label for="secondary_color" class="block text-sm font-medium text-gray-700 mb-1">Secondary Color</label>
                        <div class="flex">
                            <input type="color" name="secondary_color" id="secondary_color" value="{{ old('secondary_color', '#1e3a8a') }}" class="h-10 w-10 rounded-l-md border-gray-300">
                            <input type="text" name="secondary_color_hex" id="secondary_color_hex" value="{{ old('secondary_color', '#1e3a8a') }}" class="w-full rounded-r-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" placeholder="#1e3a8a">
                        </div>
                        @error('secondary_color')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>
        </div>
        
        <div class="flex justify-end space-x-3 pt-4 border-t">
            <a href="{{ route('admin.clients.index') }}" class="bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 font-medium py-2 px-4 rounded-lg">
                Cancel
            </a>
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg">
                Create Client
            </button>
        </div>
    </form>
</div>

@push('scripts')
<script>
    // Sync color inputs
    document.getElementById('primary_color').addEventListener('input', function() {
        document.getElementById('primary_color_hex').value = this.value;
    });
    
    document.getElementById('primary_color_hex').addEventListener('input', function() {
        document.getElementById('primary_color').value = this.value;
    });
    
    document.getElementById('secondary_color').addEventListener('input', function() {
        document.getElementById('secondary_color_hex').value = this.value;
    });
    
    document.getElementById('secondary_color_hex').addEventListener('input', function() {
        document.getElementById('secondary_color').value = this.value;
    });
</script>
@endpush
@endsection