@extends('template.admin.base')

@push('css')
<link href="{{ asset('assets/admin/vendor/libs/select2/select2.css') }}" rel="stylesheet" />
@endpush

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="card-title m-0">Kabupaten/Kota Baru</h5>
            <div id="buttons">
                <a href="{{ route('admin.kabupaten-kota.index') }}" class="btn btn-dark">
                <i class="icon-base ti tabler-arrow-left me-sm-1"></i> Kembali ke Daftar
                </a>
            </div>
        </div>  

        <div class="card-body">
        @if ($errors->any())
            <div class="alert alert-danger d-flex align-items-baseline" role="alert">
                <span class="alert-icon rounded">
                    <i class="icon-base ti tabler-ban icon-md w-px-30"></i>
                </span>
                <div class="d-flex flex-column ps-1">
                    <h5 class="alert-heading mb-2">Input data gagal tervalidasi</h5>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif
        <form id="formCreate" action="{{ route('admin.kabupaten-kota.store') }}" method="POST">
            @csrf
            <div class="row mb-3">
                <div class="col-xl-3 col-md-6 col-sm-6">
                    <label for="nama" class="form-label">Nama Kabupaten/Kota</label>
                    <input type="text" class="form-control" id="nama" name="nama" value="{{ old('nama') }}" />
                </div>
                <div class="col-xl-3 col-md-6 col-sm-6">
                    <label for="kode" class="form-label">Kode Kabupaten/Kota</label>
                    <input type="text" class="form-control" id="kode" name="kode" value="{{ old('kode') }}" />
                </div>
                <div class="col-xl-3 col-md-6 col-sm-6">
                    <label for="provinsi_id" class="form-label">Provinsi</label>
                    <select class="select2 form-select" data-allow-clear="true" id="provinsi_id" name="provinsi_id">
                    </select>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Simpan</button>
        </form>
        </div>
    </div>
</div>
@endsection

@push('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.21.0/jquery.validate.min.js" 
    integrity="sha512-KFHXdr2oObHKI9w4Hv1XPKc898mE4kgYx58oqsc/JqqdLMDI4YjOLzom+EMlW8HFUd0QfjfAvxSL6sEq/a42fQ==" 
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="{{ asset('assets/admin/vendor/libs/select2/select2.js') }}"></script>

<script>
    $(function () {
        $("#provinsi_id").select2({
            placeholder: "Pilih Provinsi",
            allowClear: true,
            ajax: {
                url: "{{ route('admin.provinsi.list') }}",
                type: 'POST',
                data: function (params) {
                    var query = {
                        search: params.term,
                        page: params.page || 1,
                        _token:'{{ csrf_token() }}'
                    }
                    return query;
                },
                processResults: function (data) {
                    var results = $.map(data.data, function (obj) {
                        obj.id = obj.id; 
                        obj.text = obj.kode + ' - ' + obj.nama;

                        return obj;
                    });
                    return {
                        results: results,
                        pagination: {
                            more: data.last_page > data.current_page
                        }
                    };
                }
            }
        });
        
        $('#formCreate').validate({
            rules: {
                nama: {
                    required: true,
                },
                kode: {
                    required: true,
                    digits: true,
                    minlength: 4,
                    maxlength: 4,
                },
                provinsi_id: {
                    required: true,
                }
            },
            messages: {
                nama: 'Nama Kabupaten/Kota wajib diisi',
                kode: 'Kode Kabupaten/Kota wajib diisi dengan angka 4 digit',
                provinsi_id: 'Provinsi wajib diisi'
            }
        });
    });
</script>
@endpush