@extends('layouts.main')

@section('main-container')
    <div class="main_content_iner mt-0">
        <div class="container-fluid p-0 sm_padding_15px">
            <div class="">
                <div class="px-4 py-1 theme_bg_1">
                    <h5 class="mb-0 text-white">Radius Report</h5>
                </div>
            </div>


            <form action="{{route('messagelog.search')}}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="row p-3">
				       <div class="col-sm-4 form-group">
                        <label class="fw-medium" for="record_limit" class="form-label">Limit</label>
                                             <select name="record_limit" id="record_limit" class="form-control input-sm">
                                             	<option value="100" selected>100</option>
                                                <option value="1000" >1000</option>
                                             </select>
											 
                    </div>
				<div class="col-md-4">
				<label for="branch" class="form-label">Branch</label>	
				  <select name="branch_id" id="branch_id" class="form-select form-select-sm" style="width: 100%">
                        <option value="-1" selected>Select a Branch</option>
                                                        @foreach ($sub_offices as $branch)
                 <option {{ $selectedBranch==$branch->id ? 'selected' : '' }} value="{{ $branch->id }}">{{ $branch->name }}</option>
            
														@endforeach 
											
                    </select>
				</div>
				
			<div class="col-md-4">
                    <label for="customer" class="form-label">Customer</label>
                    <select name="customer_id" id="customer_id" class="form-select form-select-sm" style="width: 100%">
                    <option value="-1" selected>Select a Customer</option>
					 @php 
					 if($selectedCustomer) {
					@endphp
					 @foreach ($customers as $customer)
	<option {{ $selectedCustomer==$customer->customer_id ? 'selected' : '' }} value="{{ $customer->customer_id }}">{{ $customer->customer_name }}</option>
				@endforeach
					  @php
					 }
					  @endphp                               
                     </select>
                </div>
				
                    <div class="col-sm-4 form-group">
                        <label class="fw-medium" for="log_type" class="form-label">Log Type</label>
                         <select name="log_type" id="log_type" class="form-control input-sm">
                                             	<option value="-1">Select Auth Type</option>
                                             	<option value="OK" >Login OK</option>
                                                <option value="incorrect">Login Incorrect</option>
                                                <option value="Expiration">Expired User</option>
                                                <option value="Calling-Station-Id">MAC Invalid</option>
                                                <option value="Multiple" >Multiple logins</option>
                                                <option value="Info" >Info Log</option>
                                                <option value="Error" >Error Log</option>
                                             </select>
                    </div>
                    <div class="col-sm-4 form-group">
                        <label class="fw-medium" for="nas" class="form-label">NAS</label>
                        <select name="nas" id="nas" class="form-select form-control">
                            <option value="-1" selected>Select a NAS</option>
                            @foreach ($nas as $ns)
                                <option {{ $selectedNas==$ns->id? 'selected' : '' }} value="{{ $ns->id }}">{{ $ns->shortname }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="d-flex justify-content-center gap-4">
                        <button type="button" class="btn btn-sm btn-info text-white" onclick="this.disabled=true;this.form.submit();"><i class="fa-sharp fa-solid fa-eye me-1"></i>View</button>
                        <button type="button" class="btn btn-sm btn-warning text-white" onclick="this.disabled=true;window.print()"><i class="fa-solid fa-print me-1"></i>Print</button>
                    </div>
                </div>
            </form>

            <div class="QA_table px-3 ">
			                @php
                    $count  = 1;
                @endphp
                       <div class="table-responsive">
                        <table class="table ">
                            <thead>
                                <tr>
                                    <tr>
									<th align='center' class='title_cell_e' >SL</th>
									<th align='center' class='title_cell_e'  >Description</th>
									</tr> 
									</tr>
                            </thead>
                            <tbody>
                                @foreach ($messages as $message)
                                    <tr>
										<td>
											{{ $count++ }}
										</td>
										<td>
											{{ $message}}
										</td>	

                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                           </div>
        </div>
    </div>
	 <script>
        $(document).ready(function() {
            $('.select2').select2({
                
            });
		     $("#branch_id").select2({
     
			});
			$("#customer_id").select2({
   
			});	
		$('#branch_id').on('select2:select', function (e) {
                var data = e.params.data;
                console.log(data);

                const branchID = data.id;


                // Your JSON data
                const jsonData = { branchID: branchID };

                // Set up options for the fetch request
                const options = {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify(jsonData) // Convert JSON data to a string and set it as the request body
                };

                // Make the fetch request with the provided options
                fetch(`{{ url('getCustomerByBranch') }}`, options)
                .then(response => {
                    // Check if the request was successful
                    if (!response.ok) {
                    throw new Error('Network response was not ok');
                    }
                    // Parse the response as JSON
                    return response.json();
                })
                .then(data => {
                    // Handle the JSON data
                    console.log(data);
                    var select = document.getElementById("customer_id");
                    select.innerHTML = "";
                    var option = new Option(data.text, data.id, true, true);
                    option.text = "Select a Customer";
                    option.value = -1;
                    select.append(option);
                    for(prod of data.data)
                    {
                        var option = new Option(data.text, data.id, true, true);
                        option.text = prod.customer_name;
                        option.value = prod.id;
                        var select = document.getElementById("customer_id");
                        select.append(option);
                    }
                    $('#customer_id').val('-1'); 
                        
                })
                .catch(error => {
                    // Handle any errors that occurred during the fetch
                    console.error('Fetch error:', error);
                });

            });	
			
			
        });
</script>
@endsection