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

@section('title')
<title>{{env('APP_NAME')}} :: Helpdesk</title>
@endsection

@section('heading')
<section class="page-heading">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="content flex-column flex-sm-row">
                    <a href="{{route('helpdesk')}}" class="btn btn-link">
                        <i class="fa fa-angle-left"></i> Back
                    </a>
                    <h1 class="py-2 py-sm-0">Support</h1>
                    <!-- breadcrumb -->
                    @php
                    $breadcrumb = array(
                        array('title'=>'Support', 'url'=>'', 'active'=>'1')
                    );
                    @endphp
                    @include('website_view.component.breadcrumb',  compact("breadcrumb"))
                    <!-- \breadcrumb -->
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('content')

@if (session('errors'))
<div class="alert alert-danger alert-dismissible">
    @foreach($errors->all() as $message)
    <li class="text-danger">{{$message}}</li>
    @endforeach
</div>
@endif
<section class="account-one">
    <div class="container-fluid">
        <div class="row gap-y-2">
            <!-- Message-->
            @if (session('message'))
            <div class="col-12">
                <div class="alert alert-{{session('message.type')}} alert-dismissible fade show" role="alert">
                    @if(session('message.type')=='danger')
                    <strong>Oops!</strong> {!! session('message.text') !!}
                    @else
                    <strong>Success!</strong> {!! session('message.text') !!}
                    @endif
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </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">
                                <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('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-main">
                                    Submit<i class="fa fa-angle-right"></i>
                                </button>
                                <a href="{{route('helpdesk-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>

@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