@extends("newDashboard.index")

@section("css")
<link rel="stylesheet" href="{{asset('metronic/css/data-table.css')}}">
@endsection

@section("main-content")
<div class="content-wrapper">
    <div class="page-header">
        <h3 class="page-title">
            <span class="page-title-icon bg-gradient-primary text-white me-2">
                <i class="mdi mdi-cards-variant menu-icon"></i>
            </span> {{__('messages.User Report System')}}
        </h3>
    </div>
   
	<input type="hidden" name="hidden_page" id="hidden_page" value="1" />
          <input type="hidden" id="user-index" value="{{ route('services.report.get-data') }}" />
          <input type="hidden" id="print-row" value="{{ route('bills.print') }}" />
			<input type="hidden" id="index-bills" value="{{ route('bills.bills.index') }}" />          

    <!-- Start of new combined container -->
    <div class="table-responsive customscroll">
                <table class="table datatable text-center" id="datatable">
                    <div class="container pb-2">
                        <div class="row gap-1 custom-padding-filter-tmp">
                            <div class="col-12 col-md-4 col-xl-3">
                                <label class="col-form-label">{{ __('messages.date:') }}</label>
                                <div class="center-custom-width-filter-date">
                                    <input type="text" id="config-demo" placeholder="{{ __('messages.date from - to') }}"
                                        class="form-control" />
                                </div>
                            </div>

                            
                        </div>
                    </div>
                    <thead>
                        <tr>
                			<th>{{__('messages.ID')}}</th> 	
                			<th>{{__('messages.username')}}</th>
                			<th>{{__('messages.Issue Description')}}</th>
                			 <th>{{__('messages.date')}}</th>
                			 <th></th>
                			
                			
            			</tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div class="modal fade mt-6" id="issueModal" tabindex="-1" aria-labelledby="issueModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="issueModalLabel">{{__('messages.Issue Details')}}</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span data-bs-dismiss="modal" aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- Details will be inserted here -->
        <p><strong>{{__('messages.username')}} : </strong></p>
        <p id="modalUsername"></p>
        <p><strong>{{ __('messages.Issue Description') }} : </strong></p>
        <p id="modalIssueDescription"></p>
      </div>
       <div class="modal-footer">
        <button type="button" class="btn btn btn-primary" data-bs-dismiss="modal">{{ __('messages.Close') }}</button>
       </div>
  </div>
</div>
        </div>
  			
         
    <!-- End of new combined container -->

@endsection

@section("scripts")
<script>
    var translations = {
    		'ID':"{{__('messages.ID')}}",
    		'amount':"{{__('messages.amount')}}",
       		'from_user':"{{__('messages.from user')}}",
       		'Unit_Price':"{{__('messages.Unit Price')}}",
       		'serial_number':"{{__('messages.Serial number')}}",
       		'total_amount':"{{__('messages.Amount')}}",
       		'Statement':"{{__('messages.Statement')}}",
       		'Subtotal':"{{__('messages.Subtotal')}}",
       		'Quantitys':"{{__('messages.Quantitys')}}",
       		'username':"{{__('messages.username')}}",
       		'title':"{{__('messages.invoices system')}}",
       		'date':"{{__('messages.date')}}",
       		'to-from-error':"{{__('messages.To Date must be after From Date.')}}",
       		'both-date-error':"{{__('messages.Both From Date and To Date are required, or neither should be provided.')}}", 
    };
</script>
<script type="module" src="{{asset('metronic/js/pages/report.js')}}"></script> 

@endsection