@extends('layouts.app')

@section('subtitle', 'Tambah Jenis Surat')

@section('content_body')
    <!-- Header & Breadcrumbs -->
    <x-page-header 
        title="Tambah Jenis Surat" 
        subtitle="Tambahkan master data jenis surat kependudukan baru ke dalam sistem."
        :breadcrumbs="[
            'Dashboard' => route('dashboard'),
            'Master Surat' => route('master-surat.index'),
            'Tambah Jenis Surat' => route('master-surat.create')
        ]"
    >
        <x-slot name="buttons">
            <a href="{{ route('master-surat.index') }}" class="btn btn-light border mr-2">
                <i class="fas fa-arrow-left mr-1"></i> Batal
            </a>
        </x-slot>
    </x-page-header>

    <div class="row">
        <!-- Kolom Utama: Form Tambah -->
        <div class="col-lg-8 mb-4">
            <div class="card border-0 shadow-sm rounded-xl" style="border-radius: 12px; background: #ffffff;">
                <div class="card-body p-4">
                    <form id="createTemplateForm" action="{{ route('master-surat.store') }}" method="POST">
                        @csrf

                        <div class="row">
                            <!-- Kode Surat -->
                            <div class="col-md-6 mb-3">
                                <label for="kode_surat" class="font-weight-bold text-secondary text-sm">Kode Surat <span class="text-danger">*</span></label>
                                <input type="text" name="kode_surat" id="kode_surat" class="form-control @error('kode_surat') is-invalid @enderror" value="{{ old('kode_surat') }}" placeholder="Contoh: SKP" required style="border-radius: 8px;">
                                @error('kode_surat')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-xs text-muted">Kode surat bersifat unik dan berupa singkatan kapital (misal: SKU, SKD, SKP).</small>
                            </div>

                            <!-- Nama Surat -->
                            <div class="col-md-6 mb-3">
                                <label for="nama_surat" class="font-weight-bold text-secondary text-sm">Nama Surat <span class="text-danger">*</span></label>
                                <input type="text" name="nama_surat" id="nama_surat" class="form-control @error('nama_surat') is-invalid @enderror" value="{{ old('nama_surat') }}" placeholder="Contoh: Surat Keterangan Penghasilan" required style="border-radius: 8px;">
                                @error('nama_surat')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-xs text-muted">Nama dari jenis surat kependudukan.</small>
                            </div>
                        </div>

                        <!-- Judul Surat -->
                        <div class="mb-3">
                            <label for="judul_surat" class="font-weight-bold text-secondary text-sm">Judul Surat <span class="text-danger">*</span></label>
                            <input type="text" name="judul_surat" id="judul_surat" class="form-control @error('judul_surat') is-invalid @enderror" value="{{ old('judul_surat') }}" placeholder="Contoh: SURAT KETERANGAN PENGHASILAN" required style="border-radius: 8px;">
                            @error('judul_surat')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-xs text-muted">Judul resmi yang dicetak pada kepala/kop surat.</small>
                        </div>

                        <!-- Deskripsi (Optional) -->
                        <div class="mb-3">
                            <label for="deskripsi" class="font-weight-bold text-secondary text-sm">Deskripsi (Opsional)</label>
                            <textarea name="deskripsi" id="deskripsi" rows="3" class="form-control @error('deskripsi') is-invalid @enderror" placeholder="Keterangan opsional mengenai fungsi jenis surat ini..." style="border-radius: 8px;">{{ old('deskripsi') }}</textarea>
                            @error('deskripsi')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Status -->
                        <div class="mb-4">
                            <label for="status" class="font-weight-bold text-secondary text-sm">Status <span class="text-danger">*</span></label>
                            <select name="status" id="status" class="form-control @error('status') is-invalid @enderror" required style="border-radius: 8px; width: 100%;">
                                <option value="aktif" {{ old('status', 'aktif') === 'aktif' ? 'selected' : '' }}>Aktif (Tersedia untuk sistem)</option>
                                <option value="nonaktif" {{ old('status') === 'nonaktif' ? 'selected' : '' }}>Tidak Aktif</option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Action Buttons -->
                        <div class="text-right">
                            <a href="{{ route('master-surat.index') }}" class="btn btn-light border mr-2">Batal</a>
                            <button type="submit" class="btn btn-primary font-weight-bold">
                                <i class="fas fa-save mr-1"></i> Simpan
                            </button>
                        </div>

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

        <!-- Kolom Kanan: Panduan -->
        <div class="col-lg-4 mb-4">
            <div class="card border-0 shadow-sm rounded-xl mb-4" style="border-radius: 12px; background: #ffffff;">
                <div class="card-header bg-transparent border-0 pt-4 px-4 pb-0">
                    <h5 class="font-weight-bold text-dark mb-0"><i class="fas fa-info-circle text-info mr-2"></i> Petunjuk</h5>
                </div>
                <div class="card-body px-4 pb-4">
                    <p class="text-secondary text-sm">Ketika Anda menambahkan data jenis surat baru:</p>
                    <ul class="text-secondary text-sm pl-3">
                        <li>Data akan disimpan sebagai master data di dalam sistem.</li>
                        <li>Sistem secara otomatis akan menginisialisasi draf template surat standar menggunakan NIK dan Nama Pemohon.</li>
                        <li>Anda dapat memodifikasi draf isi template tersebut kapan saja melalui halaman <strong>Edit Template Surat</strong>.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(function() {
            // Confirm submit
            $('#createTemplateForm').on('submit', function(e) {
                e.preventDefault();
                let form = this;

                Swal.fire({
                    title: 'Simpan Jenis Surat?',
                    text: 'Apakah Anda yakin ingin menyimpan data jenis surat baru ini?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: 'var(--primary-color, #0F766E)',
                    cancelButtonColor: '#64748b',
                    confirmButtonText: 'Ya, Simpan!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        });
    </script>
@endpush