@extends('layout.layout')
@section('content')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="{{ asset('assets/css/datatable.custom.css') }}">
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css">
    <script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.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">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Merriweather:wght@400&display=swap" rel="stylesheet">
    <style>
        /* Success Alert Styling */
        .custom-popup-success {
            border-radius: 12px;
            border: 1px solid #26a69a;
            background-color: #e8f5e9;
            padding: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .custom-title-success {
            font-family: 'Poppins', sans-serif;
            color: #004d40;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .custom-content-success {
            font-family: 'Merriweather', serif;
            color: #004d40;
            font-size: 16px;
            margin-bottom: 20px;
        }

        .custom-confirm-button-success {
            border-radius: 10px;
            padding: 10px 20px;
            font-size: 16px;
            background-color: #26a69a;
            color: white;
            transition: background-color 0.3s ease;
        }

        .custom-confirm-button-success:hover {
            background-color: #004d40;
        }

        /* Error Alert Styling */
        .custom-popup-error {
            border-radius: 12px;
            border: 1px solid #d32f2f;
            background-color: #ffebee;
            padding: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .custom-title-error {
            font-family: 'Poppins', sans-serif;
            color: #d32f2f;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .custom-content-error {
            font-family: 'Merriweather', serif;
            color: #b71c1c;
            font-size: 16px;
            margin-bottom: 20px;
        }

        .custom-confirm-button-error {
            border-radius: 10px;
            padding: 10px 20px;
            font-size: 16px;
            background-color: #d32f2f;
            color: white;
            transition: background-color 0.3s ease;
        }

        .custom-confirm-button-error:hover {
            background-color: #b71c1c;
        }
        .search-container {
            position: relative;
            width: 100%;
            max-width: 500px;
            margin: auto;
        }

        .search-label {
            font-weight: bold;
            margin-bottom: 5px;
            display: block;
            font-size: 14px;
            color: #333;
        }

        #searchUser {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            font-size: 16px;
            transition: 0.3s;
        }

        #searchUser:focus {
            border-color: #0071bd;
            outline: none;
            box-shadow: 0 2px 8px rgba(0, 113, 189, 0.3);
        }

        #userList {
            position: absolute;
            width: 100%;
            max-height: 250px;
            overflow-y: auto;
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            z-index: 1000;
            display: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .user-item {
            padding: 12px;
            cursor: pointer;
            transition: background 0.3s ease;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f0f0f0;
        }

        .user-item:hover {
            background: #f0f8ff;
        }

        .user-item:last-child {
            border-bottom: none;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
            object-fit: cover;
            border: 1px solid #ddd;
        }
        .compact-details p {
            margin: 0;
            padding: 2px 0;
            line-height: 1.2;
        }

        .compact-details {
            margin-bottom: 10px;
        }
    </style>
    <div class="card px-2 py-2 mt-4 mb-4">
        <div class="container-fluid">
            <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                <div class="shadow-dark border-radius-lg pt-3 pb-2" style="background-color: #0071bd">
                    @if($resourceDetails)
                        @if ($resourceDetails->resource_type == 'Print')
                            <div class="compact-details">
                                <h5 class="text-white text-capitalize ps-3"><strong>Title:</strong> {{ $resourceDetails->title }}</h5>
                            </div>
                        @else
                            <div class="compact-details">
                                <h5 class="text-white text-capitalize ps-3"><strong>Title:</strong> {{ $resourceDetails->title }}</h5>
                            </div>
                        @endif

                    @else
                        <p>No resource details found.</p>
                    @endif
                </div>
            </div>

            <div class="col-md-6 search-container mt-4">
                <input type="text" id="searchUser" class="form-input w-100" placeholder="Select User..." autocomplete="off">
                <ul id="userList" class="list-group mt-2"></ul>
                <input type="hidden" id="selectedUserId" name="selectedUserId">
            </div>

            <script>
                $(document).ready(function () {
                    $('#searchUser').on('keyup', function () {
                        let query = $(this).val();

                        if (query.length > 1) {
                            $.ajax({
                                url: "/search-users",
                                type: "GET",
                                data: { query: query },
                                success: function (data) {
                                    let list = '';
                                    if (data.length > 0) {
                                        $.each(data, function (index, user) {
                                            let fullName = `${user.first_name ?? ''} ${user.last_name ?? ''}`.trim();
                                            let username = user.username ? `(${user.username})` : '';
                                            let school = user.school_name ? user.school_name : '';
                                            let district = user.district_name ? user.district_name : '';
                                            let region = user.region_name ? user.region_name : '';
                                            let profilePhoto = user.user_profile_photo ? user.user_profile_photo : "{{ asset('profile_picture/lrmisicondefpicgreybg.png') }}";

                                            list += `
                                                <li class="list-group-item user-item d-flex align-items-center" data-id="${user.user_id}" data-name="${fullName}">
                                                    <img src="${profilePhoto}" alt="User Avatar" class="user-avatar">
                                                    <div>
                                                        <strong>${fullName}</strong> ${username}
                                                        <br>
                                                        <small>${school} ${district} ${region}</small>
                                                    </div>
                                                </li>`;
                                        });
                                    } else {
                                        list = '<li class="list-group-item text-muted">No results found</li>';
                                    }
                                    $('#userList').html(list).show();
                                }
                            });
                        } else {
                            $('#userList').hide();
                        }
                    });

                    $(document).on('click', '.user-item', function () {
                        let userId = $(this).data('id');
                        let userName = $(this).data('name');

                        $('#searchUser').val(userName);
                        $('#selectedUserId').val(userId);
                        $('#userList').hide();
                    });

                    $(document).on('click', function (e) {
                        if (!$(e.target).closest('#searchUser, #userList').length) {
                            $('#userList').hide();
                        }
                    });
                });
            </script>

            <div class="card px-2 pb-4 pt-2 mb-4 mt-4">
                <div class="container-fluid py-1">
                    <section class="tablecontent">
                        <div class="table-responsive">
                            <table id="borrowTable" class="display" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Masterlist ID</th>
                                        <th>Item</th>
                                        <th>Accession</th>
                                        {{-- <th>Title</th> --}}
                                        <th>Status ID</th>
                                        <th>Status</th>
                                        <th>Borrower Name</th>
                                        <th>Borrow</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Data will be populated by DataTables -->
                                </tbody>
                            </table>
                        </div>
                        <div class="text-center">
                            <button id="borrowButton" class="submitbtn mt-2">Borrow</button>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>

    <script>
        var borrowUrl = "{{ route('borrow', ['resourceId' => $resourceId]) }}";
        var borrowSubmitUrl = "{{ route('borrow.submit') }}";
        var csrfToken = "{{ csrf_token() }}";
    </script>

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

@endsection