@extends('layouts.app')

@section('title', 'Tambah Donatur Baru')

@section('content')
    <div class="nk-content nk-content-fluid">
        <div class="container-xl wide-xl">
            <div class="nk-content-inner">
                <div class="nk-content-body">
                    <div class="nk-block-head nk-block-head-sm">
                        <div class="nk-block-between">
                            <div class="nk-block-head-content">
                                <h3 class="nk-block-title page-title">Tambah Donatur Baru</h3>
                                <div class="nk-block-des text-soft">
                                    <p>Formulir untuk menambahkan donatur baru.</p>
                                </div>
                            </div>
                            <div class="nk-block-head-content">
                                <a href="{{ route('yayasan.master.donatur.index') }}" class="btn btn-outline-light bg-white d-sm-inline-flex">
                                    <em class="icon ni ni-arrow-left"></em>
                                    <span>Kembali ke Daftar Donatur</span>
                                </a>
                                <a href="{{ route('yayasan.master.donatur.index') }}" class="btn btn-icon btn-outline-light bg-white d-inline-flex d-sm-none">
                                    <em class="icon ni ni-arrow-left"></em>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="nk-block">
                        <div class="card card-bordered">
                            <div class="card-inner">
                                <form action="{{ route('yayasan.master.donatur.store') }}" method="POST">
                                    @csrf

                                    <div class="row g-gs">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-label" for="nama">Nama Donatur <span class="text-danger">*</span></label>
                                                <div class="form-control-wrap">
                                                    <input type="text" class="form-control @error('nama') is-invalid @enderror" id="nama" name="nama" value="{{ old('nama') }}" required>
                                                </div>
                                                @error('nama')
                                                    <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                         <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-label" for="jenis_identitas">Jenis Identitas</label>
                                                <div class="form-control-wrap">
                                                     {{-- Anda bisa ganti ini dengan dropdown/select jika jenis identitas sudah fix --}}
                                                    <input type="text" class="form-control @error('jenis_identitas') is-invalid @enderror" id="jenis_identitas" name="jenis_identitas" value="{{ old('jenis_identitas') }}">
                                                </div>
                                                @error('jenis_identitas')
                                                    <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                         <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-label" for="nomor_identitas">Nomor Identitas</label>
                                                <div class="form-control-wrap">
                                                    <input type="text" class="form-control @error('nomor_identitas') is-invalid @enderror" id="nomor_identitas" name="nomor_identitas" value="{{ old('nomor_identitas') }}">
                                                </div>
                                                @error('nomor_identitas')
                                                    <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-label" for="telepon">Telepon</label>
                                                <div class="form-control-wrap">
                                                    <input type="text" class="form-control @error('telepon') is-invalid @enderror" id="telepon" name="telepon" value="{{ old('telepon') }}">
                                                </div>
                                                @error('telepon')
                                                    <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                         <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-label" for="email">Email</label>
                                                <div class="form-control-wrap">
                                                    <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}">
                                                </div>
                                                @error('email')
                                                    <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="form-label" for="alamat">Alamat Lengkap</label>
                                                <div class="form-control-wrap">
                                                    <textarea class="form-control @error('alamat') is-invalid @enderror" id="alamat" name="alamat">{{ old('alamat') }}</textarea>
                                                </div>
                                                 @error('alamat')
                                                    <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-label" for="negara">Negara</label>
                                                <div class="form-control-wrap">
                                                    <select class="form-control select2" id="negara" name="negara">
                                                        <option value="">Pilih Negara</option>
                                                    </select>
                                                </div>
                                                @error('negara')
                                                    <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-label" for="provinsi">Provinsi</label>
                                                <div class="form-control-wrap">
                                                    <select class="form-control select2" id="provinsi" name="provinsi">
                                                        <option value="">Pilih Provinsi</option>
                                                    </select>
                                                </div>
                                                @error('provinsi')
                                                    <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-label" for="kota">Kota/Kabupaten</label>
                                                <div class="form-control-wrap">
                                                    <select class="form-control select2" id="kota" name="kota">
                                                        <option value="">Pilih Kota/Kabupaten</option>
                                                    </select>
                                                </div>
                                                @error('kota')
                                                    <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-label" for="kode_pos">Kode Pos</label>
                                                <div class="form-control-wrap">
                                                    <input type="text" class="form-control @error('kode_pos') is-invalid @enderror" id="kode_pos" name="kode_pos" value="{{ old('kode_pos') }}">
                                                </div>
                                                @error('kode_pos')
                                                    <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-group">
                                                <button type="submit" class="btn btn-lg btn-primary">Simpan Donatur</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        $('.select2').select2();

        // Set initial disabled state
        $('#provinsi').prop('disabled', true);
        $('#kota').prop('disabled', true);

        // Load negara
        $.get('/api/negara', function(data) {
            data.forEach(function(item) {
                $('#negara').append(new Option(item.nama_negara, item.id));
            });
        });

        $('#negara').on('change', function() {
            var negaraId = $(this).val();
            $('#provinsi').empty().append(new Option('Pilih Provinsi', ''));
            $('#kota').empty().append(new Option('Pilih Kota/Kabupaten', ''));
            $('#provinsi').prop('disabled', !negaraId);
            $('#kota').prop('disabled', true);

            if (negaraId) {
                $.get('/api/provinsi/' + negaraId, function(data) {
                    data.forEach(function(item) {
                        var titleCase = item.nama_provinsi.toLowerCase().split(' ').map(function(word) {
                            return word.charAt(0).toUpperCase() + word.slice(1);
                        }).join(' ');
                        $('#provinsi').append(new Option(titleCase, item.id));
                    });
                });
            }
        });

        $('#provinsi').on('change', function() {
            var provinsiId = $(this).val();
            $('#kota').empty().append(new Option('Pilih Kota/Kabupaten', ''));
            $('#kota').prop('disabled', !provinsiId);

            if (provinsiId) {
                $.get('/api/kabupaten-kota/' + provinsiId, function(data) {
                    data.forEach(function(item) {
                        data.forEach(function(item) {
                            var titleCase = item.nama_kabkota.toLowerCase().split(' ').map(function(word) {
                                return word.charAt(0).toUpperCase() + word.slice(1);
                            }).join(' ');
                            $('#kota').append(new Option(titleCase, item.id));
                        });
                    });
                });
            }
        });
    });
</script>

@endpush