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


@section('content')

	@php 
	if(!isset($_GET['p'])){
		$page = 'detail';
	}else{
		$page = $_GET['p'];
	}
	@endphp

	@if($page == 'document')
		<div class="dashboard-title-flex">
			<h2 class="dashboard-title">Document Library</h2>
			<div class="dashboard-button-title">
				<a href="{{ route('cms.company-secretary') }}" class="btn btn-error">Back</a>
			</div>
		</div>

		<div class="search-bar flex">
			<span class="search-bar__label">Document/Record search</span>
			<div class="search-bar__field">
				<button type="button"><img src="{{ asset('themes/tailwind/images/setting-4.svg') }}"></button>
				<input type="text">
			</div>
			<button type="submit" class="btn primary-button search-bar__button">Search</button>
		</div>

		<div class="paddingx-20">
		<table id="document-table__enqueue" class="">
			<thead>
				<tr>
					<td><input type="checkbox"></td>
					<td>Document Name</td>
					<td>Company</td>
					<td>Document Category</td>
					<td>Upload User</td>
					<td>Document Size</td>
					<td>Date Uploaded</td>
					<td>Action</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox"></td>
					<td>
						<div class="flex justify-start">
							<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
							<span class="fix-text">DCE Ltd.CI</span>
						</div>
					</td>
					<td>DCE Consultant Ltd.</td>
					<td>CI</td>
					<td>Mary Chan</td>
					<td><span class="">234KB</span></td>
					<td>20230515-14:43</td>
					<td><a href="#" class="primary-text">View</a> <span class="long-pipe">|</span> <a href="#" class="primary-text">Properties</a> <span class="long-pipe">|</span> <a href="#" class="primary-text">Download</a></td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>
						<div class="flex justify-start">
							<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
							<span class="fix-text">DCE Ltd.CI</span>
						</div>
					</td>
					<td>DCE Consultant Ltd.</td>
					<td>CI</td>
					<td>Mary Chan</td>
					<td><span class="">234KB</span></td>
					<td>20230515-14:43</td>
					<td><a href="#" class="primary-text">View</a> <span class="long-pipe">|</span> <a href="#" class="primary-text">Properties</a> <span class="long-pipe">|</span> <a href="#" class="primary-text">Download</a></td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>
						<div class="flex justify-start">
							<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
							<span class="fix-text">DCE Ltd.CI</span>
						</div>
					</td>
					<td>DCE Consultant Ltd.</td>
					<td>CI</td>
					<td>Mary Chan</td>
					<td><span class="">234KB</span></td>
					<td>20230515-14:43</td>
					<td><a href="#" class="primary-text">View</a> <span class="long-pipe">|</span> <a href="#" class="primary-text">Properties</a> <span class="long-pipe">|</span> <a href="#" class="primary-text">Download</a></td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>
						<div class="flex justify-start">
							<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
							<span class="fix-text">DCE Ltd.CI</span>
						</div>
					</td>
					<td>DCE Consultant Ltd.</td>
					<td>CI</td>
					<td>Mary Chan</td>
					<td><span class="">234KB</span></td>
					<td>20230515-14:43</td>
					<td><a href="#" class="primary-text">View</a> <span class="long-pipe">|</span> <a href="#" class="primary-text">Properties</a> <span class="long-pipe">|</span> <a href="#" class="primary-text">Download</a></td>
				</tr>
			</tbody>
		</table>
		</div>

	@elseif($page == 'category')
		<div class="dashboard-title-flex">
			<h2 class="dashboard-title">Document Library</h2>
			<div class="dashboard-button-title">
				<a href="{{ route('cms.company-secretary') }}" class="btn primary-button">New Category</a>
				<a href="{{ route('cms.company-secretary') }}" class="btn btn-error">Back</a>
			</div>
		</div>

		<div class="">
		<table id="company-category" class="">
				<thead>
					<tr>
						<td>Category Name</td>
						<td>Status</td>
						<td>Action</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>CI</td>
						<td><span class="">Active</span></td>
						<td><a href="#" class="primary-text">View</a> <span class="long-pipe">|</span> <a href="#" class="primary-text">Edit</a> <span class="long-pipe">|</span> <a href="#" class="error-text">Archive</a></td>
					</tr>
					<tr>
						<td>CI</td>
						<td><span class="">Active</span></td>
						<td><a href="#" class="primary-text">View</a> <span class="long-pipe">|</span> <a href="#" class="primary-text">Edit</a> <span class="long-pipe">|</span> <a href="#" class="error-text">Archive</a></td>
					</tr>
					<tr>
						<td>CI</td>
						<td><span class="">Active</span></td>
						<td><a href="#" class="primary-text">View</a> <span class="long-pipe">|</span> <a href="#" class="primary-text">Edit</a> <span class="long-pipe">|</span> <a href="#" class="error-text">Archive</a></td>
					</tr>
					<tr>
						<td>CI</td>
						<td><span class="">Active</span></td>
						<td><a href="#" class="primary-text">View</a> <span class="long-pipe">|</span> <a href="#" class="primary-text">Edit</a> <span class="long-pipe">|</span> <a href="#" class="error-text">Archive</a></td>
					</tr>
					<tr>
						<td>CI</td>
						<td><span class="">Active</span></td>
						<td><a href="#" class="primary-text">View</a> <span class="long-pipe">|</span> <a href="#" class="primary-text">Edit</a> <span class="long-pipe">|</span> <a href="#" class="error-text">Archive</a></td>
					</tr>
				</tbody>
			</table>
		</div>
	@else

	<div class="dashboard-title-flex nowrap">
		<h2 class="dashboard-title">Company Secretary service</h2>
		<div class="dashboard-button-title">
			<a href="?p=document" class="btn primary-button">Document Library</a>
			<a href="?p=log" class="btn primary-button">ComSec Action Log</a>
			<a href="?p=category" class="btn primary-button">Category List</a>
		</div>
	</div>


	<div class="tabs-navigation blue-tabs">
		<ul>
			<li class="active"><a href="#" class="js-tab-navigate" data-id="#in-queue"><img class="dashboard-detail-image" src="{{ asset('themes/tailwind/images/tick-timer.svg') }}"> In Queue List <span class="tab-number">3</span></a></li>
			<li><a href="#" class="js-tab-navigate" data-id="#completed"><img class="dashboard-detail-image" src="{{ asset('themes/tailwind/images/tick-circle.svg') }}"> Completed List <span class="tab-number">3</span></a></li>
		</ul>
	</div>

	<div class="tabs-content">
		<div class="tabs-content-item white-bg no-padd" id="in-queue">
			<div class="sidebyside paddingy-10 paddingx-10">
				<span class="blue-text">Number of file in process: 5</span>
				<span class="blue-text">Total item(s) in Queue: 7</span>
			</div>
			<table id="document-table__enqueue" class="">
				<thead>
					<tr>
						<td>Original Name</td>
						<td>Company</td>
						<td>Service</td>
						<td>Category</td>
						<td>Vendor</td>
						<td>Batch Name</td>
						<td>Remark</td>
						<td>Upload date&time</td>
						<td>Status</td>
						<td>Action</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<div class="flex justify-start">
								<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
								<span class="fix-text">DCE Ltd.CI</span>
							</div>
						</td>
						<td>DCE Consultant Ltd.</td>
						<td>Incorporation of Hong...</td>
						<td>CI</td>
						<td><span class="grey-text">processing...</span></td>
						<td>ABC Copy of DCE Ltd.CI</td>
						<td>DCE Ltd.CI</td>
						<td>20230515-14:43</td>
						<td>
							<select>
								<option>Submitted</option>
								<option>Submitted</option>
								<option>Submitted</option>
							</select>
						</td>
						<td>
							<div class="dropdown non-custom">
								<button type="button" data-bs-toggle="dropdown" aria-expanded="false"><img class="max-25" src="{{ asset('themes/tailwind/images/more.svg') }}"></button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#">Cancel Request</a>
									<a class="dropdown-item" href="#">Message on file</a>
									<a class="dropdown-item" href="#">Stop processing</a>
								</div>
							</div>
						</td>
					</tr>
					<tr class="failed">
						<td>
							<div class="flex justify-start">
								<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
								<span class="fix-text">DCE Ltd.CI</span>
							</div>
						</td>
						<td>DCE Consultant Ltd.</td>
						<td>Incorporation of Hong...</td>
						<td>CI</td>
						<td><span class="grey-text">processing...</span></td>
						<td>ABC Copy of DCE Ltd.CI</td>
						<td>DCE Ltd.CI</td>
						<td>20230515-14:43</td>
						<td>
							<select>
								<option>Submitted</option>
								<option>Submitted</option>
								<option>Submitted</option>
							</select>
							<button type="button" class="failed item-list-note flex btn-link reupload-button"><img class="max-25" src="{{ asset('themes/tailwind/images/flag-2.svg') }}"> Reupload</button>
						</td>
						<td>
							<div class="dropdown non-custom">
								<button type="button" data-bs-toggle="dropdown" aria-expanded="false"><img class="max-25" src="{{ asset('themes/tailwind/images/more.svg') }}"></button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#">Cancel Request</a>
									<a class="dropdown-item" href="#">Message on file</a>
									<a class="dropdown-item" href="#">Stop processing</a>
								</div>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="flex justify-start">
								<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
								<span class="fix-text">DCE Ltd.CI</span>
							</div>
						</td>
						<td>DCE Consultant Ltd.</td>
						<td>Incorporation of Hong...</td>
						<td>CI</td>
						<td><span class="grey-text">processing...</span></td>
						<td>ABC Copy of DCE Ltd.CI</td>
						<td>DCE Ltd.CI</td>
						<td>20230515-14:43</td>
						<td>
							<select>
								<option>Submitted</option>
								<option>Submitted</option>
								<option>Submitted</option>
							</select>
						</td>
						<td>
							<div class="dropdown non-custom">
								<button type="button" data-bs-toggle="dropdown" aria-expanded="false"><img class="max-25" src="{{ asset('themes/tailwind/images/more.svg') }}"></button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#">Cancel Request</a>
									<a class="dropdown-item" href="#">Message on file</a>
									<a class="dropdown-item" href="#">Stop processing</a>
								</div>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="flex justify-start">
								<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
								<span class="fix-text">DCE Ltd.CI</span>
							</div>
						</td>
						<td>DCE Consultant Ltd.</td>
						<td>Incorporation of Hong...</td>
						<td>CI</td>
						<td><span class="grey-text">processing...</span></td>
						<td>ABC Copy of DCE Ltd.CI</td>
						<td>DCE Ltd.CI</td>
						<td>20230515-14:43</td>
						<td>
							<select>
								<option>Submitted</option>
								<option>Submitted</option>
								<option>Submitted</option>
							</select>
						</td>
						<td>
							<div class="dropdown non-custom">
								<button type="button" data-bs-toggle="dropdown" aria-expanded="false"><img class="max-25" src="{{ asset('themes/tailwind/images/more.svg') }}"></button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#">Cancel Request</a>
									<a class="dropdown-item" href="#">Message on file</a>
									<a class="dropdown-item" href="#">Stop processing</a>
								</div>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="tabs-content-item white-bg no-padd" id="completed" style="display: none;">
			<table id="document-table__completed" class="">
				<thead>
					<tr>
						<td>Original Name</td>
						<td>Company</td>
						<td>Service</td>
						<td>Category</td>
						<td>Vendor</td>
						<td>Batch Name</td>
						<td>Remark</td>
						<td>Upload date&time</td>
						<td>Status</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<div class="flex justify-start">
								<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
								<span class="fix-text">DCE Ltd.CI</span>
							</div>
						</td>
						<td>DCE Consultant Ltd.</td>
						<td>Incorporation of Hong...</td>
						<td>CI</td>
						<td><span class="grey-text">Failed</span></td>
						<td>ABC Copy of DCE Ltd.CI</td>
						<td>DCE Ltd.CI</td>
						<td>20230515-14:43</td>
						<td>
							<select>
								<option>Submitted</option>
								<option>Submitted</option>
								<option>Submitted</option>
							</select>
							<button href="" class="failed item-list-note flex btn-link reupload-button">
						</td>
					</tr>
					<tr>
						<td>
							<div class="flex justify-start">
								<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
								<span class="fix-text">DCE Ltd.CI</span>
							</div>
						</td>
						<td>DCE Consultant Ltd.</td>
						<td>Incorporation of Hong...</td>
						<td>CI</td>
						<td>DCE Consultant Ltd</td>
						<td>ABC Copy of DCE Ltd.CI</td>
						<td>DCE Ltd.CI</td>
						<td>20230515-14:43</td>
						<td>
							<select>
								<option>Submitted</option>
								<option>Submitted</option>
								<option>Submitted</option>
							</select>
							<button href="" class="failed item-list-note flex btn-link reupload-button">
						</td>
					</tr>
					<tr>
						<td>
							<div class="flex justify-start">
								<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
								<span class="fix-text">DCE Ltd.CI</span>
							</div>
						</td>
						<td>DCE Consultant Ltd.</td>
						<td>Incorporation of Hong...</td>
						<td>CI</td>
						<td>DCE Consultant Ltd</td>
						<td>ABC Copy of DCE Ltd.CI</td>
						<td>DCE Ltd.CI</td>
						<td>20230515-14:43</td>
						<td>
							<select>
								<option>Submitted</option>
								<option>Submitted</option>
								<option>Submitted</option>
							</select>
							<button href="" class="failed item-list-note flex btn-link reupload-button">
						</td>
					</tr>
					<tr>
						<td>
							<div class="flex justify-start">
								<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
								<span class="fix-text">DCE Ltd.CI</span>
							</div>
						</td>
						<td>DCE Consultant Ltd.</td>
						<td>Incorporation of Hong...</td>
						<td>CI</td>
						<td>DCE Consultant Ltd</td>
						<td>ABC Copy of DCE Ltd.CI</td>
						<td>DCE Ltd.CI</td>
						<td>20230515-14:43</td>
						<td>
							<select>
								<option>Submitted</option>
								<option>Submitted</option>
								<option>Submitted</option>
							</select>
							<button href="" class="failed item-list-note flex btn-link reupload-button">
						</td>
					</tr>

				</tbody>
			</table>
		</div>
	</div>
	@endif
	

@endsection

@section('script')

<script>
	$(document).ready( function () {
	    $('#document-table__enqueue, #document-table__completed, #document-table, #comsec-table__enqueue, #comsec-table__completed').DataTable({
		    "language": {
			      "paginate": {
			        "next": ">",         // Text for the "Next" page button
			        "previous": "<"  // Text for the "Previous" page button
			      },
			      // Add more text customizations if needed
			    },
			   columnDefs: [
		          { targets: [0,1,2,3,4,5,6], orderable: false } // Change the index [1] if needed
		        ]
		  });

	    $("#subscription-table").DataTable({
		    "language": {
			      "paginate": {
			        "next": ">",         // Text for the "Next" page button
			        "previous": "<"  // Text for the "Previous" page button
			      },
			      // Add more text customizations if needed
			    },
			   columnDefs: [
		          { targets: [0,1,2,3,4,5], orderable: false } // Change the index [1] if needed
		        ]
		  });

	    $("#access-level-table, #log-table").DataTable({
		    "language": {
			      "paginate": {
			        "next": ">",         // Text for the "Next" page button
			        "previous": "<"  // Text for the "Previous" page button
			      },
			      // Add more text customizations if needed
			    },
			   columnDefs: [
		          { targets: [0,1,2,3,4], orderable: false } // Change the index [1] if needed
		        ]
		  });

	    $("#company-category").DataTable({
		    "language": {
			      "paginate": {
			        "next": ">",         // Text for the "Next" page button
			        "previous": "<"  // Text for the "Previous" page button
			      },
			      // Add more text customizations if needed
			    },
			   columnDefs: [
		          { targets: [0,1,2], orderable: false } // Change the index [1] if needed
		        ]
		  });

	    

	    $(".js-side-nav").click(function(e){
	    	e.preventDefault();
	    	var id = jQuery(this).data('id');
	    	jQuery(this).closest('.side-nav-tabs').next().find('.js-content-tab').hide();
	    	jQuery(id).show();
	    	jQuery(this).closest('.side-nav-tabs').find('li').removeClass('active');
	    	jQuery(this).parent().addClass('active');
	    });

	    $(".js-tab-navigate").click(function(e){
	    	e.preventDefault();
	    	var id = jQuery(this).data('id');
	    	jQuery(this).closest('.tabs-navigation').next().find('.tabs-content-item').hide();
	    	jQuery(id).show();
	    	jQuery(this).closest('.tabs-navigation').find('li').removeClass('active');
	    	jQuery(this).parent().addClass('active');
	    });
	} );
</script>

@endsection