@extends('layouts.app')
@section('titlePage', 'whatsapp notification')
@section('content')
@push('script')
<script>
	document.getElementById("dras-26").classList.add("active");
</script>

<!-- Select2 CSS -->
{{-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> --}}
<link href="{{asset('css/select2.css')}}" rel="stylesheet" />

<!-- jQuery (required for Select2) -->
{{-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> --}}
<script src="{{asset('js/jquery-3.6.0.min.js')}}"></script>

<!-- Select2 JS -->
{{-- <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> --}}
<script src="{{asset('js/select2.min.js')}}"></script>
<script>
    $(document).ready(function() {
        $('#students_multiselect').removeClass('d-none');
        $('.selectsum2').select2({
            placeholder: "Select Students",
            allowClear: true
        });
    });
</script>
<script>
    function toggleSelectAll(checkbox) {
        var isChecked = $(checkbox).is(':checked');
        var options = $('.selectsum2 option');

        options.prop('selected', isChecked);
        $('.selectsum2').trigger('change');
    }

    function updateSelectAllCheckbox(selectElement) {
        var selectAllCheckbox = $('#select_all_checkbox');
        var options = $(selectElement).children('option');
        var selectedOptions = options.filter(':selected');

        if (selectedOptions.length === options.length) {
            selectAllCheckbox.prop('checked', true);
        } else {
            selectAllCheckbox.prop('checked', false);
        }
    }

    $(document).ready(function() {
        $('.selectsum2').select2();
        $('.selectsum2').on('change', function() {
            updateSelectAllCheckbox(this);
        });
        updateSelectAllCheckbox($('.selectsum2')[0]);
    });
</script>
@endpush
<div class="page-wrapper">
   <!-- [ breadcrumb ] start -->
            <div class="breadcrumb-header justify-content-between align-items-center">
                <h4 class="text-primary font-weight-bold py-3 mb-0">
                SEND NOTIFICATION
                </h4>
               <ol class="breadcrumb breadcrumb-style3">
                  <li class="breadcrumb-item"><a href="{{ _route('master.whatsapp-notification.new_students') }}"><i class="feather icon-home"></i></a></li>
                  <li class="breadcrumb-item active">Send whatsapp notification</li>
               </ol>
            </div>
         </div>
   <!-- [ breadcrumb ] end -->
   <!-- [ Main Content ] start -->
   <div class="row">
      <div class="col-sm-12">
         <div class="card">
            {{-- <div class="card-header">
               <a href="{{ _route('master.whatsapp-notification.new_students') }}" class="btn btn-primary float-right">List</a>
            </div> --}}
            <div class="card-body">
               @include('common.alert')
               <form  method="POST" action="{{ _route('master.whatsapp-notification.new_students.send') }}" id="whats-form">
                  @csrf
                  <div class="row">

                    <div class="form-group mb-0 d-none" id="students_multiselect">
                        <label class="form-label">Select Students</label>
                        <div>
                            <input type="checkbox" id="select_all_checkbox" onclick="toggleSelectAll(this)">
                            <label for="select_all_checkbox">Select All</label>
                        </div>
                        <select multiple="multiple" name="students[]" class="selectsum2" onchange="console.log($(this).children(':selected').length)">
                            @foreach ($new_students as $key => $student)
                                <option value="{{ $student->phone_no }},{{ $student->name }}">{{$student->name}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group mb-2">
                            <label for="">Template</label>
                            <select name="template" id="" class="form-control">
                                <option value="">-- select Template --</option>
                                @foreach($templates as $temp)
                                    <option value="{{$temp->template}}">{{$temp->template}}</option>
                                @endforeach
                            </select>
                            {{-- <input type="text" name="template" class="form-control" value="{{ old('template', $data->template ?? null) }}"> --}}
                        </div>
                    </div>

                    <div class="row" id="VariableDiv">
                        <div class="col-6">
                            <div class="form-group">
                                <label for="">Variable </label>
                                <input type="text" class="form-control" name="var[]" value="">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12 mt-2">
                        <span class="btn btn-primary" id="AddVariable">Add Variable</span>
                    </div>

                </div>
                <div class="col-12 mt-2">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
               </form>
            </div>
         </div>
      </div>
   </div>
   <!-- [ Main Content ] end -->
</div>

@push('script')
    <script>
        $(document).ready(function() {
            $(function() {
                $.validator.addMethod("noStartingSpace", function(value, element) {
                    return value.trim() !== "" && value.trim()[0] !== " ";
                }, "Input cannot start with a space");

                $.validator.addMethod("image_format", function(value, element) {
                    return this.optional(element) || /\.(jpg|jpeg|png)$/i.test(value);
                }, "Please select a valid image file format.");

                $.validator.addMethod('image_size', function(value, element) {
                    if (element.files && element.files[0]) {
                        return element.files[0].size <= 2 * 1024 * 1024; // 2MB
                    }
                    return true;
                }, "Please select an image smaller than 2MB.");

                $.validator.addMethod("validation_description", function(value, element) {
                        var minLength = 0
                        var maxLength = 500;
                        var descriptionLength = value.trim().length;

                        return this.optional(element) || (descriptionLength >= minLength && descriptionLength <= maxLength);
                    },"Please enter a description between 10 and 500 characters.");

                $('#whats-form').validate({
                    ignore: '.ignore, .select2-input',
                    focusInvalid: false,
                    rules: {
                        'image': {
                            image_format: true,
                            image_size: true
                        },
                        'title': {
                            required: true,
                            maxlength: 150,
                            noStartingSpace: true
                        },
                        'template': {
                            validation_description: true,
                            noStartingSpace: true
                        }
                    },
                    errorPlacement: function(error, element) {
                        var $parent = $(element).parents('.form-group');
                        // Do not duplicate errors
                        if ($parent.find('.jquery-validation-error').length) {
                            return;
                        }
                        $parent.append(
                            error.addClass('jquery-validation-error small form-text invalid-feedback')
                        );
                    }
                });
            });

            //let variable = 1;
            $('#AddVariable').on('click', function(){
                // variable++;
                $('#VariableDiv').append(`
                    <div class="col-6 VarDiv">
                        <div class="form-group">
                            <label for="">Variable *</label>
                            <div class="d-flex">
                                <input type="text" class="form-control" name="var[]" value="{{ old('var', $data->var ?? null) }}">
                                <i class="fa-solid fa-circle-xmark mt-2 mx-2 fs-5 VarRemoveBtn"></i>
                            </div>
                        </div>
                    </div>
                `);

                $('.VarRemoveBtn').on('click',function(){
                    $(this).closest('.VarDiv').remove();
                })
            })
    });

    </script>
    @endpush
@endsection