@extends('layout.emapp')
@section('content')
<style>
    .centered {
          position: absolute;
          top: 50%;
          left: 50%;
          /* bring your own prefixes */
          transform: translate(-50%, -50%);
        }

.notification .badge2 {
       top: 6rem;
    right: 11.9rem;
  padding: 0px 8px;
  border-radius: 50%;
  /*background-color: red;*/
  color: white;
   position:absolute;
}
@media (min-width:1200px ){
.badge-pos{
right: 14.3rem;
 top: 6rem ; 
 
}}


@media (min-width:1200px) and (max-width: 992px){
.badge-pos{
    top: 6rem;
    right: 11.9rem;
    
}} 

@media (min-width:992px) and (max-width: 370px){
.badge-pos{
    top: 6rem;
    right: 8.8rem;
    
}} 

@media (min-width:370px) and (max-width: 355px){
.badge-pos{
    top: 6rem;
    right: 8rem;
    
}} 
 


</style>
    <section class="home">
        <div class="container pt-4">
            <div class="row">

                <!--<div style="position: absolute; left: 10; float: left; padding-right: 0; z-index: -99;">-->
                <!--    <img src="{{ asset('employer-con/images/clients.png') }}" class="resize-img" height="108" width="170"-->
                <!--        style="opacity: .2">-->
                <!--</div>-->
                <!--<div style="position: absolute; right: 0; float: right; padding-right: 0; z-index: -99;">-->
                <!--    <img src="{{ asset('employer-con/images/Career.png') }}" class="resize-img" height="88"-->
                <!--        width="200" style="opacity: .2">-->
                <!--</div>-->
                <div class="col-12 pt-4 text-center">
                    <h2 style="font-weight: bold;" class="pb-3" >{{__('Chat Support')}}</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-2"></div>
                <div class="col-md-8">
                    @if (Session::has('status'))
                        <div class="alert alert-success">
                            <ul>
                                <li>{{ Session::get('status') }}</li>
                            </ul>
                        </div>
                    @endif
                </div>
                <div class="col-md-2"></div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                
                <div class="col-12">
                    <div class="elementsContainerr table-responsive shadow">
                        <table class="table table-bordered" style="border-collapse: separate; border-spacing:10px 20px;">
                            @if($chats->isEmpty())
                                    <div class="centered">
                                        
                                        <div style="text-align:center;margin-top:-20px; color:grey;"><b>{{__('No Data Available')}}</b></div>
                                    </div>
                                @else
                            <thead>

                                <tr style="border-bottom: 2px solid #CCCCCC !important;">
                                    <th style="border:0;"></th>
                                    <th colspan="11" class="text-center" scope="col" style="border: 0;">{{__('Issue')}}</th>
                                    <th colspan="1" class="text-center" scope="col" style="border: 0;">{{__('Status')}}</th>

                                </tr>
                            </thead>

                            <tbody>
                                
                                @foreach ($chats as $item)
                                    <tr>

                                        <td style="width: 1%; border:0;"><input type="hidden" name="id"
                                                value="{{ $item['id'] }}"><button type="button" class="close"
                                                aria-label="Close">
                                                <span aria-hidden="true">&times;</span> </button></td>

                                        <!--<div>-->
                                        <td colspan="11" class="text-center notification" scope="row"
                                            style="width: 79% !important; border-radius: 8px;">@if ($item['status'] == 1)
                                                <a href="{{route('messages-em', ['id'=> $item['id']])}}">{{ $item['issue'] }}</a>
                                            @else
                                            {{ $item['issue'] }}
                                            @endif
                                                                                        @if ($count != 0)
                                                <span class="badge2 badge-pill badge-pos badge-danger">{{ $count }}</span>
                                                     <!--style="position:absolute; right: 14.3rem; top: ; border-radius:50%;">-->
                                            @endif
                                        </td>
                                        <!--</div>-->

                                        @if ($item['status'] == 0)
                                            <!--<td colspan="11" class="text-right"><button disabled-->
                                            <!--        class="btn btn-warning">Pending</button></td>-->
                                            <td colspan="1" class="text-center" style="border-radius: 8px;"><a disabled
                                                    class="text-warning" style="text-decoration: none;">{{__('Pending')}}</a></td>
                                        @elseif($item['status'] == 1)
                                            <td colspan="1" class="text-center" style="border-radius: 8px;"> <a
                                                    href="#" class="text-success"
                                                    style="text-decoration: none;">{{__('Opened')}}</a></td>
                                        @else
                                            <td colspan="1" class="text-center" style="border-radius: 8px;"> <a disabled
                                                    class="text-danger" style="text-decoration: none;">{{__('Closed')}}</a></td>
                                        @endif
                                    </tr>
                                @endforeach
                                
                @endif
                            </tbody>
                        </table>

                        <div class="row">
                            <div class="col pt-4 text-center">
                                <a href="chat-ticket"><button class="btn btn-primaryy shadow"
                                        style="width:auto; height:2.8rem; margin-top:15px; font-size: 18px; font-weight: 500;">{{__('NEW TICKET')}}</button></a>

                            </div>
                        </div>
                        <!--<div style="position: absolute;  left: 100px; float: left; padding-right: 0; z-index: -99;">-->
                        <!--    <img src="{{ asset('employer-con/images/bag.png') }}" class="resize-img" height="148"-->
                        <!--        width="190" style="opacity: 6%">-->
                        <!--</div>-->

                        <!--<div-->
                        <!--    style="position: absolute; right: 0; right: 0; top: 200px; float: right; padding-right: 0; z-index: -99;">-->
                        <!--    <img src="{{ asset('employer-con/images/Arrow.png') }}" class="resize-img" height="70"-->
                        <!--        width="250" style="opacity: .1;">-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
        </div> <!-- container -->

    </section>
@endsection
@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
    <script>
        $(document).ready(function() {
            $(".table").on("click", ".close", function() {
                // console.log("Hello");
                var currentRow = $(this).closest("tr");
                var id = currentRow.find("td:eq(0) input[type = hidden]").val();
                // console.log("ajax is not set yet employer id "+id);
                swal({
                        title: `Are you sure you want to delete this record?`,
                        text: "If you delete this, it will be gone forever.",
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    })
                    .then((willDelete) => {
                        if (willDelete) {
                            $.ajax({
                                url: "delete-em-query",
                                method: "GET",
                                data: {
                                    id: id
                                },
                                success: function(data) {
                                    // console.log(data);
                                    $(currentRow).remove();
                                }
                            })
                        }
                    })
            });
        });
    </script>
@endsection