@extends('layouts.app')
@section('content')
<!-- Site wrapper -->
<div class="wrapper">
    <!-- 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="player-title">Customer Support Details</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active"><a href="{{route('customer-support.index')}}">Support</a>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>
        <section class="content">
            <div class="card">
                <div class="card-body">
                    <form method="POST" action="{{route('customer-support.storeResponse', $customer->id)}}">
                        @csrf
                        <div class="row gap-3">
                            <div class="col-md-6">
                                <h4>Name:</h4>
                                <p>{{ ucfirst($customer->user->name) ?? 'N/A' }}</p>
                            </div>
                            <div class="col-md-6">
                                <h4>Email:</h4>
                                <p>{{ $customer->user->email ?? 'N/A' }}</p>
                            </div>
                            <div class="col-md-6">
                              <h4>Phone Number:</h4>
                                <p>
                                    @if ($customer->user->country_code && $customer->user->phone)
                                        {{ $customer->user->country_code }}{{ $customer->user->phone }}
                                    @else
                                        N/A
                                    @endif
                                </p>
                            </div>
                            <div class="col-md-6">
                                <h4>Topic:</h4>
                                <p>{{ $customer->topic->topic ?? 'N/A' }}</p>
                            </div>
                            <div class="col-md-6">
                                <h4>Message:</h4>
                                <p>{!! ucfirst($customer->message ?? 'N/A') !!}</p>
                            </div>
                            <div class="col-md-6">
                                <h4>Image:</h4>
                                @if ($customer->user->profileImage)
                                    <img src="{{ asset($customer->user->profileImage) }}" alt="User Image"
                                        class="img-fluid" style="height: 200px; width: 200px;">
                                @else
                                    <p>No image available</p>
                                @endif
                            </div>
                            <div class="col-md-12">
                                <h4>Response:</h4>
                                <textarea name="response" class="form-control" rows="4"
                                    placeholder="Enter your response here...">{!! $customer->admin_response !!}</textarea>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button type="submit" class="btn btn-primary">Submit Response</button>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>
</div>
@endsection