@extends('layouts.app')
@section('title', 'Employee Code Format')
@section('page-title', 'Employee Code Format')
@section('page-subtitle', 'Configure auto-generated employee codes per company')
@section('breadcrumbs')
    @include('layouts.components.breadcrumbs', ['items' => [['label' => 'Admin', 'url' => '/admin/dashboard'], ['label' => 'Employee Code Format']]])
@endsection

@section('content')
<div class="max-w-3xl space-y-5">
    {{-- Global Default --}}
    <form method="POST" action="{{ route('admin.employee-code-format.update') }}">
        @csrf
        <div class="card-static animate-fade-up">
            <div class="card-header">
                <h3 class="card-header-title">Global Default Format</h3>
                <span class="badge badge-info">Preview: {{ $globalPreview }}</span>
            </div>
            <div class="card-body">
                <div class="grid grid-cols-3 gap-4">
                    <div>
                        <label class="form-label">Prefix</label>
                        <input type="text" name="prefix" value="{{ $globalFormat['prefix'] }}" class="form-input" maxlength="10" required>
                    </div>
                    <div>
                        <label class="form-label">Separator</label>
                        <select name="separator" class="form-select">
                            <option value="-" {{ $globalFormat['separator'] === '-' ? 'selected' : '' }}>Dash ( - )</option>
                            <option value="_" {{ $globalFormat['separator'] === '_' ? 'selected' : '' }}>Underscore ( _ )</option>
                            <option value="/" {{ $globalFormat['separator'] === '/' ? 'selected' : '' }}>Slash ( / )</option>
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Digits</label>
                        <input type="number" name="digits" value="{{ $globalFormat['digits'] }}" class="form-input" min="2" max="8" required>
                    </div>
                </div>
                <button type="submit" class="btn-primary mt-4">Save Global Default</button>
            </div>
        </div>
    </form>

    {{-- Per-Company Overrides --}}
    <div class="card-static animate-fade-up" style="animation-delay:.1s">
        <div class="card-header"><h3 class="card-header-title">Per-Company Formats</h3></div>
        <div class="overflow-x-auto">
            <table class="data-table">
                <thead><tr><th>Company</th><th>Prefix</th><th>Separator</th><th>Digits</th><th>Preview</th><th class="text-right">Actions</th></tr></thead>
                <tbody>
                    @forelse($companies as $c)
                    <tr>
                        <td class="font-medium text-gray-800">{{ $c->name }}</td>
                        <td><code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">{{ $c->code_format['prefix'] }}</code></td>
                        <td>{{ $c->code_format['separator'] }}</td>
                        <td>{{ $c->code_format['digits'] }}</td>
                        <td><span class="badge badge-draft">{{ $c->code_preview }}</span></td>
                        <td class="text-right">
                            <button type="button" class="btn-ghost" onclick="editCompanyFormat({{ $c->id }}, '{{ $c->code_format['prefix'] }}', '{{ $c->code_format['separator'] }}', {{ $c->code_format['digits'] }})">Edit</button>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="6" class="text-center text-sm text-gray-400 py-8">No companies configured yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Edit Modal --}}
<div x-data="{ show: false, companyId: null, prefix: '', separator: '-', digits: 4 }"
     x-on:edit-code-format.window="show = true; companyId = $event.detail.id; prefix = $event.detail.prefix; separator = $event.detail.separator; digits = $event.detail.digits"
     x-show="show" x-cloak class="modal-backdrop">
    <form method="POST" action="{{ route('admin.employee-code-format.update') }}" class="modal max-w-md">
        @csrf
        <input type="hidden" name="company_id" x-bind:value="companyId">
        <div class="modal-header"><h3 class="font-display text-lg font-semibold text-gray-800">Edit Company Code Format</h3></div>
        <div class="modal-body space-y-4">
            <div>
                <label class="form-label">Prefix</label>
                <input type="text" name="prefix" x-model="prefix" class="form-input" maxlength="10" required>
            </div>
            <div>
                <label class="form-label">Separator</label>
                <select name="separator" x-model="separator" class="form-select">
                    <option value="-">Dash ( - )</option>
                    <option value="_">Underscore ( _ )</option>
                    <option value="/">Slash ( / )</option>
                </select>
            </div>
            <div>
                <label class="form-label">Digits</label>
                <input type="number" name="digits" x-model="digits" class="form-input" min="2" max="8" required>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn-secondary" x-on:click="show = false">Cancel</button>
            <button type="submit" class="btn-primary">Save</button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
function editCompanyFormat(id, prefix, separator, digits) {
    window.dispatchEvent(new CustomEvent('edit-code-format', { detail: { id, prefix, separator, digits } }));
}
</script>
@endpush