@extends('../../master_layout/admin_master')

@section('title')
<title>{{config('constants.APP_NAME')}} Support</title>
@endsection

@section('content')

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Support</h1>
                </div><!-- /.col -->

                <div class="col-sm-6">
                    <!-- <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a class="btn btn-primary" href="{{ route('admin.user.add')}}" target="">Add Admin User</a></li>
                    </ol> -->
                </div>

                <!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content-header -->

    <!-- Main content -->

    <section class="content">
        <div class="container-fluid">
            

            <div class="row gap-y-2">
                <!-- Message-->
                @if(session('message'))
                <div class="alert alert-{{session('message.type')}} alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    @if(session('message.type')=='danger')
                    <p class="mb-0"><strong>Sorry!</strong> {!! session('message.text') !!}</p>
                    @else
                    <p class="mb-0"><strong>Success!</strong> {!! session('message.text') !!}</p>
                    @endif
                </div>
                @endif
                <!--end message-->
                
                <div class="col-12 d-md-none">
                    <div class="heading-one text-center">
                        <h1>
                            Helpdesk
                        </h1>
                    </div>
                </div>

                <div class="col-12">
                    <div class="row">    
                        <div class="col-md-12 col-lg-12">
                            <h4 class="mb-3">{{ $ticket->ticket_subject }}</h4>
                            <div class="row rounded border border-white p-2 mb-3">            
                                <div class="col-md-6 col-lg-6">
                                    <div class="d-flex ticket-info-labels">
                                        <label>Request</label>
                                        <div class="ml-2">#{{ $ticket->ticket_id }}</div>
                                    </div>
                                    <div class="d-flex ticket-info-labels">
                                        <label>Requester</label>
                                        <div class="ml-2">{{ $ticket->requester }}</div>
                                    </div>
                                    <div class="d-flex ticket-info-labels">
                                        <label>Status</label>
                                        <div class="ml-2">
                                            @if($ticket->ticket_status == 'open')
                                            <span class="badge bg-danger">Open</span>
                                            @elseif($ticket->ticket_status == 'awaiting')
                                            <span class="badge bg-warning">Awaiting your reply</span>
                                            @elseif($ticket->ticket_status == 'solved')
                                            <span class="badge bg-success">SOLVED</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-6">
                                    <div class="d-flex ticket-info-labels">
                                        <label>Created</label>
                                        <div class="ml-2">{{ date("d/m/Y H:i", strtotime($ticket->created_on)) }}</div>
                                    </div>
                                    <div class="d-flex ticket-info-labels">
                                        <label>Last activity</label>
                                        <div class="ml-2">@if($ticket->updated_on != '' ) {{ date("d/m/Y H:i", strtotime($ticket->updated_on)) }} @else {{"-"}} @endif</div>
                                    </div>
                                </div>

                                <div class="col-md-12 col-lg-12 mt-2">
                                    {{ $ticket->ticket_description }}
                                </div>
                            </div>

                            @if(isset($ticket_messages) && !empty($ticket_messages))
                            <div class="row">                            
                                
                                @foreach ($ticket_messages as $result)         
                                
                                <div class="mb-2 border-bottom w-100 py-2 px-2 rounded bgcolor-darkblue-support">
                                    <div class="d-flex">
                                        <div class="avatar-div">                                                    
                                            <img src="{{asset('public/uploads/default_avatar.png')}}" alt="" class="rounded-circle w-100">                                    
                                        </div>

                                        <div class="small ml-3">
                                            <strong class="d-block">
                                                                                            </strong>
                                            <span class="d-block text-muted">01/01/1970 00:00</span>
                                            <div class="mt-2">
                                                                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach         
                            
                            </div>                        
                            @endif

                            
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div class="row">    
                        <div class="col-md-12 col-lg-12">
                            <form action="{{route('admin.support.helpdesk.process')}}" method="post" id="helpdeskProcess">
                            @csrf
                            <div class="row mt-4">    
                                <div class="col-md-12 col-lg-12">
                                    <label for="message_description" class="form-label">Enter your reply</label>
                                    <textarea class="form-control" name="message_description" id="message_description" required></textarea>
                                    <div class="invalid-feedback">
                                        Input is required
                                    </div>              
                                </div>
                                <div class="mt-3">
                                    <input type="hidden" name="ticket_id" value="{{$ticket->ticket_id}}"> 
                                    <button class="btn btn-primary">
                                        Submit
                                    </button>
                                    <a href="{{route('admin.support.change.status', ['ticket'=> $ticket->ticket_id, 'status'=>'solved'])}}" class="btn btn-success ml-3 markasclosed">Mark as SOLVED</a>
                                </div>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
                
            </div>



        </div>
    </section>

    <!-- /.content -->
</div>
<!-- /.content-wrapper -->

@endsection

@section('custom_js')


<script type="text/javascript">
    $(function() {
        $('#helpdeskProcess').validate({
            rules: {
                message_description: {
                    required: true,
                },
            },
            messages: {               
                message_description: {
                    required: "Please enter reply",
                }
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });


    });

    $(".markasclosed").click(function(){
        return confirm("Are you sure to CLOSE this ticket?");
    });
</script>
@endsection