@extends('layouts.app')
@section('title', 'AR & AP Settings')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item active">AR & AP Settings</li>
@endsection
@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">AR &amp; AP Settings</h1>
        <p class="page-subtitle">Configure Accounts Receivable and Accounts Payable behaviour</p>
    </div>
</div>

@include('settings._tabs', ['active' => 'arap'])

@if(session('success'))
<div class="alert alert-success alert-dismissible d-flex gap-2 mb-4">
    <i class="bi bi-check-circle flex-shrink-0"></i><div>{{ session('success') }}</div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
</div>
@endif

<form method="POST" action="{{ route('settings.arap.update') }}" id="arapForm">
@csrf @method('PUT')

<div class="row g-4">

    {{-- Pricing --}}
    <div class="col-12 col-xl-6">
        <div class="card h-100">
            <div class="card-header"><i class="bi bi-tags me-2 text-primary"></i>Pricing</div>
            <div class="card-body">

                {{-- Price Levels --}}
                <div class="p-3 rounded-2 border bg-light mb-0">
                    <div class="form-check form-switch mb-1">
                        <input class="form-check-input" type="checkbox" name="price_level_enabled"
                               value="1" id="priceLevel" role="switch"
                               {{ ($settings['price_level_enabled']??'0')==='1' ? 'checked' : '' }}>
                        <label class="form-check-label fw-semibold" for="priceLevel">
                            Use Price Levels
                        </label>
                    </div>
                    <div class="text-muted" style="font-size:12px">
                        When <strong>ON</strong>: customers can be assigned different price tiers
                        (e.g. Retail, Wholesale, VIP). Price level fields appear on customer profiles
                        and sales documents. When <strong>OFF</strong>: all price level features
                        and reports are hidden.
                    </div>
                </div>

            </div>
        </div>
    </div>

    {{-- Aging Calculation --}}
    <div class="col-12 col-xl-6">
        <div class="card h-100">
            <div class="card-header"><i class="bi bi-clock-history me-2 text-primary"></i>Aging Calculation</div>
            <div class="card-body">
                <p class="text-muted mb-3" style="font-size:13px">
                    Choose whether customer and vendor aging is calculated from the
                    Invoice/Bill Date or the Due Date. Aging reports use this setting.
                    If no Due Date is set, the Invoice/Bill Date is used as a fallback.
                </p>
                <div class="row g-3">
                    <div class="col-12 col-sm-6">
                        <label class="form-label fw-semibold">Customer Aging Basis</label>
                        <select name="customer_aging_basis" class="form-select">
                            <option value="invoice_date" {{ ($settings['customer_aging_basis']??'invoice_date')==='invoice_date' ? 'selected' : '' }}>
                                Invoice Date
                            </option>
                            <option value="due_date" {{ ($settings['customer_aging_basis']??'')==='due_date' ? 'selected' : '' }}>
                                Due Date
                            </option>
                        </select>
                    </div>
                    <div class="col-12 col-sm-6">
                        <label class="form-label fw-semibold">Vendor Aging Basis</label>
                        <select name="vendor_aging_basis" class="form-select">
                            <option value="bill_date" {{ ($settings['vendor_aging_basis']??'bill_date')==='bill_date' ? 'selected' : '' }}>
                                Bill Date
                            </option>
                            <option value="due_date" {{ ($settings['vendor_aging_basis']??'')==='due_date' ? 'selected' : '' }}>
                                Due Date
                            </option>
                        </select>
                    </div>
                    <div class="col-12">
                        <div class="alert alert-info py-2 d-flex gap-2 align-items-start" style="font-size:12.5px">
                            <i class="bi bi-info-circle flex-shrink-0 mt-1"></i>
                            <div>
                                If no Due Date is set on a transaction, the Invoice/Bill Date is used as a fallback.
                                This affects Customer Aging, Vendor Aging, and Overdue reports.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12">
        <div class="d-flex gap-3 justify-content-end">
            <a href="{{ route('dashboard') }}" class="btn btn-outline-secondary">Cancel</a>
            <button type="submit" class="btn btn-primary px-4" id="saveBtn">
                <i class="bi bi-check-circle me-1"></i>Save AR &amp; AP Settings
            </button>
        </div>
    </div>

</div>
</form>
@endsection
@push('scripts')
<script>
document.getElementById('arapForm').addEventListener('submit',function(){
    var btn=document.getElementById('saveBtn');
    btn.innerHTML='<span class="spinner-border spinner-border-sm me-2"></span>Saving...';
    btn.disabled=true;
});
</script>
@endpush