@extends('layouts.main')

@section('main-container')

<style>
    .custom-checkbox {
    display: inline-block;
    width: 17px;
    height: 17px;
    background-color: white;
    border: 1px solid #8D99AE;
    border-radius: 3px;
  }

  /* Custom checkmark when checkbox is checked */
  .custom-checkbox:checked::after {
    content: "\2713"; /* Unicode checkmark character */
    display: block;
    text-align: center;
    font-size: 12px;
    line-height: 17px;
    background: #1b84ff;
  }
</style>

<div class="tab-content">
    <!--begin::Tab pane-->
    <div class="tab-pane fade show active" id="kt_ecommerce_add_product_general" role="tab-panel">
        <div class="d-flex flex-column gap-7 gap-lg-10">
       
            <!--begin::General options-->
            <div class="card card-flush">
         
                <!--begin::Card header-->
                <div class="card-header">
               
                    <div class="card-title" style="margin-top: 4rem;margin-bottom: 1.5rem;">
                        <div class="d-flex align-items-center" style="margin-bottom: 1.5rem;">
                            <a href="{{ url('/') }}" class="">
                                <!-- <svg style="margin-top: -3px;" width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M19 12.5H5" stroke="#200F31" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M12 19.5L5 12.5L12 5.5" stroke="#200F31" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg> -->

                                <span class="ms-2 fs-1hx h2" style="color:#200F31;font-size:18px;margin-left:40px">Notification</span>
                                <!-- <h2>Edit Exercise</h2> -->
                            </a>
                        </div>
                    </div>

                </div>
                <!--end::Card header-->
                {{-- @if(session('success'))
                <div class="alert alert-success mt-3">
                    {{ session('success') }}
                </div>
                @endif --}}
                @if(session('error'))
                <div class="alert alert-danger mt-3">
                    {{ session('error') }}
                </div>
                @endif
                <div class="card-body pt-0">
                    <form id="myForm" action="{{route('bulksend')}}" method="post">
                        @csrf
                        <div class="mb-10 fv-row fv-plugins-icon-container">

                            <label for="exampleInputEmail1"  class="required form-label">Title</label>
                            <input type="text" class="form-control mb-2 @error('title') is-invalid @enderror" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Notification Title" name="title">
                            @error('title')
                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                            <label for="exampleInputEmail1"  class="required form-label">Message</label>
                            <input type="text" class="form-control mb-2 @error('body') is-invalid @enderror" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Notification Description" name="body" required>
                            @error('body')
                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                            
                            <div class="form-check form-check-inline mt-4">
                            <input checked class="form-check-input" type="radio" name="senduser" id="inlineRadio1" value="all">
                            <label class="form-check-label" for="inlineRadio1">All users</label>
                            </div>
                            <div class="form-check form-check-inline mt-4">
                            <input class="form-check-input" type="radio" name="senduser" id="inlineRadio2" value="custom">
                            <label class="form-check-label" for="inlineRadio2">Select users</label>
                            </div>
                           
                        </div>
                        <div class="card d-none" id="user_table" style="margin-left: 25px;margin-right: 15px;border-radius: 22px;box-shadow: none;">
                
                <div class="tab-content">
                    <div id="kt_billing_months" class="card-body fade show active" role="tabpanel" aria-labelledby="kt_billing_months">
                        <div class="table-responsive">
                            <table class="table fs-6 gy-5" id="kt_datatable_example_5">
                                <thead class="">
                                    <tr class="text-muted  fw-bolder fs-7 gs-0">
                                        <th class="min-w-20px">
                                            <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                                                <!-- <input class="form-check-input custom-checkbox" type="checkbox" data-kt-check="true" data-kt-check-target="#kt_datatable_example_5 .form-check-input" value="1" style="background: white;border: 1px solid #8D99AE;border-radius: 3px;height: 17px;width: 17px;" /> -->
                                            </div>
                                        </th>
                                        <th class="min-w-150px">Name</th>
                                        <th class="min-w-150px">Email</th>
                                       
                                    </tr>
                                </thead>
                                <tbody class="fw-bold text-gray-600">
                                    @foreach($users as $row)
                                    <tr class="text-align-center">
                                        <td>
                                            <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                                            <input class="form-check-input custom-checkbox rowCheckbox" name="checkbox[]" type="checkbox" style="background: white;border: 1px solid #8D99AE;border-radius: 3px;height: 17px;width: 17px;" value="{{ $row->id }}" />

                                            </div>
                                        </td>
                                        <td>
                                            {{$row->name}}
                                        </td>
                                        <td>
                                            {{$row->email}}
                                        </td>
                                       
                                    </tr>

                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>


                </div>
            </div>
                        <input type="hidden" name="checkboxValues" id="checkboxValues" value="">
                        <button type="submit" class="btn btn-primary mt-3">Send Notification</button>
                    </form>

                </div>
            </div>

            <script>
                 $(document).ready(function(){
                    $('input[class="form-check-input"]').change(function(){
                    var value = $(this).val();
                    if(value === 'custom'){
                        $('#user_table').removeClass('d-none');
                    } else {
                        $('#user_table').addClass('d-none');
                    }
                    });
                });
                
                function loadPhoto(event) {
                    var reader = new FileReader();
                    reader.onload = function() {
                        var output = document.getElementById('photo');
                        output.src = reader.result;
                    };
                    reader.readAsDataURL(event.target.files[0]);
                }

                document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent the default form submission
    var checkboxes = document.querySelectorAll('#kt_datatable_example_5 input[type="checkbox"]:checked');
    var values = [];
    checkboxes.forEach(function(checkbox) {
        values.push(checkbox.value);
    });
    // Add the values to a hidden input field before submitting
    document.getElementById('checkboxValues').value = values.join(',');
    this.submit(); // Submit the form
});

            </script>
            @endsection