@extends('layouts.app')
@section('title', 'Configure Numbering')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{{ route('admin.voucher-numbering.index') }}">Voucher Numbering</a></li>
    <li class="breadcrumb-item active">{{ $label }}</li>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Configure: {{ $label }}</h1>
        <p class="page-subtitle">Set numbering format for this document type</p>
    </div>
    <a href="{{ route('admin.voucher-numbering.index') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i>Back
    </a>
</div>

<div class="row g-4">
    <div class="col-12 col-xl-7">
        <div class="card">
            <div class="card-header"><i class="bi bi-hash me-2 text-primary"></i>Numbering Format</div>
            <div class="card-body">
                <form method="POST" action="{{ route('admin.voucher-numbering.update', $voucherType) }}" id="vnForm">
                @csrf @method('PUT')
                <div class="row g-3">
                    <div class="col-6">
                        <label class="form-label">Prefix</label>
                        <input type="text" name="prefix" id="prefix"
                               class="form-control text-uppercase @error('prefix') is-invalid @enderror"
                               value="{{ old('prefix', $setting->prefix) }}"
                               placeholder="e.g. INV" maxlength="20"
                               style="text-transform:uppercase">
                        <div class="form-text">Appears before the number. Alphanumeric only.</div>
                        @error('prefix')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-6">
                        <label class="form-label">Suffix</label>
                        <input type="text" name="suffix" id="suffix"
                               class="form-control @error('suffix') is-invalid @enderror"
                               value="{{ old('suffix', $setting->suffix) }}"
                               placeholder="e.g. SL" maxlength="20">
                        <div class="form-text">Appears after the number. Alphanumeric only.</div>
                        @error('suffix')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-4">
                        <label class="form-label">Separator <span class="required">*</span></label>
                        <select name="separator" id="separator" class="form-select">
                            <option value="-"  {{ old('separator',$setting->separator) === '-'  ? 'selected':'' }}>Dash ( - )</option>
                            <option value="/"  {{ old('separator',$setting->separator) === '/'  ? 'selected':'' }}>Slash ( / )</option>
                            <option value="."  {{ old('separator',$setting->separator) === '.'  ? 'selected':'' }}>Dot ( . )</option>
                            <option value=""   {{ old('separator',$setting->separator) === ''   ? 'selected':'' }}>None</option>
                        </select>
                    </div>
                    <div class="col-4">
                        <label class="form-label">Number Padding <span class="required">*</span></label>
                        <select name="padding_digits" id="padding" class="form-select">
                            @foreach([3,4,5,6,7,8] as $p)
                            <option value="{{ $p }}" {{ old('padding_digits',$setting->padding_digits) == $p ? 'selected':'' }}>
                                {{ $p }} digits ({{ str_repeat('0',$p) }})
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-4">
                        <label class="form-label">Starting Number <span class="required">*</span></label>
                        <input type="number" name="starting_number" class="form-control"
                               value="{{ old('starting_number', $setting->starting_number) }}" min="1" required>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Include in Number</label>
                        <div class="d-flex gap-4 mt-1">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="include_year"
                                       value="1" id="incYear"
                                       {{ old('include_year', $setting->include_year) ? 'checked':'' }}>
                                <label class="form-check-label" for="incYear">Year ({{ date('Y') }})</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="include_month"
                                       value="1" id="incMonth"
                                       {{ old('include_month', $setting->include_month) ? 'checked':'' }}>
                                <label class="form-check-label" for="incMonth">Month ({{ date('m') }})</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Reset Counter</label>
                        <select name="reset_period" class="form-select">
                            <option value="never"   {{ old('reset_period',$setting->reset_period) === 'never'   ? 'selected':'' }}>Never</option>
                            <option value="yearly"  {{ old('reset_period',$setting->reset_period) === 'yearly'  ? 'selected':'' }}>Every Year</option>
                            <option value="monthly" {{ old('reset_period',$setting->reset_period) === 'monthly' ? 'selected':'' }}>Every Month</option>
                        </select>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Assign Number On</label>
                        <select name="number_on" class="form-select">
                            <option value="draft"    {{ old('number_on',$setting->number_on) === 'draft'    ? 'selected':'' }}>Draft Save</option>
                            <option value="approval" {{ old('number_on',$setting->number_on) === 'approval' ? 'selected':'' }}>Approval / Post</option>
                        </select>
                        <div class="form-text">When should the sequential number be assigned?</div>
                    </div>
                    <div class="col-12">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="allow_manual"
                                   value="1" id="allowManual"
                                   {{ old('allow_manual', $setting->allow_manual) ? 'checked':'' }}>
                            <label class="form-check-label" for="allowManual">
                                Allow manual override of voucher number when creating
                            </label>
                        </div>
                    </div>
                    <div class="col-12 d-flex gap-3 justify-content-end">
                        <a href="{{ route('admin.voucher-numbering.index') }}" 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 Configuration
                        </button>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-12 col-xl-5">
        <div class="card mb-4">
            <div class="card-header"><i class="bi bi-eye me-2 text-primary"></i>Live Preview</div>
            <div class="card-body text-center py-5">
                <div class="text-muted mb-2" style="font-size:13px">Next number will look like:</div>
                <div id="previewDisplay" class="fw-700 text-primary" style="font-size:28px;letter-spacing:1px">
                    {{ $preview }}
                </div>
                <div class="text-muted mt-2" style="font-size:12px">
                    Current number: {{ $setting->current_number }}
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header"><i class="bi bi-info-circle me-2 text-primary"></i>Format Guide</div>
            <div class="card-body" style="font-size:13px">
                <table class="table table-sm table-borderless mb-0">
                    <tr><td class="text-muted">Example with all options:</td></tr>
                    <tr><td><code>INV-2025-01-0001</code></td></tr>
                    <tr><td class="text-muted pt-2">Structure:</td></tr>
                    <tr><td><code>[Prefix]-[Year]-[Month]-[Number]</code></td></tr>
                    <tr><td class="text-muted pt-2">Your current format:</td></tr>
                    <tr><td><code id="formatDisplay" class="text-primary">{{ $preview }}</code></td></tr>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Live preview via AJAX
const previewUrl = '{{ route("admin.voucher-numbering.preview") }}';
const currentNum = {{ $setting->current_number }};

function updatePreview() {
    const data = {
        prefix:          document.getElementById('prefix').value,
        suffix:          document.getElementById('suffix').value,
        separator:       document.getElementById('separator').value,
        padding_digits:  document.getElementById('padding').value,
        starting_number: document.querySelector('[name="starting_number"]').value,
        include_year:    document.getElementById('incYear').checked ? 1 : 0,
        include_month:   document.getElementById('incMonth').checked ? 1 : 0,
        current_number:  currentNum,
    };
    $.post(previewUrl, data, function(res) {
        document.getElementById('previewDisplay').textContent  = res.preview;
        document.getElementById('formatDisplay').textContent   = res.preview;
    }).fail(() => {});
}

['prefix','suffix','separator','padding','incYear','incMonth'].forEach(id => {
    const el = document.getElementById(id);
    if (el) el.addEventListener('change', updatePreview);
    if (el) el.addEventListener('input', updatePreview);
});
document.querySelector('[name="starting_number"]').addEventListener('input', updatePreview);

document.getElementById('vnForm').addEventListener('submit', function() {
    const btn = document.getElementById('saveBtn');
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Saving...';
    btn.disabled = true;
});
</script>
@endpush