{% extends "admin/base.html" %}

{% block page_header %}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{  url('dashboard') }}">{{_("Dashboard",2)}}</a></li>
    <li class="breadcrumb-item"><a href="{{  url('dashboard-chatroom-list') }}">{{_("Chat Rooms",2)}}</a></li>
    {% if chat_room %}
        <li class="breadcrumb-item active" aria-current="page">{{chat_room.name}}</li>
    {% else %}
        <li class="breadcrumb-item active" aria-current="page">{{_("Add Chat Room",2)}}</li>
    {% endif %}
  </ol>
</nav>
{% endblock %}

{% block content %}

<!-- Content Row -->
<div class="row ">
    <div class="col-md-8">
        <div class="card card-room-info">
            <div class="card-header">
                <div class="card-title">
                    {% if chat_room.id %}
                        {{_("Update Chat Room",2)}}
                    {% else %}
                        {{_("Add New Chat Room",2)}}
                    {% endif %}
                </div>
            </div>
            <div class="card-body">
                <form id="admin-chatroom-info" enctype="multipart/form-data">
                    {{ csrf_token()|raw }}
                    <input type="hidden" name="room_id" id="room_id" value="{{chat_room.id}}">
                    <div class="mb-3 row">
                        <label class="col-sm-4 col-form-label" for="category">{{_("Room Category",2)}}</label>
                        <div class="col-sm-8">
                            <select class="form-select" name="category" id="category">
                                <option value="">{{_("None",2)}}</option>
                                {% for room_category in room_categories %}
                                    <option value="{{room_category.id}}" {% if chat_room.category == room_category.id %}selected{% endif %}>{{room_category.name}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-4 col-form-label" for="name">{{_("Name",2)}}</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="name" name="name" placeholder="Room Name" value="{{chat_room.name}}">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-4 col-form-label" for="description">{{_("Description",2)}}</label>
                        <div class="col-sm-8">
                            <textarea name="description" id="description" class="form-control" rows="4" placeholder="Room Description">{{chat_room.description}}</textarea>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-4 col-form-label" for="slug">{{_("Slug",2)}}</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="slug" name="slug" placeholder="Room Slug" value="{{chat_room.slug}}">
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-sm-4 col-form-label"  for="is_protected">
                            {{_("Password Protect",2)}}
                        </label>
                        <div class="col-sm-2">
                            <label class="switch">
                                <input type="checkbox" name="is_protected" id="is_protected"
                                    {% if chat_room.is_protected %} checked {% endif %}>
                                <span class="slider round"></span>
                            </label>
                        </div>
                        <label class="col-sm-2 col-form-label pin-area" {% if chat_room.is_protected %}style="display:block"{% else %}style="display:none"{% endif %} for="password"><span class="">Pin</span></label>
                        <div class="col-sm-4 mb-2 pin-area" {% if chat_room.is_protected %}style="display:block"{% else %}style="display:none"{% endif %}>
                            <input type="text" class="form-control" id="pin" name="pin" value="{{chat_room.password}}">
                        </div>
                    </div>

                    <div class="row">
                        <label class="col-sm-4 col-form-label"  for="is_visible">
                            {{_("Visible to everyone",2)}}
                        </label>
                        <div class="col-sm-8">
                            <label class="switch">
                                <input type="checkbox" name="is_visible" id="is_visible"
                                    {% if chat_room %}
                                        {% if chat_room.is_visible %}
                                            checked
                                        {% endif %}
                                    {% else %}
                                        checked
                                    {% endif %}>
                              <span class="slider round"></span>
                            </label>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <input type="checkbox" style='display:none;' checked name="allowed_users[]" id="allow_admin" value="1" />
                        {% if USER.user_type == 1 %}
                            <label class="col-sm-4 col-form-label" for="allow_member">
                                {{_("Allow Member Access",2)}}
                            </label>
                            <div class="col-sm-8">
                                <label class="switch">
                                    <input type="checkbox" name="allowed_users[]" id="allow_member"  value="2"
                                        {% if 2 in chat_room.allowed_users %} checked {% endif %}>
                                        <span class="slider round"></span>
                                </label>
                            </div>
                            <label class="col-sm-4 col-form-label" for="allow_member">
                                {{_("Allow Moderator Access",2)}}
                            </label>
                            <div class="col-sm-8">
                                <label class="switch">
                                    <input type="checkbox" name="allowed_users[]" id="allow_member"  value="4"
                                        {% if 4 in chat_room.allowed_users %} checked {% endif %}>
                                        <span class="slider round"></span>
                                </label>
                            </div>
                        {% else %}
                            <input type="checkbox" style='display:none;' checked name="allowed_users[]" id="allow_member" value="2" />
                        {% endif %}
                        <label class="col-sm-4 col-form-label public-view-area" for="allow_guest" {% if chat_room.is_protected %}style="display:none"{% else %}style="display:block"{% endif %}>
                            {{_("Allow Public View",2)}}
                        </label>
                        <div class="col-sm-8 public-view-area" {% if chat_room.is_protected %}style="display:none"{% else %}style="display:block"{% endif %}>
                            <label class="switch">
                                <input type="checkbox" name="allow_guest_view" id="allow_guest_view"
                                      {% if chat_room.allow_guest_view == true %}
                                            checked
                                        {% endif %} >
                                    <span class="slider round"></span>
                            </label>
                        </div>

                        <label class="col-sm-4 col-form-label" for="allow_guest">
                            {{_("Allow Guest Chats",2)}}
                        </label>

                        <div class="col-sm-8">
                            {% if SETTINGS.guest_mode %}
                                <label class="switch">
                                    <input type="checkbox" name="allowed_users[]" id="allow_guest" value="3"
                                        {% if 3 in chat_room.allowed_users %} checked {% endif %}>
                                        <span class="slider round"></span>
                                </label>
                            {% else %}    
                                <label class="switch">
                                    <input type="checkbox" disabled />
                                    <span class="slider round"></span>
                                </label>
                                <small>{{_("Allow Guest Mode First in Registration Settings",2)}}</small>
                            {% endif %}
                        </div>
                        
                    </div>
                    <hr>
                    <div class="mb-3 row">
                        <label class="col-sm-4 col-form-label" for="room_auto_join">{{_("Auto join users to this room on the first visit")}}</label>
                        <div class="col-sm-8">
                            <select class="form-select" name="room_auto_join" id="room_auto_join">
                                <option value="" {% if chat_room.room_auto_join == "" %}selected{% endif %} >{{_("Global Setting")}}</option>
                                <option value="0" {% if chat_room.room_auto_join == "0" %}selected{% endif %} >{{_("No")}}</option>
                                <option value="1" {% if chat_room.room_auto_join == "1" %}selected{% endif %} >{{_("Yes")}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-4 col-form-label" for="slug">{{_("Room icon",2)}}</label>
                        <div class="col-sm-6">
                            <input type="file" class="form-control-file upload-cover-image" id="room_icon" name="room_icon" value="">
                        </div>
                        <div class="col-2">
                            <div class="room-coverimage-preview admin-img-preview">
                                {% if chat_room.room_icon %}
                                    <img class="img-responsive" height="100%" src="{{MEDIA_URL}}/chatrooms/icons/{{chat_room.room_icon}}"  alt="">
                                {% else %}
                                    <img class="img-responsive" height="100%" alt="">
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-4 col-form-label" for="slug">{{_("Cover image",2)}}</label>
                        <div class="col-sm-6">
                            <input type="file" class="form-control-file upload-cover-image" id="cover_image" name="cover_image" value="">
                        </div>
                        <div class="col-2">
                            <div class="room-coverimage-preview admin-img-preview">
                                {% if chat_room.cover_image %}
                                    <img class="img-responsive" height="100%" src="{{MEDIA_URL}}/chatrooms/{{chat_room.cover_image}}"  alt="">
                                {% else %}
                                    <img class="img-responsive" height="100%" alt="">
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3 row">
                        <label class="col-sm-4 col-form-label" for="show_background">
                            {{_("Show Background")}}
                        </label>
                        <div class="col-sm-8">
                            <label class="switch">
                                <input type="checkbox" name="show_background" id="show_background"
                                    {% if chat_room %}
                                        {% if chat_room.show_background %}
                                            checked
                                        {% endif %}
                                    {% else %}
                                        checked
                                    {% endif %}>
                                <span class="slider round"></span>
                            </label>
                        </div>
                        <label class="col-sm-4 col-form-label" for="slug">{{_("Background Image")}}</label>
                        <div class="col-sm-6">
                            <input type="file" class="form-control-file upload-background-image" id="background_image" name="background_image" value="">
                        </div>
                        <div class="col-2">
                            <div class="room-bgimage-preview">
                                {% if chat_room.background_image %}
                                    <img class="img-responsive" height="100%" src="{{MEDIA_URL}}/chatrooms/{{chat_room.background_image}}"  alt="">
                                {% else %}    
                                    <img class="img-responsive" height="100%" src="{{STATIC_URL}}/img/chatbg.png"  alt="">
                                {% endif %}
                            </div>
                            <a href="javascript:void(0)" class="btn btn-sm btn-danger room-bgimage-remove"><i class="fas fa-times"></i></a>
                        </div>
                    </div>
                    
                    <hr>

                    <div class="mb-3 row">
                        <label class="col-sm-4 col-form-label" for="room_notice_message">{{_("Chat room notice message",2)}}</label>
                        <div class="col-sm-8">
                            <textarea name="room_notice_message" id="room_notice_message" class="form-control" rows="5" cols="80">{{chat_room.room_notice_message|htmlspecialchars_decode|raw}}</textarea>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-4 col-form-label" for="room_notice_class">{{_("Chat room notice style",2)}}</label>
                        <div class="col-sm-8">
                            <select class="form-select" name="room_notice_class" id="room_notice_class">
                                <option value="success" {% if chat_room.room_notice_class == "success" %}selected{% endif %} >Success</option>
                                <option value="warning" {% if chat_room.room_notice_class == "warning" %}selected{% endif %} >Warning</option>
                                <option value="danger" {% if chat_room.room_notice_class == "danger" %}selected{% endif %} >Danger</option>
                                <option value="primary" {% if chat_room.room_notice_class == "primary" %}selected{% endif %} >Primary</option>
                                <option value="secondary" {% if chat_room.room_notice_class == "secondary" %}selected{% endif %} >Secondary</option>
                                <option value="info" {% if chat_room.room_notice_class == "info" %}selected{% endif %} >Info</option>
                                <option value="light" {% if chat_room.room_notice_class == "light" %}selected{% endif %} >Light</option>
                                <option value="dark" {% if chat_room.room_notice_class == "dark" %}selected{% endif %} >Dark</option>
                            </select>
                        </div>
                    </div>
                    <hr>
                    <div class="mb-3 row">
                        <label class="col-sm-4 col-form-label" for="disable_private_chats">{{_("Disable direct messages",2)}}</label>
                        <div class="col-sm-8">
                            <select class="form-select" name="disable_private_chats" id="disable_private_chats">
                                <option value="" {% if chat_room.disable_private_chats == "" %}selected{% endif %} >{{_("Global",2)}}</option>
                                <option value="0" {% if chat_room.disable_private_chats == "0" %}selected{% endif %} >{{_("No",2)}}</option>
                                <option value="1" {% if chat_room.disable_private_chats == "1" %}selected{% endif %} >{{_("Yes",2)}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-4 col-form-label" for="hide_chat_list">{{_("Disable user list",2)}}</label>
                        <div class="col-sm-8">
                            <select class="form-select" name="hide_chat_list" id="hide_chat_list">
                                <option value="" {% if chat_room.hide_chat_list == "" %}selected{% endif %} >{{_("Global",2)}}</option>
                                <option value="0" {% if chat_room.hide_chat_list == "0" %}selected{% endif %} >{{_("No",2)}}</option>
                                <option value="1" {% if chat_room.hide_chat_list == "1" %}selected{% endif %} >{{_("Yes",2)}}</option>
                            </select>
                        </div>
                    </div>
                    <span class="chat-list-setting-area" {% if chat_room.hide_chat_list == 1 %}style="display:none;"{% endif %}>
                        
                        <div class="mb-3 row">
                            <label class="col-sm-4 col-form-label" for="user_list_type">{{_("User list type",2)}}</label>
                            <div class="col-sm-8">
                                <select class="form-select" name="user_list_type" id="user_list_type">
                                    <option value="" {% if chat_room.user_list_type == "" %}selected{% endif %} >{{_("Global",2)}}</option>
                                    <option value="1" {% if chat_room.user_list_type == "1" %}selected{% endif %} >{{_("Show all users",2)}}</option>
                                    <option value="2" {% if chat_room.user_list_type == "2" %}selected{% endif %} >{{_("Show online users only",2)}}</option>
                                    <option value="3" {% if chat_room.user_list_type == "3" %}selected{% endif %} >{{_("Show authorized roles only",2)}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="mb-3 row user-list-auth-roles" {% if chat_room.user_list_type != 3 %}style="display:none"{% endif %}>
                            <label class="col-sm-4 col-form-label" for="user_list_auth_roles">{{_("Users can only chat with",2)}}</label>
                            <div class="col-sm-8">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <label class="switch">
                                            <input type="checkbox" name="user_list_auth_roles[]" id="user_list_auth_admin"  value="1"
                                                {% if 1 in chat_room.user_list_auth_roles %} checked {% endif %}>
                                                <span class="slider round"></span>
                                        </label>
                                        <label class="col-form-label" for="user_list_auth_admin">
                                            {{_("Admins",2)}}
                                        </label>
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="switch">
                                            <input type="checkbox" name="user_list_auth_roles[]" id="user_list_auth_mod"  value="4"
                                                {% if 4 in chat_room.user_list_auth_roles %} checked {% endif %}>
                                                <span class="slider round"></span>
                                        </label>
                                        <label class="col-form-label" for="user_list_auth_mod">
                                            {{_("Moderators",2)}}
                                        </label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <label class="switch">
                                            <input type="checkbox" name="user_list_auth_roles[]" id="user_list_auth_creator"  value="creator"
                                                {% if 'creator' in chat_room.user_list_auth_roles %} checked {% endif %}>
                                                <span class="slider round"></span>
                                        </label>
                                        <label class="col-form-label" for="user_list_auth_creator">
                                            {{_("Room Creator",2)}}
                                        </label>
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="switch">
                                            <input type="checkbox" name="user_list_auth_roles[]" id="user_list_auth_rm_mod"  value="rm_mod"
                                                {% if 'rm_mod' in chat_room.user_list_auth_roles %} checked {% endif %}>
                                                <span class="slider round"></span>
                                        </label>
                                        <label class="col-form-label" for="user_list_auth_rm_mod">
                                            {{_("Room Moderators",2)}}
                                        </label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <label class="switch">
                                            <input type="checkbox" name="user_list_auth_roles[]" id="user_list_auth_member"  value="2"
                                                {% if 2 in chat_room.user_list_auth_roles %} checked {% endif %}>
                                                <span class="slider round"></span>
                                        </label>
                                        <label class="col-form-label" for="user_list_auth_member">
                                            {{_("Members",2)}}
                                        </label>
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="switch">
                                            <input type="checkbox" name="user_list_auth_roles[]" id="user_list_auth_guest"  value="3"
                                                {% if 3 in chat_room.user_list_auth_roles %} checked {% endif %}>
                                                <span class="slider round"></span>
                                        </label>
                                        <label class="col-form-label" for="user_list_auth_guest">
                                            {{_("Guest",2)}}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </span>
                    <hr>
                    <div class="mb-3 row">
                        <label class="col-sm-4 col-form-label" for="status">{{_("Status",2)}}</label>
                        <div class="col-sm-8">
                            <select class="form-select" name="status" id="status">
                                <option value="1" {% if chat_room.status == 1 %} selected {% endif %}>{{_("Active",2)}}</option>
                                <option value="2" {% if chat_room.status == 2 %} selected {% endif %}>{{_("Inactive",2)}}</option>
                            </select>
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary admin-update-chatroom">{{_("Submit",2)}}</button>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}