@extends('Admin.layouts.master')

@section('content')
@php
$currentPage = 'manage-customer';
@endphp
<style>
    .message {
        background-color: #f8f9fa;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 10px;
    }
    .reply {
        background-color: #e2e3e5;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 10px;
        margin-left: 30px;
    }
    .message-label {
        font-size: 1.1em;
        color: #007bff;
    }
    .reply-label {
        font-size: 1.1em;
        color: #28a745;
    }
    .message p, .reply p {
        margin: 0;
        padding: 0;
    }
</style>

<div class="layout-px-spacing">
    <div class="middle-content container-xxl p-0">
        <div class="row layout-top-spacing ">
            <div class="top-tabel">
                <div class="row">
                    <div class="col-md-4 left">
                        <a class="d-flex align-items-center justify-content-center pl-2" href="{{ route('manage.customer') }}">
                            <img class="back-btn" src="{{ asset('public/assets/img/left-arrow.svg') }}">
                            <h6 class="card-title p-0">View Details</h6>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
                <div class="widget-content widget-content-area br-8 position-btn p-0">
                    <div class="view-details">
                        <div class="simple-tab">
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
                                    <div class="row">
                                        <div class="col-md-6 mb-10 tabs23">
                                            <table>
                                                <tr class="title">
                                                    <td>Name :</td>
                                                    <td>User ID :</td>
                                                    <td>Date of birth :</td>
                                                    <td>Phone Number :</td>
                                                </tr>
                                                <tr class="w-100">
                                                    <td>{{ $customers_data->first_name }} {{ $customers_data->last_name }}</td>
                                                    <td>{{ $customers_data->id }}</td>
                                                    <td>{{ \Carbon\Carbon::parse($customers_data->date_of_birth)->format('d/m/Y') }}</td>
                                                    <td>{{ $customers_data->phone_number }}</td>
                                                </tr>
                                            </table>
                                            <a class="download-btn-custom mt-3" href="{{ url('/create-pdf-file', $customers_data->id) }}">
                                                <span>Download user report</span>
                                                <img src="{{ asset('public/assets/img/download.svg') }}" />
                                            </a>

                                        </div>
                                        <div class="col-md-6 mb-10">
                                            <table>
                                                <tr class="title">
                                                    <td>Location :</td>
                                                    <td>Email ID :</td>
                                                    <td>Onboarded date :</td>
                                                </tr>
                                                <tr class="w-100">
                                                    <td>{{ $customers_data->state->name}}</td>
                                                    <td>{{ $customers_data->email_address }}</td>
                                                    <td>{{ \Carbon\Carbon::parse($customers_data->created_at)->format('d-m-y') }}</td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="col-md-12 mb-10">
                                            <div class="card">
                                                <div class="card-header">
                                                  <b>  Contact History </b>
                                                </div>
                                                <div class="card-body">
                                                    @if($customers_data->contactMessages->isNotEmpty())
                                                        @foreach($customers_data->contactMessages as $message)
                                                            <div class="message">
                                                                <strong>Message:</strong>
                                                                <p>{{ $message->message }}</p>
                                                            </div>
                                                            @if($message->reply_message)
                                                                <div class="reply">
                                                                    <strong>Reply:</strong>
                                                                    <p>{{ $message->reply_message }}</p>
                                                                </div>
                                                            @endif
                                                        @endforeach
                                                    @else
                                                        <p>No contact history available.</p>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('section_script')
<script src="{{ asset('assets/js/admin/manage_customer/main.js') }}"></script>
@endsection
