@extends('admin.layouts.dashboard')
@section('title', 'Invoice Settings')

@push('head')
{{-- Google Places Autocomplete --}}
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google.maps_api_key') }}&libraries=places" async defer></script>
<style>
#logoPreviewWrap { display:none; margin-top:10px; }
#logoPreviewWrap img { max-height:100px; border:1px solid #dee2e6; border-radius:6px; padding:4px; background:#fff; }
</style>
@endpush

@section('content')
<div class="container-fluid mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3 class="mb-0">Invoice Settings</h3>
    </div>
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">{{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger"><ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
    @endif
    <div class="card shadow-sm">
        <div class="card-body p-4">
            <form method="POST" action="{{ route('admin.invoice-settings.update') }}" enctype="multipart/form-data">
                @csrf @method('PUT')
                <div class="row g-3">

                    {{-- ── Business Info ── --}}
                    <div class="col-12"><h6 class="fw-bold text-muted">Business Information</h6></div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold">Business Name <span class="text-danger">*</span></label>
                        <input type="text" name="business_name" class="form-control" value="{{ old('business_name', $setting->business_name) }}" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold">Contact Person</label>
                        <input type="text" name="contact_person" class="form-control" value="{{ old('contact_person', $setting->contact_person) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold">Phone</label>
                        <input type="text" name="phone" class="form-control" value="{{ old('phone', $setting->phone) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold">Email</label>
                        <input type="email" name="email" class="form-control" value="{{ old('email', $setting->email) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold">Website</label>
                        <input type="text" name="website" class="form-control" value="{{ old('website', $setting->website) }}">
                    </div>

                    {{-- ── Tax Registrations ── --}}
                    <div class="col-12"><hr><h6 class="fw-bold text-muted">Tax Registrations</h6></div>

                    {{-- GST --}}
                    <div class="col-md-4">
                        <div class="border rounded p-3">
                            <label class="form-label fw-bold mb-2">GST Registered?</label>
                            <div class="d-flex gap-3 mb-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="gst_registered" id="gst_yes" value="yes"
                                        {{ old('gst_registered', $setting->gst_registered ? 'yes' : 'no') === 'yes' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="gst_yes">Yes</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="gst_registered" id="gst_no" value="no"
                                        {{ old('gst_registered', $setting->gst_registered ? 'yes' : 'no') === 'no' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="gst_no">No</label>
                                </div>
                            </div>
                            <div id="gstNumberSection" style="{{ old('gst_registered', $setting->gst_registered ? 'yes' : 'no') === 'yes' ? '' : 'display:none;' }}">
                                <label class="form-label fw-bold">GST Number</label>
                                <input type="text" name="gst_number" class="form-control"
                                       value="{{ old('gst_number', $setting->gst_number) }}" placeholder="e.g. 741971238RT0001">
                            </div>
                        </div>
                    </div>

                    {{-- PST --}}
                    <div class="col-md-4">
                        <div class="border rounded p-3">
                            <label class="form-label fw-bold mb-2">PST Registered?</label>
                            <div class="d-flex gap-3 mb-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="pst_registered" id="pst_yes" value="yes"
                                        {{ old('pst_registered', $setting->pst_registered ? 'yes' : 'no') === 'yes' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="pst_yes">Yes</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="pst_registered" id="pst_no" value="no"
                                        {{ old('pst_registered', $setting->pst_registered ? 'yes' : 'no') === 'no' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="pst_no">No</label>
                                </div>
                            </div>
                            <div id="pstNumberSection" style="{{ old('pst_registered', $setting->pst_registered ? 'yes' : 'no') === 'yes' ? '' : 'display:none;' }}">
                                <label class="form-label fw-bold">PST Number</label>
                                <input type="text" name="pst_number" class="form-control"
                                       value="{{ old('pst_number', $setting->pst_number) }}" placeholder="e.g. PST-1234-5678">
                            </div>
                        </div>
                    </div>

                    {{-- HST --}}
                    <div class="col-md-4">
                        <div class="border rounded p-3">
                            <label class="form-label fw-bold mb-2">HST Registered?</label>
                            <div class="d-flex gap-3 mb-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="hst_registered" id="hst_yes" value="yes"
                                        {{ old('hst_registered', $setting->hst_registered ? 'yes' : 'no') === 'yes' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="hst_yes">Yes</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="hst_registered" id="hst_no" value="no"
                                        {{ old('hst_registered', $setting->hst_registered ? 'yes' : 'no') === 'no' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="hst_no">No</label>
                                </div>
                            </div>
                            <div id="hstNumberSection" style="{{ old('hst_registered', $setting->hst_registered ? 'yes' : 'no') === 'yes' ? '' : 'display:none;' }}">
                                <label class="form-label fw-bold">HST Number</label>
                                <input type="text" name="hst_number" class="form-control"
                                       value="{{ old('hst_number', $setting->hst_number) }}" placeholder="e.g. 123456789RT0001">
                            </div>
                        </div>
                    </div>

                    {{-- ── Address (Google Places) ── --}}
                    <div class="col-12"><hr><h6 class="fw-bold text-muted">Business Address</h6></div>
                    <div class="col-12">
                        <label class="form-label fw-bold">Search Address</label>
                        <input type="text" id="addressAutocomplete" class="form-control"
                               placeholder="Start typing your address..."
                               value="{{ old('street_address', $setting->street_address) }}">
                        <small class="text-muted">Start typing and select from suggestions — fields below will auto-fill.</small>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold">Street Address</label>
                        <input type="text" name="street_address" id="street_address" class="form-control"
                               value="{{ old('street_address', $setting->street_address) }}" placeholder="e.g. 7195 Gladstone Drive">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold">City</label>
                        <input type="text" name="city" id="city" class="form-control"
                               value="{{ old('city', $setting->city) }}" placeholder="e.g. Prince George">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold">Postal / ZIP Code</label>
                        <input type="text" name="zip_code" id="zip_code" class="form-control"
                               value="{{ old('zip_code', $setting->zip_code) }}" placeholder="e.g. V2N 3A3">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold">Country</label>
                        <input type="text" name="country" id="country" class="form-control"
                               value="{{ old('country', $setting->country) }}" placeholder="e.g. Canada">
                    </div>

                    {{-- ── Logo ── --}}
                    <div class="col-12"><hr><h6 class="fw-bold text-muted">Logo</h6></div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold">Upload Logo <small class="text-muted">(max 2MB, image)</small></label>
                        <input type="file" name="logo" id="logoInput" class="form-control" accept="image/*">

                        {{-- Preview for newly selected file --}}
                        <div id="logoPreviewWrap">
                            <small class="text-muted d-block mb-1">New logo preview:</small>
                            <img id="logoPreviewImg" src="" alt="Logo Preview">
                        </div>

                        {{-- Current logo --}}
                        @if($setting->logo_path)
                            <div class="mt-2">
                                <small class="text-muted d-block mb-1">Current logo:</small>
                                <img src="{{ Storage::url($setting->logo_path) }}" alt="Current Logo" style="max-height:80px; border:1px solid #dee2e6; border-radius:6px; padding:4px; background:#fff;">
                            </div>
                        @else
                            <small class="text-muted d-block mt-1" id="noLogoText">No logo uploaded. Default logo will be used.</small>
                        @endif
                    </div>

                    {{-- ── Terms & Conditions ── --}}
                    <div class="col-12"><hr><h6 class="fw-bold text-muted">Terms &amp; Conditions</h6></div>
                    <div class="col-12">
                        <label class="form-label fw-bold">Default Terms &amp; Conditions</label>
                        <textarea name="terms_conditions" id="terms_conditions" class="form-control" rows="6"
                                  placeholder="e.g. Please make E-Transfer Payment...">{{ old('terms_conditions', $setting->terms_conditions) }}</textarea>
                        <small class="text-muted">These will appear on all invoices by default.</small>
                    </div>

                    <div class="col-12 mt-2">
                        <button type="submit" class="btn btn-dark px-4">Save Settings</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
/* ── Logo Preview ── */
document.getElementById('logoInput').addEventListener('change', function() {
    const file = this.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('logoPreviewImg').src = e.target.result;
            document.getElementById('logoPreviewWrap').style.display = 'block';
            const noLogoText = document.getElementById('noLogoText');
            if (noLogoText) noLogoText.style.display = 'none';
        };
        reader.readAsDataURL(file);
    }
});

/* ── GST / PST / HST Toggle ── */
['gst', 'pst', 'hst'].forEach(function(tax) {
    document.querySelectorAll('input[name="' + tax + '_registered"]').forEach(function(r) {
        r.addEventListener('change', function() {
            const isYes = document.getElementById(tax + '_yes').checked;
            document.getElementById(tax + 'NumberSection').style.display = isYes ? '' : 'none';
        });
    });
});

/* ── Google Places Autocomplete ── */
function initAutocomplete() {
    const input = document.getElementById('addressAutocomplete');
    if (!input || typeof google === 'undefined') return;

    const autocomplete = new google.maps.places.Autocomplete(input, {
        types: ['address'],
    });

    autocomplete.addListener('place_changed', function() {
        const place = autocomplete.getPlace();
        if (!place.address_components) return;

        let streetNumber = '', route = '', city = '', zip = '', country = '';

        place.address_components.forEach(function(component) {
            const types = component.types;
            if (types.includes('street_number'))                         streetNumber = component.long_name;
            if (types.includes('route'))                                 route        = component.long_name;
            if (types.includes('locality'))                              city         = component.long_name;
            if (types.includes('administrative_area_level_1') && !city) city         = component.long_name;
            if (types.includes('postal_code'))                           zip          = component.long_name;
            if (types.includes('country'))                               country      = component.long_name;
        });

        const street = [streetNumber, route].filter(Boolean).join(' ');

        document.getElementById('street_address').value = street;
        document.getElementById('city').value           = city;
        document.getElementById('zip_code').value       = zip;
        document.getElementById('country').value        = country;
        input.value = street; // Show street in the search box
    });
}

// Wait for Google Maps to load
if (typeof google !== 'undefined') {
    initAutocomplete();
} else {
    window.initAutocomplete = initAutocomplete;
}
</script>

{{-- CKEditor for Terms & Conditions --}}
<script src="https://cdn.ckeditor.com/ckeditor5/41.1.0/classic/ckeditor.js"></script>
<script>
let termsEditor;
ClassicEditor
    .create(document.querySelector('#terms_conditions'), {
        toolbar: ['bold', 'italic', '|', 'bulletedList', 'numberedList', '|', 'link', '|', 'undo', 'redo'],
        placeholder: 'Enter terms and conditions...',
    })
    .then(editor => {
        termsEditor = editor;
        editor.model.document.on('change:data', () => {
            document.querySelector('#terms_conditions').value = editor.getData();
        });
    });

document.querySelector('form').addEventListener('submit', function() {
    if (termsEditor) document.querySelector('#terms_conditions').value = termsEditor.getData();
});
</script>
@endpush