@extends('layouts.dashboard')
@section('content')
    <section id="multiple-column-form">
        <div class="row match-height">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Send Messages</h4>
                    </div>

                    <div class="card-content">
                        <div class="card-body">
                            <form action="{{ route('birthday.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="form-body">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label>Devices</label>
                                        </div>
                                        <div class="col-md-8 form-group">
                                           <select name="devices_id" id="devices_id" class="form-control">
                                            <option>Pilih Sessions</option>
                                            @foreach ($device as $devices )
                                            <option value="{{ $devices->id }}">{{ $devices->name }}
                                            </option>
                                            @endforeach
                                           </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label>No Handphone</label>
                                        </div>
                                        <div class="col-md-8 form-group">
                                                <table class="table table-striped" id="table1">
                                                    <thead>
                                                        <tr>
                                                            <th><input class="form-check-input" type="checkbox" onchange="checkAll(this)" name="chk[]" ></th>
                                                            <th>Nama</th>
                                                            <th>No Handphone</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($customer as $index => $customer)
                                                            <tr>
                                                                <td> <input class="form-check-input" type="checkbox" name="number[]" id="result"
                                                                    value="{{ $customer->number }}" />

                                                                </td>
                                                                <td>
                                                                    <input type="hidden" name="nama[]" value="{{ $customer->nama }}">
                                                                    {{ $customer->nama }}
                                                                </td>
                                                                <td>{{ $customer->number }}</td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>

                                                </table>



                                            {{-- <table>
                                                @foreach ($customer as $customer)
                                                    <tr>
                                                        <td>
                                                            <input class="form-check-input" type="checkbox" name="number[]" id="result"
                                                            value="{{ $customer->number }}" checked />
                                                        </td>
                                                        <td>
                                                          <input readonly type="text" value="{{ $customer->nama }}" >
                                                        </td>
                                                        <td>
                                                            <input readonly type="text" value="{{ $customer->number }}">
                                                        </td>
                                                    </tr>
                                                @endforeach
                                              </table> --}}
                                        </div>

                                        <div class="col-md-4">
                                            <label for="selectOption">Pilih Tipe Pengiriman</label>
                                        </div>
                                        <div class="col-md-8 form-group">
                                            <select id="selectOption" onchange="showInputFields()" class="form-control" name="tipe[]">
                                                <option>Pilih Tipe Pengiriman</option>
                                                <option value="message">Message</option>
                                              <option value="messageAndImage">Message & Image</option>
                                            </select>
                                        </div>

                                        <div class="col-md-4" id="imageInput1" style="display: none;">
                                            <label for="imageFile">Gambar</label>
                                        </div>
                                        <div class="col-md-8 form-group" id="imageInput" style="display: none;">
                                          <input type="file" name="url"  id="imageFile" class="form-control">
                                        </div>
                                        <div class="col-md-4" id="textInput" style="display: none;">
                                            <label for="messageInput">Pesan</label><br>
                                            <small class="text-muted"><i>Selamat Ulang tahun Nama Customer...(Template
                                                Pesan)</i></small>
                                        </div>
                                        <div class="col-md-8 form-group" id="textInput1" style="display: none;">
                                            <textarea name="text" id="messageInput" class="form-control" cols="30" rows="10"></textarea>
                                        </div>
                                        <div class="col-sm-12 d-flex justify-content-end">
                                            <button type="submit" class="btn btn-primary me-1 mb-1">Submit</button>
                                            <button type="reset" class="btn btn-light-secondary me-1 mb-1">Reset</button>
                                        </div>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@push('script')
<script>
    // Simple Datatable
    let table1 = document.querySelector('#table1');
    let dataTable = new simpleDatatables.DataTable(table1);
</script>
<script>
    function showInputFields() {
      var selectElement = document.getElementById('selectOption');
      var textInputDiv = document.getElementById('textInput');
      var imageInputDiv = document.getElementById('imageInput');
      var textInputDiv1 = document.getElementById('textInput1');
      var imageInputDiv1 = document.getElementById('imageInput1');


      if (selectElement.value === 'messageAndImage') {
        // Jika memilih "Message & Image", tampilkan kedua input field
        textInputDiv.style.display = 'block';
        imageInputDiv.style.display = 'block';
        textInputDiv1.style.display = 'block';
        imageInputDiv1.style.display = 'block';
      } else if (selectElement.value==='message') {
        // Jika memilih "Message", tampilkan hanya input field pesan
        textInputDiv.style.display = 'block';
        imageInputDiv.style.display = 'none';
        textInputDiv1.style.display = 'block';
        imageInputDiv1.style.display = 'none';
      }else{
        textInputDiv.style.display = 'none';
        imageInputDiv.style.display = 'none';
        textInputDiv1.style.display = 'none';
        imageInputDiv1.style.display = 'none';
      }
    }
  </script>
 <script type="text/javascript">
    function checkAll(ele) {
         var checkboxes = document.getElementsByTagName('input');
         if (ele.checked) {
             for (var i = 0; i < checkboxes.length; i++) {
                 if (checkboxes[i].type == 'checkbox' ) {
                     checkboxes[i].checked = true;
                 }
             }
         } else {
             for (var i = 0; i < checkboxes.length; i++) {
                 if (checkboxes[i].type == 'checkbox') {
                     checkboxes[i].checked = false;
                 }
             }
         }
     }
   </script>
@endpush