@extends('layouts.app')

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

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow-md p-8">
        <div class="mb-6">
            <h3 class="text-xl font-semibold text-gray-800">Company Information</h3>
            <p class="text-gray-600">Update your company details that will appear on invoices and documents</p>
        </div>

        <form action="{{ route('settings.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div class="space-y-6">
                <!-- Company Name -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-building text-purple-600 mr-2"></i>Company Name *
                    </label>
                    <input type="text" name="company_name" value="{{ old('company_name', $settings['company_name']) }}" required
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                    <p class="text-xs text-gray-500 mt-1">This will appear on all invoices and documents</p>
                </div>

                <!-- Company Logo -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-image text-purple-600 mr-2"></i>Company Logo
                    </label>
                    @if($settings['company_logo'])
                    <div class="mb-3">
                        <img src="{{ asset('uploads/' . $settings['company_logo']) }}" alt="Logo" class="h-20 border rounded">
                        <p class="text-xs text-gray-500 mt-1">Current logo</p>
                    </div>
                    @endif
                    <input type="file" name="company_logo" accept="image/*"
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                    <p class="text-xs text-gray-500 mt-1">Upload company logo (PNG, JPG - Max 2MB)</p>
                </div>

                <!-- Company Address -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-map-marker-alt text-purple-600 mr-2"></i>Company Address *
                    </label>
                    <textarea name="company_address" rows="3" required
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">{{ old('company_address', $settings['company_address']) }}</textarea>
                    <p class="text-xs text-gray-500 mt-1">Full address with city and postal code</p>
                </div>

                <!-- Office Addresses -->
                <div class="border-t pt-6 mt-6">
                    <h4 class="text-lg font-semibold text-gray-800 mb-4">
                        <i class="fas fa-building text-purple-600 mr-2"></i>Office Addresses
                    </h4>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Rawalpindi -->
                        <div class="col-span-2 border p-4 rounded-lg bg-gray-50">
                            <div class="flex justify-between items-center mb-4">
                                <h5 class="font-bold text-gray-700">Office 1</h5>
                                <div class="flex items-center">
                                    <input type="hidden" name="office_rawalpindi_status" value="0">
                                    <input type="checkbox" name="office_rawalpindi_status" value="1" {{ old('office_rawalpindi_status', $settings['office_rawalpindi_status']) ? 'checked' : '' }}
                                        class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded mr-2">
                                    <label class="text-sm font-medium text-gray-700">Show on Documents</label>
                                </div>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="col-span-2">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Office Title</label>
                                    <input type="text" name="office_rawalpindi_title" value="{{ old('office_rawalpindi_title', $settings['office_rawalpindi_title']) }}"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                                </div>
                                <div class="col-span-2 md:col-span-1">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Address (Urdu/English)</label>
                                    <textarea name="office_rawalpindi_address" rows="3"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent urdu-font">{{ old('office_rawalpindi_address', $settings['office_rawalpindi_address']) }}</textarea>
                                </div>
                                <div class="col-span-2 md:col-span-1">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Phone</label>
                                    <textarea name="office_rawalpindi_phone" rows="3"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">{{ old('office_rawalpindi_phone', $settings['office_rawalpindi_phone']) }}</textarea>
                                </div>
                            </div>
                        </div>

                        <!-- Peshawar -->
                        <div class="col-span-2 border p-4 rounded-lg bg-gray-50">
                            <div class="flex justify-between items-center mb-4">
                                <h5 class="font-bold text-gray-700">Office 2</h5>
                                <div class="flex items-center">
                                    <input type="hidden" name="office_peshawar_status" value="0">
                                    <input type="checkbox" name="office_peshawar_status" value="1" {{ old('office_peshawar_status', $settings['office_peshawar_status']) ? 'checked' : '' }}
                                        class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded mr-2">
                                    <label class="text-sm font-medium text-gray-700">Show on Documents</label>
                                </div>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="col-span-2">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Office Title</label>
                                    <input type="text" name="office_peshawar_title" value="{{ old('office_peshawar_title', $settings['office_peshawar_title']) }}"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                                </div>
                                <div class="col-span-2 md:col-span-1">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Address (Urdu/English)</label>
                                    <textarea name="office_peshawar_address" rows="3"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent urdu-font">{{ old('office_peshawar_address', $settings['office_peshawar_address']) }}</textarea>
                                </div>
                                <div class="col-span-2 md:col-span-1">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Phone</label>
                                    <textarea name="office_peshawar_phone" rows="3"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">{{ old('office_peshawar_phone', $settings['office_peshawar_phone']) }}</textarea>
                                </div>
                            </div>
                        </div>

                        <!-- Lahore -->
                        <div class="col-span-2 border p-4 rounded-lg bg-gray-50">
                            <div class="flex justify-between items-center mb-4">
                                <h5 class="font-bold text-gray-700">Office 3</h5>
                                <div class="flex items-center">
                                    <input type="hidden" name="office_lahore_status" value="0">
                                    <input type="checkbox" name="office_lahore_status" value="1" {{ old('office_lahore_status', $settings['office_lahore_status']) ? 'checked' : '' }}
                                        class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded mr-2">
                                    <label class="text-sm font-medium text-gray-700">Show on Documents</label>
                                </div>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="col-span-2">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Office Title</label>
                                    <input type="text" name="office_lahore_title" value="{{ old('office_lahore_title', $settings['office_lahore_title']) }}"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                                </div>
                                <div class="col-span-2 md:col-span-1">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Address (Urdu/English)</label>
                                    <textarea name="office_lahore_address" rows="3"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent urdu-font">{{ old('office_lahore_address', $settings['office_lahore_address']) }}</textarea>
                                </div>
                                <div class="col-span-2 md:col-span-1">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Phone</label>
                                    <textarea name="office_lahore_phone" rows="3"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">{{ old('office_lahore_phone', $settings['office_lahore_phone']) }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Phone and Email -->
                <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">
                            <i class="fas fa-phone text-purple-600 mr-2"></i>Phone Number *
                        </label>
                        <input type="text" name="company_phone" value="{{ old('company_phone', $settings['company_phone']) }}" required
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                        <p class="text-xs text-gray-500 mt-1">Contact number for customers</p>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-envelope text-purple-600 mr-2"></i>Email Address *
                        </label>
                        <input type="email" name="company_email" value="{{ old('company_email', $settings['company_email']) }}" required
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                        <p class="text-xs text-gray-500 mt-1">Support email address</p>
                    </div>
                </div>

                <!-- Website -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-globe text-purple-600 mr-2"></i>Website
                    </label>
                    <input type="text" name="company_website" value="{{ old('company_website', $settings['company_website']) }}"
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                    <p class="text-xs text-gray-500 mt-1">Company website URL (optional)</p>
                </div>

                <!-- Currency Settings -->
                <div class="border-t pt-6 mt-6">
                    <h4 class="text-lg font-semibold text-gray-800 mb-4">
                        <i class="fas fa-money-bill-wave text-purple-600 mr-2"></i>Currency Settings
                    </h4>
                    
                    <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">
                                Currency Symbol *
                            </label>
                            <select name="currency_symbol" required
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                                <option value="Rs." {{ old('currency_symbol', $settings['currency_symbol']) == 'Rs.' ? 'selected' : '' }}>Rs. (Pakistani Rupee)</option>
                                <option value="$" {{ old('currency_symbol', $settings['currency_symbol']) == '$' ? 'selected' : '' }}>$ (US Dollar)</option>
                                <option value="€" {{ old('currency_symbol', $settings['currency_symbol']) == '€' ? 'selected' : '' }}>€ (Euro)</option>
                                <option value="£" {{ old('currency_symbol', $settings['currency_symbol']) == '£' ? 'selected' : '' }}>£ (British Pound)</option>
                                <option value="¥" {{ old('currency_symbol', $settings['currency_symbol']) == '¥' ? 'selected' : '' }}>¥ (Japanese Yen)</option>
                                <option value="₹" {{ old('currency_symbol', $settings['currency_symbol']) == '₹' ? 'selected' : '' }}>₹ (Indian Rupee)</option>
                                <option value="د.إ" {{ old('currency_symbol', $settings['currency_symbol']) == 'د.إ' ? 'selected' : '' }}>د.إ (UAE Dirham)</option>
                                <option value="﷼" {{ old('currency_symbol', $settings['currency_symbol']) == '﷼' ? 'selected' : '' }}>﷼ (Saudi Riyal)</option>
                            </select>
                            <p class="text-xs text-gray-500 mt-1">Symbol shown on invoices</p>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Currency Code *
                            </label>
                            <select name="currency_code" required
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                                <option value="PKR" {{ old('currency_code', $settings['currency_code']) == 'PKR' ? 'selected' : '' }}>PKR - Pakistani Rupee</option>
                                <option value="USD" {{ old('currency_code', $settings['currency_code']) == 'USD' ? 'selected' : '' }}>USD - US Dollar</option>
                                <option value="EUR" {{ old('currency_code', $settings['currency_code']) == 'EUR' ? 'selected' : '' }}>EUR - Euro</option>
                                <option value="GBP" {{ old('currency_code', $settings['currency_code']) == 'GBP' ? 'selected' : '' }}>GBP - British Pound</option>
                                <option value="JPY" {{ old('currency_code', $settings['currency_code']) == 'JPY' ? 'selected' : '' }}>JPY - Japanese Yen</option>
                                <option value="INR" {{ old('currency_code', $settings['currency_code']) == 'INR' ? 'selected' : '' }}>INR - Indian Rupee</option>
                                <option value="AED" {{ old('currency_code', $settings['currency_code']) == 'AED' ? 'selected' : '' }}>AED - UAE Dirham</option>
                                <option value="SAR" {{ old('currency_code', $settings['currency_code']) == 'SAR' ? 'selected' : '' }}>SAR - Saudi Riyal</option>
                            </select>
                            <p class="text-xs text-gray-500 mt-1">Currency code (ISO 4217)</p>
                        </div>
                    </div>

                    <div class="mt-4 bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded">
                        <p class="text-sm text-yellow-800">
                            <i class="fas fa-info-circle mr-2"></i>
                            <strong>Preview:</strong> Amounts will be displayed as: 
                            <span class="font-bold">{{ old('currency_symbol', $settings['currency_symbol']) }} 1,000.00</span>
                        </p>
                    </div>
                </div>

                <!-- Preview Section -->
                <div class="bg-purple-50 border-l-4 border-purple-600 p-4 rounded">
                    <h4 class="font-semibold text-purple-900 mb-2">
                        <i class="fas fa-info-circle mr-2"></i>Preview
                    </h4>
                    <p class="text-sm text-purple-800">These details will appear on:</p>
                    <ul class="text-sm text-purple-700 mt-2 space-y-1 ml-4">
                        <li>• Invoices</li>
                        <li>• Cargo Slips (Bilti)</li>
                        <li>• Delivery Receipts</li>
                        <li>• All printed documents</li>
                    </ul>
                </div>
            </div>

            <!-- Hero Slider Images -->
            <div class="border-t pt-6 mt-6">
                <h4 class="text-lg font-semibold text-gray-800 mb-4">
                    <i class="fas fa-images text-purple-600 mr-2"></i>Hero Slider Images
                </h4>

                <!-- Existing Images -->
                @if(!empty($settings['slider_images']))
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
                    @foreach($settings['slider_images'] as $image)
                    <div class="relative group">
                        <img src="{{ asset('uploads/sliders/' . $image) }}" class="h-24 w-full object-cover rounded-lg border border-gray-200">
                        <button type="button" onclick="deleteSliderImage('{{ $image }}')"
                            class="absolute top-1 right-1 bg-red-500 text-white rounded-full p-1 hover:bg-red-600 opacity-0 group-hover:opacity-100 transition-opacity">
                            <i class="fas fa-times text-xs w-4 h-4 flex items-center justify-center"></i>
                        </button>
                    </div>
                    @endforeach
                </div>
                @endif

                <!-- Upload New Images -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        Add New Images
                    </label>
                    <input type="file" name="slider_images[]" multiple accept="image/*"
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                    <p class="text-xs text-gray-500 mt-1">Upload multiple images (PNG, JPG - Max 2MB each)</p>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="mt-8 flex justify-end space-x-4">
                <button type="button" onclick="window.location.reload()" 
                    class="px-6 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
                    <i class="fas fa-undo mr-2"></i>Reset
                </button>
                <button type="submit" 
                    class="px-6 py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-lg hover:shadow-lg">
                    <i class="fas fa-save mr-2"></i>Save Settings
                </button>
            </div>
        </form>
    </div>

    <!-- Help Section -->
    <div class="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-6">
        <h4 class="font-semibold text-blue-900 mb-3">
            <i class="fas fa-question-circle mr-2"></i>Need Help?
        </h4>
        <div class="text-sm text-blue-800 space-y-2">
            <p><strong>Company Name:</strong> This appears as the main heading on all documents</p>
            <p><strong>Logo:</strong> Upload your company logo for professional branding</p>
            <p><strong>Address:</strong> Full address including city, state, and postal code</p>
            <p><strong>Phone & Email:</strong> Contact information for customer support</p>
            <p><strong>Website:</strong> Your company website (optional)</p>
        </div>
    </div>
</div>

<form id="delete-slider-form" action="{{ route('settings.deleteSliderImage') }}" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
    <input type="hidden" name="image" id="delete-image-input">
</form>

<script>
function deleteSliderImage(image) {
    if(confirm('Are you sure you want to delete this image?')) {
        document.getElementById('delete-image-input').value = image;
        document.getElementById('delete-slider-form').submit();
    }
}
</script>
@endsection