@extends('layouts.admin.main')
@section('title', __('adminWords.audio'))
@section('style')
	<link href="{{ asset('assets/plugins/datepicker/datepicker.min.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('assets/plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
	<link href="{{ asset('assets/plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
	<style>
        .btn-group .btn{
            border: 1px solid #fff;
            border-radius: 3px;
        }
        .dt-buttons{
            display: none !important;
        }
    </style>
@endsection
@section('rightbar-content')                 
<div class="breadcrumbbar">
	<div class="row align-items-center">
		<div class="col-md-3 col-lg-3">
			<h4 class="page-title">{{ __('adminWords.all').' '.__('adminWords.audio') }}</h4>
			<div class="breadcrumb-list">
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="{{url('/')}}">{{ __('adminWords.home') }}</a></li>
					<li class="breadcrumb-item"><a href="#">{{ __('adminWords.audio') }}</a></li>
				</ol>
			</div>
		</div>
		<div class="col-md-1 col-lg-1">

		</div>
		<div class="col-md-3 col-lg-3">
                <input type="text" name="search" id="search" class="form-control" placeholder="Search Audio">
        </div>

		<div class="col-md-5 col-lg-5">
			<div class="widgetbar">
				<div class="btn-group">
					<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						Export
					</button>
					<div class="dropdown-menu">
						<button class="dropdown-item copy" href="#">Copy</i></button>
						<button class="dropdown-item csv" href="#">CSV</button>
						<button class="dropdown-item excel" href="#">Excel</button>
						<button class="dropdown-item pdf" href="#">PDF</button>
					</div>
				</div>
				<a class="btn btn-danger" href="{{route('audio.create')}}"><i class="feather icon-plus mr-2"></i>{{ __('adminWords.create').' '.__('adminWords.audio') }}</a>
				<button type="button" class="btn btn-danger" id="bulkDelete" data-msg="{{ __('adminWords.atleast').' '.__('adminWords.audio').' '.__('adminWords.must_selected') }}" data-url="{{route('bulkDeleteAudio')}}"><i class="feather icon-trash-2"></i> {{ __('adminWords.delete_selected') }}</button>  
			</div>                        
		</div>
	</div>          
</div>
   
<div class="contentbar">  
	<div class="row">
		<div class="col-lg-12"> 
			<div class="card m-b-30">
				<div class="card-body">
					<div class="table-responsive">
						<form method="post" id="audioForm">
							<div id="table-container">
								@include('audio::audio.partials.table')
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

@endsection
@section('script')

    <script src="{{ asset('assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/dataTables.buttons.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/datatables/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/jszip.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/pdfmake.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/vfs_fonts.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/buttons.print.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/responsive.bootstrap4.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>      
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

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


	<script>
		$(document).ready(function(){
			let searchTimeout;
			let audioTable = null;

			function initDataTable(){
				if(audioTable){
					audioTable.destroy();
				}
				var exportFormatBody = function(data, row, column, node){
					try{
						if(node){
							var $node = $(node);
							// Image column (1) - return src if needed
							if(column === 1){
								var $img = $node.find('img');
								if($img.length){ return $img.attr('src') || ''; }
							}
							return $node.text().trim();
						}
					}catch(e){}
					return $('<div/>').html(data).text().trim();
				};

				audioTable = $('#audioTable').DataTable({
					"lengthChange": false,
					"searching": false,
					dom: 'Bfrtip',
					columnDefs: [
						{ orderable: false, targets: [0,1,7] }
					],
					buttons: [
						{
							extend: 'copyHtml5',
							exportOptions: { columns: [2,3,4,5], format: { body: exportFormatBody } }
						},
						{
							extend: 'csvHtml5',
							title: 'Disrupt_audios_'+ new Date().toLocaleDateString(),
							exportOptions: { columns: [2,3,4,5], format: { body: exportFormatBody } }
						},
						{
							extend: 'excelHtml5',
							title: 'Disrupt_audios_'+ new Date().toLocaleDateString(),
							exportOptions: { columns: [2,3,4,5], format: { body: exportFormatBody } }
						},
						{
							extend: 'pdfHtml5',
							title: 'Disrupt_audios_'+ new Date().toLocaleDateString(),
							exportOptions: { columns: [2,3,4,5], format: { body: exportFormatBody } }
						}
					]
				});
			}

			// Debounced search handler
			$('#search').on('keyup', function() {
				clearTimeout(searchTimeout);
				searchTimeout = setTimeout(function() {
					const search = $('#search').val();
					loadAudios(search, 1);
				}, 500);
			});

			// Function to load audios via AJAX
			function loadAudios(search = '', page = 1) {
				$.ajax({
					url: "{{ route('audio') }}",
					type: 'GET',
					data: {
						search: search,
						page: page
					},
					success: function(response) {
						$('#table-container').html(response);
						// initialize DataTable on newly loaded content
						initDataTable();
						// Update URL without reload
						const url = new URL(window.location);
						if (search) {
							url.searchParams.set('search', search);
						} else {
							url.searchParams.delete('search');
						}
						url.searchParams.set('page', page);
						window.history.pushState({}, '', url);
					},
					error: function(xhr) {
						console.error('Error loading audios:', xhr);
					}
				});
			}

			// Pagination link handler
			$(document).on('click', '.pagination a', function(e) {
				e.preventDefault();
				const page = $(this).attr('href').split('page=')[1];
				const search = $('#search').val();
				loadAudios(search, page);
			});

			// Initialize DataTable for initial load
			initDataTable();

			// Status toggle handler
			$(document).on('change', '.changeStatus', function() {
				const checkbox = $(this);
				const url = checkbox.data('url');
				const status = checkbox.is(':checked') ? 1 : 0;
				
				$.ajax({
					url: url,
					type: 'POST',
					data: {
						status: status,
						_token: '{{ csrf_token() }}'
					},
					success: function(response) {
						Swal.fire({
							icon: 'success',
							title: 'Status updated successfully',
							showConfirmButton: false,
							timer: 1500
						});
					},
					error: function(xhr) {
						checkbox.prop('checked', !checkbox.is(':checked'));
						Swal.fire({
							icon: 'error',
							title: 'Error updating status',
							text: 'Please try again'
						});
					}
				});
			});

			// Delete handler
			$(document).on('click', '.audio-delete', function(e) {
				e.preventDefault();
				const button = $(this);
				const url = button.data('url');
				
				Swal.fire({
					title: 'Are you sure?',
					text: "You won't be able to revert this!",
					icon: 'warning',
					showCancelButton: true,
					confirmButtonColor: '#3085d6',
					cancelButtonColor: '#d33',
					confirmButtonText: 'Yes, delete it!'
				}).then((result) => {
					if (result.isConfirmed) {
						$.ajax({
							url: url,
							type: 'POST',
							data: {
								_token: '{{ csrf_token() }}'
							},
							success: function(response) {
								Swal.fire(
									'Deleted!',
									'Audio has been deleted.',
									'success'
								);
								const search = $('#search').val();
								const page = $('.pagination .active span').text() || 1;
								loadAudios(search, page);
							},
							error: function(xhr) {
								Swal.fire(
									'Error!',
									'Failed to delete audio.',
									'error'
								);
							}
						});
					}
				});
			});

			// Bulk delete handler
			$('#bulkDelete').on('click', function() {
				const checkedBoxes = $('.CheckBoxes:checked');
				const msg = $(this).data('msg');
				
				if (checkedBoxes.length === 0) {
					Swal.fire({
						icon: 'warning',
						title: 'No Selection',
						text: msg
					});
					return;
				}
				
				const ids = [];
				checkedBoxes.each(function() {
					ids.push($(this).val());
				});
				
				Swal.fire({
					title: 'Are you sure?',
					text: "You are about to delete " + ids.length + " audio(s)!",
					icon: 'warning',
					showCancelButton: true,
					confirmButtonColor: '#3085d6',
					cancelButtonColor: '#d33',
					confirmButtonText: 'Yes, delete them!'
				}).then((result) => {
					if (result.isConfirmed) {
						$.ajax({
							url: $(this).data('url'),
							type: 'POST',
							data: {
								checked: ids,
								_token: '{{ csrf_token() }}'
							},
							success: function(response) {
								Swal.fire(
									'Deleted!',
									'Selected audios have been deleted.',
									'success'
								);
								const search = $('#search').val();
								loadAudios(search, 1);
							},
							error: function(xhr) {
								Swal.fire(
									'Error!',
									'Failed to delete audios.',
									'error'
								);
							}
						});
					}
				});
			});
		});

		// Export button handlers using DataTables buttons
		$('.csv').click(function(){ $('.buttons-csv').trigger('click'); });
		$('.copy').click(function(){ $('.buttons-copy').trigger('click'); });
		$('.excel').click(function(){ $('.buttons-excel').trigger('click'); });
		$('.pdf').click(function(){ $('.buttons-pdf').trigger('click'); });

		// Simple CSV export function
		function exportTableToCSV(filename) {
			const table = document.getElementById('audioTable');
			let csv = [];
			const rows = table.querySelectorAll('tr');
			
			for (let i = 0; i < rows.length; i++) {
				const row = [], cols = rows[i].querySelectorAll('td, th');
				
				for (let j = 1; j < cols.length - 1; j++) { // Skip checkbox and action columns
					let text = cols[j].innerText.replace(/"/g, '""');
					row.push('"' + text + '"');
				}
				
				csv.push(row.join(','));
			}
			
			const csvFile = new Blob([csv.join('\n')], { type: 'text/csv' });
			const downloadLink = document.createElement('a');
			downloadLink.download = filename;
			downloadLink.href = window.URL.createObjectURL(csvFile);
			downloadLink.style.display = 'none';
			document.body.appendChild(downloadLink);
			downloadLink.click();
			document.body.removeChild(downloadLink);
		}

		// Copy table to clipboard
		function copyTableToClipboard() {
			const table = document.getElementById('audioTable');
			const range = document.createRange();
			range.selectNode(table);
			window.getSelection().removeAllRanges();
			window.getSelection().addRange(range);
			document.execCommand('copy');
			window.getSelection().removeAllRanges();
			
			Swal.fire({
				icon: 'success',
				title: 'Copied!',
				text: 'Table copied to clipboard',
				showConfirmButton: false,
				timer: 1500
			});
		}
	</script>
@endsection