@extends('layouts.main')

@section('main-container')
    <style>
        table.dataTable>tbody>tr {
            background-color: #dedede;
        }

        div#kt_datatable_example_5_length {
            display: none;
        }

        div#kt_datatable_example_5_filter {
            display: none;
        }

        td {
            background: white !important;
        }

        .no-separator {
            border-bottom: none;
        }

        div#kt_content_container {
            margin-top: 0px;
        }

        /* Custom checkbox style */
        .custom-checkbox {
            display: inline-block;
            width: 17px;
            height: 17px;
            background-color: white;
            border: 1px solid #8D99AE;
            border-radius: 3px;
        }

        /* Custom checkmark when checkbox is checked */
        .custom-checkbox:checked::after {
            content: "\2713";
            /* Unicode checkmark character */
            display: block;
            text-align: center;
            font-size: 12px;
            line-height: 17px;
            width: 16px;
            height: 16px;
            background: #8C3EFF;
        }

        div.dataTables_wrapper .table-responsive {
            min-height: 500px
        }
    </style>
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <div id="kt_content_container" class="container-xxl" style="">

            <div class="card" style="margin: 30px 30px 30px 30px;border-radius: 22px;box-shadow: none; min-height: 700px">
                <div data-kt-swapper="true" data-kt-swapper-mode="prepend"
                    data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}"
                    class="page-title d-flex align-items-center flex-wrap mt-4 me-3 mb-5 mb-lg-0">
                    <div class="row" style="width: 100%">
                        <div class="col-md-6">
                            <img src="{{ url('/media/logos/flag-gray.png') }}" alt="Falg Message Icon" class="custom-icon"
                                style="margin-bottom:3px;">
                            <a href="#" class="breadcrumb-item text-dark"
                                style="font-family: 'OxaniumSemibold';font-size: 20px;">Flag Messages</a>
                        </div>
                        <div class="col-md-6">
                            <ul class="breadcrumb breadcrumb-separatorless fw-bold fs-7 my-1">
                                <li style="">
                                    <div class="input-group">
                                        <span class="input-group-prepend">
                                            <span class="input-group-text"
                                                style="background-color: white;border-right: none;border-radius: unset;height: 44px;border-top-left-radius: 12px;border-bottom-left-radius: 12px;border: 1px solid #dbdfe9;">
                                                <img src="{{ url('/media/logos/search.png') }}" alt="User Icon"
                                                    class="custom-icon h-15px w-15px">
                                            </span>
                                        </span>
                                        <input type="text" class="form-control" id="customSearch"
                                            style="border-left: none;border-top-right-radius: 12px;border-bottom-right-radius: 12px;width:275px"
                                            placeholder="Search Flag Message">
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <hr style="background: #e1e3ec;width: 95%;margin-left: 1.8rem;border: 1px solid #e1e3ec;">
                <div class="card-body pt-0" style="padding: 2rem 0rem 0rem 2rem;">
                    <table class="table align-middle fs-6 gy-5" id="kt_datatable_example_5">
                        <thead>
                            <tr class="text-start text-muted fw-bolder fs-7 text-uppercase gs-0">
                                <th class="min-w-20px">ID</th>
                                <th class="min-w-120px"
                                    style="text-align: center;text-transform: none;padding-right: 14px;">Reported Username
                                </th>
                                <th class="min-w-120px"
                                    style="text-align: center;text-transform: none;padding-right: 14px;">Sender Username
                                </th>
                                <th class="min-w-120px"
                                    style="text-align: center;text-transform: none;padding-right: 14px;">Message</th>
                                <th class="min-w-120px"
                                    style="text-align: center;text-transform: none;padding-right: 14px;">Date</th>
                                <th class="min-w-120px"
                                    style="text-align: center;text-transform: none;padding-right: 14px;">Status</th>
                                <th style="text-align: center;text-transform: none;" class="min-w-125px">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="text-gray-600 fw-bold">
                            @php
                                $rowCount = 1;
                            @endphp
                            @foreach ($flag_messages as $row)
                                <tr class="no-separator" style="border: none;">
                                    <td style="color:#2c2c2e">{{ $rowCount++ }}</td>
                                    <td style="text-align: center;color:#2c2c2e">
                                        {{ $row->report_user ? $row->report_user->username : '' }}</td>
                                    <td style="text-align: center;color:#2c2c2e">
                                        {{ $row->sender_user ? $row->sender_user->username : '' }}</td>
                                    <td style="text-align: center;color:#2c2c2e"> {{ $row->message }}</td>
                                    <td style="text-align: center;color:#2c2c2e">{{ date("d-m-Y", strtotime($row->created_at)) }}</td>
                                    <td style="text-align: center;color:#2c2c2e">
                                        @if ($row->status == 0)
                                            Pending
                                        @elseif ($row->status == 1)
                                            No Action
                                        @elseif ($row->status == 2)
                                            Remove Message
                                        @elseif ($row->status == 3)
                                            Block User
                                        @elseif ($row->status == 4)
                                            Delete Report
                                        @endif
                                    </td>
                                    <td style="text-align: center;color:#2c2c2e">
                                        <div class="dropdown">
                                            <button class="btn btn-secondary dropdown-toggle" type="button" id="actionDropdown_{{ $row->id }}" data-bs-toggle="dropdown" aria-expanded="false">
                                                Actions
                                            </button>
                                            <ul class="dropdown-menu" aria-labelledby="actionDropdown_{{ $row->id }}">
                                                @if ($row->status == 0)
                                                    <li><button type="button" class="dropdown-item confirm-link" data-href="{{ route('flag_message.update_status', [$row->id, 1]) }}"  title="No Action"
                                                        data-status="no action">No Action</button></li>
                                                    <li><button type="button" class="dropdown-item confirm-link" data-href="{{ route('flag_message.update_status', [$row->id, 2]) }}"  title="Remove Message"
                                                        data-status="remove message">Remove Message</button></li>
                                                    <li><button type="button" class="dropdown-item confirm-link" data-href="{{ route('flag_message.update_status', [$row->id, 3]) }}" title="Block User"
                                                        data-status="block user">Block User</button></li>
                                                @endif
                                                <li><button type="button" class="dropdown-item confirm-link" data-href="{{ route('flag_message.update_status', [$row->id, 4]) }}" title="Delete Report"
                                                    data-status="delete report">Delete Report</button></li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>

                    </table>

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

    <script>
        $(document).ready(function() {
            $(document).on('click', '.confirm-link', function(e) {
                var status = $(this).data("status");
                var href_url = $(this).data("href");
                var confirmed = confirm('Are you sure you want to ' + status + ' this flag message?');
                if (!confirmed) {
                    e.preventDefault();
                } else {
                    window.location.href = href_url;
                }
            });
        });
        var baseUrl = @json(url('/'));

        function delete_multiple() {

            if (confirm('Are you sure you want to delete selected resources?')) {
                var checkedValues = [];
                $('.rowCheckbox:checked').each(function() {
                    checkedValues.push($(this).val()); // Assuming you want to get the value from the second column
                });

                $.ajax({
                    url: baseUrl + "/delete_all_resources",
                    type: "POST",
                    data: {
                        ids: checkedValues,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        alert("Resources Deleted Successfully");
                        window.location.reload();

                    }
                })
            }
        }
    </script>
    <script>
        $(document).ready(function() {
            var table = $('#kt_datatable_example_5').DataTable();
            table.order([4, 'asc']).draw();

            $('#customSearch').on('input', function() {
                table.search(this.value).draw();
                table.order([4, 'asc']).draw();
            });

            // Event listener for check all checkbox
            $('#mainCheckbox').on('change', function() {
                if ($(this).is(':checked')) {
                    $('.rowCheckbox').prop('checked', true);
                    $('.filter').addClass('d-none');
                    $('.multiple_delete').removeClass('d-none');
                } else {
                    $('.rowCheckbox').prop('checked', false);
                    $('.filter').removeClass('d-none');
                    $('.multiple_delete').addClass('d-none');
                }
            });

            // Event listener for individual row checkboxes
            $('#kt_datatable_example_5 tbody').on('change', '.rowCheckbox', function() {
                if ($('.rowCheckbox:checked').length === $('.rowCheckbox').length) {
                    $('#mainCheckbox').prop('checked', true);
                } else {
                    $('#mainCheckbox').prop('checked', false);
                }

                if ($('.rowCheckbox:checked').length > 0) {
                    $('.multiple_delete').removeClass('d-none');
                } else {
                    $('.multiple_delete').addClass('d-none');
                }
            });
        });
    </script>
@endsection