@extends('company-admin-dashboard')

@section('title', $data['title'])
@section('dashboard-content')
    <div class="page-content" style="padding: 25px calc(24px / 2) 60px calc(24px / 2); background-color: #f7f7f9;">
        <div class="container-fluid">
            <div class="card">
                <div class="card-header bg-white d-flex justify-content-between align-items-center"
                    style="padding: 10px 7px 10px 27px !important;">
                    <div class="d-flex align-items-center">
                        <img class="favicon-logo" src="{{ getCompanyFavicon() }}" alt="Company Logo" width="40px">
                        &nbsp;
                        <h5 class="mb-0"><b>Google Review Management</b></h5>
                    </div>
                    <div class="header-buttons d-flex align-items-center" style="gap: 10px;">
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#settingsModal">
                            <i class="fas fa-cog"></i> Settings
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                         <div class="col-12 col-sm-6 col-md-4 mb-3">
                            <div class="card h-100 shadow-sm border-0">
                                <div class="card-body text-center">
                                 

                                    <div class="qr-wrappers mx-auto mb-3">
                                        <img src="data:image/png;base64,{{ $qrCode }}" alt="Google Review QR Code"
                                            class="img-fluid qr-image">
                                    </div>

                                    <p class="mb-1 text-muted small">Scan this QR code to open Google Reviews</p>

                                    <div class="qr-url mt-2">
                                        <small class="text-break text-secondary">
                                            {{ $qrCodeUrl }}
                                        </small>
                                    </div>

                                    <button id="copyBtn" class="btn btn-outline-primary btn-sm mt-3">
                                        <i class="fas fa-copy"></i> Copy Review Link
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-8">
                            <div class="table-responsive table-nowrap custom-table">
                                <table id="reviewsTable"
                                    class="table table-striped table-bordered dataTable no-footer dtr-inline"
                                    style="width: 100%;">
                                    <thead>
                                        <th style="width:80px;">Id</th>
                                        <th>Rating</th>
                                        <th>Feedback</th>
                                        <th>Source</th>
                                        <th>Google Redirect</th>
                                        <th>Date</th>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

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

    <!-- Settings Modal -->
    <div class="modal fade" id="settingsModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form action="{{ route('google.review.settings') }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Google Review Settings</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-4">
                            <label class="form-label fw-bold mb-3">Google Review URL</label>
                            <div class="input-group input-group-lg">
                                <span class="input-group-text bg-light text-muted google-revie-ex-url" style="font-size: 12px; white-space: nowrap; overflow: hidden;">
                                    https://search.google.com/local/writereview?placeid=
                                </span>
                                <input type="text" class="form-control form-control-lg" id="google_place_id" name="google_place_id" 
                                       value="{{ str_replace('https://search.google.com/local/writereview?placeid=', '', $googleReviewUrl) }}" 
                                       required placeholder="Enter Plase ID" style="font-size: 14px;">
                            </div>
                            <div class="alert alert-info mt-3" style="font-size: 15px;">
                                <h6 class="alert-heading"><i class="fas fa-info-circle"></i> How to find your Google Place ID:</h6>
                                <ol class="mb-2" style="font-size: 14px; line-height: 1.6;">
                                    <li><strong>Go to:</strong> <a href="https://developers.google.com/maps/documentation/places/web-service/place-id" target="_blank" class="text-decoration-none">Google Place ID Finder</a></li>
                                    <li><strong>Search:</strong> Your business name in the search box</li>
                                    <li><strong>Copy:</strong> The Place ID (starts with ChIJ)</li>
                                </ol>
                                <div class="bg-light p-2 rounded mt-2">
                                    <strong>Example Place ID:</strong> <code>ChIJK8fLQ-hO4DsRm0Sj_JL1ZLA</code>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save Settings</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('custom-scripts')
    <!-- Bootstrap 5 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

    <!-- DataTables Bootstrap 5 -->
    <script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
    <script>
        $(document).ready(function() {
            var tableAjaxUrl = '{{ route('google.review.ajax') }}';
            var csrfToken = '{{ csrf_token() }}';

            var table = $('#reviewsTable').DataTable({
                pagingType: "full_numbers",
                "aoColumnDefs": [{
                    "bSortable": false,
                    "aTargets": [4]
                }],
                "order": [
                    [0, 'desc']
                ],
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": tableAjaxUrl,
                    "type": "GET",
                    "data": {
                        "_token": csrfToken
                    }
                },
                "aoColumns": [{
                        "mData": "serial_no"
                    },
                    {
                        "mData": "rating"
                    },
                    {
                        "mData": "feedback"
                    },
                    {
                        "mData": "source"
                    },
                    {
                        "mData": "redirected_to_google",
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at_formatted',
                        name: 'created_at',
                        orderable: true,
                        searchable: true
                    }
                ],
                language: {
                    search: "",
                    searchPlaceholder: "Search Feedback..", 
                    paginate: {
                        first: '<i class="bx bx-skip-previous"></i>',
                        previous: '<i class="bx bx-chevron-left"></i>',
                        next: '<i class="bx bx-chevron-right"></i>',
                        last: '<i class="bx bx-skip-next"></i>'
                    }
                }
            });

            // var a = document.querySelector("#reviewsTable thead");
            // var n = a.querySelector("tr").cloneNode(true);
            // a.appendChild(n);

            // let searchRowTh = a.querySelectorAll("tr:nth-child(2) th");
            // searchRowTh.forEach(th => {
            //     th.classList.remove("sorting", "sorting_asc", "sorting_desc");
            //     th.removeAttribute("aria-sort");
            // });

            // searchRowTh.forEach((e, t) => {
            //     let skipColumns = [0, 4, 5];

            //     if (skipColumns.includes(t)) {
            //         e.innerHTML = "";
            //         return;
            //     }

            //     let text = e.textContent.trim();
            //     let input = document.createElement("input");
            //     input.type = "text";
            //     input.className = "form-control";
            //     input.placeholder = "Search " + text;

            //     e.innerHTML = "";
            //     e.appendChild(input);

            //     input.addEventListener("keyup", function() {
            //         if (table.column(t).search() !== this.value) {
            //             table.column(t).search(this.value).draw();
            //         }
            //     });

            //     input.addEventListener("change", function() {
            //         if (table.column(t).search() !== this.value) {
            //             table.column(t).search(this.value).draw();
            //         }
            //     });
            // });
        });

        $('#profile-pic').on('click', function(e) {
            e.stopPropagation();
            $('#dropdown-menu').toggle();
        });

        const copyBtn = document.getElementById('copyBtn');
        const qrCodeUrl = "{{ $qrCodeUrl }}"; 

        copyBtn.addEventListener('click', () => {
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(qrCodeUrl)
                    .then(() => {
                        const originalText = copyBtn.innerHTML;
                        copyBtn.innerHTML = '<i class="fas fa-check"></i> Copied!';
                        copyBtn.classList.remove('btn-outline-primary');
                        copyBtn.classList.add('btn-success');

                        setTimeout(() => {
                            copyBtn.innerHTML = originalText;
                            copyBtn.classList.remove('btn-success');
                            copyBtn.classList.add('btn-outline-primary');
                        }, 3000);
                    })
                    .catch(err => {
                        console.error('Failed to copy: ', err);
                    });
            } else {
                flasher.error('Clipboard not supported in this browser');
            }
        });
        
    </script>
@endsection