@extends('layout.public')
@section('title','Support')
@section('content')
    <div class="row m-1">
        <div class="col-lg-12 mb-1  order-0">
            <div class="card">
                <div class="d-flex align-items-end row">
                    <div class="col-sm-7">
                        <div class="row">
                            <div class="col-auto">
                                <img src="{{ asset('assets/img/logo.png') }}" alt="BPDB logo" style="max-height: 100px;">
                            </div>
                            <div class="col-auto">
                                <h3 class="card-title text-dark">Welcome to IVVR Help Desk</h3>
                                <h5 class=" text-dark">Complaints</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-5 text-center text-sm-left">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-8" style="text-align: right">
                                    <img src="{{ asset('assets/img/illustrations/man-with-laptop-light.png') }}" height="70" alt="View Badge User"
                                         data-app-dark-img="illustrations/man-with-laptop-dark.png" data-app-light-img="illustrations/man-with-laptop-light.png"/>
                                </div>
                                <div class="col-md-4">
                                    <div class="mt-2">
                                        <h6 class="text-dark mb-0">User: {{session('user_name')}} - {{session('unit_desc')}}</h6>
                                        <form id="logout-form" action="{{ route('logout') }}" method="POST">
                                            @csrf
                                            </br>
                                            <button type="submit" class="btn btn-sm btn-outline-warning">
                                                Logout
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12 col-md-4 order-1">
            <div class="row g-3">
                <!-- Pending -->
                <div class="col-lg-3 col-md-6 col-6">
                    <div class="card text-white bg-warning h-100 shadow-sm">
                        <div class="card-body d-flex flex-column justify-content-center text-center">
                            <div class="mb-2">
                                <i class="bi bi-hourglass-split fs-1"></i>
                            </div>
                            <span class="fw-semibold d-block">Pending Complaints</span>
                            <h3 class="card-title text-white" id="customer">0</h3>
                        </div>
                    </div>
                </div>

                <!-- Processing -->
                <div class="col-lg-3 col-md-6 col-6">
                    <div class="card text-white bg-info h-100 shadow-sm">
                        <div class="card-body d-flex flex-column justify-content-center text-center">
                            <div class="mb-2">
                                <i class="bi bi-arrow-repeat fs-1"></i>
                            </div>
                            <span class="fw-semibold d-block">Processing Complaints</span>
                            <h3 class="card-title text-white" id="customerLogin">0</h3>
                        </div>
                    </div>
                </div>

                <!-- Completed -->
                <div class="col-lg-3 col-md-6 col-6">
                    <div class="card text-white bg-success h-100 shadow-sm">
                        <div class="card-body d-flex flex-column justify-content-center text-center">
                            <div class="mb-2">
                                <i class="bi bi-check-circle fs-1"></i>
                            </div>
                            <span class="fw-semibold d-block">Completed Complaints</span>
                            <h3 class="card-title text-white" id="meter">0</h3>
                        </div>
                    </div>
                </div>

                <!-- Total -->
                <div class="col-lg-3 col-md-6 col-6">
                    <div class="card text-white bg-primary h-100 shadow-sm">
                        <div class="card-body d-flex flex-column justify-content-center text-center">
                            <div class="mb-2">
                                <i class="bi bi-collection fs-1"></i>
                            </div>
                            <span class="fw-semibold d-block">Total Complaints</span>
                            <h3 class="card-title text-white" id="meterActive">0</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card p-2 m-2  order-3">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <a href="javascript:history.back()" class="btn btn-sm btn-outline-secondary">
                        ← Back To Home
                    </a>
                    <h5 class="mb-0"> <span class="badge bg-primary"></span></h5>
                </div>

                <div class="table-responsive pt-3">
                    <form id="filterForm">
                        @csrf
                        <div class="row" style="margin: 0 15px 5px;">
                            <div class="col-md-3">
                                <label for="StartDate">Start Date :</label>
                                <select class="form-control select2" name="StartDate" id="StartDate"></select>
                            </div>
                            <div class="col-md-3">
                                <label for="EndtDate">End Date :</label>
                                <select class="form-control select2" name="EndtDate" id="EndtDate"></select>
                            </div>
                            <div class="col-md-3">
                                <label for="Status">Status :</label>
                                <select class="form-control select2" name="Status" id="Status"></select>
                            </div>
                            <div class="col-md-3">
                                <label for="ComplaintType">Complaint Type :</label>
                                <select class="form-control select2" name="ComplaintType" id="ComplaintType"></select>
                            </div>
                        </div>
                    </form>
                    <table id="complainsTable" class="table table-bordered" style="font-size: 11px;color: #524629">
                        <thead>
                        <tr>
                            <th style="font-size: 10px;color: #950000">SL</th>
                            <th style="font-size: 10px;color: #950000">Unit Office</th>
                            <th style="font-size: 10px;color: #950000">Complaint</th>
                            <th style="font-size: 10px;color: #950000">Submitted DateTime</th>
                            <th style="font-size: 10px;color: #950000">Solved DateTime</th>
                            <th style="font-size: 10px;color: #950000">User</th>
                            <th style="font-size: 10px;color: #950000">Mobile</th>
                            <th style="font-size: 10px;color: #950000">Email</th>
                            <th style="font-size: 10px;color: #950000">Status</th>
                            <th style="font-size: 10px;color: #950000">Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- Data will be populated by DataTables -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

<div class="modal fade" id="modalScrollable" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalScrollableTitle">Complain Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">

                    <div class="col-12">
                        <label class="fw-semibold text-muted">Ticket No :</label>
                        <h4>#<u id="ticketnum"></u></h4>
                    </div>
                    <div class="row g-3">

                        <div class="col-12 col-md-6">
                            <label class="fw-semibold text-muted">Unit Office:</label>
                            <div id="unitoffice" class="text-dark"></div>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="fw-semibold text-muted">User Name:</label>
                            <div id="username" class="text-dark"></div>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="fw-semibold text-muted">Mobile Number:</label>
                            <div id="mobile" class="text-dark"></div>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="fw-semibold text-muted">Email Address:</label>
                            <div id="email" class="text-dark"></div>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="fw-semibold text-muted">Complain Type:</label>
                            <div id="complainType" class="text-dark"></div>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="fw-semibold text-muted">Status:</label>
                            <div id="status" class="badge bg-warning text-dark"></div>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="fw-semibold text-muted">Date:</label>
                            <div id="datetime" class="text-dark"></div>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="fw-semibold text-muted">Module:</label>
                            <div id="module" class="text-dark"></div>
                        </div>

                        <div class="col-12">
                            <label class="fw-semibold text-muted">Remark:</label>
                            <p id="remark" class="text-secondary small"></p>
                        </div>

                        <div class="col-12">
                            <label class="fw-semibold text-muted">Others:</label>
                            <p id="others" class="text-secondary small"></p>
                        </div>
                        <div class="col-12 mt-3">
                            <label class="fw-semibold text-muted">Attached Files:</label>
                            <div class="table-responsive">
                                <table class="table table-sm table-bordered table-striped align-middle mb-0">
                                    <thead class="table-light">
                                    <tr>
                                        <th style="width: 5%">SL</th>
                                        <th>File Name</th>
                                        <th style="width: 25%">Action</th>
                                    </tr>
                                    </thead>
                                    <tbody id="file_links_table_body">
                                    <!-- File rows will be added dynamically -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                    Close
                </button>
                <button type="button" class="btn btn-primary">Print</button>
            </div>
        </div>
    </div>
</div>



@endsection
@section('script')
    <script>

        $(document).ready(function() {
            getComplainsCouns();
            const table = $('#complainsTable').DataTable({
                autoWidth: false,
                searching: false,
                lengthChange: false,
                scrollY: '400px',           // Vertical scroll
                scrollX: true,              // Enable horizontal scroll
                scrollCollapse: true,
                fixedHeader: true,
                ajax: {
                    url: '{{ route("complains") }}',
                    type: 'GET',
                    dataSrc: function(json) {
                        originalData = json.data;
                        return json.data;
                    },
                    complete: function (xhr) {
                        const data = xhr.responseJSON.data;

                        const statuses = [...new Set(data.map(item => item.STATUS))];
                        const startDates = [...new Set(data.map(item => item.CREATE_DATE?.split(' ')[0]))];
                        const endDates = [...new Set(data.map(item => item.UPDATE_DATE?.split(' ')[0]).filter(Boolean))];
                        const types = [...new Set(data.map(item => item.COMPLAIN_NAME))];

                        populateSelect('#Status', statuses, 'Select Status');
                        populateSelect('#StartDate', startDates, 'Select Start Date');
                        populateSelect('#EndtDate', endDates, 'Select End Date');
                        populateSelect('#ComplaintType', types, 'Select Complaint Type');
                    }
                },
                columns: [
                    {
                        data: null,
                        render: function (data, type, row, meta) {
                            return meta.row + 1; // SL number
                        },
                        title: 'SL',
                        orderable: false,
                        searchable: false
                    },
                    { data: 'UNIT_DESC' },
                    { data: 'COMPLAIN_NAME' },
                    { data: 'CREATE_DATE' },
                    { data: 'UPDATE_DATE' },
                    { data: 'USER_NAME' },
                    { data: 'MOBILE_NO' },
                    { data: 'EMAIL' },
                    {
                        data: null,
                        render: function(data, type, row) {
                            if (row.STATUS === 'Pending') {
                                return `<span class="badge bg-danger">${row.STATUS}</span>`;
                            } else if (row.STATUS === 'Received') {
                                return `<span class="badge bg-warning">${row.STATUS}</span>`;
                            } else {
                                return `<span class="badge bg-success">${row.STATUS}</span>`;
                            }
                        }
                    },
                    {
                        data: null,
                        render: function(data, type, row) {
                            if (row.STATUS === 'Pending') {
                                return `<div class="btn-group" role="group" aria-label="Basic example"> <button class="btn btn-info btn-sm btn-receive" data-id="${row.ID}">Receive</button> <button class="btn btn-warning btn-sm btn-view" data-id="${row.ID}">View</button></div>`;
                            } else if (row.STATUS === 'Received') {
                                return `<div class="btn-group" role="group" aria-label="Basic example"> <button class="btn btn-success btn-sm btn-solved" data-id="${row.ID}">Solved</button> <button class="btn btn-warning btn-sm btn-view" data-id="${row.ID}">View</button></div>`;
                            } else {
                                return `<div class="btn-group" role="group" aria-label="Basic example"> <button class="btn btn-warning btn-sm btn-view" data-id="${row.ID}">View</button></div>`;
                            }
                        }
                    }
                ],
                paging: true,
                searching: false,
                lengthChange: false
            });

            function populateSelect(selector, items, placeholder) {
                const $select = $(selector);
                $select.empty().append(`<option value="">-- ${placeholder} --</option>`);
                items.forEach(val => {
                    $select.append(`<option value="${val}">${val}</option>`);
                });
                $select.select2({
                    placeholder: `-- ${placeholder} --`,
                    allowClear: true,
                    width: '100%' // Optional: makes it full-width
                });
            }

            function applyFilters() {
                const selectedStatus = $('#Status').val();
                const selectedComplaintType = $('#ComplaintType').val();
                const selectedStartDate = $('#StartDate').val();
                const selectedEndDate = $('#EndtDate').val();

                const filteredData = originalData.filter(item => {
                    const createDate = item.CREATE_DATE?.split(' ')[0]; // Get only the date part

                    return (!selectedStatus || item.STATUS === selectedStatus) &&
                        (!selectedComplaintType || item.COMPLAIN_NAME === selectedComplaintType) &&
                        (!selectedStartDate || createDate === selectedStartDate) &&
                        (!selectedEndDate || item.UPDATE_DATE?.split(' ')[0] === selectedEndDate);
                });

                table.clear().rows.add(filteredData).draw();
            }

            $('#Status, #ComplaintType, #StartDate, #EndtDate').on('change', applyFilters);

            $('#complainsTable').on('click', '.btn-view', function() {
                const id = $(this).data('id');
                $.ajax({
                    url: '{{ url("getComplainById") }}',
                    type: 'GET',
                    data: {id: id, status: 'Received', _token: '{{ csrf_token() }}'},
                    success: function(response) {
                        const complain = response.data[0];
                        $('#unitoffice').text(complain.UNIT_DESC+"("+complain.UNIT_CODE+")");
                        $('#username').text(complain.USER_NAME);
                        $('#ticketnum').text(complain.TICKET_NUM);
                        $('#mobile').text(complain.MOBILE_NO);
                        $('#email').text(complain.EMAIL);
                        $('#complainType').text(complain.COMPLAIN_NAME+"("+complain.COMPLAIN_ID+")");
                        $('#module').text(complain.MODULE);
                        $('#remark').text(complain.REMARKS);
                        $('#others').text(complain.OTHERS);
                        $('#status').text(complain.STATUS);
                        $('#datetime').text(complain.CREATE_DATE);
                        try {
                            const filePath = JSON.parse(complain.FILE_PATH);
                            const tableBody = document.getElementById("file_links_table_body");
                            tableBody.innerHTML = '';
                            let index = 1;
                            for (const [key, path] of Object.entries(filePath)) {
                                const fileUrl = '/' + path.replace(/^public\//, '');
                                const fileName = path.split('/').pop();
                                const row = `<tr>
                                                <td>${index}</td>
                                                <td>${fileName}</td>
                                                <td>
                                                    <a href="${fileUrl}" target="_blank" class="btn btn-sm btn-primary me-2">View</a>
                                                    <a href="${fileUrl}" download class="btn btn-sm btn-info">Download</a>
                                                </td>
                                            </tr>`;
                                tableBody.innerHTML += row;
                                index++;
                            }
                            if (index === 1) {
                                tableBody.innerHTML = `<tr><td colspan="3" class="text-center text-muted">No Attachment Found</td></tr>`;
                            }
                        } catch (error) {
                            console.error('Error parsing FILE_PATH:', error);
                            document.getElementById("file_links_table_body").innerHTML =`<tr><td colspan="3" class="text-center text-danger">No Attachment Found</td></tr>`;
                        }
                        $('#modalScrollable').modal('show');
                    },
                    error: function() {alert('Error updating status.');}
                });
            });

            $('#complainsTable').on('click', '.btn-receive', function () {
                const id = $(this).data('id');
                const wrapper = document.createElement('div');
                const select = document.createElement('select');
                select.className = 'form-select';
                ['Select Remark','It Will Take 1 Day', 'It Will Take 2 Days', 'It Will Take 3 Days', 'It Will Take 4 Days', 'It Will Take 5 Days'].forEach(status => {
                    const option = document.createElement('option');
                    option.value = status;
                    option.textContent = status;
                    select.appendChild(option);
                });
                wrapper.appendChild(select);
                swal({
                    title: "Update Complaint",
                    text: "Select remark for Receiving the Complaint:",
                    content: wrapper,
                    buttons: {
                        cancel: {
                            text: "Cancel",
                            visible: true,
                            className: "btn btn-secondary",
                            closeModal: true
                        },
                        confirm: {
                            text: "Received",
                            className: "btn btn-primary"
                        }
                    },
                    dangerMode: false
                }).then((willUpdate) => {
                    if (willUpdate) {
                        const status = select.value;

                        if (status=='Select Remark') {
                            swal("Validation Error", "Remark cannot be empty.", "warning");
                            return;
                        }else {
                            const id = $(this).data('id');

                            swal({
                                title: "Are you sure?",
                                text: "Do you want to mark this complaint as received?",
                                icon: "warning",
                                buttons: {
                                    cancel: {
                                        text: "Cancel",
                                        visible: true,
                                        className: "btn btn-secondary",
                                        closeModal: true
                                    },
                                    confirm: {
                                        text: "Yes, proceed",
                                        className: "btn btn-primary"
                                    }
                                },
                                dangerMode: true
                            }).then((willUpdate) => {
                                if (willUpdate) {
                                    $.ajax({
                                        url: '{{ url("complainStatusUpdate") }}',
                                        type: 'GET',
                                        data: {
                                            id: id,
                                            remark: status,
                                            _token: '{{ csrf_token() }}'
                                        },
                                        success: function(response) {
                                            swal({
                                                title: "Success!",
                                                text: response.msg,
                                                icon: "success"
                                            });
                                            getComplainsCouns();
                                            table.ajax.reload();
                                        },
                                        error: function() {
                                            swal({
                                                title: "Error",
                                                text: "Error updating status",
                                                icon: "error"
                                            });
                                        }
                                    });
                                }
                            });
                        }


                    }else{
                        swal("Error", "Error updating status", "error");

                    }
                });
            });

            $('#complainsTable').on('click', '.btn-solved', function () {
                const id = $(this).data('id');

                swal({
                    title: "Mark as Solved?",
                    text: "Are you sure you want to mark this complaint as solved?",
                    icon: "warning",
                    buttons: {
                        cancel: {
                            text: "Cancel",
                            visible: true,
                            className: "btn btn-secondary",
                            closeModal: true
                        },
                        confirm: {
                            text: "Yes, mark as solved",
                            className: "btn btn-success"
                        }
                    },
                    dangerMode: true
                }).then((willUpdate) => {
                    if (willUpdate) {
                        $.ajax({
                            url: '{{ url("complainStatusUpdate") }}',
                            type: 'GET',
                            data: {
                                id: id,
                                _token: '{{ csrf_token() }}'
                            },
                            success: function (response) {
                                swal({
                                    title: "Success!",
                                    text: response.msg,
                                    icon: "success"
                                });
                                getComplainsCouns();
                                table.ajax.reload(); // Refresh DataTable
                            },
                            error: function () {
                                swal({
                                    title: "Error",
                                    text: "Error updating status",
                                    icon: "error"
                                });
                            }
                        });
                    }
                });
            });

        });

        function getComplainsCouns(){
            $.get('complain-counts', function(data) {
                $('#customer').text(data.pending_complaints);
                $('#customerLogin').text(data.received_complaints);
                $('#meter').text(data.completed_complaints);
                $('#meterActive').text(data.total_complaints);
            });
        }
    </script>
@endsection