{% 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_room.name}}</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{_("Channels",2)}}</li>

  </ol>
</nav>
{% endblock %}

{% block content %}

<!-- Content Row -->
<div class="row ">
    <div class="col-md-8">
        <div class="card card-room-list">
            <div class="card-header d-flex flex-row align-items-center justify-content-between">
                <div class="card-title">
                    {{chat_room.name}} {{_("Channels",2)}}
                    <input type="hidden" id="room_id" value="{{chat_room.id}}">
                </div>
                <a class="btn btn-primary btn-sm" href="{{ url('dashboard-channel-edit') }}?room={{chat_room.id}}">{{_("Add New Channel",2)}}</a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>{{_("Name",2)}}</th>
                                <th>{{_("Category",2)}}</th>
                                <th>{{_("Channel Type",2)}}</th>
                                <th>{{_("Is Private",2)}}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for channel in channels %}
                                <tr>
                                    <td>
                                        {{channel.name}}
                                    </td>
                                    <td>{{channel.channel_category}}</td>
                                    <td>
                                        {% if channel.group_type == 1 %}
                                            {{_("Text",2)}}
                                        {% elseif channel.group_type == 2 %}
                                            {{_("Announcement",2)}}
                                        {% elseif channel.group_type == 3 %}
                                            {{_("Voice",2)}}
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if channel.is_private %}
                                            <span class="badge badge-primary">{{_("Yes",2)}}</span>
                                        {% else %}
                                            <span class="badge badge-warning">{{_("No",2)}}</span>
                                        {% endif %}
                                    </td>

                                    <td class="nowrap">
                                        <a class="btn btn-sm btn-success" href="{{ url('dashboard-channel-edit') }}?channel={{channel.id}}&room={{chat_room.id}}"  data-toggle="tooltip" data-placement="top" title="{{_("Edit Channel",2)}}">
                                            <i class="fas fa-pencil"></i> Edit
                                        </a>
                                        <a href="javascript:void(0)" class="btn btn-warning btn-sm delete-channel-chats" id="{{channel.id}}" data-toggle="tooltip" data-placement="top" title='{{_("Delete all Chats",2)}}' ><i class="fas fa-trash-restore"></i> {{_("Chats",2)}}</a>
                                        <a href="javascript:void(0)" class="btn btn-danger btn-sm delete-channel" id="{{channel.id}}" data-toggle="tooltip" data-placement="top" title="{{_("Delete Channel",2)}}"><i class="fas fa-trash"></i> {{_("Channel",2)}}</a>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card card-room-list">
            <div class="card-header d-flex flex-row align-items-center justify-content-between">
                <div class="card-title">
                    {{_("Channel Categories",2)}}
                </div>
                <a class="btn btn-primary btn-sm create-channel-category" href="javascript:void(0)">{{_("Add New Category",2)}}</a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>{{_("Category Name",2)}}</th>
                                <th>{{_("Order",2)}}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for channel_category in channel_categories %}
                                <tr data-cat-order="{{channel_category.category_order}}">
                                    <td>
                                        <span class="category-name">{{channel_category.name}}</span>
                                    </td>
                                    <td class="category-order">{{channel_category.category_order}}</td>

                                    <td class="nowrap">
                                        <a class="btn btn-sm btn-success rename-category" data-channel-category="{{channel_category.id}}" href="javascript:void(0)"  data-toggle="tooltip" data-placement="top" title="{{_("Rename Channel Category",2)}}">
                                            <i class="fas fa-pencil"></i> Edit
                                        </a>
                                        <a href="javascript:void(0)" class="btn btn-danger btn-sm delete-category" id="{{channel_category.id}}" data-toggle="tooltip" data-placement="top" title="{{_("Delete Channel Category",2)}}"><i class="fas fa-trash"></i></a>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal modal-blur fade" id="modal-channel-category" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{_("Create Category")}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="category-form">
                    {{ csrf_token()|raw }}
                    <input type="hidden" name="edit_category" id="edit_category" value="">
                    <div class="mb-3">
                        <label class="form-label">{{_("Category Name")}}</label>
                        <input type="text" class="form-control" id="cat_name" name="name"
                            placeholder="Category name">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{_("Order")}}</label>
                        <input type="number" class="form-control" id="cat_order" name="category_order" value="0">
                    </div>
                </form>
            </div>
            <div class="modal-footer text-right">
                <button type="button" class="btn me-auto btn-secondary" data-bs-dismiss="modal">{{_("Cancel")}}</button>
                <button type="button" class="btn btn-dark submit-category">
                    <i class="ti ti-plus me-1"></i> {{_("Create Category")}}
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}