@extends('admin.layouts.master')

@section('page_title', __('admin.Report A Problem View'))

@section('page_heading', __('admin.Report A Problem View'))

@section('page_text', __('admin.Report A Problem View'))

@section('page_breadcrumb_icon') <i class="ki-duotone ki-home fs-3 text-gray-500 me-n1"></i> @endsection

@section('page_breadcrumb_item', 'Report A Problem View')

@section('page_breadcrumb_item2', 'Report A Problem View')

@endsection
@section('css')
    <style>
        .img-box img {
            opacity: 1;
        }

        .img-box i {
            opacity: 0;
        }
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card card-flush">
                <div class="card-body">
                    <div class="row">
                        <form method="POST" action="{{ url('admin/request/status') }}">
                            @csrf
                            <div class="row ">
                                <input type="hidden" name="id" value="{{ $problem->id }}">
                                <div class="col-6">
                                    <div class="card card-flush">
                                        <div class="card-header text-center">
                                            <span>Messages</span>
                                        </div>
                                        <div class="card-body border p-0 chat-care"
                                            style="overflow: auto;min-height: 500px;max-height: 500px">
                                            <ul class="chat list-group border-0">
                                                @if (count($problem->request_messages) > 0)
                                                    @foreach ($problem->request_messages as $msg)
                                                        <li class="list-group-item d-flex align-items-center rounded-0">
                                                            <span class="chat-img left clearfix mx-2">
                                                                @if ($msg->sender_id == 1)
                                                                    <img src="http://placehold.it/50/55C1E7/fff&text=Admin"
                                                                        style="width: 50px;height: 50px;" alt="Me"
                                                                        class="rounded-circle" />
                                                                @else
                                                                    <img src="http://placehold.it/50/FA6F57/fff&text=C"
                                                                        style="width: 50px;height: 50px;" alt="Admin"
                                                                        class="rounded-circle" />
                                                                @endif
                                                            </span>
                                                            <p>
                                                                {{ $msg->message }}
                                                                @if ($msg->request_file)
                                                            <div class="w-100 d-flex justify-content-end img-box"
                                                                data-id="{{ $msg->id }}">
                                                                @php
                                                                    $extension = pathinfo($msg->request_file)['extension'];
                                                                    $imgSrc = '';
                                                                    $imgClass = 'img-thumbnail';

                                                                    if (in_array($extension, ['png', 'jpeg', 'jpg'])) {
                                                                        $imgSrc = url("RequestFiles/{$msg->request_file}");
                                                                    } elseif ($extension === 'pdf') {
                                                                        $imgSrc = url('RequestFiles/pdf-img.png');
                                                                    } elseif (in_array($extension, ['xls', 'xlsx', 'csv'])) {
                                                                        $imgSrc = url('RequestFiles/excel-img.png');
                                                                    } else {
                                                                        $imgSrc = url('RequestFiles/no-img.png');
                                                                    }
                                                                @endphp

                                                                <img id="img-{{ $msg->id }}" src="{{ $imgSrc }}"
                                                                    style="width: 100px; height: 80px; position: relative;"
                                                                    class="img-thumbnail ">

                                                                <a href="{{ url('customer/request-file/download/' . $msg->request_file) }} "class=" mt-4"
                                                                    style="position: absolute;margin-right: 40px"><i
                                                                        class="fa fa-download  mt-1 text-primary "
                                                                        id="icon-{{ $msg->id }}"
                                                                        aria-hidden="true"></i></a>
                                                            </div>
                                                        @endif
                                                            </p>

                                                        </li>
                                                    @endforeach
                                                @else
                                                    <p class="text-center border p-1">---------------</p>
                                                @endif
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6 ">
                                    <div class="d-flex flex-column mb-7 fv-row">
                                        <label>Problem Status</label>
                                        <select class="form-select" data-control="select2" name="status">
                                            <option value="Pending" @if ($problem->status == 'Pending') selected @endif>
                                                Pending</option>
                                            <option value="In Progress" @if ($problem->status == 'In Progress') selected @endif>In
                                                Progress
                                            </option>
                                            <option value="Resolved" @if ($problem->status == 'Resolved') selected @endif>
                                                Resolved</option>
                                        </select>
                                    </div>

                                    <div class="d-flex flex-column mb-7 fv-row">
                                        <label>Message</label>
                                        <textarea class="form-control" rows="5" name="message">{{ $problem->message }}</textarea>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" value="1" name="is_active_file_uploading"
                                            id="flexCheckDefault" {{ $problem->is_active_file_uploading == 1 ? 'checked' : '' }}>
                                        <label class="form-check-label" for="flexCheckDefault">
                                            Enable File Uploading
                                        </label>
                                    </div>
                                    <div class="d-flex flex-column mb-7 fv-row ">
                                        <div class="clearfix d-flex justify-content-end">
                                            <button type="submit" id="next-btn"
                                                class="btn-shadow btn-wide float-right   btn-hover-shine btn btn-primary">
                                                @lang('admin.Submit')
                                            </button>
                                            <a href="{{ url('admin/request/problem') }}" id="prev-btn"
                                                class="btn-shadow float-right btn-wide  ms-3 btn btn-outline-secondary">
                                                Back
                                            </a>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="col-12 ">
                                <br>
                                <figure>
                                    <blockquote>
                                        <p class="fs-6 text">When you change the status to "IN PROGRESS" the system will
                                            automatically send a
                                            message to the resident via the messaging system, email and SMS:</p>
                                    </blockquote>
                                    <figcaption class="blockquote-footer">
                                        We have received and read your request. One of our team members will contact you
                                        shortly
                                    </figcaption>
                                </figure>

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

                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="card card-flush">
                <div class="card-body">
                    <h3 style="color: #d98732;">Report Details</h3>
                    <div class="row">
                        <div class="col-6">
                            <p><strong>Category</strong></p>
                        </div>
                        <div class="col-6">
                            <p><span>{{ $problem->request_category->name }}</span></p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <p><strong>Description</strong></p>
                        </div>
                        <div class="col-6">
                            <p><span>{{ $problem->description }}</span></p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <p><strong>Location</strong></p>
                        </div>
                        <div class="col-6">
                            <p><span>{{ $problem->location }}</span></p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <p><strong>Property Access</strong></p>
                        </div>
                        <div class="col-6">
                            @if ($problem->property_access == 1)
                                <p><span>The resident has given their permission for you to access their
                                        property</span></p>
                            @else
                                <p><span>No permission for Portal to access your property</span></p>
                            @endif
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <p><strong>Additional Info</strong></p>
                        </div>
                        <div class="col-6">
                            <p><span>{{ $problem->additional_info }}</span></p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <p><strong>Contact Details</strong></p>
                        </div>
                        <div class="col-6">
                            <p><span>{{ $problem->name }} <br>{{ $problem->email }} </span></p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <p><strong>Reported by</strong></p>
                        </div>