@extends('layout.layout')
@section('content')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.15.10/dist/sweetalert2.all.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.15.10/dist/sweetalert2.min.css" rel="stylesheet">
    <style>
        .dataTables_wrapper .dataTables_filter input {
            width: 350px;
            height: 30px;
            padding: 5px;
            font-size: 14px;
        }
        .qr-code-img {
            width: 50px;
            height: 50px;
        }
    </style>
    <div class="container">
        <div class="tab-content" id="myTabContent">
            <div class="row">
                <div class="col-12">
                    <!-- <div class="card my-2" style="border-radius: 0 10px 10px 10px"> -->
                        <div class="container-fluid py-1 mx-0 px-0">
                            <div class="row mx-1 mb-3 me-2">
                                <div class="col-md-12 g-1 mx-0 px-1">
                                    <div class="container px-0 mx-1 ps-1">
                                        <div class="card">
                                            <div class="card-header p-0 position-relative">
                                                <div class="shadow-dark rounded-2" style="background-color: #0071bd; padding: 5px 5px 3px 5px">
                                                    <h5 class="text-white text-capitalize ps-3">Borrow Logs</h5>
                                                </div>
                                            </div>
                                            <div class="container-fluid pt-3">
                                                <table id="lr_logs" class="table table-hover" width="auto">
                                                    <thead>
                                                        <tr>
                                                            <th>Accession</th>
                                                            <th>Title</th>
                                                            <th>Status</th>
                                                            <th>Date Borrowed</th>
                                                            <th>Date Returned</th>
                                                            <th>Remarks</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                                <br>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <!-- </div> -->
                    <br>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            var table = $('#lr_logs').DataTable({
                responsive: true,
                scrollX: true,
                columns: [
                    {
                        data: 'accession',
                        render: function(data, type, row) {
                            if (type === 'display') {
                                const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`;
                                return `<img src="${qrCodeUrl}" alt="QR Code" class="qr-code-img" />`;
                            }
                            return data;
                        }
                    },
                    { data: 'title_name' },
                    { data: 'status_name' },
                    { data: 'date_borrowed' },
                    { data: 'date_returned' },
                    { data: 'remarks' }
                ]
            });
            $.ajax({
                url: '/get-personal-logs',
                method: 'GET',
                dataType: 'json',
                success: function(response) {
                    console.log('Response from server:', response);
                    table.clear();
                    table.rows.add(response);
                    table.draw();
                },
                error: function(xhr, status, error) {
                    console.error('Error occurred:', status, error);
                    if (xhr.status === 401) {
                        console.log('User not authenticated');
                        Swal.fire({
                            icon: 'error',
                            title: 'Authentication Error',
                            text: 'Please log in to view your borrow logs.'
                        });
                    }
                }
            });
        });
    </script>
@endsection