@extends('merchant.layout')

@section('title','Ticket Details')

@section('content')

<div class="container-fluid">

    {{-- HEADER --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1">
                Ticket #{{ $ticket->id }}
            </h4>
            <small class="text-muted">
                {{ $ticket->subject }}
            </small>
        </div>

        <span class="badge
            {{ $ticket->status === 'closed'
                ? 'bg-danger'
                : 'bg-success' }}">
            {{ ucfirst($ticket->status) }}
        </span>
    </div>

    <div class="row">

        {{-- LEFT: CONVERSATION --}}
        <div class="col-lg-8">

            <div class="card shadow-sm mb-3">
                <div class="card-header bg-white">
                    <strong>Conversation</strong>
                </div>

                <div class="card-body" style="max-height: 420px; overflow-y:auto">

                    {{-- ORIGINAL MESSAGE --}}
                    <div class="mb-4">
                        <div class="fw-semibold">
                            You
                            <small class="text-muted ms-2">
                                {{ $ticket->created_at->format('d M Y, h:i A') }}
                            </small>
                        </div>
                        <div class="p-3 bg-light rounded">
                            {{ $ticket->message }}
                        </div>
                    </div>

                    {{-- REPLIES --}}
                    @foreach($ticket->replies as $reply)
                        <div class="mb-4">

                            <div class="fw-semibold">
                                {{ $reply->sender_type === 'admin'
                                    ? 'Support Team'
                                    : 'You' }}

                                <small class="text-muted ms-2">
                                    {{ $reply->created_at->format('d M Y, h:i A') }}
                                </small>
                            </div>

                            <div class="p-3 rounded
                                {{ $reply->sender_type === 'admin'
                                    ? 'bg-primary bg-opacity-10'
                                    : 'bg-secondary bg-opacity-10' }}">
                                {{ $reply->message }}
                            </div>

                        </div>
                    @endforeach

                </div>
            </div>

            {{-- REPLY FORM --}}
            @if($ticket->status !== 'closed')
                <div class="card shadow-sm">
                    <div class="card-body">
                        <form method="POST"
                              action="{{ route('merchant.tickets.reply', $ticket->id) }}">
                            @csrf

                            <div class="mb-3">
                                <label class="form-label">Reply</label>
                                <textarea name="message"
                                          rows="3"
                                          class="form-control"
                                          placeholder="Type your message..."
                                          required></textarea>
                            </div>

                            <div class="d-flex justify-content-between">
                                <button class="btn btn-primary">
                                    Send Reply
                                </button>

                                <form method="POST"
                                      action="{{ route('merchant.tickets.close', $ticket->id) }}">
                                    @csrf
                                    <button class="btn btn-outline-danger"
                                            onclick="return confirm('Close this ticket?')">
                                        Close Ticket
                                    </button>
                                </form>
                            </div>

                        </form>
                    </div>
                </div>
            @endif

        </div>

        {{-- RIGHT: DETAILS --}}
        <div class="col-lg-4">

            <div class="card shadow-sm mb-3">
                <div class="card-header bg-white">
                    <strong>Ticket Info</strong>
                </div>

                <div class="card-body small">
                    <p><strong>Subject:</strong> {{ $ticket->subject }}</p>
                    <p><strong>Priority:</strong> {{ ucfirst($ticket->priority ?? 'normal') }}</p>
                    <p><strong>Created:</strong> {{ $ticket->created_at->format('d M Y') }}</p>
                    <p><strong>Last Update:</strong> {{ $ticket->updated_at->format('d M Y') }}</p>
                </div>
            </div>

        </div>

    </div>

</div>

@endsection