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

@section('style')
<style>
	img.doc-file-img {
		width: 100%;
	}
</style>
@endsection

@section('content')

<div class="bk-list-page">
	<div class="title-wrapper">
		<h2 class="page-title">Bookkeeping Service</h2>
		<div class="title-actions-wrapper">
			<button type="button" class="btn yellow-btn mr-4" data-bs-toggle="modal" data-bs-target="#newDocumentModal">New Queue</button>
			<a href="{{ route('wave.user.book-keeping.document-library') }}" class="btn blue-btn">Document Library</a>
		</div>
	</div>
	<div class="custom-nav-tabs">
		<ul class="nav nav-tabs nav-justified">
			<li class="nav-item">
				<a class="nav-link active" data-bs-toggle="tab" href="#queueList">
					<img src="{{ asset('themes/tailwind/images/queue-list-icon.png') }}">
					In Queue List
					<span class="tab-count">{{ $documents_list->count() }}</span>
				</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" data-bs-toggle="tab" href="#completedList">
					<img src="{{ asset('themes/tailwind/images/tick-circle-2.png') }}">
					Completed List
					<span class="tab-count">{{ $documents_complete->count() }}</span>
				</a>
			</li>
		</ul>
		
		<!-- Tab panes -->
		<div class="tab-content">
			<div class="tab-pane active" id="queueList">
				<div class="table-responsive">
					<table class="table custom-table">
						<thead>
							<tr>
								<th scope="col">Document Name</th>
								<th scope="col">Document Category</th>
								<th scope="col">Status</th>
								<th scope="col">Last Status Timestamp</th>
								<th scope="col">Action</th>
							</tr>
						</thead>
						<tbody>
							@foreach($documents_list as $doc)
							<tr>
								<td>
									<div class="d-flex align-items-center">
										@php
                							$ext = pathinfo($doc->file_name, PATHINFO_EXTENSION);
										@endphp
										@if ($ext == 'pdf')
											<img class="img-fluid mr-2" width="30" src="{{ asset('themes/tailwind/images/pdf.svg') }}">
										@else
											<img class="img-fluid mr-2" width="30" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
										@endif
										{{ $doc->file_name }}
									</div>
								</td>
								<td>{{ $doc->category->name }}</td>
								<td>{{ $doc->status }}</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="#" class="action-btn text-underline sky-blue-text" data-bs-toggle="modal" data-bs-target="#documentPropertiesModal-{{ $doc->id }}">Properties</a>
									</div>
									<div class="modal fade" 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 src="{{ $doc->file_url }}" class="doc-file-img" style="margin: 0 auto;" alt="">
											</div>
											</div>
										</div>
									</div>
									{{-- Add Document Properties Modal --}}
									<div class="modal fade custom-modal style2" id="documentPropertiesModal-{{ $doc->id }}" tabindex="-1" aria-labelledby="documentPropertiesModal-{{ $doc->id }}Label" 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">Properties</p>

													<form action="#" class="theme-form">
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Document name :</label>
															</div>
															<div class="col">
																<label class="col-form-label">{{ $doc->name }}.{{ $ext }}</label>
															</div>
														</div>
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Original name :</label>
															</div>
															<div class="col">
																<label class="col-form-label">{{ $doc->file_name }}</label>
															</div>
														</div>
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Document ID :</label>
															</div>
															<div class="col">
																<label class="col-form-label">--</label>
															</div>
														</div>
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Document type :</label>
															</div>
															<div class="col">
																<label class="col-form-label">Bookkeeping</label>
															</div>
														</div>
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Document category :</label>
															</div>
															<div class="col">
																<label class="col-form-label">{{ $doc->category->name }}</label>
															</div>
														</div>
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Xero Amount :</label>
															</div>
															<div class="col">
																<label class="col-form-label">$00</label>
															</div>
														</div>
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Status :</label>
															</div>
															<div class="col">
																<label class="col-form-label">{{ $doc->status }}</label>
															</div>
														</div>
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Last status timestamp :</label>
															</div>
															<div class="col">
																<label class="col-form-label">{{ $doc->updated_at }}</label>
															</div>
														</div>

														<hr class="form-separator mb-4">
														
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Company name :</label>
															</div>
															<div class="col">
																<label class="col-form-label">{{ $doc->company->name }}</label>
															</div>
														</div>
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Company ID :</label>
															</div>
															<div class="col">
																<label class="col-form-label">{{ $doc->company->id }}</label>
															</div>
														</div>
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Uploaded on :</label>
															</div>
															<div class="col">
																<label class="col-form-label">{{ $doc->created_at }}</label>
															</div>
														</div>
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Uploaded by :</label>
															</div>
															<div class="col">
																<label class="col-form-label">{{ $doc->user->name }}</label>
															</div>
														</div>

														<div class="d-flex align-items-center justify-content-center">
															<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">Back</button>
														</div>
													</form>
												</div>
											</div>
										</div>
									</div>
								</td>
							</tr>
							@endforeach
						</tbody>
					</table>
				</div>
				<div class="empty-state-wrapper {{ $documents_list->count() == 0 ? '' : 'd-none' }}">
					<img class="img-fluid mx-auto" src="{{ asset('themes/tailwind/images/empty-state-img.svg') }}">
					<span class="empty-text d-block text-center w-100">It’s empty here...</span>
				</div>
			</div>
			<div class="tab-pane fade" id="completedList">
				<div class="table-responsive">
					<table class="table custom-table">
						<thead>
							<tr>
								<th scope="col">Document Name</th>
								<th scope="col">Document Category</th>
								<th scope="col">Status</th>
								<th scope="col">Xero Status</th>
								<th scope="col">Xero Amount</th>
								<th scope="col">Last Status Timestamp</th>
								<th scope="col">Action</th>
							</tr>
						</thead>
						<tbody>
							@foreach($documents_complete as $doc)
							<tr>
								<td>
									<div class="d-flex align-items-center">
										@php
                							$ext = pathinfo($doc->file_name, PATHINFO_EXTENSION);
										@endphp
										@if ($ext == 'pdf')
											<img class="img-fluid mr-2" width="30" src="{{ asset('themes/tailwind/images/pdf.svg') }}">
										@else
											<img class="img-fluid mr-2" width="30" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
										@endif
										{{ $doc->file_name }}
									</div>
								</td>
								<td>{{ $doc->category->name }}</td>
								<td>{{ $doc->status }}</td>
								<td>{{ $doc->xero_status }}</td>
								<td>{{ $doc->xero_amount }}</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="#" class="action-btn text-underline sky-blue-text" data-bs-toggle="modal" data-bs-target="#documentPropertiesModal-com-{{ $doc->id }}">Properties</a>
										<span class="action-separator">|</span>
										<a href="#" class="action-btn text-underline sky-blue-text" data-bs-toggle="modal" data-bs-target="#userDetailsModal">Download</a>
									</div>
									<div class="modal fade" 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->file_url }}" style="margin: 0 auto;" alt="">
											</div>
											</div>
										</div>
									</div>
									{{-- Add Document Properties Modal --}}
									<div class="modal fade custom-modal style2" id="documentPropertiesModal-com-{{ $doc->id }}" tabindex="-1" aria-labelledby="documentPropertiesModal-com-{{ $doc->id }}Label" 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">Properties</p>

													<form action="#" class="theme-form">
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Document name :</label>
															</div>
															<div class="col">
																<label class="col-form-label">{{ $doc->name }}.{{ $ext }}</label>
															</div>
														</div>
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Original name :</label>
															</div>
															<div class="col">
																<label class="col-form-label">{{ $doc->file_name }}</label>
															</div>
														</div>
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Document ID :</label>
															</div>
															<div class="col">
																<label class="col-form-label">--</label>
															</div>
														</div>
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Document type :</label>
															</div>
															<div class="col">
																<label class="col-form-label">Bookkeeping</label>
															</div>
														</div>
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Document category :</label>
															</div>
															<div class="col">
																<label class="col-form-label">{{ $doc->category->name }}</label>
															</div>
														</div>
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Xero Amount :</label>
															</div>
															<div class="col">
																<label class="col-form-label">$00</label>
															</div>
														</div>
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Status :</label>
															</div>
															<div class="col">
																<label class="col-form-label">{{ $doc->status }}</label>
															</div>
														</div>
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Last status timestamp :</label>
															</div>
															<div class="col">
																<label class="col-form-label">{{ $doc->updated_at }}</label>
															</div>
														</div>

														<hr class="form-separator mb-4">
														
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Company name :</label>
															</div>
															<div class="col">
																<label class="col-form-label">{{ $doc->company->name }}</label>
															</div>
														</div>
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Company ID :</label>
															</div>
															<div class="col">
																<label class="col-form-label">{{ $doc->company->id }}</label>
															</div>
														</div>
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Uploaded on :</label>
															</div>
															<div class="col">
																<label class="col-form-label">{{ $doc->created_at }}</label>
															</div>
														</div>
														<div class="row mb-4 align-items-center">
															<div class="col-auto">
																<label class="col-form-label">Uploaded by :</label>
															</div>
															<div class="col">
																<label class="col-form-label">{{ $doc->user->name }}</label>
															</div>
														</div>

														<div class="d-flex align-items-center justify-content-center">
															<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">Back</button>
														</div>
													</form>
												</div>
											</div>
										</div>
									</div>
								</td>
							</tr>
							@endforeach
						</tbody>
					</table>
				</div>
				<div class="empty-state-wrapper {{ $documents_complete->count() == 0 ? '' : 'd-none' }}">
					<img class="img-fluid mx-auto" src="{{ asset('themes/tailwind/images/empty-state-img.svg') }}">
					<span class="empty-text d-block text-center w-100">It’s empty here...</span>
				</div>
			</div>
		</div>
	</div>
</div>

{{-- Add Upload Document Modal --}}
<div class="modal fade custom-modal style2" id="newDocumentModal" tabindex="-1" aria-labelledby="newDocumentModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-xl modal-dialog-centered">
		<div class="modal-content mx-auto">
			<div class="modal-body p-0">
				<p class="modal-title">Upload Document</p>

				<form action="{{ route('wave.user.book-keeping.add.document') }}" id="add-document-form" class="theme-form">
					<div class="mb-4 file-upload-wrapper">
						<img class="img-fluid mx-auto" width="107" src="{{ asset('themes/tailwind/images/file-upload-icon.png') }}">
						<span class="file-upload-desc empty-state">
							Drag and drop files here or choose file.
							<br>
							Accepted file types: Doc / PDF / JPG / PNG
						</span>
						<span class="file-upload-desc with-value" style="display: none;"></span>
						<input type="file" name="document" accept="application/msword, image/*" required >
						<button type="button" class="btn yellow-btn file-upload-btn mx-auto">Choose File</button>
					</div>
					<div class="row mb-4 align-items-center">
						<div class="col-auto">
							<label class="col-form-label">Document name</label>
						</div>
						<div class="col">
							<input type="text" name="name" class="form-control" value="" required >
						</div>
					</div>
					<div class="row mb-4">
						<div class="col-auto">
							<label class="col-form-label">Document description</label>
						</div>
						<div class="col">
							<textarea class="form-control" name="description" required ></textarea>
						</div>
					</div>
					<div class="row mb-4 align-items-center">
						<div class="col-auto">
							<label class="col-form-label">Document category</label>
						</div>
						<div class="col">
							<select class="w-100" name="bookkeeping_document_category_id" required >
								@foreach($document_category as $category)
									<option value="{{ $category->id }}" >{{ $category->name }}</option>
								@endforeach
							</select>
						</div>
					</div>

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

<div class="modal fade validation-modal style2" id="invalidFormatModal" tabindex="-1" aria-labelledby="validationModal1Label" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content mx-auto">
			<div class="modal-body p-0">
				<p class="text-center error-message">{{ __("Unable to Preview file format") }}</p>
				<button type="button" class="btn br-0" data-bs-dismiss="modal">{{ __("Back") }}</button>
			</div>
		</div>
	</div>
</div>
@endsection

@section('script')
    <script>
        $(function() {
			$.ajaxSetup({
				headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				}
			});

            $('.password-hide-show').click(function() {
                var type = $(this).parent().find('input').attr('type');

                if (type == 'password') {
                    $(this).parent().find('input').attr('type', 'text');
                }
                else {
                    $(this).parent().find('input').attr('type', 'password');
                }
            });

			$(document).on('click', '.pdf-prev-btn', function(){
				$('#pdfViewModal').modal('show');
			});
			$(document).on('click', '.undefined-format-btn', function(){
				$('#invalidFormatModal').modal('show');
			});

			$(document).on('submit', '#add-document-form', function(e){
				e.preventDefault();
				var url = $(this).attr('action');
				var form_data = new FormData($(this)[0]);

				$.ajax({
					url:url,
					type: 'post',
					data:form_data,
					dataType:'json',
					processData: false,
					contentType: false,
					success:function(data){
						location.reload();
					}
				});
			});
        });
    </script>
@endsection
