{{-- resources/views/settings/tax-rates.blade.php --}}
@extends('layouts.app')
@section('title', 'Tax Rates')
@section('page_title', 'Tax Rates')
@section('page_subtitle', 'Configure applicable taxes')

@section('content')

@include('settings.partials.nav')

<div class="row g-3">

    <div class="col-xl-8">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-receipt-cutoff me-2"
                       style="color:var(--clay)"></i>
                    Tax Rates
                </span>
            </div>

            @if($taxRates->isEmpty())
                <div class="card-body text-center py-4">
                    <p class="text-muted mb-0" style="font-size:.8rem;">
                        No tax rates configured
                    </p>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Code</th>
                                <th>Rate</th>
                                <th>Active</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($taxRates as $tax)
                                <tr>
                                    <td>
                                        <div class="fw-semibold"
                                             style="font-size:.83rem;">
                                            {{ $tax->name }}
                                        </div>
                                        @if($tax->description)
                                            <div style="font-size:.7rem;
                                                        color:var(--muted);">
                                                {{ $tax->description }}
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        <span style="font-size:.75rem;
                                                     background:var(--bg);
                                                     padding:2px 8px;
                                                     border-radius:4px;
                                                     font-weight:600;">
                                            {{ $tax->code }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="fw-bold"
                                              style="color:var(--clay);">
                                            {{ $tax->rate }}%
                                        </span>
                                    </td>
                                    <td>
                                        @if($tax->is_active)
                                            <i class="bi bi-check-circle-fill"
                                               style="color:var(--success)"></i>
                                        @else
                                            <i class="bi bi-x-circle"
                                               style="color:var(--muted)"></i>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="d-flex gap-1">
                                            <button class="btn btn-xs btn-outline-secondary"
                                                    onclick="editTax({{ $tax->id }}, '{{ $tax->name }}', '{{ $tax->code }}', {{ $tax->rate }}, '{{ $tax->description }}', {{ $tax->is_active ? 1 : 0 }})">
                                                <i class="bi bi-pencil"></i>
                                            </button>
                                            <form method="POST"
                                                  action="{{ tenant_route('settings.tax-rates.destroy', ['taxRate' => $tax->id]) }}"
                                                  onsubmit="return confirm('Delete this tax rate?')">
                                                @csrf @method('DELETE')
                                                <button class="btn btn-xs btn-outline-danger"
                                                        type="submit">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>

    <div class="col-xl-4">
        <div class="card" id="taxFormCard">
            <div class="card-header">
                <span class="card-title" id="taxFormTitle">
                    Add Tax Rate
                </span>
            </div>
            <div class="card-body">
                <form method="POST"
                      id="taxForm"
                      action="{{ tenant_route('settings.tax-rates.store') }}">
                    @csrf
                    <input type="hidden" name="_method" id="taxMethod" value="POST">

                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Name <span class="text-danger">*</span>
                        </label>
                        <input type="text" name="name" id="taxName"
                               class="form-control @error('name') is-invalid @enderror"
                               placeholder="e.g. VAT"
                               value="{{ old('name') }}" required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Code <span class="text-danger">*</span>
                        </label>
                        <input type="text" name="code" id="taxCode"
                               class="form-control"
                               placeholder="e.g. VAT, LEVY"
                               value="{{ old('code') }}" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Rate (%) <span class="text-danger">*</span>
                        </label>
                        <div class="input-group">
                            <input type="number" name="rate" id="taxRate"
                                   class="form-control"
                                   value="{{ old('rate', 15) }}"
                                   min="0" max="100" step="0.01" required>
                            <span class="input-group-text">%</span>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Description</label>
                        <input type="text" name="description" id="taxDescription"
                               class="form-control"
                               placeholder="e.g. Zimbabwe VAT"
                               value="{{ old('description') }}">
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit"
                                class="btn btn-primary btn-sm">
                            Save Tax Rate
                        </button>
                        <button type="button"
                                onclick="resetTaxForm()"
                                class="btn btn-outline-secondary btn-sm">
                            Reset
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Common ZW taxes --}}
        <div class="card mt-3">
            <div class="card-header">
                <span class="card-title" style="font-size:.78rem;">
                    Common Zimbabwe Taxes
                </span>
            </div>
            <div class="card-body" style="padding:12px;">
                @foreach([
                    ['VAT', 'VAT', 15, 'Value Added Tax'],
                    ['LEVY', 'TOURISM', 2, 'Tourism Levy'],
                    ['LEVY', 'RDLEVY', 1.5, 'Rural District Council Levy'],
                ] as [$code, $name, $rate, $desc])
                    <div style="display:flex;justify-content:space-between;
                                align-items:center;font-size:.78rem;
                                padding:5px 0;
                                border-bottom:1px solid var(--border);">
                        <div>
                            <span class="fw-semibold">{{ $name }}</span>
                            <span style="color:var(--muted);font-size:.7rem;">
                                — {{ $rate }}%
                            </span>
                        </div>
                        <button type="button"
                                onclick="fillTax('{{ $name }}', '{{ $code }}', {{ $rate }}, '{{ $desc }}')"
                                class="btn btn-xs btn-outline-secondary">
                            Use
                        </button>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

</div>

@endsection

@push('scripts')
<script>
function fillTax(name, code, rate, desc) {
    document.getElementById('taxName').value = name;
    document.getElementById('taxCode').value = code;
    document.getElementById('taxRate').value = rate;
    document.getElementById('taxDescription').value = desc;
    document.getElementById('taxName').focus();
}

function editTax(id, name, code, rate, desc, active) {
    document.getElementById('taxFormTitle').textContent = 'Edit Tax Rate';
    document.getElementById('taxMethod').value = 'PUT';
    document.getElementById('taxName').value = name;
    document.getElementById('taxCode').value = code;
    document.getElementById('taxRate').value = rate;
    document.getElementById('taxDescription').value = desc;

    const form = document.getElementById('taxForm');
    form.action = form.action.replace(/\/tax-rates\/\d+$/, '')
        + '/tax-rates/' + id;
    form.querySelector('[name="_method"]').value = 'PUT';

    document.getElementById('taxFormCard').scrollIntoView({ behavior: 'smooth' });
}

function resetTaxForm() {
    document.getElementById('taxFormTitle').textContent = 'Add Tax Rate';
    document.getElementById('taxForm').reset();
    document.getElementById('taxMethod').value = 'POST';
    document.getElementById('taxForm').action =
        '{{ tenant_route('settings.tax-rates.store') }}';
}
</script>
@endpush