@extends('layouts.portal.layout')

@section('content')

<!-- Accordion styling -->
<style>
.panel-body {
    box-shadow: none;
    border: 1px solid #c3d1d8;
    border-radius: 10px;
}

.panel-group .panel-heading {
    padding: 0;
    background-color: #D9EDF7;
}

.panel-group .panel-heading a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    position: relative;
}

.panel-group .panel-heading a:after {
    content: '-';
    float: right;
}

.panel-group .panel-heading a.collapsed:after {
    content: '+';
}
</style>

<div class="container">
    <p class="tagline mt-4 py-2">
        <span>Ticket ID : {{$ticket->id}}</span> &nbsp;&nbsp;&nbsp;&nbsp; - &nbsp;&nbsp;&nbsp;&nbsp;
        <span>Title : {{$ticket->ticket_title}}</span>
    </p>
</div>

<!-- Claim -->
<div class="container">
    <div class="accordion accordion-flush" id="accordionFlushExample">

        <!-- plus minus tab -->
        <div class="panel-group mt-5" id="accordionSingleOpen" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne">
                    <h5 class="panel-title">
                        <a role="button" data-toggle="collapse" href="#collapseItemOpenOne" aria-expanded="true"
                            aria-controls="collapseItemOpenOne">
                            <i class="fas fa-reply"></i> &nbsp; Reply
                        </a>
                    </h5>
                </div>
                <div id="collapseItemOpenOne" class="panel-collapse collapse in" role="tabpanel"
                    aria-labelledby="headingOne">
                    <div class="panel-body">
                        <form action="{{ route('ticketreply') }}" method="post">
                            {{ csrf_field() }}
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label style="font-size:14px"><b>Message</b></label>
                                            <input name="ticketId" value="{{$ticket->id}}" hidden>
                                            <textarea name="message" class="form-control" rows="3" class="txtarea"
                                                style="height:50%; width:100%"></textarea>
                                        </div>
                                    </div>
                                </div>
                                @if($ticket->status == "Closed")
                                    <button disabled type="submit" class="btn btn-primary">Submit</button>
                                @else          
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                @endif
                            </div>
                            <!-- /.card-body -->
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mt-2">
            <div class="card-body">
                <table id="example2" class="table table-bordered table-striped">
                    <!-- <thead>
                        <th></th>
                        <th></th>
                        <th></th>
                    </thead> -->
                    <tbody>
                        @foreach($ticketmsgs as $item)
                        <tr style="text-align:center;">
                            <td style="width: 160px;"><i class="fas fa-user pr-2"></i> {{$item->name}}</td>
                            <td>{{$item->ticket_message}}</td>
                            <td style="width: 127px;"><i class="far fa-calendar-alt pr-2"></i> {{date('d-m-Y h:i A', strtotime($item->created_at))}}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
        <br><br>
    </div>
</div>

@endsection