@extends('admin.layout.master')

@section('title', 'Admin Dashboard')

@section('body')
<!--Page header-->
<div class="page-header d-lg-flex d-block">
    <div class="page-leftheader">
        <h4 class="page-title">Chat</h4>
    </div>
</div>

<div class="card main-chat-page" style="height: calc(100vh - 195px);">
    <div class="row no-gutters">
        <div class="col-lg-5 col-xl-4 chat-sidebar-list">
            <div class="overflow-hidden mb-5 mb-lg-0">
                <div class="card-body p-0">
                    <div class="main-content-left main-content-left-chat">
                        <div class="tab-menu-heading border-top-0">
                            <div class="tabs-menu1 px-3">

                                <ul class="nav" role="tablist" id="tablist">
                                    <li class="nav-item">
                                        <a class="active" id="contacts" data-toggle="tab" href="#contacts_tab" role="tab" aria-controls="contacts" aria-selected="true">Contacts</a>
                                    </li>
                                    <li class="nav-item">
                                        <a id="groups" data-toggle="tab" href="#groups_tab" role="tab" aria-controls="groups" aria-selected="false">Groups</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="p-3 pb-0 border-bottom d-flex gap-1">
                            <div class="input-group">
                                <input class="form-control" placeholder="Search friends..." name="search_user" type="text" id="search_user">
                                <span class="input-group-btn">
                                    <button class="btn btn-primary br-tl-0 br-bl-0" id="search_user_btn">
                                        <span class="input-group-btn"><i class="fa fa-search"></i></span>
                                    </button>
                                </span>
                            </div>
                            <li class="dropdown">
                                <a data-toggle="dropdown" class="option-dots border" href="javascript:void(0)">
                                    <span class="feather feather-more-horizontal"></span>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li>
                                        <a id="create-group" href="javascript:void(0)" data-toggle="modal" data-target="#create-group-modal">Create Group</a>
                                    </li>
                                </ul>
                            </li>
                        </div>

                        <div class="main-chat-list ps ps--active-y" id="ChatList">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-8 col-lg-7">
            <div class="border-left">
                <div id="head_start">
                    <h3 class="mt-3">Click to start chat</h3>
                </div>
                <div class="main-content-body main-content-body-chat" id="main-content-body-chat">

                    <div id="load-full-chat-data">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('modal')
    <div class="modal fade" id="create-group-modal">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Create Group</h5>
                    <button class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <form enctype='multipart/form-data' id="create-group-form" method="post">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="form-label">Group Name</label>
                                    <input class="form-control" name="name" type="text" placeholder="Enter Group Name">
                                </div>
                            </div>                           
                            
                            <div class="col-md-12">
                                <label class="form-label">Upload Image</label>
                                <input type="file" class="dropify" accept="image/*" name="image" data-height="180" />
                            </div>
                            <div class="col-md-12 text-red" id="group-image-error"></div>

                            <div class="col-md-12">
                                <div class="card">
                                    <div class="card-header border-bottom-0">
                                        <h3 class="card-title">Users</h3>
                                    </div>
                                    <div class="card-body mt-2">
                                        @if(!empty($users))
                                            @foreach ($users as $admin)
                                                <div class="mb-3">
                                                    <div class="d-flex align-items-center comming_holidays calendar-icon icons">
                                                        <input type="checkbox" name="admin_ids[]" value="{{ $admin['id'] }}" id="admin_ids">
                                                        <span class="date_time bradius mr-3">
                                                            <img src="{{ asset('assets') }}/admin/images/users/{{ !empty($admin['image']) ? $admin['image'] : 'default_avatar.png' }}"  class="single-img-user avatar avatar-md brround">
                                                        </span>
                                                        <div class="mr-3">
                                                            <h6 class="mb-1 mr-2 font-weight-semibold">{{ $admin['name'] }}</h6>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @else
                                            <div class="media new selected">
                                                <h5>User not available  </h5>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-outline-primary" data-dismiss="modal">Close</button>
                        <button class="btn btn-success" id="save_form">Add</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="edit-group-modal">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Group</h5>
                    <button class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <form method="post" id="edit-group-form">
                    <div class="modal-body edit-group-modal-body">

                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-outline-primary" data-dismiss="modal">Close</button>
                        <button class="btn btn-success" id="edit_group_btn">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="member-info-modal">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Group Info</h5>
                    <button class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body member-info-modal-body">

                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="add-more-members-modal">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Members</h5>
                    <button class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <form method="post" id="add_member_form">
                    <div class="modal-body add-more-members-modal-body">

                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-outline-primary" data-dismiss="modal">Close</button>
                        <button class="btn btn-success" id="add_more_member_btn">Add</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="image_preview_modal" class="modal">
        <div class="image_preview_modal_main">
            <a href="" class="download-btn text-white" id="image_preview_download_btn" download>
                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"/></svg>
            </a>
            <span class="image_preview_modal_close">&times;</span>
        </div>
        <img class="modal-content" id="modal_preview_image">
    </div>
@endpush

@endsection

@push('script')
<script>
    var load_chat_list_url = "{{ route('admin.load_chat_list') }}";
    var load_chat_url = "{{ route('admin.load_chat') }}";
    var store_message_url = "{{ route('admin.store_message') }}";
    var start_type_url = "{{ route('admin.start_typing') }}";
    var add_group_member_data_url = "{{ route('admin.add_group_member_data') }}";
    var update_group_url = "{{ route('admin.update_group') }}";
    var edit_group_url = "{{ route('admin.edit_group') }}";
    var get_group_member_info_url = "{{ route('admin.get_group_member_info') }}";
    var add_group_members_url = "{{ route('admin.add_group_members') }}";
    var manage_admin_url = "{{ route('admin.manage_admin') }}";
    var remove_member_url = "{{ route('admin.remove_member') }}";
    var delete_message_url = "{{ route('admin.delete_chat_message') }}";
    var _token =  "{{ csrf_token() }}";

    const assetPath = "{{ asset('assets') }}/admin/images/users/";
    const assetChatPath = "{{ asset('assets') }}/admin/images/chat_files/";
    var key = "{{ config('broadcasting.connections.pusher.key') }}";
    var cluster = "{{ config('broadcasting.connections.pusher.options.cluster') }}";
    var host = "{{ config('broadcasting.connections.pusher.options.host') }}";

    $(document).ready(function() {
        
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('#create-group-modal').on('hidden.bs.modal', function (e) {
            $(this).find('form').trigger('reset');
        })

        $.validator.addMethod("customFileExtension", function(value, element, param) {
            return this.optional(element) || /\.(jpg|jpeg|bmp|png)$/i.test(value);
        }, "Please choose a valid file type with (JPEG, JPG, BMP, PNG).");

        $("#create-group-form").validate({
            ignore: [],
            highlight: function(element) {
                $(element).closest('.form').removeClass('has-success').addClass('has-error');
            },
            success: function(element) {
                $(element).closest('.form').removeClass('has-error').addClass('has-success');
                $(element).closest('.error').remove();
            },
            rules: {
                name: {
                    required: true,
                    maxlength: 50,
                },
                image: {
                    customFileExtension: true
                }
            },
            messages: {
                name: {
                    required: "This field is required",
                    maxlength: "Please enter less than 50 characters"
                },
                image: {
                    customFileExtension: "Please choose a valid image type with (JPEG, JPG, BMP, PNG)."
                }
            },
            submitHandler: function(form, e) {
                e.preventDefault();
                $('#edit_group_btn').removeAttr('disabled');

                var formData = new FormData(form);
                $.ajax({
                    url: "{{ route('admin.create_group') }}",
                    contentType: false,
                    processData: false,
                    data: formData,
                    type: 'POST',
                    success: function(response) {
                        if (response.success == true) {
                            custom_message('success', response.message)
                        } else {
                            custom_message('error', response.message)
                        }
                        $('#save_form').attr("disabled", "disabled");
                        $("#create-group-modal").modal('hide');
                    }
                });
            },
            errorPlacement: function(error, element) {
                if (element.attr("name") === "image") {
                    $('#group-image-error').html(error);
                } else {
                    error.insertAfter(element);
                }
            }
        });

    })
</script>

<script src="{{ asset('assets') }}/admin/js/chat.js"></script>

@endpush