@extends('layouts.master')
@section('contain')
    {{--  --}}
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">Good Neighbour Management</h3>
        </div>
        <div class="col-md-7 align-self-center text-end">
            <div class="d-flex justify-content-end align-items-center">
                <ol class="breadcrumb justify-content-end">
                    <li><a class="breadcrumb-item active" href="{{ url('/') }}">Home</a></li>
                    <li><a class="breadcrumb-item active" href="javascript:history.go(-1);">back</a></li>
                </ol>
                <a href="{{ route('incident.summaries') }}"><button type="button"
                    class="btn btn-info d-none d-lg-block m-l-15 text-white"> Good Neighbour Summary</button></a>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <div class="tab-content">

                <div class="table-responsive">
                    <div class="dataTables_filter">
                        <select
                            style="margin-left: -5%;
                            width: 100%;
                            margin-left: -5%;"
                            type="search" class="form-select" placeholder="" aria-controls="approve-table"
                            id="departmentSearch-approve" aria-controls="approve-table">
                            <option value="">Search by Department</option>
                            @foreach ($departments as $department)
                                <option style="text-align: center;">{{ $department->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <table style="font-size: smaller;width: 100%" id="approve-table"
                        class="table table-striped border dataTable no-footer" style="width:100%">
                        <thead>
                            <tr>
                                <th>S.No</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <th>Date</th>
                                <th>Time</th>
                                <th>Location</th>
                                <th>Description</th>
                                <th>Media</th>
                                <th>Department</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>


            {{-- <h6 class="card-subtitle">Data table example</h6> --}}

        </div>
    </div>

    <div id="responsive-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <!-- Modal content -->
        <div class="modal-dialog">
            <div class="modal-content topbar" style="height: 40vh;">
                <div class="modal-header" style="padding: 2%;">
                    <h4 class="font-bold">Update Status</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ Route('incident.status') }}" method="get">
                    @csrf
                    <div class="modal-body" style="padding: 14px;">
                        <div class="form-group">
                            {{-- <label for="message-text" class="form-label">Reason:</label> --}}
                            <select required class="form-control form-select"  id="message-text" name="status">
                                <option value="submitted">submitted</option>
                                <option value="received">received</option>
                                <option value="in progress">in progress</option>
                                <option value="on the case">on the case</option>
                                <option value="resolved">resolved</option>
                            </select>
                            <input type="hidden" name="incidentId" id="suggestionId">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default text-dark" data-bs-dismiss="modal"
                            aria-label="Close">Close</button>

                        <button type="submit" class="btn btn-danger waves-effect waves-light text-white">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        function approveSuggestion(suggestionId) {
            swal({
                title: 'Are you sure?',
                text: 'You are about to approve this suggestion.',
                icon: 'warning',
                buttons: {
                    cancel: 'No, cancel!',
                    confirm: 'Yes, approve it!'
                },
                dangerMode: true
            }).then((isConfirmed) => {
                if (isConfirmed) {
                    // Perform the approve action here, e.g., submit a form or make an AJAX request
                    window.location.href = '/sugesstion/statusupdate/' + suggestionId + '?status=approve';
                }
            });
        }


        function populateModal(suggestionId, status) {
            var modal = new bootstrap.Modal(document.getElementById('responsive-modal'));
            $('#suggestionId').val(suggestionId);
            $('#message-text').val(status); // Pre-select the option matching the status
            // modal.show();
        }


        // popup method end

        function swalll(id) {
            event.preventDefault();
            swal({
                    title: "Are you sure?",
                    text: "Once deleted, you will not be able to recover this imaginary file!",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willDelete) => {
                    if (willDelete) {
                        var formId = "delete-form-" + id;
                        document.getElementById(formId).submit();
                    }
                });
        }

        function swal2(id) {
            event.preventDefault();
            swal({
                    title: "Are you sure delete post & block user?",
                    // text: " want to delete post & block user?",
                    text: "Once deleted, you will not be able to recover this imaginary file!",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willDelete) => {
                    if (willDelete) {
                        var formId = "delete-form-" + id;
                        document.getElementById(formId).submit();
                    }
                });
        }
        $(document).ready(function() {
            var approveTable = $('#approve-table').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "{{ route('incident.index') }}",
                    "type": "get"
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: '',
                        searchable: true,
                        orderable: false
                    },
                    {
                        "data": "name",
                        "render": function(data, type, row) {
                            return data || '-';
                        }
                    },
                    {
                        "data": "email",
                        "render": function(data, type, row) {
                            return data || '-';
                        }
                    },
                    {
                        "data": "phone",
                        "render": function(data, type, row) {
                            return data || '-';
                        }
                    },
                    {
                        "data": "created_at"
                    },
                    {
                        "data": "time"
                    },
                    {
                        "data": "location"
                    },
                    {
                        "data": "description"
                    },
                    {
                        "data": "media"
                    },
                    {
                        "data": "DepartmentName"
                    },
                    {
                        "data": "status",
                        "render": function(data, type, row) {
                            var color = '';
                            switch (data) {
                                case 'submitted':
                                    color = '#f01e1e';
                                    break;
                                case 'received':
                                    color = '#ffd65b';
                                    break;
                                case 'on the case':
                                    color = '#ffbf00';
                                    break;
                                case 'in progress':
                                    color = '#4da64d';
                                    break;
                                case 'resolved':
                                    color = '#10cc10';
                                    break;
                                default:
                                    color = ''; // Default color if status doesn't match any case
                            }
                            return '<span class="badge badge-success" style="background-color: ' +
                                color + '">' + data + '</span>';
                        }
                    },
                    {
                        "data": "action"
                    },

                ],
                "paging": true, // Enable pagination
                "pageLength": 10, // Number of rows per page
                "lengthMenu": [10, 25, 50, 100]
            });

            $('#departmentSearch-approve').on('keyup change', function() {
                if (approveTable.column(9).search() !== this.value) {
                    approveTable.column(9).search(this.value).draw();
                }
            });

        });
    </script>
@endsection