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

@if(session('noticeSuccess'))
<script>
    Swal.fire({
        'icon': 'success',
        'title': 'Notice',
        'text': '{{session("noticeSuccess")}}'
    });
    sessionStorage.removeItem('noticeSuccess');
</script>
@endif
@if(session('noticeError'))
<script>
    Swal.fire({
        'icon': 'warning',
        'title': 'Notice',
        'text': '{{session("noticeError")}}'
    });
    sessionStorage.removeItem('noticeError');
</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="getNoticeResponse" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="getNoticeResponseLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="getNoticeResponseLabel">Notice Response</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="noticeResponseForm" action="" method="post">
                    @csrf
                    <div class="form-group">
                        <label class="form-label" for="noticeResponse">Message</label>
                        <textarea class="form-control" name="response" id="noticeResponse" rows="3" cols="10"></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="noticeResponseBtn" type="button" class="btn btn-warning">Submit</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="showNoticeResponse" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="showNoticeResponseLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="showNoticeResponseLabel">Notice 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="noticeResponseEditBtn" class="btn btn-danger" type="button">Edit Response</button>
                <button 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 Notice :-<span class="text-warning">{{$totalNotice}}</span>
                    <i class="bi bi-person-circle"></i>
                </p>
            </div>
            <div class="container my-1">
                <form class="m-0 p-0" action="{{ route('view.tanant.notice') }}" method="get">
                    <input type="hidden" name="notice" value="1">
                    <button class="btn m-0 p-0" type="submit">
                        <p class="text-info  p-text  text-left ">Active Notice :-<span class="text-warning">{{$activeNotice}}</span></p>
                    </button>
                </form>
            </div>
            <div class="container my-1">
                <form class="m-0 p-0" action="{{ route('view.tanant.notice') }}" method="get">
                    <input type="hidden" name="notice" value="2">
                    <button class="btn m-0 p-0" type="submit">
                        <p class="text-info  p-text ">Closed Notice :- <span class="text-warning">{{$closedNotice}}</span></p>
                    </button>
                </form>

            </div>
            <div class="container my-1">
                <form class="m-0 p-0" action="{{ route('view.tanant.notice') }}" method="get">
                    <input type="hidden" name="notice" value="0">
                    <button class="btn m-0 p-0" type="submit">
                        <p class="text-info  p-text ">Unseen Notice:- <span class="text-warning">{{$unseenNotice}}</span></p>
                    </button>
                </form>
            </div>
        </div>
        <div class="container">
            <div class="d-flex  justify-content-end align-items-center">
                <form action="{{route('view.tanant.notice')}}">
                    <div class="d-flex justify-content-between g-5 gap-3 align-items-center">
                        <select class="form-select d-inline-block" name="notice-fillter-type" id="noticeBoardFilter">
                            <option value="all" {{ $filterType === "all" ? 'selected' : ""  }}>All</option>
                            <option value="nightout" {{ $filterType === "nightout" ? 'selected' : ""  }}>Night Out</option>
                            <option value="checkInLate" {{ $filterType === "checkInLate" ? 'selected' : ""  }}>Check In Late</option>
                            <option value="leaving" {{ $filterType === "leaving" ? 'selected' : ""  }}>Leaving/Hostel PG</option>
                            <option value="custom" {{ $filterType === "custom" ? 'selected' : ""  }}>Custom</option>
                        </select>

                        <div class="d-none d-flex align-items-center g-2 gap-2" id="noticeFilterBox">
                            <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>Notice Type</th>
                    <th>Candidate Name</th>
                    <th>Mobile</th>
                    <th>Room No</th>
                    <th>Seat No.</th>
                    <th>Notice Message</th>
                    <th>View</th>
                    <th>Response</th>
                    <th>Remark</th>
                </thead>
                <tbody class="align-middle text-capitalize">
                    <tr>
                        @php $sno = 1 @endphp
                        @if(count($notices) > 0)
                        @foreach($notices as $notice)
                    <tr>
                        <td>{{ $sno ++ }}</td>
                        <td>{{ \Carbon\Carbon::parse($notice->noticeDate)->format('d-M-Y') }}</td>
                        <td>{{ $notice->noticeType }}</td>
                        <td>{{ strtolower($notice->student->candidatename) }}</td>
                        <td>{{ $notice->student->phone }}</td>
                        <td>{{ $notice->student->roomno }}</td>
                        <td>{{ $notice->student->seetno }}</td>
                        <td style="max-width: 300px;" class="text-truncate">{{ strtolower($notice->NoticeMsg) }}</td>

                        <td>
                            @if($notice->document && file_exists(public_path("assets/uploads/complaintDocuments/".$notice->document)))
                            <a href="{{asset('assets/uploads/complaintDocuments/'.$notice->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($notice->responseMsg))
                            <button data-noticeId="{{ $notice->id }}" type="button" class="btn viewBtn noticeResponseModelOpenBtn">
                                <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="{{$notice->id}}" data-response="{{$notice->responseMsg}}" type="button" type="button" class="btn viewBtn noticeResponseShowModel">
                                <i class="fa fa-eye text-primary" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" title="view message"></i>
                            </button>
                            @endif
                        </td>
                        <td> <select data-noticeId="{{ $notice->id }}" onchange="changeNoticeAction(this)">
                                <option value="0" {{ $notice->action === 0 ? "selected" : ""  }}>waiting</option>
                                <option value="1" {{ $notice->action === 1 ? "selected" : "" }}>Reject</option>
                                <option value="2" {{ $notice->action === 2 ? "selected" : "" }}>Accept</option>
                            </select>
                        </td>
                    </tr>
                    @endforeach
                    @else
                    <tr>
                        <td colspan="11" class="text-center">No notices found.</td>
                    </tr>
                    @endif
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>

<script>
    $(document).ready(() => {
        $("#noticeBoardFilter").on("change", function() {
            var $filtervalue = $(this).val();
            if ($filtervalue === "custom") {
                $("#noticeFilterBox").removeClass('d-none');
            } else {
                $("#noticeFilterBox").addClass('d-none');
            }
        });

        function noticeResponseModalOpen(noticeId,message="") {
            $("#getNoticeResponse").on('show.bs.modal', function(event) {
                var formUrl = "{{ route('notice.response', ['noticeId' => ':noticeId']) }}";
                formUrl = formUrl.replace(':noticeId', noticeId);
                $('#noticeResponseForm').attr('action', formUrl);
                $("#noticeResponse").val(message);
            }).modal('show');
        }

        $(document).on("click", '.noticeResponseModelOpenBtn', function() {
            var noticeId = $(this).attr('data-noticeId');
            noticeResponseModalOpen(noticeId);
        });

        $("#noticeResponseBtn").on('click', function() {
            $("#noticeResponseForm").submit();
        });

        $(".noticeResponseShowModel").on('click', function() {
            var message = $(this).attr('data-response');
            var noticeId = $(this).data('id');
            $("#showNoticeResponse").on("show.bs.modal", function() {
                $("#noticeResponseEditBtn").data('id', noticeId);
                $("#responseMessageShowBox").text(message);
            }).modal("show");
        });

        $("#noticeResponseEditBtn").on('click', function() {
            var noticeId = $(this).data('id');
            var message = $("#responseMessageShowBox").text();
            $("#showNoticeResponse").modal('hide');
            noticeResponseModalOpen(noticeId,message);
        });

        $("#noticeResponse").on("input", function() {
            var maxCharacters = 200;
            var currentCharCount = $(this).val().length;
            var errorText = $("#charLimitError")
            errorText.text('');
            var submitBtn = $("#noticeResponseBtn")
            submitBtn.attr('disabled', false);
            $("#charCount").text('Characters: ' + currentCharCount + ' / ' + maxCharacters);
            if (currentCharCount > maxCharacters) {
                errorText.text('Character limit exceeded');
                submitBtn.attr('disabled', true);
            }
        });

    });

    function changeNoticeAction(selected) {
        value = $(selected).val();
        id = $(selected).attr('data-noticeId');
        var url = "{{ route('update.notice.action', ['noticeId' => ':noticeId']) }}";
        url = url.replace(':noticeId', 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) {
                alert(error);
            }
        });
    }
</script>
@endsection