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

@push('head')
@include('admin.invoices._invoice-form-styles')
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google.maps_api_key') }}&libraries=places" async defer></script>
<style>
.content { width:100%; margin-top:5px; }
#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')
<section class="content">
    <div class="container-fluid">

        <div class="d-flex justify-content-between align-items-center mb-2">
            <h3 class="main-heading mb-0">Invoices</h3>
            <a href="{{ route('admin.invoices.create') }}" class="btn btn-dark btn-sm">+ Create Invoice</a>
        </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(session('error'))
            <div class="alert alert-danger alert-dismissible fade show">{{ session('error') }}<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

        {{-- Outer Tabs --}}
        <ul class="nav nav-tabs" id="invoiceTabs">
            <li class="nav-item">
                <a class="nav-link active" id="invoices-tab" href="#invoicesTab" data-bs-toggle="tab">Invoices</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="settings-tab" href="#settingsTab" data-bs-toggle="tab">Invoice Settings</a>
            </li>
        </ul>

        <div class="tab-content">

            {{-- ===== INVOICES TAB ===== --}}
            <div class="tab-pane fade show active" id="invoicesTab">
                <div class="card mb-3">
                    <div class="card-body py-2">
                        <form method="GET" action="{{ route('admin.invoices.index') }}" class="row g-2 align-items-end">
                            <div class="col-lg-3 col-md-6">
                                <label class="form-label mb-1 small text-muted">Search</label>
                                <input type="text" name="search" value="{{ request('search') }}"
                                       class="form-control form-control-sm"
                                       placeholder="Invoice #, customer, email, phone...">
                            </div>
                            <div class="col-lg-2 col-md-3 col-6">
                                <label class="form-label mb-1 small text-muted">From Date</label>
                                <input type="date" name="date_from" value="{{ request('date_from') }}"
                                       class="form-control form-control-sm">
                            </div>
                            <div class="col-lg-2 col-md-3 col-6">
                                <label class="form-label mb-1 small text-muted">To Date</label>
                                <input type="date" name="date_to" value="{{ request('date_to') }}"
                                       class="form-control form-control-sm">
                            </div>
                            <div class="col-lg-2 col-md-4 col-6">
                                <label class="form-label mb-1 small text-muted">Status</label>
                                <select name="status" class="form-select form-select-sm">
                                    <option value="">All Status</option>
                                    <option value="paid" {{ request('status') === 'paid' ? 'selected' : '' }}>Paid</option>
                                    <option value="unpaid" {{ request('status') === 'unpaid' ? 'selected' : '' }}>Unpaid</option>
                                </select>
                            </div>
                            <div class="col-lg-3 col-md-8 col-12 d-flex gap-2">
                                <button type="submit" class="btn btn-secondary btn-sm">Filter</button>
                                @if(request()->filled('search') || request()->filled('date_from') || request()->filled('date_to') || request()->filled('status'))
                                    <a href="{{ route('admin.invoices.index') }}" class="btn btn-outline-secondary btn-sm">Clear</a>
                                @endif
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card mb-3">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                    <table class="table table-striped table-hover mb-0 admin-data-table inv-list-table">
                        <thead class="table-dark">
                            <tr>
                                <th>Invoice #</th><th>Customer</th><th>Date</th><th>Total</th><th>Payment</th><th>Status</th><th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($invoices as $inv)
                            <tr>
                                <td data-label="Invoice #"><span class="inv-cell-content"><strong>{{ $inv->invoice_number }}</strong></span></td>
                                <td data-label="Customer"><span class="inv-cell-content">{{ $inv->customer_name }}@if($inv->customer_email)<br><small class="text-muted d-block inv-cell-email">{{ $inv->customer_email }}</small>@endif</span></td>
                                <td data-label="Date"><span class="inv-cell-content">{{ $inv->invoice_date->format('d M Y') }}</span></td>
                                <td data-label="Total"><span class="inv-cell-content"><strong>${{ number_format($inv->total, 2) }}</strong></span></td>
                                <td data-label="Payment"><span class="inv-cell-content">{{ \App\Models\Invoice::paymentModes()[$inv->payment_mode] ?? $inv->payment_mode }}</span></td>
                                <td data-label="Status"><span class="inv-cell-content"><span class="badge bg-{{ $inv->status === 'paid' ? 'success' : 'warning' }}">{{ ucfirst($inv->status) }}</span></span></td>
                                <td data-label="Actions">
                                    <div class="admin-table-actions">
                                        <a href="{{ route('admin.invoices.show', $inv) }}" class="btn btn-sm btn-invoice">View</a>
                                        <a href="{{ route('admin.invoices.pdf', $inv) }}" class="btn btn-sm btn-invoice">PDF</a>
                                        <form method="POST" action="{{ route('admin.invoices.send-email', $inv) }}">@csrf
                                            <button type="submit" class="btn btn-sm btn-invoice" onclick="return confirm('Send invoice to {{ $inv->customer_email }}?')">Email</button>
                                        </form>
                                        <a href="{{ route('admin.invoices.edit', $inv) }}" class="btn btn-sm btn-warning">Edit</a>
                                        <form method="POST" action="{{ route('admin.invoices.destroy', $inv) }}" onsubmit="return confirm('Delete?')">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="7" class="text-center py-4 text-muted">
                                @if(request()->filled('search') || request()->filled('date_from') || request()->filled('date_to') || request()->filled('status'))
                                    No invoices match your filters.
                                @else
                                    No invoices found.
                                @endif
                            </td></tr>
                            @endforelse
                        </tbody>
                    </table>
                        </div>
                    </div>
                </div>
                <div class="admin-pagination">{{ $invoices->onEachSide(1)->links() }}</div>
            </div>

            {{-- ===== INVOICE SETTINGS TAB ===== --}}
            <div class="tab-pane fade" id="settingsTab">
                <div class="bg-white p-3">

                    {{-- Inner 3 tabs (nav-tabs for site theme) --}}
                    <ul class="nav nav-tabs mb-3" id="settingsInnerTabs">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#stBusiness">Business Detail</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#stTax">Tax Detail</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#stTerms">Logo &amp; Terms</a>
                        </li>
                    </ul>

                    <div class="tab-content">

                        {{-- ── Business Detail ── --}}
                        <div class="tab-pane fade show active" id="stBusiness">
                            <form method="POST" action="{{ route('admin.invoice-settings.update') }}" enctype="multipart/form-data">
                                @csrf @method('PUT')
                                <input type="hidden" name="_inner_tab" value="business">
                                <div class="row g-3 mt-1">
                                    <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>
                                    <div class="col-12"><hr><small class="fw-bold text-muted text-uppercase">Business Address</small></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) }}">
                                    </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) }}">
                                    </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) }}">
                                    </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) }}">
                                    </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) }}">
                                    </div>
                                    <div class="col-12 mt-2">
                                        <button type="submit" class="btn btn-dark px-4">Save Business Details</button>
                                    </div>
                                </div>
                            </form>
                        </div>

                        {{-- ── Tax Detail ── --}}
                        <div class="tab-pane fade" id="stTax">
                            <form method="POST" action="{{ route('admin.invoice-settings.update') }}">
                                @csrf @method('PUT')
                                <input type="hidden" name="_inner_tab" value="tax">
                                <div class="row g-3 mt-1">
                                    <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" {{ $setting->gst_registered ? '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" {{ !$setting->gst_registered ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="gst_no">No</label>
                                                </div>
                                            </div>
                                            <div id="gstNumberSection" style="{{ $setting->gst_registered ? '' : 'display:none;' }}">
                                                <label class="form-label fw-bold">GST Number</label>
                                                <input type="text" name="gst_number" class="form-control" value="{{ $setting->gst_number }}" placeholder="e.g. 741971238RT0001">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="border rounded p-3">
                                            <label class="form-label fw-bold mb-2">PST/HST 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" {{ $setting->pst_registered ? '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" {{ !$setting->pst_registered ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="pst_no">No</label>
                                                </div>
                                            </div>
                                            <div id="pstNumberSection" style="{{ $setting->pst_registered ? '' : 'display:none;' }}">
                                                <div class="mb-2">
                                                    <label class="form-label fw-bold mb-1">Type</label>
                                                    <select name="pst_hst_type" class="form-select form-select-sm">
                                                        <option value="PST" {{ ($setting->hst_registered ?? false) ? '' : 'selected' }}>PST</option>
                                                        <option value="HST" {{ ($setting->hst_registered ?? false) ? 'selected' : '' }}>HST</option>
                                                    </select>
                                                </div>
                                                <label class="form-label fw-bold">Number</label>
                                                <input type="text" name="pst_number" class="form-control" value="{{ $setting->pst_number }}" placeholder="e.g. PST-1234 or HST No.">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="border rounded p-3 h-100">
                                            <label class="form-label fw-bold mb-2">Discount Type</label>
                                            <p class="text-muted small mb-3">Only one discount type can be used on invoices — per line item or overall on the whole invoice.</p>
                                            <div class="form-check mb-2">
                                                <input class="form-check-input" type="radio" name="discount_mode" id="discount_mode_line" value="line_item"
                                                    {{ old('discount_mode', $setting->discount_mode ?? 'line_item') === 'line_item' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="discount_mode_line">Line Item Discount</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="discount_mode" id="discount_mode_overall" value="overall"
                                                    {{ old('discount_mode', $setting->discount_mode ?? 'line_item') === 'overall' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="discount_mode_overall">Overall Discount</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 mt-2">
                                        <button type="submit" class="btn btn-dark px-4">Save Tax Details</button>
                                    </div>
                                </div>
                            </form>
                        </div>

                        {{-- ── Logo & Terms ── --}}
                        <div class="tab-pane fade" id="stTerms">
                            <form method="POST" action="{{ route('admin.invoice-settings.update') }}" enctype="multipart/form-data" id="termsForm">
                                @csrf @method('PUT')
                                <input type="hidden" name="_inner_tab" value="terms">
                                <div class="row g-3 mt-1">
                                    <div class="col-12"><small class="fw-bold text-muted text-uppercase">Logo</small></div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-bold">Upload Logo <small class="text-muted">(max 2MB)</small></label>
                                        <input type="file" name="logo" id="logoInput" class="form-control" accept="image/*">
                                        <div id="logoPreviewWrap" style="display:none;margin-top:8px;">
                                            <small class="text-muted d-block mb-1">New logo preview:</small>
                                            <img id="logoPreviewImg" src="" alt="Logo Preview" style="max-height:80px;">
                                        </div>
                                        @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;">
                                            </div>
                                        @else
                                            <small class="text-muted d-block mt-1">No logo uploaded. Default will be used.</small>
                                        @endif
                                    </div>
                                    <div class="col-12"><hr><small class="fw-bold text-muted text-uppercase">Terms &amp; Conditions</small></div>
                                    <div class="col-12">
                                        <textarea name="terms_conditions" id="terms_conditions" class="form-control" rows="8">{{ 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 Logo &amp; Terms</button>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>{{-- end inner tab-content --}}
                </div>
            </div>

        </div>{{-- end outer tab-content --}}
    </div>
</section>
@endsection

@push('scripts')
<script>
// Auto-open settings tab after save or on validation error
(function(){
    const urlParams = new URLSearchParams(window.location.search);
    const hasErrors = {{ $errors->any() ? 'true' : 'false' }};
    if (urlParams.get('tab') === 'settings' || hasErrors) {
        const tab = document.getElementById('settings-tab');
        if (tab) tab.click();

        // Activate correct inner tab
        const innerTabMap = { business: '#stBusiness', tax: '#stTax', terms: '#stTerms' };
        const innerTabKey = urlParams.get('inner_tab') || 'business';
        const innerTabHref = innerTabMap[innerTabKey] || '#stBusiness';
        const innerTabLink = document.querySelector('#settingsInnerTabs a[href="' + innerTabHref + '"]');
        if (innerTabLink) {
            setTimeout(function(){ innerTabLink.click(); }, 50);
        }

        history.replaceState(null, '', window.location.pathname);
    }
})();

// 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';
        };
        reader.readAsDataURL(file);
    }
});

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

// Google Places Autocomplete
function initAutocomplete() {
    const input = document.getElementById('addressAutocomplete');
    if (!input || typeof google === 'undefined') return;
    const ac = new google.maps.places.Autocomplete(input, { types: ['address'] });
    ac.addListener('place_changed', function() {
        const place = ac.getPlace();
        if (!place.address_components) return;
        let sn = '', route = '', city = '', zip = '', country = '';
        place.address_components.forEach(function(c) {
            if (c.types.includes('street_number')) sn = c.long_name;
            if (c.types.includes('route')) route = c.long_name;
            if (c.types.includes('locality')) city = c.long_name;
            if (c.types.includes('administrative_area_level_1') && !city) city = c.long_name;
            if (c.types.includes('postal_code')) zip = c.long_name;
            if (c.types.includes('country')) country = c.long_name;
        });
        const street = [sn, 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;
    });
}
if (typeof google !== 'undefined') { initAutocomplete(); }
else { window.initAutocomplete = initAutocomplete; }
</script>
<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.getElementById('termsForm').addEventListener('submit', function() {
    if (termsEditor) document.querySelector('#terms_conditions').value = termsEditor.getData();
});
</script>
@endpush