@extends('layouts.main')
@section('content')
<div class="content-wrapper">
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0">Format Nomor Dokumen & Kertas</h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
            <li class="breadcrumb-item active">Pengaturan Dokumen</li>
          </ol>
        </div>
      </div>
    </div>
  </div>

<section class="content">
  <div class="container-fluid">
    @if (session('success'))
      <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if (session('error'))
      <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    <form action="{{ route('settings.dokumen.update') }}" method="POST">
      @csrf
      <div class="card">
        <div class="card-header">
          <h3 class="card-title font-weight-bold">Format Nomor Dokumen</h3>
        </div>
        <div class="card-body">
          <p class="text-muted small mb-3">
            Token yang tersedia:
            <code>{Ymd}</code>=20260823,
            <code>{ymd}</code>=260823,
            <code>{Y}</code>=2026,
            <code>{y}</code>=26,
            <code>{m}</code>=08,
            <code>{d}</code>=23,
            <code>{URUT4}</code>=urutan harian 4 digit (reset tiap hari),
            <code>{SEQ4}</code>=urutan global 4 digit (jalan terus walau ganti hari),
            <code>{ACAK5}</code>=karakter acak 5.
            Contoh: <code>PNW-{Ymd}-{URUT4}</code> menghasilkan <strong>{{ \App\Support\DocNumber::preview('penawaran') }}</strong>
          </p>

          @foreach ($tipe as $key => $label)
            @php $field = 'format_' . $key; @endphp
            <div class="form-group row">
              <label class="col-sm-4 col-form-label" for="{{ $field }}">{{ $label }}</label>
              <div class="col-sm-8">
                <input type="text" name="{{ $field }}" id="{{ $field }}" value="{{ old($field, $setting->$field) }}"
                       class="form-control {{ 'fmt-input' }}" data-key="{{ $key }}">
                <small class="text-muted">Contoh hasil: <span class="contoh-{{ $key }}">{{ $contoh[$key] }}</span></small>
              </div>
            </div>
          @endforeach
        </div>

        <div class="card-header bg-light">
          <h3 class="card-title font-weight-bold">Ukuran Kertas Default</h3>
        </div>
        <div class="card-body">
          <div class="form-group row">
            <label class="col-sm-4 col-form-label" for="kertas_default">Ukuran kertas PDF/print</label>
            <div class="col-sm-8">
              <select name="kertas_default" id="kertas_default" class="form-control" style="width:auto;">
                @foreach (['a4' => 'A4', 'a5' => 'A5', 'letter' => 'Letter', 'legal' => 'Legal'] as $val => $lbl)
                  <option value="{{ $val }}" {{ old('kertas_default', $setting->kertas_default) === $val ? 'selected' : '' }}>{{ $lbl }}</option>
                @endforeach
              </select>
              <small class="text-muted">Dipakai semua laporan/dokumen bila saat cetak tidak memilih ukuran secara manual.</small>
            </div>
          </div>
        </div>

        <div class="card-footer text-right">
          <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Simpan Pengaturan</button>
        </div>
      </div>
    </form>
  </div>
</section>
</div>
<script>
// Preview contoh nomor sederhana di sisi browser (tanpa urutan/asli)
document.querySelectorAll('.fmt-input').forEach(function (input) {
    input.addEventListener('input', function () {
        var key = this.getAttribute('data-key');
        var v = this.value;
        var now = new Date();
        var y = now.getFullYear(), m = String(now.getMonth()+1).padStart(2,'0'), d = String(now.getDate()).padStart(2,'0');
        v = v.replace('{Ymd}', y+''+m+''+d).replace('{ymd}', String(y).slice(2)+m+d)
             .replace('{Y}', y).replace('{y}', String(y).slice(2))
             .replace('{m}', m).replace('{d}', d);
        v = v.replace(/\{URUT\d\}/, '0001').replace(/\{SEQ\d\}/, '0006').replace(/\{ACAK\d\}/, 'XXXXX');
        v = v.replace(/\{[^}]*\}/g, '');
        var el = document.querySelector('.contoh-' + key);
        if (el) el.textContent = v;
    });
});
</script>
@endsection