@extends('layouts.app')

@push('additional_styles')
    <link href="{{ asset('css/slimselect.css') }}" rel="stylesheet">
    <style>
        div.ss-main {
            min-height: 46.2px
        }
    </style>
@endpush

@section('content')
    <div class="bg-gray-900 opacity-50 hidden fixed inset-0 z-10" id="sidebarBackdrop"></div>
    <div id="main-content" class="h-full w-full bg-gray-50 relative overflow-y-auto">
        <main>

            <div class="pt-6 px-4">

                <div class="bg-white mx-auto shadow rounded-lg p-4 sm:p-6 xl:p-8 w-1/2  2xl:col-span-1">

                    <h2 class="text-2xl mx-auto font-semibold leading-normal mt-0 mb-2 text-blueGray-800">
                        TAMBAH POSKOD
                    </h2>

                    <form id="daftar_poskod_form" action="{{ route('poskod.store') }}" method="post">
                        @csrf
                        <div class="grid grid-cols-2">
                            <div class="w-full px-3 mb-4">
                                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
                                    poskod
                                </label>
                                <input
                                    class="appearance-none block w-full bg-white-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                                    name="poskod" maxlength="5" minlength="5" pattern="[0-9]+" value="">
                            </div>
                        </div>

                        <div class="grid grid-cols-2">
                            <div class="w-full px-3 mb-4">
                                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
                                    daerah
                                </label>
                                <select id="selectable-daerah" class="ss-main" style="min-height: 46.2px; "
                                    name="koddaerah">
                                    <option value="ola">Sila Pilih Daerah...</option>
                                </select>
                            </div>
                        </div>

                        <div class="grid grid-cols-2">
                            <div class="w-full px-3 mb-4">
                                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
                                    negeri
                                </label>
                                <select id="selectable-negeri" class="ss-main" style="min-height: 46.2px; "
                                    name="kodnegeri">
                                    <option value="">Sila Pilih Negeri...</option>
                                </select>
                            </div>
                        </div>
                        <div class="flex justify-end">
                            <button
                                class="bg-blue-500 text-white active:bg-lightBlue-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                                type="submit">
                                Daftar
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </main>
        @include('layouts.footer')
    @endsection


    @push('additional_scripts')
        <script src="{{ asset('js/slimselect.min.js') }}"></script>

        <script>
            document.addEventListener("DOMContentLoaded", () => {
                let all_daerah = {!! json_encode($all_daerah) !!}
                let all_negeri = {!! json_encode($all_negeri) !!}

                let all_daerah_choices = all_daerah.map(x => {
                    return {
                        'text': x.namadaerah,
                        'value': x.koddaerah,
                        'data': {
                            'kodnegeri': x.kodnegeri,
                        },
                    }
                });

                let all_negeri_choices = all_negeri.map(x => {
                    return {
                        'text': x.negeri,
                        'value': x.kodnegeri,
                    }
                });

                let slimSelect_negeri = new SlimSelect({
                    select: '#selectable-negeri',
                    data: all_negeri_choices,
                    settings: {
                        disabled: true,
                    },
                });

                let slimSelect_daerah = new SlimSelect({
                    select: '#selectable-daerah',
                    data: all_daerah_choices,
                    events: {
                        afterChange: (newVal) => {
                            slimSelect_negeri.setSelected(newVal[0].data.kodnegeri);
                        }
                    }
                });

                document.querySelector('#daftar_poskod_form button[type="submit"]').addEventListener('click', function(e) {
                    e.preventDefault();
                    slimSelect_negeri.enable()

                    let poskod_no_error = document.querySelector('#daftar_poskod_form')
                        .querySelector('input[name="poskod"]')
                        .checkValidity();

                    if (!poskod_no_error) {
                        document.querySelector('#daftar_poskod_form').reportValidity();
                        return;
                    }

                    document.querySelector('#daftar_poskod_form').submit()

                });

                // initially select default value
                slimSelect_daerah.setSelected(63);

            });
        </script>
    @endpush