@extends('theme::user.layouts.app')

@section('style')
<style>
	.pagination-link {
		padding: 35px;
		padding-top: 0px;
	}
	.pagination-link .flex.justify-between.flex-1.sm\:hidden {
		justify-content: unset !important;
	}
	.pagination-link p.text-sm.text-gray-700.leading-5 {
		margin-right: 20px;
	}
	img.doc-file-img {
		width: 100%;
	}
</style>
@endsection

@section('content')

<div class="document-library-page">
	<div class="title-wrapper">
		<form action="{{ Request::url() }}" method="GET" class="theme-form search-wrapper mb-2">
			<span class="search-title">Document/Record search</span>
			<div class="search-input-wrapper">
				<a class="filter-modal" href="#" data-bs-toggle="modal" data-bs-target="#searchFilterModal">
					<img src="{{ asset('themes/tailwind/images/filter-icon.png') }}">
				</a>
				<input type="text" name="s" value="{{ $search }}" class="form-control" required>
			</div>
			<button type="submit" class="btn blue-btn">Search</button>
		</form>
		<div class="title-actions-wrapper">
			<a href="{{ route('wave.user.book-keeping.list') }}" class="btn yellow-btn mb-2">Back to list</a>
		</div>
	</div>
	<div class="card-wrapper">
		<div class="table-responsive mb-5">
			<table class="table custom-table">
				<thead>
					<tr>
						<th scope="col">
							<div class="d-flex align-items-center">
								<div class="custom-radio-checkbox">
									<input type="checkbox" id="checkAll" value="all">
									<label for="checkAll"></label>
								</div>
								Document Name
							</div>
						</th>
						<th scope="col">Document Category</th>
						<th scope="col">Document Size</th>
						<th scope="col">Date Uploaded</th>
						<th scope="col">Action</th>
					</tr>
				</thead>
				<tbody>
					@foreach($documents as $doc)
						<tr>
							<td>
								<div class="d-flex align-items-center">
									<div class="custom-radio-checkbox">
										<input type="checkbox" class="download-checkbox" id="row-{{ $doc->id }}" value="{{ $doc->id }}">
										<label for="row-{{ $doc->id }}"></label>
									</div>
									<img class="img-fluid mr-2" width="30" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
									{{ $doc->file_name }}
								</div>
							</td>
							<td>{{ $doc->category->name }}</td>
							<td><span class="green-text">{{ $doc->file_size }}</span></td>
							<td>{{ $doc->created_at }}</td>
							<td>
								<div class="table-actions">
									<a href="#" class="action-btn text-underline sky-blue-text" data-bs-toggle="modal" data-bs-target="#pdfViewModal-{{ $doc->id }}" >View</a>
									<span class="action-separator">|</span>
									<a href="{{ $doc->url }}" id="download-doc-{{ $doc->id }}" class="action-btn text-underline sky-blue-text" target="_blank" >Download</a>
								</div>
								<div class="modal fade doc-file-img-modal" id="pdfViewModal-{{ $doc->id }}" tabindex="-1" role="dialog" aria-labelledby="pdfViewModal-{{ $doc->id }}Label" aria-hidden="true">
									<div class="modal-dialog modal-lg" role="document">
										<div class="modal-content">
										<div class="modal-body">
											<img class="doc-file-img" src="{{ $doc->url }}" style="margin: 0 auto;" alt="">
										</div>
										</div>
									</div>
								</div>
							</td>
						</tr>
					@endforeach
				</tbody>
			</table>
		</div>
		<button type="button" class="btn blue-btn mx-auto mb-5" id="download-all-file" >Download</button>
		<div class="pagination-link" >{{ $documents->links() }}</div>
	</div>
</div>
{{-- Add Search Filter Modal --}}
<div class="modal fade custom-modal style2" id="searchFilterModal" tabindex="-1" aria-labelledby="searchFilterModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-740px modal-dialog-centered">
		<div class="modal-content mx-auto">
			<div class="modal-body p-0">
				<p class="modal-title">Search</p>

				<form action="{{ url('/user/book-keeping/document-library') }}" method="get" class="theme-form">
					<div class="row mb-5 align-items-center">
						<div class="col-auto">
							<label class="col-form-label">Document category</label>
						</div>
						<div class="col">
							<select class="w-100" name="category_id" >
								<option value="all" selected >Any</option>
								@foreach($document_category as $category)
									<option value="{{ $category->id }}">{{ $category->name }}</option>
								@endforeach
							</select>
						</div>
					</div>
					<div class="row mb-5 align-items-center">
						<div class="col-auto">
							<label class="col-form-label">Status</label>
						</div>
						<div class="col">
							<select class="w-100" name="status" >
								<option value="all" selected>All</option>
								<option value="completed" >ORC Completed</option>
							</select>
						</div>
					</div>
					<div class="row mb-5 align-items-center">
						<div class="col-auto">
							<label class="col-form-label">Keyword</label>
						</div>
						<div class="col">
							<input type="text" class="form-control" name="s" value="">
						</div>
					</div>
					<div class="mb-5">
						<div class="row align-items-center">
							<div class="col-auto">
								<label class="col-form-label">Date uploaded</label>
							</div>
							<div class="col">
								<select class="w-100" name="fix_date" id="dateFilter">
									<option value="all" selected >Any Time</option>
									<option value="today">Today</option>
									<option value="2">Yesterday</option>
									<option value="7">Last 7 days</option>
									<option value="30">Last 30 days</option>
									<option value="90">Last 90 days</option>
									<option value="custom">Custom...</option>
								</select>
							</div>
						</div>
						<div class="row mt-3" id="customDateFields" style="display: none;">
							<div class="col-md-12">
								<label class="col-form-label">Between</label>
							</div>
							<div class="col-md-12">
								<div class="row align-items-center">
									<div class="col date-picker-wrapper">
										<img src="{{ asset('themes/tailwind/images/calendar-2.png') }}">
										<input type="date" class="form-control" name="data_from" placeholder="After">
									</div>
									<div class="col date-picker-wrapper">
										<img src="{{ asset('themes/tailwind/images/calendar-2.png') }}">
										<input type="date" class="form-control" name="date_to" placeholder="Before">
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="d-flex align-items-center justify-content-center">
						<button type="submit" class="btn blue-btn mx-3">Search</button>
						<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">Cancel</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

@endsection

@section('script')
    <script>
        $(function() {
            $('#searchFilterModal #dateFilter').change(function() {
				if ($(this).val() == 'custom') {
					$('#searchFilterModal #customDateFields').show();
				}
				else {
					$('#searchFilterModal #customDateFields').hide();
				}
            });

			$('#checkAll').click(function(){
				$('.download-checkbox').prop('checked', $(this).prop('checked'));
			});

			$('#download-all-file').click(function(){
				console.log('testtest');
				$('.download-checkbox').each(function(){
					if ($(this).prop('checked')) {
						console.log('#download-doc-' + $(this).val());
						$('#download-doc-' + $(this).val())[0].click();
					}
				});
			});
        });
    </script>
@endsection