@extends('layouts.master')
@section('title', 'View Contact Message')

@section('content')
    <!-- ========================== Page Content ==================================== -->
    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0 font-size-18">View Contact Message</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard </a></li>
                                <li class="breadcrumb-item active" style="color: #74788d;">View Contact Message</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            
                            

                                <div class="row">
                                    <div class="col-lg-5"></div>

                                    <div class="col-lg-2">

                                        <h5 class="mb-4" style="margin-left: 18px;">
                                            <span class="{{ $contact->status == 'Replied' ? 'text-success' : 'text-danger' }}">
                                                <div class="spinner-grow m-1" style="height: 1rem;width: 1rem;position: relative;top: 1px;right: 1px;" role="status">
                                                    <span class="sr-only">Loading...</span>
                                                </div>{{ $contact->status }}
                                            </span>
                                        </h5>
                                        
                                    </div>

                                    <div class="col-lg-5"></div>
                                </div>

                                <br><br>
                            
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3 position-relative">
                                            <label for="validationTooltip01" class="form-label">Name</label>
                                            <input type="text" class="form-control" id="validationTooltip01" name="name" value="{{ old('name', $contact->name) }}" readonly="">
                                            
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="mb-3 position-relative">
                                            <label for="validationTooltip02" class="form-label">E-mail</label>
                                            <input type="email" class="form-control" id="validationTooltip02" name="email" value="{{ old('email', $contact->email) }}" placeholder="Enter E-mail Address" readonly="">
                                            
                                        </div>
                                    </div> 

                                </div>

                                <br>

                                <div class="row">

                                    <div class="col-md-6">
                                        <div class="mb-3 position-relative">
                                            <label for="validationTooltip06" class="form-label">Phone</label>
                                            <input type="tel" class="form-control" id="validationTooltip06" placeholder="Enter Phone" name="phone" value="{{ old('phone', $contact->phone) }}" readonly="">
                                            
                                        </div>
                                    </div>


                                    <div class="col-md-6">
                                        <div class="mb-3 position-relative">
                                            <label for="validationTooltip03" class="form-label">Service</label>
                                            <input type="text" class="form-control" id="validationTooltip03" placeholder="Enter Service" name="service" value="{{ old('service', $service->name) }}" readonly="">
                                            
                                        </div>
                                    </div>
                                </div>

                                <br>

                                <div class="row">
                                    
                                    @if($contact->status == 'Not replied')
                                        <div class="col-md-6">
                                            <div class="mb-3 position-relative">
                                                <label for="validationTooltip19" class="form-label">Sent At</label>
                                                <input type="text" class="form-control" id="validationTooltip19" placeholder="Enter Address" name="sent" value="{{ old('sent', $sent) }}" readonly="">
                                                
                                            </div>
                                        </div>
                                    @else

                                        <div class="col-md-3">
                                            <div class="mb-3 position-relative">
                                                <label for="validationTooltip19" class="form-label">Sent At</label>
                                                <input type="text" class="form-control" id="validationTooltip19" placeholder="Enter Address" name="sent" value="{{ old('sent', $sent) }}" readonly="">
                                                
                                            </div>
                                        </div>

                                        <div class="col-md-3">
                                            <div class="mb-3 position-relative">
                                                <label for="" class="form-label">Replied At</label>
                                                <input type="text" class="form-control" id="" placeholder="Enter Address" name="sent" value="{{ $replied }}" readonly="">
                                                
                                            </div>
                                        </div>
                                    @endif

                                    <div class="col-md-6">
                                        <div class="mb-3 position-relative">

                                            @if($contact->status == 'Not replied')
                                                <form action="{{ route('mark.replied', $contact->id) }}" method="POST">
                                                @csrf
                                                    
                                                    <label for="" class="form-label">Have you replied?</label>
                                                    <button class="btn btn-success waves-effect waves-light" onclick="return confirm('Are you sure to mark as Replied?')" style="width: 100% !important" type="submit"><i class="bx bx-mail-send me-1" style="position: relative; top: 1px;"></i> Mark this as Replied <i class="bx bxs-send bx-fade-right" style="position: relative; top: 1px;"></i></button>

                                                </form>
                                            @else
                                                <form action="{{ route('mark.unreplied', $contact->id) }}" method="POST">
                                                @csrf
                                                    
                                                    <label for="" class="form-label">Hasn't the message replied?</label>
                                                    <button class="btn btn-danger waves-effect waves-light" onclick="return confirm('Are you sure to mark as Unreplied?')" style="width: 100% !important" type="submit"><i class="bx bx-mail-send me-1" style="position: relative; top: 1px;"></i> Mark this as Unreplied <i class="bx bxs-send bx-fade-right" style="position: relative; top: 1px;"></i></button>

                                                </form>
                                            @endif

                                        </div>
                                    </div>

                                </div>

                                <br>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-3 position-relative">
                                            <label for="summernote_dis" class="form-label">Message</label>
                                            <textarea id="summernote_dis" name="message" class="form-control" readonly="">{{ old('message', $contact->message) }}</textarea>
                                        </div>
                                    </div>
                                </div>


                                <div class="mt-5 text-center">
                                    <a class="btn btn-info" href="{{ route('dashboard') }}" title="Edit">
                                        <i class="fas fa-arrow-circle-left me-1"></i> Go To Dashboard
                                    </a>
                                </div>

                            <br>
                        </div>
                        <!-- end card body -->
                    </div>
                    <!-- end card -->
                </div>
                <!-- end col -->
            </div>
            <!-- end row -->

            
        </div> <!-- container-fluid -->
    </div>
    <!-- End Page-content -->                
                
@endsection


@section('scripts')

    <script type="text/javascript">
        $('#summernote_dis').summernote({
            tabsize: 2,
            height: 250,
            toolbar: [
              ['view', ['fullscreen', 'help']]
            ],
        });
    </script>

    <script type="text/javascript">
        $('.note-editable').attr('contenteditable', 'false');
    </script>

    
@endsection

@section('styles')
    <style type="text/css">
        .note-editing-area {
            background: white;
        }

        .select2-container--default.select2-container--disabled .select2-selection--multiple {
            background-color: #bcbfc2 !important;
            cursor: default;
        }
    </style>
@endsection