@extends('layouts.master')

@section('title', 'Agro Pro - Chats')

@section('content')
    <div id="page">
        <div class="header header-auto-sho header-fixed header-logo-center">
            <a href="#" class="header-title">Chats</a>
            <a href="#" data-back-button class="header-icon header-icon-1"><i class="fas fa-chevron-left"></i></a>
            <a href="#" data-toggle-theme class="header-icon header-icon-3 show-on-theme-dark"><i class="fas fa-sun"></i></a>
            <a href="#" data-toggle-theme class="header-icon header-icon-3 show-on-theme-light"><i class="fas fa-moon"></i></a>
            <a href="#" data-menu="menu-main" class="header-icon header-icon-4"><i class="fas fa-bars"></i></a>
        </div>

        <div class="page-title-clear"></div>
        <div class="page-content">
            <div class="card card-style">
                <div class="content mb-0">

                    @foreach($users as $user)

                    <a onclick="loadPage()" href="#" data-id="{{ $user->id }}" data-user="{{ $user->name }}" class="chat d-flex mb-3">
                        <div>
                            <img src="images/undraw/agro-pro.png" width="60" class="rounded-xl me-3">
                        </div>
                        <div style="margin-top: 10px;">
                            <h5 class="font-16 font-600">{{ $user->name }}</h5>
                            <p class="line-height-s mt-1 opacity-70">Click to start chat</p>
                        </div>
                        <div class="float-right align-self-center ps-3">
{{--                            <i class="fa fa-angle-right opacity-20"></i>--}}
                        </div>
                    </a>
                    <div class="divider mb-3"></div>
                    @endforeach
                </div>
            </div>
        </div>

        <div id="menu-upload" class="menu menu-box-bottom rounded-m" data-menu-height="275" data-menu-effect="menu-over">
            <div class="list-group list-custom-small ps-2 me-4">
                <a href="#">
                    <i class="font-14 fa fa-file color-gray2-dark"></i>
                    <span class="font-13">File</span>
                    <i class="fa fa-angle-right"></i>
                </a>
                <a href="#">
                    <i class="font-14 fa fa-image color-gray2-dark"></i>
                    <span class="font-13">Photo</span>
                    <i class="fa fa-angle-right"></i>
                </a>
                <a href="#">
                    <i class="font-14 fa fa-video color-gray2-dark"></i>
                    <span class="font-13">Video</span>
                    <i class="fa fa-angle-right"></i>
                </a>
                <a href="#">
                    <i class="font-14 fa fa-user color-gray2-dark"></i>
                    <span class="font-13">Camera</span>
                    <i class="fa fa-angle-right"></i>
                </a>
                <a href="#">
                    <i class="font-14 fa fa-map-marker color-gray2-dark"></i>
                    <span class="font-13">Location</span>
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
        </div>

        <div id="menu-main" class="menu menu-box-left rounded-0" data-menu-load="{{url('menu-main')}}" data-menu-width="280" data-menu-active="nav-pages"></div>

        <div id="menu-share" class="menu menu-box-bottom rounded-m" data-menu-load="{{url('menu-share')}}" data-menu-height="370"></div>

        <div id="menu-colors" class="menu menu-box-bottom rounded-m" data-menu-load="{{url('menu-colors')}}" data-menu-height="480"></div>

    </div>


    <div id="toast-1" class="toast toast-tiny toast-top bg-green-dark" data-bs-delay="100000" data-bs-autohide="true"><i class="fa fa-sync fa-spin me-3" style="z-index: 1000"></i>Processing...</div>
@endsection

@section('footer-links')

<script>

    $(function() {

        $(".chat").click(function () {
            let user_id = $(this).attr('data-id');
            console.log(user_id)
            $.ajax({
                url: "start_chat",
                type: "GET",
                data: {
                    user_id: user_id
                },
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    window.location.href = data.url;
                }
            });
        });

    });
</script>

</body>
</html>
@endsection