@extends('layouts.whatsapp')
@section('content')
<div class="row">
    <div class="col-md-12">
        <h1>Create Event</h1>
        <div class="card">
            <div class="card-header"></div>
            <div class="card-body">
                <form class="row g-3" method="POST" action="{{route("whatsapp.event.store")}}" enctype="multipart/form-data">
                    @csrf
                    <div class="row my-4">
                        <div class="col">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="message_send_to" id="individual_send" value="individual_send" {{ old('message_send_to', 'individual_send') == 'individual_send' ? 'checked' : '' }}>
                                <label class="form-check-label" for="individual_send">
                                    Send message to individual
                                </label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="message_send_to" id="group_send" value="group_send" {{ old('message_send_to') == 'group_send' ? 'checked' : '' }}>
                                <label class="form-check-label" for="group_send">
                                    Send message to group
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <label class="form-label" for="days">Days</label>
                            <select class="form-control" id="days" name="days">
                                <option value="" @if(old('days')=="") selected @endif>Select Day</option>
                                <option value="Monday" @if(old('days')=="Monday") selected @endif>Monday</option>
                                <option value="Tuesday" @if(old('days')=="Tuesday") selected @endif>Tuesday</option>
                                <option value="Wednesday" @if(old('days')=="Wednesday") selected @endif>Wednesday</option>
                                <option value="Thursday" @if(old('days')=="Thursday") selected @endif>Thursday</option>
                                <option value="Friday" @if(old('days')=="Friday") selected @endif>Friday</option>
                                <option value="Saturday" @if(old('days')=="Saturday") selected @endif>Saturday</option>
                                <option value="Sunday" @if(old('days')=="Sunday") selected @endif>Sunday</option>
                            </select>
                            @error('days')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col" id="select_col"  style="display:none;">
                            <label class="form-label" for="whatsapp_no_select">Whatsapp Group</label>
                            <select class="form-control whatsapp_no" id="whatsapp_no_select" name="whatsapp_no_select" style="display:none;">
                                <option value="">Select Group</option>
                                @foreach($groups as $group)
                                <option value="+{{(new \App\Helpers\WhatsappHelper)->formatWhatsappNumberToNormalNumber($group->chatId)}}" @if(old('whatsapp_no_select')==$group->chatId) selected @endif>{{$group->group_name}}</option>
                                @endforeach
                            </select>
                            @error('whatsapp_no_select')<small class="text-danger">{{ $message }}</small>@enderror
                        </div>
                        <div class="col" id="textbox_col">
                            <label class="form-label" for="whatsapp_no_text">Whatsapp Number <small>(Multiple by comma seprated)</small></label>
                            <input type="text" class="form-control whatsapp_no" name="whatsapp_no_text" value="{{old('whatsapp_no_text')}}" id="whatsapp_no_text">
                            @error('whatsapp_no_text')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>



                        <div class="col">
                            <div class="form-check">
                                <label class="form-label" for="dateTime">Date & Time</label>
                                <input id="dateTime" name="event_datetime" class="form-control" type="datetime-local" value="{{old('event_datetime')}}">
                              </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <label class="form-label" for="message">Message</label>
                            <textarea name="message" class="form-control" id="message" cols="30" rows="5">{{old('message')}}</textarea>
                            @error('message')<small class="text-danger">{{ $message }}</small>@enderror
                        </div>
                        <div class="col mt-5">
                            <label class="form-label" for="uploadFile">File</label>
                            <input type="file" name="uploadFile" id="uploadFile" class="form-control"/>
                            @error('image')<small class="text-danger">{{ $message }}</small>@enderror
                        </div>
                    </div>
                    <hr>
                    <div class="row my-2">
                        <div class="col">
                            <div class="form-check">
                                <input class="form-check-input" name="is_chatgpt" type="checkbox" id="is_chatgpt" {{ old('is_chatgpt') == 'on' ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_chatgpt">
                                  Is ChatGPT
                                </label>
                              </div>
                        </div>
                    </div>
                    <div id="chatgpt_fields" style="display:none">
                        <div class="row">
                            <div class="col">
                                <label class="form-label" for="system_content">System Content</label>
                                <textarea name="system_content" id="system_content" class="form-control" cols="30" rows="5"></textarea>
                                @error('system_content')<small class="text-danger">{{ $message }}</small>@enderror
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col">
                                <label class="form-label" for="user_content">User Content</label>
                                <textarea name="user_content" id="user_content" class="form-control" cols="30" rows="5"></textarea>
                                @error('user_content')<small class="text-danger">{{ $message }}</small>@enderror
                            </div>
                        </div>
                        <div class="row mt-4">
                            <div class="col">
                                <label for="temperature" class="form-label">Temperature</label>
                                <input type="number" name="temperature" id="temperature_input" class="float-end" style="max-width:50px;" value="1" min="0" max="2" step="0.01">
                                <input type="range" class="form-range" min="0" max="2" step="0.01" id="temperature" value="1">
                                @error('temperature')<small class="text-danger">{{ $message }}</small>@enderror
                            </div>
                            <div class="col">
                                <label for="max_tokens" class="form-label">Max tokens</label>
                                <input type="number" name="max_tokens" id="max_tokens_input" class="float-end" style="max-width:50px;" value="2048" min="1" max="16383" step="1">
                                <input type="range" class="form-range" min="1" max="16383" step="1" id="max_tokens" value="2048">
                                @error('max_tokens')<small class="text-danger">{{ $message }}</small>@enderror
                            </div>
                            <div class="col">
                                <label for="top-p" class="form-label">Top P</label>
                                <input type="number" name="top_p" id="top-p_input" class="float-end" style="max-width:50px;" value="{{old('top-p',1)}}" min="0" max="1" step="0.01">
                                <input type="range" class="form-range" min="0" max="1" step="0.01" id="top-p" value="{{old('top-p',1)}}">
                                @error('top_p')<small class="text-danger">{{ $message }}</small>@enderror
                            </div>
                        </div>
                        <div class="row mt-4">
                            <div class="col">
                                <label for="frequency_penalty" class="form-label">Frequency penalty</label>
                                <input type="number" name="frequency_penalty" id="frequency_penalty_input" class="float-end" style="max-width:50px;" value="{{old('frequency_penalty',0.00)}}"  min="0" max="2" step="0.01">
                                <input type="range" class="form-range" min="0" max="2" step="0.01" id="frequency_penalty" value="{{old('frequency_penalty',0.00)}}">
                                @error('frequency_penalty')<small class="text-danger">{{ $message }}</small>@enderror
                            </div>
                            <div class="col">
                                <label for="presence_penalty" class="form-label">Presence penalty</label>
                                <input type="number" name="presence_penalty" id="presence_penalty_input" class="float-end" style="max-width:50px;" value="{{old('presence_penalty',0.00)}}" min="0" max="2" step="0.01">
                                <input type="range" class="form-range" min="0" max="2" step="0.01" id="presence_penalty" value="{{old('presence_penalty',0.00)}}">
                                @error('presence_penalty')<small class="text-danger">{{ $message }}</small>@enderror
                            </div>
                            <div class="col">
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <div class="col">
                            <a class="btn btn-danger mt-2" href="{{route('whatsapp.events')}}">Cancel</a>
                            <button class="btn btn-primary mt-2" type=submit>Submit</button>
                        </div>
                    </div>
                <form/>
            </div>
        </div>
    </div>
</div>
@endsection
@push('script')
<script>
    $(document).ready(function() {
        // Function to toggle input visibility
        function toggleInput() {
            if ($('#individual_send').is(':checked')) {
                $('#textbox_col').css('display','block');
                $('#textbox_col').find('.whatsapp_no').css('display','block');
                $('#select_col').css('display','none');
                $('#select_col').find('.whatsapp_no').css('display','none');
                $('#select_col').find('.whatsapp_no').val('');
            } else if ($('#group_send').is(':checked')) {
                $('#textbox_col').css('display','none');
                $('#textbox_col').find('.whatsapp_no').css('display','none');
                $('#textbox_col').find('.whatsapp_no').val('');
                $('#select_col').css('display','block');
                $('#select_col').find('.whatsapp_no').css('display','block');
            }
        }

        function toggleisChatGpt(){
            if ($('#is_chatgpt').is(':checked')) {
                $("#chatgpt_fields").show();
            }else{
                $("#chatgpt_fields").hide();
            }
        }

        $('#group_send').change(function() {
            toggleInput();
        });
        $('#individual_send').change(function() {
            toggleInput();
        });

        $('#is_chatgpt').change(function() {
            toggleisChatGpt();
        });

        toggleInput();
        toggleisChatGpt();

        // Change the silder inputs if the slider change
        $('#temperature').on('input',function(){
            $('#temperature_input').val($(this).val());
        });
        $('#max_tokens').on('input',function(){
            $('#max_tokens_input').val($(this).val());
        });
        $('#top-p').on('input',function(){
            $('#top-p_input').val($(this).val());
        });
        $('#frequency_penalty').on('input',function(){
            $('#frequency_penalty_input').val($(this).val());
        });
        $('#presence_penalty').on('input',function(){
            $('#presence_penalty_input').val($(this).val());
        });

        // Change the silder if the input change
        $('#temperature_input').on('input',function(){
            $('#temperature').val($(this).val());
        });
        $('#max_tokens_input').on('input',function(){
            $('#max_tokens').val($(this).val());
        });
        $('#top-p_input').on('input',function(){
            $('#top-p').val($(this).val());
        });
        $('#frequency_penalty_input').on('input',function(){
            $('#frequency_penalty').val($(this).val());
        });
        $('#presence_penalty_input').on('input',function(){
            $('#presence_penalty').val($(this).val());
        });
    });



</script>
@endpush