@extends("app")
@section('head_title', 'My Listing | '.getcong('site_name') )
@section('head_url', Request::url())

@section("content") 
<style>
.dataTables_filter{
    justify-self: end;
}

</style>

<div class="tp-page-head" >  
	<div class="container">
		<div class="row">
			<div class="col-md-12">        
				<div class="page-header">          
					<h1>My Listing</h1>        
				</div>      
			</div>    
		</div>  
	</div>
</div>
<div class="tp-breadcrumb">  
	<div class="container">    
		<div class="row">      
			<div class="col-md-8">        
				<ol class="breadcrumb">          
					<li><a href="#">Home</a></li>          
					<li class="active">My Listing</li>        
				</ol>      
			</div>    
		</div>  
	</div>
</div>
<div class='d-flex '>
@include("_particles.user_sidebar")
<div   style='width:100%'>  
	<div class="container" style='width:100% !important;'>    
		<div class="row">            
			     
			<div class="col-md-10 col-sm-10 content-right">        
				<div class="row">          
					<div class="col-md-12" id="aboutus">   
						<div class='d-flex  ' style='width:100%'>         
						<h1 style='d-flex justify-between w-100'>Shortlisted Venues 
						
    <a class="btn btn-pink" 
   id="singlevenuerequestquote" 
   data-toggle="modal" 
   data-target="#viewSend" 
  href="#"
   >
   Request Quote
</a>
</div>
						@if(Session::has('flash_message'))                    
						<div class="alert alert-success">                    
							<button type="button" class="close" data-dismiss="alert" aria-label="Close">        
								<span aria-hidden="true">&times;</span></button>                        
								{{ Session::get('flash_message') }}                    
							</div>          
							@endif        
							<div class="well-box">                    
					<table 
    class="table table-bordered table-striped listings-dataTable-full table-header-bg"
    id="myshortListedvenues"
>          
    <thead>          
        <tr>            
            <th>Choose Multiple</th>            
            <th>Venue Name</th>            
            <th>Shortlisted On</th>            
            <th>Actions</th>          
        </tr>          
    </thead>          
    <tbody>          
        @foreach($listings as $i => $listing)          
        <tr>            
            <th scope="row">
                <div class="col-md-6">
                    <input type="checkbox" class="mulHotelChk" value="{{ $listing->venue_id }}">
                </div>
                <div class="col-md-6">{{ $i+1 }}</div>
            </th>              
                        
            <td>
                <a href="{{ url('venue/') }}/{{ $venue_slug }}/{{ $listing->venue_id }}/{{ $hotel_slug }}">
                    {{ $listing->venue_name }}, {{ $listing->hotel_name }}, {{ $listing->city }}, {{ $listing->state }}, {{ $listing->country }}
                </a>
            </td>            
            <td>{{ date('d-M-Y', strtotime($listing->created_at)) }}</td>
            <td>           
                <a href="{{ URL::to('remove_shortlist/'.$listing->id) }}" class="btn btn-danger">
                    <i class="fa fa-trash"></i>
                </a> 
            </td>          
        </tr>          
        @endforeach          
    </tbody>        
</table>
		<div class="span12 pagination-center">          
			<div class="dataTables_paginate paging_bootstrap pagination">                       
				@include('_particles.pagination', ['paginator' => $listings])                     
			</div>        
		</div>        
		<div class="clearfix">

		</div>        
	</div>          
</div>        
</div>      
</div>    
</div>  
</div>
<script>

document.addEventListener('DOMContentLoaded', function () { 
 
	   let SelectedVenuesArray = [];
    const requestQuoteBtn = document.getElementById('singlevenuerequestquote');

    document.querySelectorAll('.mulHotelChk').forEach(cb => {
        cb.addEventListener('change', function (e) {
            let venueId = this.value.trim();

            if (this.checked) {
                // Add if not already present
                if (!SelectedVenuesArray.includes(venueId)) {
                    SelectedVenuesArray.push(venueId);
                }
            } else {
                // Remove if unchecked
                SelectedVenuesArray = SelectedVenuesArray.filter(id => id !== venueId);
            }
            e.preventDefault();
            console.log('Updated Venue IDs:', SelectedVenuesArray);

            // ✅ Update the href dynamically
            if (SelectedVenuesArray?.length > 0) {
                requestQuoteBtn.setAttribute(
                    'href',
                    "{{ url('multiplevenuerequestquote') }}/" + SelectedVenuesArray.join(',')
                );
				   requestQuoteBtn.setAttribute(
                    'target',
                    "#{{ url('multiplevenuerequestquote') }}/" + SelectedVenuesArray.join(',')
                );
            }
			else{
				console.log("do nothing ---------------->")
				// getfreequote
				 requestQuoteBtn.setAttribute(
                    'href',
                    "{{ url('getfreequote') }}/"
                );
				   requestQuoteBtn.setAttribute(
                    'target',
                    "#{{ url('singlevenuerequestquote') }}/" 
                );
			}
			
        });
    });
});

</script>
@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('#myshortListedvenues').DataTable({
        "pageLength": 10,   // show 10 rows per page
        "ordering": true,   // allow sorting
        "searching": true,  // enable search box
        "lengthChange": true, // allow user to change page size
        "language": {
            "search": "Filter records:" // custom label for search
        }
    });
});
</script>




@endpush
</div>
</div>
@endsection