@extends('admin.layouts.app')

@if (app()->getLocale() == 'ar')
    <link href="{{ asset('web/assets/css/bootstrap-rtl.min.css') }}" id="bootstrap-style" rel="stylesheet"
        type="text/css" />
    <link href="{{ asset('web/assets/css/app-rtl.min.css') }}" id="app-style" rel="stylesheet" type="text/css" />
@else
    <link href="{{ asset('web/assets/css/bootstrap.min.css') }}" id="bootstrap-style" rel="stylesheet" type="text/css" />
    <link href="{{ asset('web/assets/css/app.min.css') }}" id="app-style" rel="stylesheet" type="text/css" />
@endif
<link href="{{ asset('web/assets/css/custom-style' . (env('APP_PROJECT') == 'Rouaa' ? '-rouaa' : '') . '.css') }}" id="app-style" rel="stylesheet" type="text/css" />
{{-- @push('styles') --}}
    <style>
        .table tbody tr.selected td {
            background: #ccc;
        }

        @media (min-width: 992px) {

        #chat-conversation {
            overflow-y: auto;
        }

        }
        .chat-conversation .conversation-list {
            max-width: 67%;
        }

        #msg_history {
            border-radius: 10px;
        }

        .chat-conversation .conversation-list video,
        .chat-conversation .conversation-list audio {
            max-width: 100%;
        }

        .conversation-closed td {
            color: #7a7f9a !important;
            opacity: 0.7;
        }

        #date-range {
            background-color: #fff;
            border: 1px solid #aaa;
        }

        .flex-center {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        .chat-conversation::-webkit-scrollbar-track,
        .main-chat-container::-webkit-scrollbar-track {
            background-color: #fff
        }

        .chat-conversation::-webkit-scrollbar,
        .main-chat-container::-webkit-scrollbar {
            width: 8px;
            background-color: #fff
        }

        .chat-conversation::-webkit-scrollbar-thumb,
        .main-chat-container::-webkit-scrollbar-thumb {
            background-color: #a2adb7;
            border-radius: 7px;
        }

        .main-chat-container {
            border-radius: 0px;
            box-shadow: none;
            background: transparent;
        }

        #bulk-actions-container {
            height: 40px;
            position: sticky;
            bottom: 0%;
            width: 100%;
            background-color: #fff;
            /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/
            box-shadow: 0 4px 4px 6px rgba(15, 34, 58, .12);
            border-radius: 15px;
        }

        .bulk-actions.disabled,
        .assigned-to.disabled {
            opacity: 0.3;
        }
        .select2-container{
            z-index: 1;
        }
        .chat-conversation .conversation-list .ctext-wrap-content{
            background-color: #00B2EE;
        }
    </style>
{{-- @endpush --}}
@section('content')
    <div class=" content-body default-height">
        <div class="container-fluid">
            <div class="page-titles">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">@lang('admin.dashboard')</a></li>
                    <li class="breadcrumb-item active"><a href="{{route('admin.reports.conversations')}}">@lang('admin.conversations')</a></li>
                </ol>
            </div>
            <div class="row w-100 border-top m-0">
                <div class="col-md-8 main-chat-container overflow-y-scroll ms-0">
                    <div class="p-0 pt-2 mb-0">

                        <div class="tab-content">
                            <div class="tab-pane active" id="chats">
                                <div class="row">
                                    <div class="col-xl-12 col-lg-12">
                                        <div class="card">
                                            <div class="card-header" style="display: flex;justify-content: space-between;">
                                                <h4 class="card-title">@lang('user.all_chats')</h4>
                                            </div>
                                            <div class="card-body">
                                                <form method="get" action="">
                                                    <div class="row">
                                                        <div class="col-md-6 mb-2">
                                                            <input type="text" class="form-control" name="keyword"
                                                                value="{{ request()->input('keyword') }}"
                                                                placeholder="@lang('user.search')...">
                                                        </div>
                                                        <div class="col-md-3 mb-2">
                                                            {!! Form::select('agents[]', $agents->pluck('name', 'id')->toArray(), request()->input('agents'), [
                                                                'class' => 'form-control select2',
                                                                'data-placeholder' => __('user.agents'),
                                                                'multiple',
                                                            ]) !!}
                                                        </div>
                                                        <div class="col-md-3 mb-2">
                                                            {!! Form::select('teams[]', $teams->pluck('name', 'id')->toArray(), request()->input('teams'), [
                                                                'class' => 'form-control select2',
                                                                'data-placeholder' => __('user.teams'),
                                                                'multiple',
                                                            ]) !!}
                                                        </div>
                                                        <div class="col-md-3 mb-2">
                                                            {!! Form::select(
                                                                'unread',
                                                                ['' => __('user.read_status'), '0' => __('user.read'), '1' => __('user.unread')],
                                                                request()->input('unread'),
                                                                ['class' => 'form-control select2', 'data-placeholder' => __('user.read_status')],
                                                            ) !!}
                                                        </div>
                                                        <div class="col-md-3 mb-2">
                                                            {!! Form::select(
                                                                'unresponded',
                                                                ['' => __('user.response_status'), '0' => __('user.responded'), '1' => __('user.unresponded')],
                                                                request()->input('unresponded'),
                                                                ['class' => 'form-control select2', 'data-placeholder' => __('user.response_status')],
                                                            ) !!}
                                                        </div>
                                                        <div class="col-md-3 mb-2">
                                                            {!! Form::select(
                                                                'assignment_status',
                                                                [
                                                                    '' => __('user.assignment_status'),
                                                                    '0' => __('user.unassigned'),
                                                                    '1' => __('user.assigned'),
                                                                    '2' => __('user.closed_chat'),
                                                                ],
                                                                request()->input('assignment_status'),
                                                                ['class' => 'form-control select2', 'data-placeholder' => __('user.assignment_status')],
                                                            ) !!}
                                                        </div>
                                                        <div class="col-md-3 mb-2">
                                                            {!! Form::select(
                                                                'channel',
                                                                ['' => __('user.channel')] + \App\Models\Conversation::$channelNames,
                                                                request()->input('channel'),
                                                                ['class' => 'form-control select2', 'data-placeholder' => __('user.channel')],
                                                            ) !!}
                                                        </div>
                                                        <div class="col-md-3 mb-2">
                                                            {!! Form::select('tags[]', $tags, request()->input('tags'), [
                                                                'class' => 'form-control select2',
                                                                'data-placeholder' => __('user.tags'),
                                                                'multiple',
                                                            ]) !!}
                                                        </div>
                                                        <div class="col-md-3 mb-2">
                                                            <input type="text" class="form-control" id="date-range"
                                                                name="date_range"
                                                                value="{{ request()->input('date_range') }}"
                                                                placeholder="@lang('user.time_of_last_activity')" readonly>
                                                        </div>
                                                        <div class="col-md-3 mb-2">
                                                            <input type="submit" class="btn btn-primary w-100"
                                                                value="@lang('admin.filter')" />
                                                        </div>
                                                        <div class="col-md-3 me-2">
                                                            <select class="form-select" name="business_id" aria-label="Filter by Business Name">
                                                                <option value="">Select Business</option>
                                                                @foreach($businesses as $business)
                                                                    <option value="{{ $business->id }}" {{ request()->input('business_id') == $business->id ? 'selected' : '' }}>{{ $business->name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>             
                                                        @if (request()->has('keyword'))
                                                            <div class="col-md-3 mb-2">
                                                                <a href="{{ route('admin.reports.conversations') }}"
                                                                    class="btn btn-light w-100">@lang('user.clear_filters')</a>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </form>
                                                <div class="table-responsive">
                                                    <table class="table table-striped">
                                                        <thead class="table-info">
                                                            <tr>
                                                                <th>@lang('user.contact')</th>
                                                                <th>@lang('admin.business_name')</th>
                                                                <th>&nbsp;</th>
                                                                <th>@lang('user.assigned_to')</th>
                                                                <th>@lang('user.tags')</th>
                                                                <th>@lang('user.last_message_date')</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach ($conversations as $conversation)
                                                                <tr id="conversation-{{ $conversation->id }}"
                                                                    class="@if ($conversation->assignment_status == '2') conversation-closed @endif"
                                                                    onclick="openConversation({{ $conversation->id }})">
                                                                    <td>
                                                                        <div class="float-start me-2">
                                                                            <img width="24"
                                                                                src="{{ $conversation->contact->image_url ?? '' }}"
                                                                                class="mt-2" />
                                                                        </div>
                                                                        <div class="float-start">
                                                                            {{ $conversation->contact->name }}<br>
                                                                            {{ $conversation->contact->mobile }}
                                                                        </div>
                                                                    </td>
                                                                    <td>{{ $conversation->business->name }}</td>
                                                                    <td>
                                                                        @if ($conversation->is_unread)
                                                                            <span class="text-danger">{{ $conversation->unread_count }}</span>
                                                                            <i class="ri-mail-unread-line text-danger unread" title="@lang('user.unread')"></i>
                                                                        @else
                                                                            &nbsp;
                                                                        @endif
                                                                    </td>
                                                                    <td>
                                                                        @if ($conversation->assignedTo)
                                                                            <img width="24"
                                                                                src="{{ $conversation->assignedTo->image_url ?? '' }}" />
                                                                            {{ $conversation->assignedTo->name ?? '' }}
                                                                        @endif
                                                                    </td>
                                                                    <td>
                                                                        @foreach ($conversation->contact->tags()->get() as $tag)
                                                                            <span
                                                                                class="badge bg-secondary">{{ $tag->name }}</span>
                                                                        @endforeach
                                                                    </td>
                                                                    <td>{{ $conversation->last_message_datetime->format('d M y h:i A') ?? '' }}
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                    {{ $conversations->links('vendor.pagination.custom') }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 p-0 bg-white" id="msg_history"></div>
                <!-- end  layout wrapper -->
            </div>
        </div>
    </div>
@endsection
@push('scripts')

<!-- Include CSS and JS for daterangepicker via CDN -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/daterangepicker.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/daterangepicker.min.js"></script>

    <script>
        var assignTo = 'all';
        var spinner = `<div class="flex-center h-100">
                <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>`;

        function openConversation(id) {
            $('#chats table tbody tr').removeClass('selected');
            $('#conversation-' + id).addClass('selected');
            $('#msg_history').html(spinner);
            $.getJSON('{{ url('fg_whbackend/reports/conversations') }}/' + id, function(data) {
                $('#msg_history').html(data.content);
                document.getElementById('chat-conversation').scrollTop = document.getElementById(
                    'chat-conversation').scrollHeight;
            });
        }

        $(function() {
            $('.select2').select2({
                allowClear: true
            });

            $('#date-range').daterangepicker({
                autoUpdateInput: false,
                timePicker: true,
                locale: {
                    format: 'DD/MM/YYYY h:mm A'
                },
                timePickerIncrement: 30,
                showDropdowns: true
            });

            $('#date-range').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD/MM/YYYY h:mm A') + ' - ' + picker.endDate.format(
                    'DD/MM/YYYY h:mm A'));
            });

            @if (isset($conversations[0]->id))
                openConversation({{ $conversations[0]->id }});
            @endif
        });
    </script>
@endpush