@extends('layouts.app')

@section('content')
	<style>
		div.tab
		{
			overflow: hidden;
			border: 1px solid #ccc;
			background-color: #34548a;
		}

		/* Style the buttons inside the tab */
		.tablinks
		{
			background-color: inherit;
			float: left;
			border: none;
			outline: none;
			cursor: pointer;
			padding: 14px 16px;
			transition: 0.3s;
			border-radius: 0;
			text-transform: uppercase;
		}

		/* Change background color of buttons on hover */
		div.tab button:hover
		{
			background-color: whitesmoke;
			color: #34548a;
		}

		/* Create an active/current tablink class */
		div.tab button.active
		{
			background-color: whitesmoke;
			color: #34548a;
		}

		/* Style the tab content */
		.tabcontent
		{
			display: none;
			padding: 6px 12px;
			border: 1px solid #ccc;
			border-top: none;
		}

		.title
		{
			color: gray;
			font-size: 18px;
			text-align: right;
		}

		button
		{
			text-transform: uppercase;
			padding-left: 3rem;
    		padding-right: 3rem;
		}

		.text-danger
		{
			text-align: left!important;
		}

		#metaTable_filter input
		{
		 	border-radius: 35px!important;
		 	padding: 10px;
		 	outline:none;
		}

		.paginate_button
		{
			border: 2px solid #d7d7d7!important;
			color: #ebe7e7!important;
			font-weight: bold;
		}

		.paginate_button:hover
		{
			border: 2px solid #34548A!important;;
			background: #34548A!important;
    		border-color: #34548A!important;
    		color: #ebe7e7!important;
    		font-weight: bold!important;
		}

		.paginate_button.disabled:hover
		{
			color: #ebe7e7!important;
    		font-weight: bold!important;
		}

		.dataTables_paginate a.current
		{
    		color: #ebe7e7!important;
    		background: #34548A!important;
    		border-color: #34548A!important;
		}

		.daily-calling-status-table-container
		{
			padding-right: 5%;
			padding-left: 5%;
		}

		.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover
		{
    		color: #ebe7e7!important;
    		font-weight: bold!important;
		}

		.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active
		{
   	 		color: #ebe7e7!important;
		}

		.dataTables_info
		{
			color: #34548A!important;
			font-size: 16px;
			font-weight: bold;
		}

		.dataTables_wrapper .dataTables_paginate .paginate_button
		{
			color: #34548A!important;
		}

		table.dataTable
		{
			border: none!important;
		}

		table.dataTable thead
		{
			background-color:#34548A!important;
			border: 0!important;
			padding: 5px!important;
			color: #ebe7e7!important;
			padding-top: 10px;
			padding-bottom: 10px;
		}

		table.dataTable thead th
		{
    		border: none!important;
		}

		table.dataTable tbody td
		{
    		border: none!important;
		}

		table.dataTable tbody th, table.dataTable tbody td
		{
    		padding: 16px 6px;
		}
	</style>

	<div class="container">
		@error('error')
			<div
				class="alert alert-danger alert-dismissible fade show"
				role="alert"
			>
				<strong>{{ $message }}</strong>
				<span type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></span>
			</div>
		@enderror

		@if(Session::has('success'))
			<div class="alert alert-info">
				{{Session::get('success')}}
			</div>
		@endif
		<div class="tab">
			<button class="tablinks {{($errors->any()) ? 'inactive': 'active'}}" onclick="openTab(event, 'viewData')">
				App Releases
			</button>
			<button class="tablinks {{($errors->any()) ? 'active': 'inactive'}}" onclick="openTab(event, 'addrelease')">
				Add New Release
			</button>
		</div>

		<div id="viewData" class="tabcontent daily-calling-status-table-container">
			<table id="metaTable" class="stripe">
				<thead>
					<tr>
						<th>App Version</th>
						<th>Version Code</th>
						<th>Roll Back Version</th>
						<th>Roll Back Version Code</th>
						<th>Release Notes</th>
						<th>Status</th>
						<th>Release Date</th>
				</thead>
				<tbody class="maintenance-device-list-tbody">
					@foreach($data as $value)
						<tr>
							<td>{{$value['app_version']}}</td>
							<td>{{$value['version_code']}}</td>
							<td>{{$value['rollback_app_version']}}</td>
							<td>{{$value['rollback_version_code']}}</td>
							<td>{{$value['release_notes']}}</td>
							<td>{{($value['status']) ? 'Active': 'Inactive'}}</td>
							<td>{{date("d F Y H:i:s", strtotime($value['created_at']))}}</td>
						</tr>
					@endforeach
				</tbody>
			</table>
		</div>

		<div id="addrelease" class="tabcontent">
			<div class="row">
				<div class="col-md-3">
					
				</div>
				<div class="col-md-8">
					<form
						method="POST"
						enctype="multipart/form-data"
						action='/addnewrelease'
					>
						@csrf
						<div class="form-group row">
							<div class="col-md-3">
								<label class="title"><b>Release Notes</b></label>
							</div>
							<div class="col-md-6">
								<textarea name="release_notes" placeholder="Release Notes" class="form-control"></textarea>
								@error('release_notes')
									<span class="text-danger">
										<b>{{$message}}</b>
									</span>
								@enderror
							</div>
						</div>

						<div class="form-group row">
							<div class="col-md-3">
								<label class="title"><b>Release APK</b></label>
							</div>
							<div class="col-md-6">
								<input type="file" name="release_apk" class="form-control">
								@error('release_apk')
									<span class="text-danger">
										<b>{{$message}}</b>
									</span>
								@enderror
							</div>
						</div>

						<div class="form-group row">
							<div class="col-md-3">
								<label class="title"><b>Rollback APK</b></label>
							</div>
							<div class="col-md-6">
								<input type="file" name="rollback_apk" class="form-control">
								@error('rollback_apk')
									<span class="text-danger">
										<b>{{$message}}</b>
									</span>
								@enderror
							</div>
						</div>

						<div class="form-group row">
							<div class="col-md-12">
								<button type="submit">Add New Release</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js"></script>
	<script>

		jQuery(document).ready(() =>
		{
			let index = {{($errors->any())? 1 : 0}};
			tabcontent = document.getElementsByClassName("tabcontent");
			tabcontent[index].style.display = "block";
			$('#metaTable').DataTable({
				bLengthChange:false,
				pageLength:20,
				language: { search: "", searchPlaceholder:"Search", background: "none"},
				"columnDefs": [
	      			{ "bSearchable": false, "orderable":false, "targets": [ 5 ] }
	    		]
			});
		})

		function openTab(evt, cityName)
		{
			// Declare all variables
			var i, tabcontent, tablinks;

			// Get all elements with class="tabcontent" and hide them
			tabcontent = document.getElementsByClassName("tabcontent");
			for (i = 0; i < tabcontent.length; i++)
			{
				tabcontent[i].style.display = "none";
			}

			// Get all elements with class="tablinks" and remove the class "active"
			tablinks = document.getElementsByClassName("tablinks");
			for (i = 0; i < tablinks.length; i++)
			{
				tablinks[i].className = tablinks[i].className.replace(" active", "");
			}

			// Show the current tab, and add an "active" class to the button that opened the tab
			document.getElementById(cityName).style.display = "block";
			evt.currentTarget.className += " active";
		}
	</script>
@endsection