@extends('layout.layout')
@section('content')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <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">
    <!-- DataTables Buttons -->
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>

    <style>
        .dataTables_wrapper .dataTables_filter input {
            width: 150px;
            height: 30px;
            padding: 5px;
            font-size: 14px;
        }
    </style>
    <div class="container">
        <div class="tab-content" id="myTabContent">
            <div class="row">
                <div class="col-12">
                    <div class=" my-2; padding-inline: auto;" style="border-radius: 0 10px 10px 10px">
                        <!-- Main CONTENT -->
                        <div class="container-fluid py-1 mx-0 px-0">
                            <div class="row mx-1 mb-3 me-2">
                                <div class="col-md-4 g-1 mx-0 px-0">
                                    <div class="container px-0 mx-1 pe-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">Borrower's Log</h5>
                                                </div>
                                            </div>
                                            <div class="container-fluid overflow-auto mt-3 px-2">
                                                <table id="userTable" class="table table-hover mt-0 pt-0" width="auto">
                                                    <thead>
                                                        <tr>
                                                            <th>ID</th>
                                                            <th>Name</th>
                                                            <th>Position</th>
                                                            <th>Action</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <td>
                                                        </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <br>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-8 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">Borrowed Learning Resources</h5>
                                                </div>
                                            </div>
                                            <div class="container-fluid pt-3">
                                                <table id="borrowedLR" class="table table-hover" width="auto">
                                                    <thead>
                                                        <tr>
                                                            <th>Borrow Log ID</th>
                                                            <th>Masterlist ID</th>
                                                            <th>Accession</th>
                                                            <th>Status ID</th>
                                                            <th>Title</th>
                                                            <th>Status</th>
                                                            <th>Date Borrowed</th>
                                                            <th>Date Returned</th>
                                                            <th>Action</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                                <br>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>
                </div>
            </div>
        </div>
    </div>
    <!-- Return LR Modal -->
    <div class="modal fade" id="detailsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="detailsModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #dc3545;">
                    <h5 class="modal-title text-white" id="detailsModalLabel">Borrow Log Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="detailsForm">
                        <input type="hidden" class="form-control" id="borrowLogId" readonly>
                        <input type="hidden" class="form-control" id="masterlist_id" readonly>
                        <input type="hidden" class="form-control" id="accession" readonly>

                        <div class="mb-3">
                            <label for="status" class="form-label">Status</label>
                            <select class="form-select" id="statusDropdown">
                                <!-- Only the selected option will be dynamically populated here -->
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="dateBorrowed" class="form-label">Date Borrowed</label>
                            <input type="text" class="form-control" id="dateBorrowed" readonly>
                        </div>
                        <div class="mb-3">
                            <label for="returnRemarks" class="form-label">Remarks</label>
                            <textarea class="form-control" name="returnRemarks" id="returnRemarks"></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="rating" class="form-label">Rating</label>
                            <select class="form-select" id="rating">
                                <option value="5">5 - Excellent</option>
                                <option value="4">4 - Good</option>
                                <option value="3">3 - Average</option>
                                <option value="2">2 - Poor</option>
                                <option value="1">1 - Very Poor</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="submitbtn" id="saveChanges">Return</button>
                </div>
            </div>
        </div>
    </div>


    <script src="{{ asset('assets/js/borrow/borrowerlog.js') }}"></script>
@endsection