@extends('layouts.app', ['title' => __('Ticket Details')])

@section('content')
<div class="header bg-gradient-primary pb-8 pt-5"></div>

<div class="container-fluid mt--7">
    <div class="row">
        <div class="col-12">
            <div class="card shadow border-0">

                {{-- HEADER --}}
                <div class="card-header bg-white border-0">
                    <div class="row align-items-center">
                        <div class="col-8">
                            <h3 class="mb-0">
                                <span class="text-muted">#{{ $ticket->id }}</span> {{ $ticket->subject }}
                                <span class="badge badge-pill ml-2 {{ $ticket->status == 'open' ? 'badge-success' : 'badge-success' }}">
                                    {{ strtoupper($ticket->status) }}
                                </span>
                            </h3>
                        </div>
                        <div class="col-4 text-right">
                            <a href="{{ route('restaurant.tickets.index') }}" class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-arrow-left mr-1"></i> {{ __('Back to List') }}
                            </a>
                        </div>
                    </div>
                </div>

                {{-- BODY --}}
                <div class="card-body bg-lighter" style="background-color: #f8f9fe;">

                    @include('partials.flash')

                    {{-- INITIAL MESSAGE --}}
                    <div class="card shadow-none border mb-4">
                        <div class="card-body py-3 bg-white">
                            <small class="text-uppercase font-weight-bold text-muted">{{ __('Initial Inquiry') }}</small>
                            <p class=" mt-2 mb-0" style="white-space: pre-line;">
                                {{ $ticket->description }}
                            </p>
                            <div class="mt-2">
                                <small class="text-muted">
                                    <i class="far fa-calendar-alt mr-1"></i>
                                    {{ $ticket->created_at->format('d M Y, h:i A') }}
                                </small>
                            </div>
                        </div>
                    </div>

                    {{-- CHAT --}}
                    <h5 class="text-muted text-uppercase small font-weight-bold mb-3">
                        <i class="fas fa-comments mr-2"></i>{{ __('Conversation') }}
                    </h5>

                    <div class="chat-container mb-4" style="max-height: 600px; overflow-y: auto; padding: 10px;">

                        @foreach($ticket->responses as $response)

                            @php
                                $sender = strtolower(trim($response->sender_type ?? ''));
                            @endphp

                            @if(in_array($sender, ['admin', 'staff', 'support']))

                                {{-- SUPPORT MESSAGE --}}
                                <div class="d-flex flex-column align-items-start mb-4">
                                    <div class="p-3 shadow-sm bg-white" style="max-width: 80%; border-radius: 0 15px 15px 15px; border-left: 4px solid #5e72e4;">
                                        <span class="text-primary font-weight-bold small">{{ __('Support Team') }}</span>

                                        <div class="text-dark text-sm mt-2" style="white-space: pre-line;">
                                            {{ $response->response }}
                                        </div>

                                        <div class="text-right mt-2">
                                            <small class="text-muted" style="font-size: 0.7rem;">
                                                {{ $response->created_at->format('h:i A | d M') }}
                                            </small>
                                        </div>
                                    </div>
                                </div>

                            @else

                                {{-- USER MESSAGE --}}
                                <div class="d-flex flex-column align-items-end mb-4">
                                    <div class="p-3 shadow-sm bg-primary text-white" style="max-width: 80%; border-radius: 15px 15px 0 15px;">
                                        <span class="text-white-50 font-weight-bold small">{{ __('You') }}</span>

                                        <div class="text-sm mt-2" style="white-space: pre-line;">
                                            {{ $response->response }}
                                        </div>

                                        <div class="text-left mt-2 border-top border-white-50 pt-1">
                                            <small class="text-white-50" style="font-size: 0.7rem;">
                                                {{ $response->created_at->format('h:i A | d M') }}
                                            </small>
                                        </div>
                                    </div>
                                </div>

                            @endif

                        @endforeach
                    </div>

                    <hr class="my-4">

                    {{-- REPLY FORM --}}
                    <div class="row justify-content-center">
                        <div class="col-lg-8">

                            <form method="post" action="{{ route('ticket.reply', $ticket->id) }}">
                                @csrf

                                <fieldset {{ !$adminReplied ? 'disabled' : '' }}>

                                    <div class="form-group mb-3">
                                        <label class="font-weight-bold">{{ __('Quick Reply') }}</label>

                                        <textarea name="response" rows="5"
                                                  class="form-control {{ $errors->has('response') ? 'is-invalid' : '' }}"
                                                  placeholder="{{ __('Enter your message...') }}"
                                                  required></textarea>

                                        @if ($errors->has('response'))
                                            <span class="invalid-feedback">
                                                <strong>{{ $errors->first('response') }}</strong>
                                            </span>
                                        @endif
                                    </div>

                                    <div class="text-right">
                                        <button type="submit" class="btn btn-primary px-5">
                                            <i class="fas fa-paper-plane mr-2"></i> {{ __('Send Message') }}
                                        </button>
                                    </div>

                                </fieldset>
                            </form>

                            @if(!$adminReplied)
                                <div class="text-center py-3 mt-3 bg-light rounded border">
                                    <i class="fas fa-lock text-muted mb-2"></i>
                                    <p class="text-muted mb-0">
                                        {{ __('Replying is disabled until an administrator responds.') }}
                                    </p>
                                </div>
                            @endif

                        </div>
                    </div>

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

    @include('layouts.footers.auth')
</div>

{{-- STYLES --}}
<style>
.chat-container::-webkit-scrollbar {
    width: 5px;
}
.chat-container::-webkit-scrollbar-thumb {
    background: #adb5bd;
    border-radius: 10px;
}
fieldset[disabled] {
    opacity: 0.6;
    pointer-events: none;
}
</style>
@endsection