{% include 'components/frontHead.html' %}
<!-- Summernote CSS/JS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<!-- Add these before the closing </head> tag -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
<div class="container">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-fw fa-home"></i> {{ breadcrumb.storeType }}</a></li>
        <li><a href="/{{ store.typeNum }}">{{ breadcrumb.storeCity }}</a></li>
        <li class="active">Services Queue</li>
    </ol>
    <div class="row">
        <div class="container">
            <ul class="nav nav-tabs">
                <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" data-bs-target="#activeQueue">Active Queue</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" data-bs-target="#completedQueue">Completed Today</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" data-bs-target="#logQueue">Service Log</a></li>
            </ul>

            <div class="tab-content">
                <div id="activeQueue" class="tab-pane fade in active">
                    <div id="queueContainer"></div>
                </div>
                <div id="completedQueue" class="tab-pane fade">
                    <div id="completedContainer"></div>
                </div>
                <div id="logQueue" class="tab-pane fade">
                    <div class="row m-t-20">
                        <div class="col-md-4">
                            <!-- Add calendar icon and separate print button -->
                            <div class="input-group">
                                <input type="text" class="form-control" id="logDatePicker">
                                <span class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </span>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-primary" id="printLog">
                                <i class="fa fa-print"></i> Print Log
                            </button>
                        </div>
                    </div>
                    <br />
                    <div id="logContainer" class="m-t-20">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Daily #</th>
                                    <th>Customer</th>
                                    <th>Phone</th>
                                    <th>Time In</th>
                                    <th>Time Out</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="logTableBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% raw %}
<script id="queueItemTemplate" type="text/x-handlebars-template">
    <div class="service-queue-item card {{itemClass}}" data-id="{{id}}">
        <div class="card-body service-queue-body">

            <!-- 1. Time column -->
            <div class="service-queue-time">
                <div class="time-entered">{{timeEnteredFormatted}}</div>
                <div class="time-elapsed" data-time-entered="{{timeEntered}}">
                    {{timeElapsed}}
                </div>
            </div>

            <!-- 2. Start/Complete button column -->
            <div class="queue-actions">
                <button class="btn btn-circle btn-primary btnStartOrComplete"
                        data-id="{{id}}"
                        data-status="{{status}}"
                        data-textme="{{textMe}}"
                        data-notes="{{notes}}">
                    {{actionLabel}}
                </button>
            </div>

            <!-- 3. Customer name column -->
            <div class="service-queue-center">
                <div class="customer-name clickable-customer"
                     data-id="{{id}}"
                     data-first-name="{{customerFirstName}}"
                     data-last-name="{{customerLastName}}"
                     data-phone="{{customerPhone}}"
                     data-daily-num="{{dailyNum}}"
                     data-textme="{{textMe}}"
                     data-time-entered="{{timeEntered}}">
                    {{customerFirstName}} {{customerLastName}}
                </div>
            </div>
            <!-- 4. Icons column (inline) -->
            <div class="service-queue-icons">
                <!-- Item count circle -->
                <div class="item-count-circle">
                    {{numItems}}
                </div>
                <!-- TextMe icon -->
                {{#if textMe }}
                    <!-- textMe = 1 => Use green icon -->
                    <div class="text-me-icon text-me-green">
                        <i class="fa-solid fa-comment-sms"></i>
                    </div>
                {{else}}
                    <!-- textMe = 0 => Use red icon -->
                    <div class="text-me-icon text-me-red">
                        <i class="fa-solid fa-comment-sms"></i>
                    </div>
                {{/if}}

                <!-- Notes icon -->
                <button class="btn btn-circle btn-warning btnToggleNotes" data-id="{{id}}" data-notes="{{notes}}">
                    <i class="fa fa-book"></i>
                </button>

                <!-- Delete button -->
                <button class="btn btn-circle btn-danger btnRemove" data-id="{{id}}">
                    <i class="fa fa-trash"></i>
                </button>
            </div>
        </div>

        <!-- Hidden area for notes editor (Summernote container) -->
        <div class="notes-container">
            <!-- Use a div instead of a textarea for Summernote -->
            <div class="notes-textarea" data-id="{{id}}">
                {{notes}}
            </div>
            <button class="btn btn-sm btn-success btnSaveNotes" data-id="{{id}}">Save Notes</button>
            <button class="btn btn-sm btn-secondary btnCloseNotes" data-id="{{id}}">
                <i class="fa fa-chevron-up"></i>
            </button>
        </div>
    </div>
</script>
{% endraw %}

{% include 'components/frontFoot.html' %}
<!-- Customer Detail Modal -->
<div class="modal fade" id="customerDetailModal" tabindex="-1" role="dialog" aria-labelledby="customerDetailModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="customerDetailModalLabel">Customer Details</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- We’ll fill these placeholders dynamically -->
                <p><strong>Name:</strong> <span id="modalCustomerName"></span></p>
                <p><strong>Phone:</strong> <span id="modalCustomerPhone"></span></p>
                <p><strong>Daily #:</strong> <span id="modalCustomerDailyNum"></span></p>
                <p><strong>Entered:</strong> <span id="modalCustomerTimeEntered"></span></p>
                <!-- Add as many fields as you’d like -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>


<!-- Script references: use your existing paths -->
<script src="/view/common/js/jquery.min.js"></script>
<script src="/js/vendor/bootstrap.bundle.min.js"></script>
<script src="/js/handlebars.min.js"></script> <!-- Keep your Handlebars at /js/handlebars.min.js -->
<script src="/js/moment/moment.js"></script>
<script src="/js/moment/moment-tz.js"></script>
<script src="https://cdn.ably.com/lib/ably.min-1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<!-- Our main JS for the service queue (split out) -->
<script src="/js/servicequeue/main.js"></script>
</body>
</html>
{% raw %}
<script id="completedItemTemplate" type="text/x-handlebars-template">
    <div class="completed-item card" data-id="{{id}}">
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <strong>{{customerFirstName}} {{customerLastName}}</strong>
                    <br>
                    {{customerPhone}}
                </div>
                <div class="col-md-3">
                    <strong>Daily #:</strong> {{dailyNum}}
                </div>
                <div class="col-md-4">
                    <strong>Dropped off:</strong> {{timeEnteredFormatted}}
                    <br>
                    <strong>Completed:</strong> {{timeCompletedFormatted}}
                </div>
                <div class="col-md-2">
                    {{#if textMe}}
                        <button class="btn btn-primary btn-sm resendSMS" data-id="{{id}}">
                            <i class="fa fa-refresh"></i> Resend SMS
                        </button>
                    {{else}}
                        <span>Opted Out</span>
                    {{/if}}
                </div>
            </div>
        </div>
    </div>
</script>
{% endraw %}