<x-app-layout>
    <x-slot name="title">Settings</x-slot>
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900">Global Settings</h1>
        <p class="text-sm text-gray-500 mt-1">Manage company information, rules, and system configurations.</p>
    </div>

    @if(session('success'))
        <div class="mb-4 bg-green-50 p-4 rounded-md border border-green-200">
            <p class="text-green-700 text-sm font-medium">{{ session('success') }}</p>
        </div>
    @endif

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="space-y-0">
            <!-- Company Info Form -->
            <form action="{{ route('settings.store') }}" method="POST" class="p-6 sm:p-8">
                @csrf
                <div>
                    <h3 class="text-lg leading-6 font-medium text-gray-900">Company Information</h3>
                    <p class="mt-1 text-sm text-gray-500">This information will be displayed publicly on reports and payment slips.</p>
                </div>
                <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
                    <div class="sm:col-span-3">
                        <label class="block text-sm font-medium text-gray-700">Company Name</label>
                        <input type="text" name="company_name" value="{{ $settings['company_name']->value ?? '' }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                    </div>
                    <div class="sm:col-span-3">
                        <label class="block text-sm font-medium text-gray-700">Phone / Support Line</label>
                        <input type="text" name="company_phone" value="{{ $settings['company_phone']->value ?? '' }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                    </div>
                    <div class="sm:col-span-4">
                        <label class="block text-sm font-medium text-gray-700">Email Address</label>
                        <input type="email" name="company_email" value="{{ $settings['company_email']->value ?? '' }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                    </div>
                    <div class="sm:col-span-6">
                        <label class="block text-sm font-medium text-gray-700">Head Office Address</label>
                        <textarea name="company_address" rows="3" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">{{ $settings['company_address']->value ?? '' }}</textarea>
                    </div>
                </div>
                <div class="pt-5 mt-6 flex justify-end">
                    <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">Save Company Info</button>
                </div>
            </form>

            <!-- Terms & Rules Form -->
            <form action="{{ route('settings.store') }}" method="POST" class="p-6 sm:p-8 border-t border-gray-200">
                @csrf
                <div>
                    <h3 class="text-lg leading-6 font-medium text-gray-900">Terms & Rules</h3>
                    <p class="mt-1 text-sm text-gray-500">Define the rules that will appear on booking forms and payment receipts.</p>
                </div>
                <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
                    <div class="sm:col-span-6">
                        <label class="block text-sm font-medium text-gray-700">Booking Terms & Conditions</label>
                        <textarea name="booking_terms" rows="4" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">{{ $settings['booking_terms']->value ?? "1. All payments are non-refundable.\n2. Late surcharge applies after 10th of every month." }}</textarea>
                    </div>
                    <div class="sm:col-span-6">
                        <label class="block text-sm font-medium text-gray-700">Payment Slip Footer Note</label>
                        <textarea name="slip_footer_note" rows="2" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">{{ $settings['slip_footer_note']->value ?? "Thank you for your business. Please keep this slip safe." }}</textarea>
                    </div>
                </div>
                <div class="pt-5 mt-6 flex justify-end">
                    <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">Save Terms & Rules</button>
                </div>
            </form>

            <!-- Integrations & API Form -->
            <form action="{{ route('settings.store') }}" method="POST" class="p-6 sm:p-8 border-t border-gray-200">
                @csrf
                <div>
                    <h3 class="text-lg leading-6 font-medium text-gray-900">Integrations & API</h3>
                    <p class="mt-1 text-sm text-gray-500">Configure external integrations, API keys, and website embed codes.</p>
                </div>
                
                <div class="mt-6 bg-gray-50 rounded-lg p-6 border border-gray-200">
                    <h4 class="text-sm font-semibold text-gray-900">Lead Capture Form Embed Code</h4>
                    <p class="text-xs text-gray-500 mt-1 mb-3">Copy this HTML code and paste it into your external website (e.g. WordPress, Webflow) to automatically capture leads.</p>
                    <div class="relative">
                        <textarea readonly rows="12" class="mt-1 block w-full bg-gray-900 text-green-400 font-mono text-xs rounded-md shadow-sm border-gray-700 p-4"><form action="{{ url('/api/webhooks/leads') }}" method="POST">
    <label>Name:</label>
    <input type="text" name="name" required>
    
    <label>Phone:</label>
    <input type="text" name="phone">
    
    <label>Email:</label>
    <input type="email" name="email">
    
    <input type="hidden" name="source" value="Website Landing Page">
    
    <button type="submit">Submit</button>
</form></textarea>
                        <button type="button" onclick="navigator.clipboard.writeText(this.previousElementSibling.value); alert('Copied to clipboard!')" class="absolute top-2 right-2 px-2 py-1 bg-gray-700 hover:bg-gray-600 text-white text-xs rounded">Copy</button>
                    </div>
                </div>

                <!-- WhatsApp API -->
                <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
                    <div class="sm:col-span-6">
                        <h4 class="text-sm font-semibold text-gray-900 border-b border-gray-200 pb-2">WhatsApp Business API Setup (Meta)</h4>
                    </div>
                    <div class="sm:col-span-3">
                        <label class="block text-sm font-medium text-gray-700">WhatsApp Phone Number ID</label>
                        <input type="text" name="whatsapp_phone_id" value="{{ $settings['whatsapp_phone_id']->value ?? '' }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                    </div>
                    <div class="sm:col-span-3">
                        <label class="block text-sm font-medium text-gray-700">WhatsApp Access Token</label>
                        <input type="password" name="whatsapp_token" value="{{ $settings['whatsapp_token']->value ?? '' }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                    </div>
                </div>
                <div class="pt-5 mt-6 flex justify-end">
                    <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">Save Integrations</button>
                </div>
            </form>

            <!-- Payment Account Details Form -->
            <form action="{{ route('settings.store') }}" method="POST" class="p-6 sm:p-8 border-t border-gray-200">
                @csrf
                <div>
                    <h3 class="text-lg leading-6 font-medium text-gray-900">Payment Account Details</h3>
                    <p class="mt-1 text-sm text-gray-500">These details will be shown to customers when they upload a payment proof on the portal.</p>
                </div>
                <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
                    <div class="sm:col-span-6">
                        <label class="block text-sm font-medium text-gray-700">Bank Transfer Details</label>
                        <textarea name="bank_details" rows="3" placeholder="Bank Name: ABC Bank\nAccount Title: Real Estate CRM\nAccount No: 123456789\nIBAN: PK00ABC123456789" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">{{ $settings['bank_details']->value ?? "" }}</textarea>
                    </div>
                    <div class="sm:col-span-3">
                        <label class="block text-sm font-medium text-gray-700">Easypaisa Details</label>
                        <textarea name="easypaisa_details" rows="3" placeholder="Account Title: John Doe\nAccount No: 03001234567" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">{{ $settings['easypaisa_details']->value ?? "" }}</textarea>
                    </div>
                    <div class="sm:col-span-3">
                        <label class="block text-sm font-medium text-gray-700">JazzCash Details</label>
                        <textarea name="jazzcash_details" rows="3" placeholder="Account Title: John Doe\nAccount No: 03001234567" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">{{ $settings['jazzcash_details']->value ?? "" }}</textarea>
                    </div>
                </div>
                <div class="pt-5 mt-6 flex justify-end">
                    <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">Save Payment Accounts</button>
                </div>
            </form>
        </div>

        <!-- System Tools -->
        <div class="p-6 sm:p-8 border-t border-gray-200">
            <div>
                <h3 class="text-lg leading-6 font-medium text-red-600">System Tools & Maintenance</h3>
                <p class="mt-1 text-sm text-gray-500">Perform system backups or reset the CRM database.</p>
            </div>

            <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2">
                <!-- Backup Card -->
                <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6 relative">
                    <h4 class="text-sm font-semibold text-gray-900 mb-2">Database Backup</h4>
                    <p class="text-sm text-gray-500 mb-4">Create a manual backup of the entire database. This will be saved in your storage folder.</p>
                    <form action="{{ url('/system/backup') }}" method="POST">
                        @csrf
                        <button type="submit" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                            <svg class="h-4 w-4 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
                            Run Backup Now
                        </button>
                    </form>
                </div>

                <!-- Reset Card -->
                <div class="bg-red-50 border border-red-200 rounded-lg shadow-sm p-6 relative">
                    <h4 class="text-sm font-semibold text-red-900 mb-2">Factory Reset Database</h4>
                    <p class="text-sm text-red-700 mb-4"><strong>WARNING:</strong> This will delete ALL data (customers, properties, leads) and re-seed defaults. This cannot be undone.</p>
                    <div x-data="{ showConfirm: false }">
                        <button x-show="!showConfirm" @click="showConfirm = true" type="button" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700">
                            <svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                            Reset Database
                        </button>
                        
                        <div x-show="showConfirm" class="mt-2" style="display: none;">
                            <form action="{{ url('/system/reset') }}" method="POST">
                                @csrf
                                <label class="block text-xs font-medium text-red-800 mb-1">Enter your password to confirm:</label>
                                <div class="flex gap-2">
                                    <input type="password" name="password" required class="block w-full border-red-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500 sm:text-sm">
                                    <button type="submit" class="inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700">
                                        Confirm
                                    </button>
                                    <button type="button" @click="showConfirm = false" class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                                        Cancel
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
