@extends('partials.main')
@section('title')
Contact Detail
@endsection
@section('content')

<!-- breadcrumb -->
<div class="breadcrumb-header justify-content-between">
    <nav class="breadcrumb-4">
        <ol class="breadcrumb breadcrumb-style1">
            <li class="breadcrumb-item">
                <a href="{{ route('dashboard') }}">Home</a>
            </li>
            <li class="breadcrumb-item">
                <a href="{{route('contactlist')}}">Contact list</a>
            </li>
            <li class="breadcrumb-item active">Contact Detail</li>
        </ol>
    </nav>
</div>
<!-- breadcrumb -->

<!-- main-content opened -->
<div class="main-content horizontal-content">

    <!-- container opened -->
    <div class="container">

        <!-- row -->
        <div class="row row-sm">
            <div class="col-sm-12 col-lg-12 col-xl-12">
                <div class="">
                    <a class="main-header-arrow" href="" id="ChatBodyHide"><i class="icon ion-md-arrow-back"></i></a>
                    <div class="main-content-body main-content-body-contacts card custom-card">
                        <div class="main-contact-info-header pt-3">
                            <div class="media">
                                <div class="main-img-user">
                                    @if($contact->user->images==NULL)
                                    <img alt="" src="{{asset('assets/img/faces/2.jpg')}}">
                                    @else
                                    <img alt="" src="{{asset('images/product/'.$contact->user->images)}}">
                                    @endif </a>
                                </div>
                                <div class="media-body">
                                    <h5>{{$contact->name}}</h5>
                                    <p>{{ucwords($role->roles[0]->name)}}
                                    </p>

                                     <span class="badge bg-danger open" style="display:none">Open</span>
                                     <span class="badge bg-warning review" style="display:none">Reviewed</span>

                                     <span class="badge bg-info closed" style="display:none">Closed</span>


                                </div>
                            </div>
                            <div class="main-contact-action btn-list pt-3 pe-3">
                                <a href="{{route('contactedit',$contact->id)}}"
                                    class="btn ripple btn-primary text-white btn-icon" data-placement="top"
                                    data-bs-toggle="tooltip" title="Edit Contact"><i class="fe fe-edit"></i></a>
                                <!--   <a href="" class="btn ripple btn-secondary text-white btn-icon btnDelete" data-placement="top"
                                    data-bs-toggle="tooltip" title="Delete Profile"><i class="fe fe-trash-2"></i></a> -->
                            </div>
                        </div>
                        <div class="main-contact-info-body px-5 pt-3">
                            <div>
                                <input type="hidden" value="{{$contact->id}}" id="contact_id">
                                <div class="row">
                                    <div class="col-lg-3">
                                        <h6>Reason</h6>
                                        <p class="text-muted">{{ $contact->reasonValue->name }}</p>
                                    </div>
                                    <div class="col-lg-3">
                                        <h6>Message</h6>
                                        <p class="text-muted">{{$contact->message}}</p>
                                    </div>
                                    <div class="col-lg-3">
                                        <h6>Phone Number</h6>
                                        <p class="text-muted">{{$contact->user->phone}}</p>
                                    </div>
                                    <div class="col-lg-3">
                                        <h6>Email</h6>
                                        <p class="text-muted">{{$contact->user->email}}</p>
                                    </div>
                                    <div class="col-lg-3">
                                        <h6>Current Address</h6>
                                        <p class="text-muted">{{$contact->user->address}}</p>
                                    </div>
                                    <div class="col-lg-3">
                                        <h6>Last Contact</h6>
                                        <p class="text-muted">{{$contact->created_at->format('d M, Y')}}</p>
                                    </div>

                                </div>

                            </div>


                            <div class="media-list pb-0">
                                <h6>Attach Files</h6>
                                <div class="media">
                                    <div class="media-body">
                                        <div class="row">
                                            @if($files == 'Empty')
                                            <div class="col-lg-12 text-center">
                                                <i class="text-muted">No attachments are uploaded</i>
                                            </div>
                                            @else
                                            @foreach($files as $file)
                                            <div class="col-lg-1 text-center">
                                                <span class="fs-1"><i class="fas fa-file-alt"></i></span>
                                                <div class="d-flex" title="{{$file->name}}"><label class="text-truncate"
                                                        style="max-width:100px;">{{$file->name}}</label>
                                                         <a href="javscript:;"
                                                           class="fileDownload  text-dark" fileURL="{{$file->filename}}"
                                                           href="javscript:;" fileName="{{$file->name}}">

                                                           <i class="fa fa-download"></i>
                                                        </a>
                                                </div>

                                            </div>
                                            @endforeach
                                            @endif

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6">
                                <textarea name="" class="form-control comment" id="" cols="30" rows="10"></textarea>
                                </div>
                                <div class="col-lg-6">

                                </div>

                            </div>
                            @if($login_user->roles[0]->name == 'Admin')
                            <button type="button" class="btn btn-primary mb-1" data-bs-toggle="modal"
                                data-bs-target="#exampleModal">
                                Add Notes
                            </button>

                            <button type="button" class="btn btn-primary mb-1" data-bs-toggle="modal"
                                data-bs-target="#statusModal">
                                Update Status
                            </button>
                            @endif
                        </div>

                        <!-- Modals -->

                        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Comment</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <form id="add_comment">
                                        <input type="hidden" value="{{$contact->id}}" id="contact_id" name="id">
                                            <div class="row">
                                                <div class="col-lg-12 col-sm-12 col-md-6 mg-t-10 form-group">
                                                    <label class="main-content-label tx-11 tx-medium tx-gray-600"> Comment : <span
                                                            class="text-danger">
                                                            *</span></label>
                                                    <textarea rows="3" name="comment" cols="50"
                                                        placeholder="Your comment.."
                                                        class="form-control comment"></textarea>

                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                                <button type="submit" class="btn btn-primary" id="btnSubmit">  <i class="fa fa-spinner fa-spin fa-pulse" style="display:none"></i>  Add Comment</button>
                                            </div>
                                    </form>
                                </div>

                                </div>
                            </div>
                        </div>
                        <div class="modal fade" id="statusModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Status</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                    <form id="change_status">
                                        <input type="hidden" value="{{$contact->id}}" id="contact_id" name="id">
                                            <div class="row">
                                                <div class="col-lg-12 col-sm-12 col-md-6 mg-t-10 form-group">
                                                    <label class="main-content-label tx-11 tx-medium tx-gray-600">Status : <span
                                                            class="text-danger">
                                                            </span></label>

                                                            <select name="status" class="form-control">
                                                                <option value="" selected>Select Status</option>
                                                                <option value="1" {{$contact->status==0 ? 'selected' : '' }}>Open</option>
                                                                <option value="0" {{$contact->status==1 ? 'selected' : '' }}>Reviewed</option>
                                                                <option value="2" {{$contact->status==2 ? 'selected' : '' }}>Closed</option>
                                                            </select>


                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                                <button type="submit" class="btn btn-primary" id="btnSubmit">  <i class="fa fa-spinner fa-spin fa-pulse" style="display:none"></i>  Update status</button>
                                            </div>
                                    </form>
                                    </div>

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

                         <!-- end  modals  -->


                    </div>
                </div>
            </div>
        </div>
        <!-- End Row -->
    </div>
    <!-- Container closed -->
</div>
<!-- main-content closed -->

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.10/dist/sweetalert2.all.min.js"></script>

<script type="text/javascript">
    $(document).on('click', '.fileDownload', function(e) {
        e.preventDefault(); //stop the browser from following
        var fileUrl = $(this).attr('fileURL');

        fetch('http://127.0.0.1:8000/uploads/messages/' + fileUrl)
            .then(resp => resp.blob())
            .then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                // the filename you want
                a.download = $(this).attr('fileName');
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
                messageMsg('Your file has downloaded!')
                //alert('your file has downloaded!'); // or you know, something with better UX...
            })

    });
    // Delete

    $(document).on('click', '.btnDelete', function(e) {
        var user = $(this).attr('id');
        Swal.fire({
                title: "Are you sure?",
                text: "You will not be able to recover this contact request!",
                type: "warning",
                buttons: true,
                confirmButtonColor: "#ff5e5e",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: false,
                dangerMode: true,
                showCancelButton: true
            })
            .then((deleteThis) => {
                if (deleteThis.isConfirmed) {
                    $.ajax({
                        url: '',
                        type: "GET",
                        dataType: "JSON",
                        data: {
                            user: user

                        },
                        success: function(response) {

                            if (response["status"] == "fail") {
                                Swal.fire("Failed!", "Failed to delete user.", "error");
                            } else if (response["status"] == "success") {
                                Swal.fire("Deleted!", "User has been deleted.",
                                    "success");

                                // Using .reload() method.
                                location.reload();
                            }
                        },
                        error: function(error) {
                            console.log(error);
                        },
                        async: false
                    });
                } else {
                    Swal.close();
                }
            });
    });

    contact_comment()

    function contact_comment() {
        var id = $("#contact_id").val();
        $.ajax({
            url: '/api/contact/get/comment/' + id,
            headers: {
                "X-CSRF-TOKEN": "{{ csrf_token() }}",
                "Content-Type": "application/json"
            },
            type: "get",
            dataType: "JSON",
            cache: false,
            beforeSend: function() {

            },
            complete: function() {

            },
            success: function(response) {


                if (response["status"] == "fail") {


                } else if (response["status"] == "success") {


                    $(".comment").html(response.data.comment);

                    $(".status").html(response.data.status);

                    if(response.data.status==1)
                    {
                        $('.open').css('display','inline-block');
                        $('.closed').css('display','none');
                        $('.review').css('display','none');

                    }else  if(response.data.status==2){
                        $('.closed').css('display','inline-block');
                        $('.review').css('display','none');
                        $('.open').css('display','none');
                    }
                    else  if(response.data.status==0){
                        $('.review').css('display','inline-block');
                        $('.open').css('display','none');
                        $('.closed').css('display','none');
                    }




                    console.log((response.status))

                }
            },
            error: function(error) {
                console.log(error);
            }
        });

    }

    $("#add_comment").on('submit', (function(e) {

        e.preventDefault();

        $.ajax({

            url: "/api/contact/add/comment",

            type: "post",

            data: new FormData(this),

            dataType: "JSON",

            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },

            processData: false,

            contentType: false,

            cache: false,

            beforeSend: function() {

                $("#btnSubmit").attr('disabled', true);

                $(".fa-spin").css('display', 'inline-block');

            },

            complete: function() {

                $("#btnSubmit").attr('disabled', false);

                $(".fa-spin").css('display', 'none');

            },

            success: function(response) {

                console.log(response)

                if (response["status"] == "fail") {

                    toastr.error('Failed', response["msg"])

                } else if (response["status"] == "success") {

                    toastr.success('Success', response["msg"])


                    contact_comment()
                    $("#exampleModal").modal('hide')

                }

            },

            error: function(error) {

                console.log(error);

            }

        });

    }));

    $("#change_status").on('submit', (function(e) {

     // alert('asd');

     e.preventDefault();

        $.ajax({

            url: "/api/contact/change/status",

            type: "post",

            data: new FormData(this),

            dataType: "JSON",

            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },

            processData: false,

            contentType: false,

            cache: false,

            beforeSend: function() {

                $("#btnSubmit").attr('disabled', true);

                $(".fa-spin").css('display', 'inline-block');

            },

            complete: function() {

                $("#btnSubmit").attr('disabled', false);

                $(".fa-spin").css('display', 'none');

            },

            success: function(response) {


                if (response["status"] == "fail") {

                    toastr.error('Failed', response["msg"])

                } else if (response["status"] == "success") {

                    toastr.success('Success', response["msg"])
                    contact_comment()
                    $("#statusModal").modal('hide')

                }

            },

            error: function(error) {

                console.log(error);

            }

        });

    }));

</script>

@endsection