@extends('fronted.layout.main')
@section('adcontent')

@if(session('complaintSuccess'))
<script>
    Swal.fire({
        'icon': 'success',
        'title': 'Complaints',
        'text': '{{session("complaintSuccess")}}'
    });
    sessionStorage.removeItem('complaintSuccess');
</script>
@endif
@if(session('complaintError'))
<script>
    Swal.fire({
        'icon': 'warning',
        'title': 'Complaints',
        'text': '{{session("complaintError")}}'
    });
    sessionStorage.removeItem('complaintError');
</script>
@endif

<style>
    .table>tbody {
        vertical-align: 1;
    }

    .roomSeatTable tr {
        border-bottom: 0px;
    }

    table.dataTable thead th,
    table.dataTable thead td,
    table.dataTable tfoot th,
    table.dataTable tfoot td {
        text-align: center;
    }

    .font-size {
        font-size: 0.6rem;
    }
</style>
<div class="container-fluid mt-4">

    <div class="container-fluid me-0 ms-0  bg-white shadow-sm">

    </div>
</div>
<div class="modal fade" id="getComplaintResponse" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="getComplaintResponseLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="getComplaintResponseLabel">Complaint Response</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="complaintResponseForm" action="" method="post">
                    @csrf
                    <div class="form-group">
                        <label class="form-label" for="compaintResponse">Message</label>
                        <textarea class="form-control" name="response" id="compaintResponse" cols="10" rows="3"></textarea>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <p id="charCount" class="font-size">Characters: 0 / 200</p>
                        <p id="charLimitError" class="text-danger font-size"></p>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="complaintResponseBtn" type="button" class="btn btn-warning">Submit</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="showComplaintResponse" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="showComplaintResponseLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="showComplaintResponseLabel">Complaint Response</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p id="responseMessageShowBox"></p>
            </div>
            <div class="modal-footer">
                <button id="editMessageResponseBtn" type="button" class="btn btn-danger">Edit Response</button>
                <button id="complaintResponseBtn" data-bs-dismiss="modal" aria-label="Close" type="button" class="btn btn-warning">Close</button>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid mt-3">
    <div class="container py-2">
        <div class="container d-flex justify-content-around align-items-center fs-6 g-3" style="margin-left: 59px;">
            <div class="container my-1">
                <p class="text-info p-text">Total Complaint :-<span class="text-warning">{{ $totalComplaint ?? 0 }}</span>
                    <i class="bi bi-person-circle"></i>
                </p>
            </div>
            <div class="container p-0">
                <form class="m-0 p-0" action="{{ route('view.students.compaint') }}" method="get">
                    <input type="hidden" name="complaint" id="activeComplaintFilter" value="1">
                    <button class="btn m-0 p-0" type="submit">
                        <p class="text-info p-text">Active Complaint :-<span class="text-warning">{{ $activeComplaint ?? 0 }}</p>
                    </button>
                </form>
            </div>
            <div class="container my-1">
                <form class="m-0 p-0" action="{{ route('view.students.compaint') }}" method="get">
                    <input type="hidden" name="complaint" id="activeComplaintFilter" value="2">
                    <button class="btn m-0 p-0" type="submit">
                        <p class="text-info  p-text ">Closed Complaint :- <span class="text-warning">{{ $closedComplaint ?? 0 }}</span></p>
                    </button>
                </form>
            </div>
            <div class="container my-1">
                <form class="m-0 p-0" action="{{ route('view.students.compaint') }}" method="get">
                    <input type="hidden" name="complaint" id="activeComplaintFilter" value="0">
                    <button class="btn m-0 p-0" type="submit">
                        <p class="text-info  p-text ">Unseen Complaint:- <span class="text-warning">{{ $unseenComplaint ?? 0 }}</span></p>
                    </button>
                </form>
            </div>
        </div>
        <div class="container">
            <div class="d-flex  justify-content-end align-items-center">
                <form action="{{route('view.students.compaint')}}" method="get">
                    <div class="d-flex justify-content-between g-5 gap-3 align-items-center">
                        <select class="form-select d-inline-block" name="complaint-fillter-type" id="complaintBoardFilter">
                            <option value="all" {{ $filterType === "all" ? "selected" : "" }}>All</option>
                            <option value="bedroom" {{ $filterType === "bedroom" ? "selected" : "" }}>Bed Room</option>
                            <option value="food" {{ $filterType === "food" ? "selected" : "" }}>Food</option>
                            <option value="security" {{ $filterType === "security" ? "selected" : "" }}>Security</option>
                            <option value="facilities" {{ $filterType === "facilities" ? "selected" : "" }}>Facility</option>
                            <option value="account" {{ $filterType === "account" ? "selected" : "" }}>Account Related</option>
                            <option value="suggestion" {{ $filterType === "suggestion" ? "selected" : "" }}>suggestions</option>
                            <option value="custom" {{ $filterType === "custom" ? "selected" : "" }}>Custom</option>
                        </select>
                        <div class="d-none d-flex align-items-center g-2 gap-2" id="customFilterBox">
                            <label class="form-labal-sm text-nowrap" for="startDate">Start Date</label>
                            <input class="form-control-sm" type="date" name="startDate" id="startDate">
                            <label class="form-labal-sm text-nowrap" for="endDate">End Date</label>
                            <input class="form-control-sm" type="date" name="endDate" id="endDate">
                        </div>

                        <button class="btn btn-warning btn-sm" type="submit">Filter</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="table-responsive dataTable mt-3">
            <table class="table table-bordered  roomSeatTable">
                <thead class="text-uppercase">
                    <th>S.No.</th>
                    <th>Date </th>
                    <th>Complaint Type</th>
                    <th>Candidate Name</th>
                    <th>Mobile</th>
                    <th>Room No</th>
                    <th>Seat No.</th>
                    <th>Complaint Message</th>
                    <th>View</th>
                    <th>Response</th>
                    <th>Remark</th>
                </thead>
                <tbody class="align-middle text-capitalize">

                    @php $sno = 1 @endphp
                    @if(count($complaints) > 0)
                    @foreach($complaints as $complaint)
                    <tr>
                        <td>{{ $sno ++ }}</td>
                        <td>{{\Carbon\Carbon::parse($complaint->complaint_date)->format('d-M-Y') }}</td>
                        <td>{{ $complaint->complaint_type  === "account" ? "Account Related" : $complaint->complaint_type }}</td>
                        <td>{{ strtolower($complaint->student->candidatename) }}</td>
                        <td>{{ $complaint->student->phone }}</td>
                        <td>{{ $complaint->student->roomno }}</td>
                        <td>{{ $complaint->student->seetno }}</td>
                        <td class="text-truncate">{{ strtolower($complaint->complaint_msg) }}</td>

                        <td>
                            @if($complaint->document && file_exists(public_path("assets/uploads/complaintDocuments/".$complaint->document)))
                            <a href="{{asset('assets/uploads/complaintDocuments/'.$complaint->document)}}" target="_blank">
                                <i class="fa fa-eye text-primary" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" title="view document"></i>
                            </a>
                            @else
                            <i class="fa-solid fa-eye-slash text-primary" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" title="document not found"></i>
                            @endif
                        </td>
                        <td>
                            @if(empty($complaint->responseMsg))
                            <button data-complaintId="{{ $complaint->id }}" type="button" class="btn viewBtn complaintResponseModelOpenBtn">
                                <i class="fa fa-reply text-success" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" title="Give Response"></i>
                            </button>
                            @else
                            <button data-id="{{ $complaint->id }}" data-response="{{$complaint->responseMsg}}" type="button" type="button" class="btn viewBtn complaintResponseShowModel">
                                <i class="fa fa-eye text-primary" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" title="view response"></i>
                            </button>
                            @endif
                        </td>

                        <td> <select data-complaintId="{{ $complaint->id }}" onchange="changeComplaintAction(this)">
                                <option value="0" {{ $complaint->action === 0 ? "selected" : ""  }}>Watting</option>
                                <option value="1" {{ $complaint->action === 1 ? "selected" : "" }}>Reject</option>
                                <option value="2" {{ $complaint->action === 2 ? "selected" : "" }}>Accept</option>
                            </select>
                        </td>
                    </tr>
                    @endforeach
                    @else
                    <tr>
                        <td colspan="11" class="text-center">No complaints found.</td>
                    </tr>
                    @endif

                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    $(document).ready(() => {
        $("#complaintboard").css('color', "#ffa500");
        $("#complaintboard i").css('color', "#ffa500")

        $("#complaintBoardFilter").on("change", function() {
            var $filtervalue = $(this).val();

            if ($filtervalue === "custom") {
                $("#customFilterBox").removeClass('d-none');
            } else {
                $("#customFilterBox").addClass('d-none');
            }
        });

        function openMessageResponseModal(complaintId, message="") {
            $("#getComplaintResponse").on('show.bs.modal', function() {
                var formUrl = "{{ route('complaint.response', ['complaintId' => ':complaintId']) }}";
                formUrl = formUrl.replace(':complaintId', complaintId);
                $('#complaintResponseForm').attr('action', formUrl);
                $("#compaintResponse").val(message);
            }).modal('show');
        }

        $(document).on("click", '.complaintResponseModelOpenBtn', function() {
            var complaintId = $(this).attr('data-complaintId');
            openMessageResponseModal(complaintId);
        });

        $("#complaintResponseBtn").on('click', function() {
            $("#complaintResponseForm").submit();
        });

        $(".complaintResponseShowModel").on('click', function() {
            var message = $(this).attr('data-response');
            var complaintId = $(this).data('id');
            $("#showComplaintResponse").on("show.bs.modal", function() {
                $("#responseMessageShowBox").text(message);
                $("#editMessageResponseBtn").data('id',complaintId);
            }).modal("show");
        });
        $("#editMessageResponseBtn").on('click',function(){
            var complainId = $(this).data('id');
            var message = $("#responseMessageShowBox").text();
            $("#showComplaintResponse").modal('hide');
            openMessageResponseModal(complainId,message);
        });
        $("#compaintResponse").on("input", function() {
            var maxCharacters = 200;
            var currentCharCount = $(this).val().length;
            var errorText = $("#charLimitError")
            var submitBtn = $("#complaintResponseBtn")
            submitBtn.attr('disabled', false);
            errorText.text('');
            $("#charCount").text('Characters: ' + currentCharCount + ' / ' + maxCharacters);
            if (currentCharCount > maxCharacters) {
                errorText.text('Character limit exceeded');
                submitBtn.attr('disabled', true);
            }
        });

    });

    function changeComplaintAction(selected) {
        var value = $(selected).val();
        var id = $(selected).attr('data-complaintId');
        var url = "{{ route('update.complaint.action', ['complaintId' => ':complaintId']) }}";
        url = url.replace(':complaintId', id);
        $.ajax({
            type: "put",
            url: url,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                'action': value,
            },
            success: function(response) {
                Swal.fire({
                    'icon': 'success',
                    'titel': 'Complaint',
                    'text': response.message,
                });
                setTimeout(function() {
                    location.reload();
                }, 1000);
            },
            error: function(error) {

            }
        });
    }
</script>
@endsection