@extends('backend.layouts.app')
@section('content')
<style>
    .error{
        color: red;
    }
</style>
<div class="row page-titles">
   <div class="col-md-5 align-self-center">
      <h4 class="text-themecolor">View Inquiry</h4>
   </div>
   <div class="col-md-7 align-self-center text-right">
      <div class="d-flex justify-content-end align-items-center">
         <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item "><a href="{{ route('inquiries-index') }}">Inquiry</a></li>
            <li class="breadcrumb-item active">View Inquiry</li>
         </ol>
      </div>
   </div>
</div>
<div class="container-fluid">
    <div class="content-wrapper">
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="card-title" style="width:100%;display: inline-block;">
                                   <span class="caption-subject font-green bold uppercase">View Inquiry</span>
                                   <div class="float-right">
                                    <a href="{{ route('inquiries-index') }}"> <button type="button" class="btn btn-primary btn-sm "><i class="fa fa-arrow-left"></i> Back</button></a>
                                    <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#exampleModal">Reply</button>
                                   </div>
                                </div>
                                <table  class="table table-bordered table-striped">
                                    <tbody>
                                        <tr>
                                            <th scope="row">First Name</th>
                                            <td>
                                               {{$inquiry->first_name}}
                                            </td>
                                         </tr>
                                         <tr>
                                            <th scope="row">Last Name</th>
                                            <td>
                                               {{$inquiry->last_name}}
                                            </td>
                                         </tr>
                                         <tr>
                                            <th>Mobile</th>
                                            <td>{{$inquiry->mobile}}</td>
                                         </tr>
                                         <tr>
                                            <th>Email</th>
                                            <td>{{$inquiry->email}}</td>
                                         </tr>
                                         <tr>
                                            <th>Messsage</th>
                                            <td><?= wordwrap($inquiry->message, 50, '<br />', true) ?></td>
                                         </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        @isset($inquiry->inquiryreply)                            
                            <div class="card"> 
                                <div class="card-body">
                                    <div class="card-title" style="width:100%;display: inline-block;">
                                        <span class="caption-subject font-green bold uppercase">Replies</span>                                    
                                    </div>
                                    <table  class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th >Message</th>
                                                <th>Created At</th>
                                                
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($inquiry->inquiryreply as $key=>$value)
                                                <tr>
                                                    <td>
 
                                                           
                                                        {!! $value->message !!}
                                                    </td>
                                                   
                                            <td>
                                            {{  $value->updated_at ? $value->updated_at->format(config('GET.admin_date_time_format') ?? 'Y-m-d ') : '-'}}
                                            </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        @endisset
                    </div>                
                </div>                
            </div>
        </section>
    </div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Reply Form</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="message-box" role="alert"></div>
                <form id="inputForm">
                    <div class="form-group">
                        <label for="inputText">Message</label>
                        <input type="hidden" name="inquiry_id" value="{{ $inquiry->id }}" required>
                        <textarea class="form-control" id="message" name="message" required></textarea>
                        <div class="invalid-feedback" style="color:red">Please enter a valid input.</div>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script>
$(document).ready(function () {
    // jQuery validation   
    CKEDITOR.replace('message');

    $('#inputForm').validate({
        ignore: [] , 
        rules: {
            message: {
                required: function() 
                        {
                         CKEDITOR.instances.message.updateElement();
                        },
                minlength: 2
            }
        },
        messages: {
            message: {
                required: "Please enter some text",
                minlength: "Your text must be at least 2 characters long"
            }
        },
        submitHandler: function(form) {
            // Sync CKEditor content with the textarea
            for (instance in CKEDITOR.instances) {
                CKEDITOR.instances[instance].updateElement();
            }

            // Disable the submit button to prevent multiple clicks
            var $submitButton = $(form).find('button[type="submit"]');
            $submitButton.prop('disabled', true);

            // AJAX submission
            $.ajax({
                url: '{{ route("inquiries-reply") }}', 
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: $(form).serialize(),
                success: function (response) {
                    console.log(response.status, response.message, response);
                    if(response.status) {
                        $('#message-box').addClass('alert alert-success');
                        $('#message-box').html(response.message);
                    }
                    setTimeout(() => {
                        location.reload();
                    }, 2000);
                },
                error: function (xhr, status, error) {
                    alert('An error occurred: ' + error);
                },
                complete: function() {
                    // Do not re-enable the submit button here since we want to disable it after one click
                }
            });
        }
    });

    // Clear validation states when the modal is opened
    $('#exampleModal').on('show.bs.modal', function () {
        CKEDITOR.replace('message');

        $('#inputForm input').removeClass('is-invalid is-valid');
        $('#inputForm')[0].reset(); // Optional: Reset form fields
    });
});



</script>


@stop
