@extends('layouts.admin')

@section('title') Reports @endsection

@section('page_title') Reports @endsection

@section('content')

@push('page_style')
@include('include.dataTableStyles')
@endpush

<!-- Main content -->
<section class="userSupport_">
    <div class="content-header">
        <div class="container-fluid">
            <div class="navSupport_">
                <div class="leftnavsupoort">
                    <h4> User Support </h4>
                    <h6 class="pageSubhead_">
                        <p class="m-0" href="javascript:void(0);"><span class="pageSubhead_ "> Help & Support >> </span></p>
                        <a href="#"><span class="activepageSubhead_PostAdd"> View </span></a>
                    </h6>
                </div>
                
            </div>


        <section class="startnewConversation_ ">
            <div class="container-fluid p-0">
                <div class="row">
                    <div class="col-md-12">
                        <div class="coversationHead_">
                            <img src="frontend/img/chatIcons.png" class="img-fluid chatticon_" />
                            <h4 class="messageHead mb-0">Start New Conversation</h4>
                                <a href="{{ route('users.support',['status' => \App\Models\SupportTopic::STATUS_OPEN]) }}" class="closeChat_ ms-auto"> < Go Back</a> 
                        </div>
                        
                        <div class="conversationForm_">
                            <form id="create_topic_form" action="{{route('support.submit.topic')}}" enctype="multipart/form-data" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="formlabel_">Select User</label>
                                            <select class="form-select customselect select2-users" name="user_id">
                                                <option value=""> Select </option>
                                                @foreach ($users as $user)
                                                    <option value="{{$user->id}}" {{(old('user_id') == $user->id) ? 'selected' :''}}> {{$user->getSellerName()}} </option> 
                                                @endforeach
                                                
                                            </select>
                                            @if ($errors->has('user_id'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('user_id') }}</strong>
                                            </span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="formlabel_">Subject</label>
                                           <input type="text" name="subject" class="form-control" value="{{!empty(old('subject')) ? old('subject') :"User Support Conversation"}}">
                                           @if ($errors->has('subject'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('subject') }}</strong>
                                            </span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="formlabel_">Message</label>
                                            <textarea class="formtextarea_ customselect" rows="4" cols="50" name="message" max="255">{{old('message')}}</textarea>
                                            @if ($errors->has('message'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('message') }}</strong>
                                            </span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="message-file-input convopin p-0">
                                            <input type="file" name="file" id="file-input" class="file-input__input" />
                                            <label class="file-input__label" for="file-input">
    
                                                <span><i class="fas fa-paperclip"></i></span> Attach</label>
                                                @if ($errors->has('file'))
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $errors->first('file') }}</strong>
                                                </span>
                                                @endif
                                                <div class="uploadOutBoxs"></div>
                                              
                                        </div>
                                        <button type="submit" class="btn-commom">Start</button>
                                    </div>
                                </div>
                            </form>
                          
                        </div>
                    </div>
                </div>
            </div>
        </section>

</div>
</div>
<!-- /.content-header -->
</section>

@push('page_script')
 <script>

$(document).ready(function() {
    $('.select2-users').select2();
});

function template(name, size){
return `<div class="filenameDesign_">
            ${name} <i class="fas fa-times cutIcon"></i>
        </div>`;
}

$(document).on('click','.cutIcon',function(){
    $('.uploadOutBoxs').html('');
    $('#file-input').val('');
    $('.file-input__label').removeClass('d-none');

})
$(document).on('change','#file-input',function(e){
    var extArr = ['jpeg', 'jpg', 'png', 'pdf', 'docx', 'doc'];
    var ext = $('#file-input').val().split('.').pop().toLowerCase();

    if ($.inArray(ext, extArr) !== -1) {
        if (this.files[0]) {
            let fileSize = this.files[0].size;
            let fileSizeInKb = fileSize / 1024;
            let fileSizeLimit = 1024 * 5; // In KB

            var fSExt = new Array('Bytes', 'KB', 'MB', 'GB'),
                i = 0;
            while (fileSize > 900) {
                fileSize /= 1024;
                i++;
            }
            var exactSize = (Math.round(fileSize * 100) / 100) + ' ' + fSExt[i];

            if (fileSizeInKb > fileSizeLimit) {
                $(this).val('');
                toastr.error($('#imageUploadFileSizeValidationMessage').val(), $('#imageUploadValidationErrorMessage').val(), { closeButton: true, tapToDismiss: false });
              
                return false;
            } else {
                html = template(event.target.files[0].name, exactSize)
                $('.uploadOutBoxs').html(html);
                $('.file-input__label').addClass('d-none');

                // const progress = document.getElementById('progress');
                // const feedback = document.getElementById('feedback');
                const file = event.target.files[0]; 
                let formData = new FormData();
                formData.append('file-input', file); 
            }
        }
    } else {
        toastr.error($('#imageUploadValidationMessage').val(), $('#imageUploadValidationErrorMessage').val(), { closeButton: true, tapToDismiss: false });
    }

})

 </script>
@endpush


@endsection