@extends('layouts.admin.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-12 col-md-6">
            <div class="card shadow-sm">
                <div class="card-header">
                    <h4>Tambah Afiliasi</h4>
                </div>
                <div class="card-body">
                    <form id="formJenisUmroh">
                        @csrf
                        <div class="mb-3">
                            <label for="nama" class="form-label">Nama</label>
                            <input type="text" class="form-control" id="nama" name="nama" required>
                            <div class="invalid-feedback">Nama wajib diisi</div>
                        </div>
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </form>

                    <div id="notif" class="mt-3"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('formJenisUmroh').addEventListener('submit', async function(e) {
    e.preventDefault();
    const form = e.target;
    const notif = document.getElementById('notif');
    
    // Reset notifikasi dan validasi
    notif.innerHTML = '';
    document.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));

    // Validasi client-side
    let isValid = true;
    const requiredFields = ['nama'];
    
    requiredFields.forEach(field => {
        const input = document.getElementById(field);
        if (!input.value.trim()) {
            input.classList.add('is-invalid');
            isValid = false;
        }
    });

    if (!isValid) {
        notif.innerHTML = '<div class="alert alert-danger">Terdapat kesalahan dalam form. Silakan periksa kembali.</div>';
        return;
    }

    try {
        // Kirim data jika validasi lolos
        const formData = new FormData(form);
        const response = await fetch("{{ route('jenis_umroh.store') }}", {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(Object.fromEntries(formData))
        });

        const data = await response.json();

        if (response.status) {
            swal("Success!", "Create berhasil,", "success");
        } else {
            swal("Failed!", "Create gagal", "danger");
        }
    } catch (error) {
        console.error('Error:', error);
        notif.innerHTML = '<div class="alert alert-danger">Terjadi kesalahan saat mengirim data</div>';
    }
});
</script>
@endsection