@extends('layouts.adminlte.adminlte')

@section('title')
    Bot
@endsection

@section('content_header')
    @parent
    <span align="center"><h1><i style="color:#1e96c8;" class="fab fa-telegram-plane"></i> <i style="color:#1e96c8;"  class="fas fa-robot"></i> Bot</h1></span>
@endsection

@section('modals')
    <div style="width:auto; max-width:100%; overflow-x:auto; right:0px;" id="editChannelModal" class="modal" tabIndex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="center overlay">
                    <i style="position:relative;top:36%;" class="fas fa-3x fa-sync-alt fa-spin"></i>
                </div>
                <div class="modal-header">
                    <h4 class="modal-title center"></h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>

    <div style="width:auto; max-width:100%; overflow-x:auto; right:0px;" id="removeChannelModal" class="modal" tabIndex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="center overlay">
                    <i style="position:relative;top:36%;" class="fas fa-3x fa-sync-alt fa-spin"></i>
                </div>
                <div class="modal-header">
                    <h4 class="modal-title center"></h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>

    <div style="width:auto; max-width:100%; overflow-x:auto; right:0px;" id="editGroupModal" class="modal" tabIndex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="center overlay">
                    <i style="position:relative;top:36%;" class="fas fa-3x fa-sync-alt fa-spin"></i>
                </div>
                <div class="modal-header">
                    <h4 class="modal-title center"></h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>

    <div style="width:auto; max-width:100%; overflow-x:auto; right:0px;" id="removeGroupModal" class="modal" tabIndex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="center overlay">
                    <i style="position:relative;top:36%;" class="fas fa-3x fa-sync-alt fa-spin"></i>
                </div>
                <div class="modal-header">
                    <h4 class="modal-title center"></h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    @yield('modals')
    <div class="center">
        {{--<p>Firstly, add <code><a href="https://t.me/{{$bot_in_use_username}}">{{'@' . $bot_in_use_username}}</a></code> to your channel/group, then type <code>/start</code> in <code><a href="https://t.me/{{$bot_in_use_username}}">{{'@' . $bot_in_use_username}}</a></code> and add the channel/group from there. Then add the channel/group here.</p>--}}
        <p>You can add your channel/group by username (with or without the leading <i>@</i>) or by ID.</p>
        <p>You want to add your channel/group by ID but you don't know its ID? Use <a href="https://t.me/gettheIDbot">this bot</a>!</p>
    </div>
    <form method="POST" action="/bot/channel/add">
        @if (auth()->user()->user_type == 'agent')
            <div class="form-group col-12 col-md-4 center" style="width:100%">
                <div class="center btn-group" style="border-radius:16px;background-color: #007bff;width:100%">
                    <button id="switch-channel" class="col-12 col-md-12 btn btn-primary" type="button"><i class="fas fa-bullhorn"></i> Channel</button>
                    <button id="switch-group" class="col-12 col-md-12 btn btn-primary" type="button"><i class="fas fa-users"></i> Group</button>
                </div>
            </div>
            <div class="form-row">
                <div class="col-0 col-md-3"></div>
                <div class="col-8 col-md-4 col-sm-12">
                    <input type="text" class="form-control" placeholder="Channel ID or username" name="channel_id_or_username">
                </div>
                <div class="col-4 col-md-1 col-sm-12">
                    <select class="custom-select" name="country">
                        <option disabled>country</option>
                        @foreach (getCountries() as $country)
                            <option value="{{$country}}">
                                 {{cc2co($country)}}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12 col-md-1 col-sm-12">
                    <button type="submit" class="btn btn-primary col-12"><i class="fas fa-bullhorn"></i> Add</button>
                </div>
                <div class="col-0 col-md-3"></div>
            </div>
        @elseif (auth()->user()->user_type == 'admin')
            <div class="form-group col-12 col-md-4 center" style="width:100%">
                <div class="center btn-group" style="border-radius:16px;background-color: #007bff;width:100%">
                    <button id="switch-channel" class="col-12 col-md-12 btn btn-primary" type="button"><i class="fas fa-bullhorn"></i> Channel</button>
                    <button id="switch-group" class="col-12 col-md-12 btn btn-primary" type="button"><i class="fas fa-users"></i> Group</button>
                </div>
            </div>
            <div class="form-row">
                <div class="col-0 col-md-2"></div>
                <div id="agent_name" class="col-12 col-md-3 col-sm-12">
                    <input class="typeahead" type="text" placeholder="Type the agent name">
                </div>
                <input style="display:none;" id="agent_id" name="agent_id" type="text" value="">
                <div class="col-8 col-md-3 col-sm-12">
                    <input type="text" class="form-control" placeholder="Channel ID or username" name="channel_id_or_username">
                </div>
                <div class="col-4 col-md-1 col-sm-12">
                    <select class="custom-select" name="country">
                        <option disabled>country</option>
                        @foreach (getCountries() as $country)
                            <option value="{{$country}}">
                                 {{cc2co($country)}}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12 col-md-1 col-sm-12">
                    <button type="submit" class="btn btn-primary col-12"><i class="fas fa-bullhorn"></i> Add</button>
                </div>
                <div class="col-0 col-md-2"></div>
            </div>
        @endif
        @csrf
    </form>
    <br>
    <table id="bot_channels_table" class="table center resp-table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
        <thead>
            <tr role="row">
                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="descending" aria-label="Rendering engine: activate to sort column descending"></th>
                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="descending" aria-label="Rendering engine: activate to sort column descending">Autopost</th>
                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="descending" aria-label="Rendering engine: activate to sort column descending">Country</th>
                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="descending" aria-label="Rendering engine: activate to sort column descending">ID</th>
                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="descending" aria-label="Rendering engine: activate to sort column descending">Title</th>
                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="descending" aria-label="Rendering engine: activate to sort column descending">Username</th>
                @if (auth()->user()->user_type == 'admin')
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="descending" aria-label="Rendering engine: activate to sort column descending">Agent</th>
                @endif
                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="descending" aria-label="Rendering engine: activate to sort column descending"></th>
                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="descending" aria-label="Rendering engine: activate to sort column descending"></th>
            </tr>
        </thead>
        <tbody>
            @foreach($channels as $channel)
                <tr>
                    <td><i title="channel" class="fas fa-bullhorn"></i></td>
                    <td><i class="fas fa-{{$channel->autopost ? "check" : "times"}}"></i></td>
                    <td>
                         {{cc2co($channel->country)}}
                    </td>
                    <td>{{$channel->channel_id}}</td>
                    <td>{{$channel->title}}</td>
                    <td>
                        @if ($channel->username)
                            <a href="{{'https://t.me/' . $channel->username}}">{{'@' . $channel->username}}</a>
                        @endif
                    </td>
                    @if (auth()->user()->user_type == 'admin')
                        <td>{{$agents[$channel->agent_id]->name}}</td>
                    @endif
                    {{--
                    <td><a title="Edit channel" href="/bot/channel/{{$channel->id}}/edit" class="btn btn-info"><i class="fas fa-user-edit"></i></a></td>
                    <td><a title="Remove channel" href="/bot/channel/{{$channel->id}}/remove" class="btn btn-danger"><i class="fas fa-trash"></i></a></td>
                    --}}
                    <td><span type="button" id ="edit_channel_{{$channel->id}}" title="Edit channel" data-toggle="modal" data-target="#editChannelModal" href="javascript:void(0);" class="btn btn-info"><i class="fas fa-edit"></i></span></td>
                    <td><span type="button" id ="remove_channel_{{$channel->id}}" title="Remove channel" data-toggle="modal" data-target="#removeChannelModal" href="javascript:void(0);" class="btn btn-danger"><i class="fas fa-trash"></i></span></td>
                </tr>
            @endforeach

            @foreach($groups as $group)
                <tr>
                    <td><i title="group" class="fas fa-users"></i></td>
                    <td><i class="fas fa-{{$group->autopost ? "check" : "times"}}"></i></td>
                    <td>
                         {{cc2co($group->country)}}
                    </td>
                    <td>{{$group->group_id}}</td>
                    <td>{{$group->title}}</td>
                    <td>
                        @if ($group->username)
                            <a href="{{'https://t.me/' . $group->username}}">{{'@' . $group->username}}</a>
                        @endif
                    </td>
                    @if (auth()->user()->user_type == 'admin')
                        <td>{{$agents[$group->agent_id]->name}}</td>
                    @endif
                    <td><span type="button" id ="edit_group_{{$group->id}}" title="Edit group" data-toggle="modal" data-target="#editGroupModal" href="javascript:void(0);" class="btn btn-info"><i class="fas fa-edit"></i></span></td>
                    <td><span type="button" id ="remove_group_{{$group->id}}" title="Remove group" data-toggle="modal" data-target="#removeGroupModal" href="javascript:void(0);" class="btn btn-danger"><i class="fas fa-trash"></i></span></td>
                </tr>
            @endforeach
        </tbody>
    </table>
@endsection

@section('css')
    @parent
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css"/>
    <style>
        div#editGroupModal .modal-content {
            overflow-y: scroll !important;
        }

        div#editGroupModal .modal-content::-webkit-scrollbar {
            display: none !important;
        }
        div#editGroupModal .modal-content.modal-content  {
            -ms-overflow-style: none !important;  /* IE and Edge */
            scrollbar-width: none !important;  /* Firefox */
        }

        table td {
            vertical-align: middle !important;
        }
        .form-select {
            text-align-last: center;
        }
        .modal .close {
            margin-left: 0px !important;
        }
        .modal {
            background-color: transparent !important;
        }
        div.form-row input {
            text-align:center;
        }
        .center {
            text-align:center;
            margin-left:auto;
            margin-right:auto;
            position:relative;
        }
        .resp-table {
            display: block;
            width: 100%;
            overflow-x: auto;
        }

        #bot_channels_table {
            display: inline-table !important;
        }

        #bot_channels_table_wrapper .row {
            overflow: auto !important;
        }

        @media screen and (min-width: 1024px) {
            #bot_channels_table_wrapper {
                width: 80%;
                margin: 0 auto;
            }
        }

        @if (auth()->user()->user_type == 'admin')
        #agent_name {
            font-family: sans-serif;
            position: relative;
            padding: 0;
        }
        .twitter-typeahead {
            width:100%;
        }
        .typeahead, .tt-query, .tt-hint {
            outline: medium none;
            padding: 8px 12px;
            width: 100%;
        }
        .typeahead {
            background-color: #FFFFFF;
        }
        .tt-query {
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
        }
        .tt-hint {
            color: #999999;
        }
        .tt-menu {
            background-color: #FFFFFF;
            border: 1px solid rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            margin-top: 0px;
            padding: 8px 0;
            width: 100%;
            max-height: 150px;
            overflow-y: auto;
        }
        .tt-suggestion {
            font-size: 18px;
            padding: 3px 20px;
        }
        .tt-suggestion:hover {
            cursor: pointer;
            background-color: #0097CF;
            color: #FFFFFF;
        }
        .tt-suggestion p {
            margin: 0;
        }
        @endif
    </style>
@endsection

@section('js')
    @parent
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
    <script src="/js/jquery-ui-1.12.0.js"></script>
    <script src="/js/f.js"></script>
    <script src="/js/bot/f.js"></script>
    <script src="/js/bot/channels.js"></script>
    <script src="/js/bot/groups.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>

    @if (auth()->user()->user_type == 'admin')
        <script type="text/javascript" src="https://twitter.github.io/typeahead.js/releases/latest/bloodhound.js"></script>
        <script type="text/javascript" src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.jquery.js"></script>
        <script type="text/javascript" src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
        <script src="/js/bot/typeahead.js"></script>
    @endif

    <script>
        $(document).ready(function() {
            $('#bot_channels_table').DataTable({
                stateSave: true,
                "stateDuration":  -1,
                "columnDefs": [
                    {
                        "orderable": false,
                        "targets": [2,3]
                    }
                ],
            });
        });
    </script>
@endsection