TOLONG BANTU SAYA PUH

<div class="relative sm:rounded-lg">
  <div class="max-w-sm mx-auto">
    <div class="card-body">
      <div class="col-8">

        <!-- Form utama -->
        <form action="/insertdata" method="POST" enctype="multipart/form-data">
          @csrf
          
          <!-- Input Nama -->
          <div class="mb-5">
            <label for="nama" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Nama</label>
            <input type="text" name="Nama" id="nama" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Isi nama anda dengan benar!!!" required />
          </div>

          <!-- Input Company -->
          <div class="mb-5">
            <label for="company" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Company</label>
            <input type="text" name="Company" id="company" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required />
          </div>
            
          <!-- Contries -->
          <div x-data="multiSelect()" class="mb-5 relative">
            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Country</label>
            
            <!-- Selected Items -->
            <div class="flex-wrap gap-2 bg-gray-50 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 p-2 cursor-pointer" name="Country" @click="open = !open">
                <template x-for="(item, index) in selected" :key="index">
                    <div class="flex items-center bg-gray-600 text-gray-900 dark:text-white px-2 py-1 rounded">
                        <span x-text="item"></span>
                        <button @click.stop="removeItem(item)" class="ml-2 text-gary-900 hover:text-gray-900">&times;</button>
                    </div>
                </template>
                <span x-show="selected.length === 0" class="text-gray-400">Select Country...</span>
                <span class="ml-auto">&#9662;</span>
            </div>
    
            <!-- Dropdown -->
            <div x-show="open" @click.away="open = false" class="absolute w-full bg-white border rounded-lg mt-1 shadow-lg z-50 max-h-40 overflow-y-auto">
                <div class="max-h-40 overflow-y-auto">
                    <template x-for="(item, index) in options" :key="index">
                        <label class="flex items-center gap-2 px-4 py-2 hover:bg-gray-100 cursor-pointer">
                            <input type="checkbox" :value="item" x-model="selected" class="form-checkbox text-gray-900">
                            <span x-text="item"></span>
                        </label>
                    </template>
                </div>
            </div>
        </div>
    
        <script>
            function multiSelect() {
                return {
                    open: false,
                    selected: [],
                    options: ["Afghanistan", "Australia", "Brazil", "Canada", "Denmark", "France", "Germany", "Indonesia", "Japan", "Mexico"],
                    removeItem(value) {
                        this.selected = this.selected.filter(item => item !== value);
                    }
                };
            }
        </script>

        {{-- Email --}}

        <div class="mb-5">
          <label for="company" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email</label>
          <input type="Email" name="Email" id="Email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required />
        </div>  

          <!-- Input Nomor Telepon -->
          
          <div class="mb-5">
            <label for="  " class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Phone Number</label>
            <input type="number" name="Phone" id="company" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required />
          </div>

          
          

          <!-- Tombol Submit -->
          <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
            Submit
          </button>
          

        </form> <!-- Akhir Form -->
      </div>
    </div>
  </div>  
</div>