@extends('admin.template')

@section('title')
    <title>Admin Deposits</title>
@endsection
@section('active-link')
    Admin-Deposits
@endsection
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
@section('content')
    <div class="content-wrapper">
        {{--<div class="row">
            <div class="col-md-12 grid-margin">
                <div class="d-flex justify-content-between flex-wrap">
                    <div class="d-flex align-items-end flex-wrap">
                        <div class="me-md-3 me-xl-5">
                            <h2>Admin Messages</h2>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-end flex-wrap">
                        <div class="d-flex">
                            <i class="mdi mdi-home text-muted hover-cursor"></i>
                            <p class="text-muted mb-0 hover-cursor">&nbsp;/&nbsp;<a href="{{url('/dashboard')}}">Dashboard&nbsp;</a>/&nbsp;</p>
                            <p class="text-primary mb-0 hover-cursor">Admin Messages</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>--}}

        @if ($message = Session::get('success'))
            <div class="alert alert-success alert-block">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{ $message }}</strong>
            </div>
        @endif

        @if ($message = Session::get('error'))
            <div class="alert alert-danger alert-block">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{ $message }}</strong>
            </div>
        @endif


        <div class="row">
            <div class="col-md-12 stretch-card">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h3>Messages List</h3>

                    </div>

                    <div class="card-body table-responsive">
                        <table id="myTable" class="table">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Name</th>
									<th scope="col">Email</th>
                                    <th scope="col">Message</th>
									<th scope="col">Document</th>
                                    <th scope="col">Created Date</th>
                                    <th scope="col">Action</th>
                                </tr>
                            </thead>
                            {{--<tbody>
                                @php  $i = 1; @endphp
                                @foreach($messages as $message)
                                <tr>
                                    <th scope="row">{{$i}}</th>
                                    <td>{{$message->name}}</td>
                                    <td>{{ $message->email ?? "" }} </td>
                                    <td>{{ $message->details ?? "" }} </td>
									<td><img src"{{$message->image}}" width="50" height="40"> </td>
                                    <td>{{ $message->created_at}} </td>

                                </tr>
                                @php  $i++; @endphp
                                @endforeach
                            </tbody>--}}
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

	<div id='loader' style='display: none; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%;'>
        <img src="{{ asset('assets/img/loader.gif') }}" width='100' height='100'>
    </div>


    <!-- Reply Message Modal -->
    <div class="modal fade" id="replyModal" tabindex="-1" aria-labelledby="replyModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="replyModalLabel">Reply to Message</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="replyForm" action="{{ route('replayMessage') }}" method="POST">
                        @csrf
                        <input type="hidden" name="message_id" id="message_id">
                        <div class="mb-3">
                            <label for="customer_message" class="form-label">Customer Message</label>
                            <textarea class="form-control" id="customer_message" rows="3" disabled></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="reply_message" class="form-label">Your Reply :</label>
                            <textarea class="form-control " name="reply_message" id="reply_message" rows="3" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Send Reply</button>
                    </form>
                </div>
            </div>
        </div>
    </div>


 @endsection('content')

@section('js')
 <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>

<script type="text/javascript">

    $(document).ready(function() {
        $.ajaxSetup({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
        });

        $('#myTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('all_messages_ajax') }}",
                type: "POST",
                dataSrc: "aaData", // Ensure correct data parsing
                _token: '{{csrf_token()}}'
            },
            columns: [
                { data: 'sno'},
                { data: 'name' },
                { data: 'email' },
                { data: 'message' }, // Fixed column name
                { data: 'image'},
                { data: 'date' },
                { data: 'action' }
            ]
        });

    });



    document.addEventListener("DOMContentLoaded", function() {
        document.getElementById('myTable').addEventListener('click', function(event) {
            if (event.target.classList.contains('reply-btn')) {
                let button = event.target;
                let messageId = button.getAttribute('data-id');
                let messageContent = button.getAttribute('data-message');

                document.getElementById('message_id').value = messageId;
                document.getElementById('customer_message').value = messageContent;
            }
        });
    });

   /* $(document).on('click', '.reply-btn', function() {
        let messageId = $(this).data('id');
        let messageContent = $(this).data('message');

        $('#message_id').val(messageId);
        $('#customer_message').val(messageContent);
    });
*/
</script>
 <script>
/*
    function change_status(id) {

        status = document.getElementById("status_"+id).value;
        $.ajax({
            type:'POST',
            url:'{{ route('change_deposit_status') }}',
            data:{status:status, id:id , _token: '{{csrf_token()}}' },
                beforeSend: function(){
                    // Show image container
                    $("#loader").show();
                    $("#loader").css("display","flex");
                },
                success:function(data) {
                    //$("#msg").html(data.msg);
                    alert('Status Update Successfully');
                    if (status == 'Pending') {
                        $("#span_"+id).addClass('badge-warning');
                        $("#span_"+id).removeClass('badge-info');
                        $("#span_"+id).removeClass('badge-danger');
                        $("#span_"+id).removeClass('badge-success');
                    }
                    if (status == 'Processing'){
                        $("#span_"+id).addClass('badge-info');
                        $("#span_"+id).removeClass('badge-warning');
                        $("#span_"+id).removeClass('badge-danger');
                        $("#span_"+id).removeClass('badge-success');
                    }
                    if(status == 'Approved'){
                        $("#span_"+id).addClass('badge-success');
                        $("#span_"+id).removeClass('badge-info');
                        $("#span_"+id).removeClass('badge-danger');
                        $("#span_"+id).removeClass('badge-warning');
                    }
                    if(status == 'Rejected'){
                        $("#span_"+id).addClass('badge-danger');
                        $("#span_"+id).removeClass('badge-info');
                        $("#span_"+id).removeClass('badge-warning');
                        $("#span_"+id).removeClass('badge-success');
                    }

                    $('#span_'+id).html('');
                    $('#span_'+id).html(status);
                    location.reload();
                },
                complete:function(data){
                    // Hide image container
                    $("#loader").hide();
                }
        });
    }
*/
</script>

@endsection