@auth

<div id="user-info" 
         data-email="{{ auth()->user()->email }}" 
         data-name="{{ auth()->user()->name }}" 
         data-country="{{ auth()->user()->country_name }}">
    </div>
    
        <div class="container mb-1 p-0">
            <div class="row">
                <div class="col-12">
                    <div class="input-group search-box-cntr">
                        <input type="text" class="form-control" placeholder="Search..." aria-label="Search" aria-describedby="search_box" id="quote_req_serach">
                        <div class="input-group-append" id="quote_req_search_btn">
                            <span class="input-group-text" id="search_box" style="background-color:#fcbb6a;"><i class="fas fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container mb-2 p-0">
            <div class="row">
                <div class="col-9" id="sp_quote_request_list_result"></div>
                <div class="col-3" style="border-left: 1px solid black;cursor:pointer;">
                    <span class="float-right" data-toggle="popover" data-placement="bottom" id="sp_quote_request_list_table_filter">
                        <strong>Filter</strong>
                        <span id="filter_counter" class="d-none" style="color:#f14310;"></span>
                    </span>
                    <style type="text/css">
                        .popover-header {
                            margin-top: 0;
                        }
                        .popover-body {
                            padding: 0;
                        }
                        .autocomplete {
                          /*the container must be positioned relative:*/
                          position: relative;
                          display: inline-block;
                        }
                        .autocomplete-items {
                          position: absolute;
                          border: 1px solid #d4d4d4;
                          border-bottom: none;
                          border-top: none;
                          z-index: 99;
                          /*position the autocomplete items to be the same width as the container:*/
                          top: 100%;
                          left: 0;
                          right: 0;
                        }
                        .autocomplete-items div {
                          padding: 10px;
                          cursor: pointer;
                          background-color: #fff;
                          border-bottom: 1px solid #d4d4d4;
                        }
                        .autocomplete-items div:hover {
                          /*when hovering an item:*/
                          background-color: #e9e9e9;
                        }
                        .autocomplete-active {
                          /*when navigating through the items using the arrow keys:*/
                          background-color: DodgerBlue !important;
                          color: #ffffff;
                        }
                    </style>
                </div>
            </div>
        </div>

        <div class="container" id="sp_quote_request_list_table_header">
            <div class="row mb-0 pt-1 border-top">
              <div class="col-sm-12 col-lg-1 text-break">
                <strong>Quote# </strong>
              </div>

              <div class="col-sm-12 col-lg-11 d-none d-lg-block">
                  <div class="row">
                      <div class="col-sm-12 col-lg-3 text-break">
                            <strong>Name</strong>
                      </div>
                      <div class="col-sm-12 col-lg-3 text-break">
                          <strong id="submission" data-placement="top" title="Date of Submission" >DOS</strong> - <strong id="bid" data-placement="top" title="Date of Bid">DOB</strong>
                      </div>
                      <div class="col-sm-12 col-lg-2 text-break">
                            <strong>Category</strong>
                      </div>
                      <div class="col-sm-12 col-lg-2 text-break">
                            <strong>Country</strong>
                      </div>
                      <div class="col-sm-12 col-lg-1 text-break">
                            <strong>Bid</strong>
                      </div>
                      
                  </div>
              </div>
            </div>
        </div>

        <div class="container overflow-auto" id="sp_quote_request_list_table" style="max-height:294px;">
            <!-- Your content goes here -->
        </div>
        <div id="hospital_list_table_msg"></div>
        <hr>
        <div class="container">
            <div class="pagination" id="sp_quote_request_list_pages"></div>
        </div>
   
@endauth
<!--ToolTip Code-->

<script>
    $('#submission').tooltip();
    $('#bid').tooltip();

    // document.getElementById('claimNowButton').addEventListener('click', function() {
    //     var email = "{{ auth()->user()->email }}";
    //     window.location.href = "{{ route('payment.page') }}?email=" + email;
    // });
    document.getElementById('claimNowButton').addEventListener('click', function () {
    var userId = this.getAttribute('data-usermy-id');
    var email = "{{ auth()->user()->email }}";
    var name = "{{ auth()->user()->name }}";
    var country = "{{ auth()->user()->country_name }}";
    // Directly call submitForm with the user's email, name, and country
    submitForm(email, name, country);
});

function submitForm(email, name, country) {
    var form = document.createElement('form');
    form.style.display = 'none'; // Hide the form visually
    form.method = 'POST';
    form.action = "{{ route('handleClaimPremium') }}"; // The server route that handles the post

    // Create a hidden input field for the email to be submitted securely
    var emailInput = document.createElement('input');
    emailInput.type = 'hidden';
    emailInput.name = 'email';
    emailInput.value = email;
    form.appendChild(emailInput);

    // Name input
    var nameInput = document.createElement('input');
    nameInput.type = 'hidden';
    nameInput.name = 'name';
    nameInput.value = name;
    form.appendChild(nameInput);

    // Country input
    var countryInput = document.createElement('input');
    countryInput.type = 'hidden';
    countryInput.name = 'country';
    countryInput.value = country;
    form.appendChild(countryInput);

    // Include CSRF token for Laravel's CSRF protection
    var csrfInput = document.createElement('input');
    csrfInput.type = 'hidden';
    csrfInput.name = '_token';
    csrfInput.value = '{{ csrf_token() }}';
    form.appendChild(csrfInput);
    
    document.body.appendChild(form);
    form.submit();
}

</script>
<script>
    var userPaymentPremium = {{ auth()->user()->payment_premium }};
</script>
<script>
    var userPaymentPremium = {{ auth()->user()->payment_premium }};
    var handleClaimPremiumUrl = "{{ route('handleClaimPremium') }}";
</script>
<script src="{{ asset('js/blade-components/sp_server_side_paginated_table.js') }}"></script>