@section('title', $title)
@push('css_file')
    <link rel="stylesheet" href="{{ asset('assets/css/plugins/flatpickr.min.css') }}" />
@endpush
<x-app-layout>
    <x-slot name="header_link">
        <a href="/dashboard">Dashboard</a>
    </x-slot>

    <x-slot name="header_sub_link">
        <a href="javascript:history.back();">Daftar Penduduk</a>
    </x-slot>

    <x-slot name="header_parent">
        @yield('title')
    </x-slot>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-sm-flex align-items-center justify-content-between">
                        <h5 class="mb-0">@yield('title')</h5>
                        <div>
                            <a href="javascript:history.back();" class="btn btn-outline-secondary">Kembali</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    {{ $errors->has('error') ? '<div class="alert alert-danger">' . $errors->first('error') . '</div>' : '' }}
                    <form action="{{ route('penduduk.post') }}" method="post" class="formSubmit">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <x-input-label value="NIK (Nomor Induk Kependudukan)" required="true"
                                        for="nik" />
                                    <x-text-input type="number" name="nik" :value="old('nik')" placeholder="Isi NIK"
                                        required />
                                    <x-input-error :messages="$errors->get('nik')" />
                                </div>

                                <div class="mb-3">
                                    <x-input-label value="No. BPJS" required="true" for="bpjs" />
                                    <x-text-input type="number" name="bpjs" :value="old('bpjs')"
                                        placeholder="Isi No. BPJS" required />
                                    <x-input-error :messages="$errors->get('bpjs')" />
                                </div>

                                <div class="mb-3">
                                    <x-input-label value="Nama Lengkap" required="true" for="name" />
                                    <x-text-input type="text" name="name" :value="old('name')"
                                        placeholder="Isi nama lengkap" required />
                                    <x-input-error :messages="$errors->get('name')" />
                                </div>

                                <div class="mb-3">
                                    <x-input-label value="No. Telp/Hp" required="true" for="phone" />
                                    <x-text-input type="text" name="phone" :value="old('phone')"
                                        placeholder="Isi No. Telp/Hp" required />
                                    <x-input-error :messages="$errors->get('phone')" />
                                </div>

                                <div class="mb-3">
                                    <x-input-label value="Tempat Lahir" required="true" for="tempat_lahir" />
                                    <x-text-input type="text" name="tempat_lahir" id="tempat_lahir" :value="old('tempat_lahir')"
                                        placeholder="Isi tempat lahir disini ..." required />
                                    <x-input-error :messages="$errors->get('tempat_lahir')" />
                                </div>

                                <div class="mb-3">
                                    <x-input-label value="Nama Ayah" required="true" for="nama_ayah" />
                                    <x-text-input type="text" name="nama_ayah" :value="old('nama_ayah')"
                                        placeholder="Isi Nama Ayah" required />
                                    <x-input-error :messages="$errors->get('nama_ayah')" />
                                </div>

                            </div>
                            <div class="col-md-6">

                                <div class="mb-3">
                                    <x-input-label value="Status Pernikahan" required="true" for="status_pernikahan" />
                                    <select class="form-select" name="status_pernikahan" id="status_pernikahan"
                                        required>
                                        @foreach ($status as $item => $value)
                                            <option value="{{ $item }}"
                                                {{ old('status_pernikahan') == $item ? 'selected' : '' }}>
                                                {{ $value }}</option>
                                        @endforeach
                                    </select>
                                    <x-input-error :messages="$errors->get('status_pernikahan')" />
                                </div>

                                <div class="mb-3">
                                    <x-input-label value="Pekerjaan" required="true" for="pekerjaan" />
                                    <x-text-input type="text" name="pekerjaan" :value="old('pekerjaan')"
                                        placeholder="Isi Pekerjaan" required />
                                    <x-input-error :messages="$errors->get('pekerjaan')" />
                                </div>

                                <div class="mb-3">
                                    <x-input-label value="Agama" required="true" for="agama" />
                                    <select class="form-select" name="agama" id="agama" required>
                                        <option value="">--Pilih--</option>
                                        @foreach ($agama as $item)
                                            <option value="{{ $item }}"
                                                {{ old('agama') == $item ? 'selected' : '' }}>{{ $item }}</option>
                                        @endforeach
                                    </select>
                                    <x-input-error :messages="$errors->get('agama')" />
                                </div>

                                <div class="mb-3">
                                    <x-input-label value="Alamat" required="true" for="alamat" />
                                    <textarea name="alamat" placeholder="Isi Alamat" id="alamat" class="form-control" required>{!! old('alamat') !!}</textarea>
                                    <x-input-error :messages="$errors->get('alamat')" />
                                </div>

                                <div class="mb-3">
                                    <x-input-label value="Kecamatan" required="true" for="sub_district" />
                                    <select class="form-select" data-trigger name="sub_district" id="sub_district">
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <x-input-label value="Kelurahan" required="true" for="code_village" />
                                    <select class="form-select" data-trigger name="code_village" id="code_village">
                                    </select>
                                    <x-input-error :messages="$errors->get('code_village')" />
                                </div>

                            </div>

                            <div class="col-md-12 text-end">
                                <x-primary-button id="btnSimpan">Simpan</x-primary-button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- [ Main Content ] end -->
    @include('admin.apps.master.penduduk.includes.action_js')
    @include('admin.apps.master.penduduk.includes.choice_add_js')
</x-app-layout>