@extends('layouts.app')
@section('title', 'Business Profile')
@section('page-title', 'Business Profile')

@section('content')
<form method="POST" action="{{ route('business.profile.update') }}" enctype="multipart/form-data"
      x-data="{ gstRegistered: {{ $profile->gst_registered ? 'true' : 'false' }} }">
    @csrf @method('PUT')

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

        {{-- Left column --}}
        <div class="lg:col-span-2 space-y-6">

            {{-- Basic Info --}}
            <div class="card">
                <h2 class="text-base font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-100">Business Information</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="md:col-span-2">
                        <label class="form-label">Business Name <span class="text-red-500">*</span></label>
                        <input type="text" name="business_name" value="{{ old('business_name', $profile->business_name) }}"
                               class="form-input" required>
                        @error('business_name')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="form-label">Legal Name</label>
                        <input type="text" name="legal_name" value="{{ old('legal_name', $profile->legal_name) }}" class="form-input">
                    </div>
                    <div>
                        <label class="form-label">Business Type <span class="text-red-500">*</span></label>
                        <select name="business_type" class="form-input">
                            @foreach(['hotel'=>'Hotel','restaurant'=>'Restaurant','enterprise'=>'Enterprise','distributor'=>'Distributor','retail'=>'Retail','service'=>'Service/Consultant','other'=>'Other'] as $val=>$label)
                            <option value="{{ $val }}" {{ old('business_type', $profile->business_type) === $val ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Phone</label>
                        <input type="text" name="phone" value="{{ old('phone', $profile->phone) }}" class="form-input">
                    </div>
                    <div>
                        <label class="form-label">Email</label>
                        <input type="email" name="email" value="{{ old('email', $profile->email) }}" class="form-input">
                    </div>
                    <div class="md:col-span-2">
                        <label class="form-label">Website</label>
                        <input type="url" name="website" value="{{ old('website', $profile->website) }}" class="form-input" placeholder="https://...">
                    </div>
                </div>
            </div>

            {{-- GST & Tax --}}
            <div class="card">
                <h2 class="text-base font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-100">GST & Tax Details</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="md:col-span-2 flex items-center gap-3">
                        <input type="hidden" name="gst_registered" value="0">
                        <input type="checkbox" id="gst_registered" name="gst_registered" value="1"
                               {{ old('gst_registered', $profile->gst_registered) ? 'checked' : '' }}
                               @change="gstRegistered = $event.target.checked"
                               class="rounded border-gray-300 text-indigo-600 w-4 h-4">
                        <label for="gst_registered" class="text-sm font-medium text-gray-700">
                            This business is registered for GST
                        </label>
                    </div>

                    <div x-show="gstRegistered">
                        <label class="form-label">GSTIN</label>
                        <input type="text" name="gstin" value="{{ old('gstin', $profile->gstin) }}"
                               class="form-input font-mono uppercase" placeholder="e.g. 19AABCU9603R1ZX"
                               maxlength="15" style="text-transform:uppercase">
                        @error('gstin')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div x-show="gstRegistered">
                        <label class="form-label">GST Type</label>
                        <select name="gst_type" class="form-input">
                            <option value="regular"     {{ old('gst_type', $profile->gst_type) === 'regular'      ? 'selected' : '' }}>Regular</option>
                            <option value="composition" {{ old('gst_type', $profile->gst_type) === 'composition'  ? 'selected' : '' }}>Composition</option>
                            <option value="unregistered"{{ old('gst_type', $profile->gst_type) === 'unregistered' ? 'selected' : '' }}>Unregistered</option>
                        </select>
                    </div>
                    <div>
                        <label class="form-label">PAN Number</label>
                        <input type="text" name="pan" value="{{ old('pan', $profile->pan) }}"
                               class="form-input font-mono uppercase" placeholder="ABCDE1234F" maxlength="10">
                        @error('pan')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="form-label">TAN Number</label>
                        <input type="text" name="tan" value="{{ old('tan', $profile->tan) }}"
                               class="form-input font-mono uppercase" placeholder="For TDS" maxlength="10">
                    </div>
                </div>
            </div>

            {{-- Address --}}
            <div class="card">
                <h2 class="text-base font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-100">Registered Address</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="md:col-span-2">
                        <label class="form-label">Address Line 1 <span class="text-red-500">*</span></label>
                        <input type="text" name="address_line1" value="{{ old('address_line1', $profile->address_line1) }}" class="form-input" required>
                    </div>
                    <div class="md:col-span-2">
                        <label class="form-label">Address Line 2</label>
                        <input type="text" name="address_line2" value="{{ old('address_line2', $profile->address_line2) }}" class="form-input">
                    </div>
                    <div>
                        <label class="form-label">City <span class="text-red-500">*</span></label>
                        <input type="text" name="city" value="{{ old('city', $profile->city) }}" class="form-input" required>
                    </div>
                    <div>
                        <label class="form-label">Pincode <span class="text-red-500">*</span></label>
                        <input type="text" name="pincode" value="{{ old('pincode', $profile->pincode) }}" class="form-input" maxlength="6" required>
                    </div>
                    <div>
                        <label class="form-label">State <span class="text-red-500">*</span></label>
                        <select name="state_code" id="state_code" class="form-input" required
                                onchange="document.getElementById('state_name').value = this.options[this.selectedIndex].text.split(' (')[0]">
                            <option value="">— Select State —</option>
                            @foreach($states as $code => $name)
                            <option value="{{ $code }}"
                                {{ old('state_code', $profile->state_code) == $code ? 'selected' : '' }}>
                                {{ $name }} ({{ $code }})
                            </option>
                            @endforeach
                        </select>
                        <input type="hidden" name="state" id="state_name" value="{{ old('state', $profile->state) }}">
                    </div>
                </div>
            </div>

            {{-- Invoice Settings --}}
            <div class="card">
                <h2 class="text-base font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-100">Invoice Settings</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="form-label">Invoice Prefix</label>
                        <input type="text" name="invoice_prefix" value="{{ old('invoice_prefix', $profile->invoice_prefix ?? 'INV') }}" class="form-input font-mono" maxlength="10">
                    </div>
                    <div>
                        <label class="form-label">Invoice Template</label>
                        <select name="invoice_template" class="form-input">
                            <option value="default" {{ old('invoice_template', $profile->invoice_template) === 'default' ? 'selected' : '' }}>Default (GST Tax Invoice)</option>
                            <option value="modern"  {{ old('invoice_template', $profile->invoice_template) === 'modern'  ? 'selected' : '' }}>Modern</option>
                            <option value="compact" {{ old('invoice_template', $profile->invoice_template) === 'compact' ? 'selected' : '' }}>Compact</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="form-label">Invoice Footer / Terms</label>
                        <textarea name="invoice_footer_note" rows="3" class="form-input">{{ old('invoice_footer_note', $profile->invoice_footer_note) }}</textarea>
                    </div>
                    <div>
                        <label class="form-label">UPI ID</label>
                        <input type="text" name="upi_id" value="{{ old('upi_id', $profile->upi_id) }}" class="form-input" placeholder="name@upi">
                    </div>
                </div>

                {{-- Bank Details --}}
                <h3 class="text-sm font-semibold text-gray-700 mt-5 mb-3">Bank Details (for invoice)</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="form-label">Bank Name</label>
                        <input type="text" name="bank_details[bank_name]"
                               value="{{ old('bank_details.bank_name', $profile->bank_details['bank_name'] ?? '') }}" class="form-input">
                    </div>
                    <div>
                        <label class="form-label">Account Number</label>
                        <input type="text" name="bank_details[account_number]"
                               value="{{ old('bank_details.account_number', $profile->bank_details['account_number'] ?? '') }}" class="form-input">
                    </div>
                    <div>
                        <label class="form-label">IFSC Code</label>
                        <input type="text" name="bank_details[ifsc_code]"
                               value="{{ old('bank_details.ifsc_code', $profile->bank_details['ifsc_code'] ?? '') }}" class="form-input font-mono uppercase">
                    </div>
                    <div>
                        <label class="form-label">Branch</label>
                        <input type="text" name="bank_details[branch]"
                               value="{{ old('bank_details.branch', $profile->bank_details['branch'] ?? '') }}" class="form-input">
                    </div>
                </div>
            </div>

        </div>

        {{-- Right column: Logo & Branding --}}
        <div class="space-y-6">
            <div class="card">
                <h2 class="text-base font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-100">Logo & Branding</h2>

                {{-- Logo preview --}}
                <div class="mb-4 flex flex-col items-center">
                    <div class="w-32 h-32 rounded-xl border-2 border-dashed border-gray-300 flex items-center justify-center bg-gray-50 overflow-hidden mb-3">
                        @if($profile->logo)
                        <img src="{{ $profile->logo_url }}" class="w-full h-full object-contain p-2" id="logo-preview">
                        @else
                        <svg id="logo-placeholder" class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                        <img id="logo-preview" src="" class="hidden w-full h-full object-contain p-2">
                        @endif
                    </div>
                    <label class="cursor-pointer text-sm text-indigo-600 hover:text-indigo-800 font-medium">
                        Upload Logo
                        <input type="file" name="logo" accept="image/*" class="hidden"
                               onchange="previewLogo(this)">
                    </label>
                    <p class="text-xs text-gray-400 mt-1">PNG, JPG, SVG up to 2MB</p>
                    @if($profile->logo)
                    <form method="POST" action="{{ route('business.profile.logo.remove') }}" class="mt-2">
                        @csrf @method('DELETE')
                        <button type="submit" class="text-xs text-red-500 hover:text-red-700">Remove logo</button>
                    </form>
                    @endif
                </div>

                {{-- Brand colors --}}
                <div class="space-y-3">
                    <div>
                        <label class="form-label">Primary Color</label>
                        <div class="flex items-center gap-2">
                            <input type="color" name="primary_color" value="{{ old('primary_color', $profile->primary_color ?? '#4F46E5') }}"
                                   class="w-10 h-9 rounded border border-gray-300 cursor-pointer p-0.5">
                            <input type="text" value="{{ old('primary_color', $profile->primary_color ?? '#4F46E5') }}"
                                   class="form-input font-mono text-xs flex-1" readonly>
                        </div>
                    </div>
                    <div>
                        <label class="form-label">Secondary Color</label>
                        <div class="flex items-center gap-2">
                            <input type="color" name="secondary_color" value="{{ old('secondary_color', $profile->secondary_color ?? '#10B981') }}"
                                   class="w-10 h-9 rounded border border-gray-300 cursor-pointer p-0.5">
                            <input type="text" value="{{ old('secondary_color', $profile->secondary_color ?? '#10B981') }}"
                                   class="form-input font-mono text-xs flex-1" readonly>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Status card --}}
            <div class="card bg-indigo-50 border-indigo-200">
                <h3 class="text-sm font-semibold text-indigo-800 mb-2">Profile Status</h3>
                @if($profile->is_complete)
                <span class="badge-green">✓ Profile Complete</span>
                @else
                <span class="badge-yellow">⚠ Incomplete</span>
                <p class="text-xs text-indigo-700 mt-2">Fill all required fields to unlock all features.</p>
                @endif

                <div class="mt-3 space-y-1 text-xs text-indigo-700">
                    <p>{{ $profile->gstin ? '✓' : '○' }} GSTIN: {{ $profile->gstin ?: 'Not set' }}</p>
                    <p>{{ $profile->pan ? '✓' : '○' }} PAN: {{ $profile->pan ?: 'Not set' }}</p>
                    <p>{{ $profile->logo ? '✓' : '○' }} Logo uploaded</p>
                    <p>{{ $profile->bank_details ? '✓' : '○' }} Bank details</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Save --}}
    <div class="flex justify-end gap-3 mt-6">
        <button type="submit" class="btn-primary">
            <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 Business Profile
        </button>
    </div>
</form>

@push('scripts')
<script>
function previewLogo(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = e => {
            const preview = document.getElementById('logo-preview');
            const placeholder = document.getElementById('logo-placeholder');
            if (placeholder) placeholder.classList.add('hidden');
            preview.src = e.target.result;
            preview.classList.remove('hidden');
        };
        reader.readAsDataURL(input.files[0]);
    }
}

// Sync state name from state code dropdown
document.getElementById('state_code').addEventListener('change', function() {
    const opt  = this.options[this.selectedIndex];
    const name = opt.text.replace(/ \(\d+\)$/, '');
    document.getElementById('state_name').value = name;
});
</script>
@endpush
@endsection