@extends('layouts.app')

@section('title', 'Company Settings')

@section('content')
<header>
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Company Settings</h1>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Configure company information for official documents (payslips, receipts, invoices).</p>
    </div>
</header>

<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
    <form action="{{ route('settings.company.update') }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="space-y-6">
            
            <!-- Company Logo -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Company Logo</h2>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Logo will appear on all receipts, invoices, and reports.</p>
                </div>
                <div class="p-6">
                    @if($settings['logo'])
                        <div class="mb-4 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                            <p class="text-xs text-gray-600 dark:text-gray-400 mb-2 font-medium">Current Logo:</p>
                            <img src="{{ $settings['logo'] }}" alt="Company Logo" class="h-16 object-contain mb-3">
                            <label class="inline-flex items-center text-sm cursor-pointer">
                                <input type="checkbox" name="remove_logo" value="1" class="rounded border-gray-300 text-red-600 focus:ring-red-500 mr-2">
                                <span class="text-red-600 dark:text-red-400">Remove current logo</span>
                            </label>
                        </div>
                    @endif
                    <div>
                        <label for="logo_file" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Upload New Logo</label>
                        <input type="file" name="logo_file" id="logo_file" accept="image/png,image/jpeg,image/jpg,image/gif,image/webp"
                               class="block w-full text-sm text-gray-500 dark:text-gray-400
                                      file:mr-4 file:py-2 file:px-4
                                      file:rounded-lg file:border-0
                                      file:text-sm file:font-medium
                                      file:bg-indigo-50 file:text-indigo-700
                                      hover:file:bg-indigo-100
                                      dark:file:bg-indigo-900/50 dark:file:text-indigo-300">
                        <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">PNG, JPG, GIF or WebP. Max 2MB. Recommended: 200-400px width.</p>
                        @error('logo_file')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Company Identity -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Company Identity</h2>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Basic company information for legal documents.</p>
                </div>
                <div class="p-6 space-y-6">
                    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Company Name *</label>
                            <input type="text" name="name" id="name" value="{{ old('name', $settings['name']) }}" required
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                                   placeholder="e.g., OMNIA SDN BHD">
                            @error('name')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="registration_number" class="block text-sm font-medium text-gray-700 dark:text-gray-300">SSM Registration Number</label>
                            <input type="text" name="registration_number" id="registration_number" value="{{ old('registration_number', $settings['registration_number']) }}"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white font-mono"
                                   placeholder="e.g., 202401000000 (12345678-X)">
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Company registration number from SSM</p>
                            @error('registration_number')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Company Address -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Company Address</h2>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Official registered address for documents.</p>
                </div>
                <div class="p-6 space-y-6">
                    <div>
                        <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Street Address</label>
                        <input type="text" name="address" id="address" value="{{ old('address', $settings['address']) }}"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                               placeholder="e.g., No. 123, Jalan Example, Taman ABC">
                        @error('address')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="grid grid-cols-1 gap-6 md:grid-cols-4">
                        <div>
                            <label for="postcode" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Postcode</label>
                            <input type="text" name="postcode" id="postcode" value="{{ old('postcode', $settings['postcode']) }}"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                                   placeholder="e.g., 50000">
                            @error('postcode')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300">City</label>
                            <input type="text" name="city" id="city" value="{{ old('city', $settings['city']) }}"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                                   placeholder="e.g., Kuala Lumpur">
                            @error('city')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-300">State</label>
                            <select name="state" id="state"
                                    class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                                <option value="">Select State</option>
                                <option value="Johor" {{ old('state', $settings['state']) == 'Johor' ? 'selected' : '' }}>Johor</option>
                                <option value="Kedah" {{ old('state', $settings['state']) == 'Kedah' ? 'selected' : '' }}>Kedah</option>
                                <option value="Kelantan" {{ old('state', $settings['state']) == 'Kelantan' ? 'selected' : '' }}>Kelantan</option>
                                <option value="Melaka" {{ old('state', $settings['state']) == 'Melaka' ? 'selected' : '' }}>Melaka</option>
                                <option value="Negeri Sembilan" {{ old('state', $settings['state']) == 'Negeri Sembilan' ? 'selected' : '' }}>Negeri Sembilan</option>
                                <option value="Pahang" {{ old('state', $settings['state']) == 'Pahang' ? 'selected' : '' }}>Pahang</option>
                                <option value="Perak" {{ old('state', $settings['state']) == 'Perak' ? 'selected' : '' }}>Perak</option>
                                <option value="Perlis" {{ old('state', $settings['state']) == 'Perlis' ? 'selected' : '' }}>Perlis</option>
                                <option value="Pulau Pinang" {{ old('state', $settings['state']) == 'Pulau Pinang' ? 'selected' : '' }}>Pulau Pinang</option>
                                <option value="Sabah" {{ old('state', $settings['state']) == 'Sabah' ? 'selected' : '' }}>Sabah</option>
                                <option value="Sarawak" {{ old('state', $settings['state']) == 'Sarawak' ? 'selected' : '' }}>Sarawak</option>
                                <option value="Selangor" {{ old('state', $settings['state']) == 'Selangor' ? 'selected' : '' }}>Selangor</option>
                                <option value="Terengganu" {{ old('state', $settings['state']) == 'Terengganu' ? 'selected' : '' }}>Terengganu</option>
                                <option value="W.P. Kuala Lumpur" {{ old('state', $settings['state']) == 'W.P. Kuala Lumpur' ? 'selected' : '' }}>W.P. Kuala Lumpur</option>
                                <option value="W.P. Labuan" {{ old('state', $settings['state']) == 'W.P. Labuan' ? 'selected' : '' }}>W.P. Labuan</option>
                                <option value="W.P. Putrajaya" {{ old('state', $settings['state']) == 'W.P. Putrajaya' ? 'selected' : '' }}>W.P. Putrajaya</option>
                            </select>
                            @error('state')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Country</label>
                            <input type="text" name="country" id="country" value="{{ old('country', $settings['country'] ?? 'Malaysia') }}"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                                   placeholder="Malaysia">
                            @error('country')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact Information -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Contact Information</h2>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Contact details for customer inquiries and document footers.</p>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
                        <div>
                            <label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Phone Number</label>
                            <input type="text" name="phone" id="phone" value="{{ old('phone', $settings['phone']) }}"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                                   placeholder="e.g., +60 3-1234 5678">
                            @error('phone')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
                            <input type="email" name="email" id="email" value="{{ old('email', $settings['email']) }}"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                                   placeholder="e.g., finance@company.com">
                            @error('email')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="website" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Website</label>
                            <input type="text" name="website" id="website" value="{{ old('website', $settings['website']) }}"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                                   placeholder="e.g., https://company.com">
                            @error('website')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Preview -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Preview</h2>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">How company information will appear on payslips and receipts.</p>
                </div>
                <div class="p-6">
                    <div class="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg p-6 text-white">
                        <div class="flex items-start gap-4">
                            @if($settings['logo'])
                                <img src="{{ $settings['logo'] }}" alt="Logo" class="h-12 object-contain bg-white rounded p-1">
                            @endif
                            <div>
                                <h3 class="text-xl font-bold" id="preview-name">{{ $settings['name'] ?? 'Company Name' }}</h3>
                        <p class="text-sm opacity-90" id="preview-ssm">{{ $settings['registration_number'] ?? 'SSM Registration Number' }}</p>
                                        </div>
                        </div>
                        <p class="text-xs opacity-80 mt-2" id="preview-address">
                            {{ $settings['address'] ?? 'Street Address' }}, {{ $settings['postcode'] ?? 'Postcode' }} {{ $settings['city'] ?? 'City' }}<br>
                            {{ $settings['state'] ?? 'State' }}, {{ $settings['country'] ?? 'Malaysia' }}
                        </p>
                    </div>
                    <div class="mt-4 text-sm text-gray-600 dark:text-gray-400 text-center">
                        For inquiries: <strong id="preview-email">{{ $settings['email'] ?? 'email@company.com' }}</strong> | <span id="preview-phone">{{ $settings['phone'] ?? '+60 3-1234 5678' }}</span>
                    </div>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="flex justify-end gap-4">
                <a href="{{ route('settings.system') }}"
                   class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
                    Cancel
                </a>
                <button type="submit"
                        class="inline-flex items-center gap-2 px-6 py-2.5 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 shadow-sm transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    Save Company Settings
                </button>
            </div>
        </div>
    </form>
</div>

<script>
    // Live preview
    document.querySelectorAll('input, select').forEach(function(input) {
        input.addEventListener('input', updatePreview);
    });

    function updatePreview() {
        document.getElementById('preview-name').textContent = document.getElementById('name').value || 'Company Name';
        document.getElementById('preview-ssm').textContent = document.getElementById('registration_number').value || 'SSM Registration Number';
        document.getElementById('preview-email').textContent = document.getElementById('email').value || 'email@company.com';
        document.getElementById('preview-phone').textContent = document.getElementById('phone').value || '+60 3-1234 5678';

        const address = document.getElementById('address').value || 'Street Address';
        const postcode = document.getElementById('postcode').value || 'Postcode';
        const city = document.getElementById('city').value || 'City';
        const state = document.getElementById('state').value || 'State';
        const country = document.getElementById('country').value || 'Malaysia';

        document.getElementById('preview-address').innerHTML = address + ', ' + postcode + ' ' + city + '<br>' + state + ', ' + country;
    }
</script>
@endsection