@page
@using Microsoft.AspNetCore.Http.Extensions
@model ServiceHost.Areas.Admin.Pages.Company.Module.IndexModel
@{
}
@{
	var url = HttpContext.Request.GetEncodedUrl();
	//string colaps = "in";
	//string act = "active";
	var i = 1;
}

@{
	//Layout = "~/Pages/Shared/_Layout.cshtml";
	Layout = "Shared/_AdminLayout";
	ViewData["title"] = "ماژول";

}

<style>
    .thh0 {
        width: 8px !important;
    }

    .thh {
        width: 40px !important;
    }

    .thh2 {
        width: 130px !important;
    }

    .thhNastionalId {
        width: 30px !important;
    }

    .inpt {
        width: 100%;
        border: 1px solid #c7c7c7;
    }

    .searchpanel {
        background-color: #747272;
    }

    <style >
    .sizeSet {
        padding: 2px !important;
        text-align: center !important;
    }

    .rad {
        border-radius: 8px !important;
        /* padding: 10px; */
        padding: 2px 5px 0px 5px;
    }

    .faSize {
        font-size: 22px !important;
    }

    .thh0 {
        width: 8px !important;
    }

    .thh {
        width: 40px !important;
    }

    .thh2 {
        width: 130px !important;
    }

    .thhNastionalId {
        width: 30px !important;
    }

    .inpt {
        width: 100%;
        border: 1px solid #c7c7c7;
    }

    .searchpanel {
        background-color: #747272;
    }

    select {
        cursor: pointer;
    }

    .panel-default > .panel-heading {
        background-color: #950000 !important;
    }





    .tooltip-container {
        cursor: pointer;
        position: relative;
        display: inline-block;
    }

    .tooltip2-container {
        cursor: pointer;
        position: relative;
        display: inline-block;
    }

    .tooltip {
        opacity: 0;
        z-index: 99;
        color: #fff;
        width: 220px;
        display: block;
        font-size: 14px;
        font-family: 'IranSans';
        padding: 5px 10px;
        border-radius: 3px;
        text-align: center;
        /*text-shadow: 1px 1px 2px #111;*/
        background: #e67e22;
        border: 1px solid #e67e22;
        box-shadow: 0 0 3px rgba(0,0,0,0.5);
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        position: absolute;
        right: -50px;
        bottom: 40px;
    }

        .tooltip:before, .tooltip:after {
            content: '';
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid #e67e22;
            position: absolute;
            bottom: -10px;
            left: 70%;
        }

    .tooltip-container:hover .tooltip, a:hover .tooltip {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    .tooltip2 {
        opacity: 0;
        z-index: 99;
        color: #fff;
        width: 220px;
        display: block;
        font-size: 14px;
        font-family: 'IranSans';
        padding: 5px 10px;
        border-radius: 3px;
        text-align: center;
        /*text-shadow: 1px 1px 2px #111;*/
        background: #e67e22;
        border: 1px solid #e67e22;
        box-shadow: 0 0 3px rgba(0,0,0,0.5);
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        position: absolute;
        right: -90px;
        bottom: 40px;
    }

        .tooltip2:before, .tooltip2:after {
            content: '';
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid #e67e22;
            position: absolute;
            bottom: -10px;
            left: 50%;
        }

    .tooltip2-container:hover .tooltip2, a:hover .tooltip2 {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
</style>


<div class="row">
	<div class="col-sm-12 m-r-10">
		<p class="pull-right">
			<a id="btnPopModal" href="#showmodal=@Url.Page("/Company/Module/Index", "Create")" class="btn btn-success btn-rounded waves-effect waves-light m-b-5" style=" background-color: #f5f5f5; border-color: #0f9500; font-family: 'Web_Yekan' !important; color: #0f9500 !important; margin-right: 10px "> <i class="fa fa-user-plus" style="padding-left: 3px; font-size: 14px; color: #0f9500 !important "></i> تعریف ماژول جدید </a>
		</p>
	</div>
</div>
<div class="row">
	<div class="col-sm-12 m-r-10">
		<input type="hidden" id="sercheCheck" value="@Model.searchModel"/>
	</div>
</div>

<div class="col-sm-12">
	<div class="panel-group panel-group-joined" id="accordion-test">
		<div class="panel panel-default" style="border-radius: 15px !important; background-color: #fdc0c0; ">
			<div class="panel-heading" style="background-color: #950000 !important">
				<h4 class="panel-title" style="color: #edebeb !important; display: inline;">
					<a data-toggle="collapse" data-parent="#accordion-test" href="#collapseOne" class="collapsed" style="display: inline;">
						جستجوی ماژول
					</a>
				</h4>
			</div>
			<div id="collapseOne" class="panel-collapse collapse in ">
				<div class="panel-body" style="padding-top: 15px; padding-bottom: 15px;">
					<div class="row">
						<div class="col-sm-12">
							<form class="form-inline" role="form" method="get" name="search-theme-form" id="search-theme-form" autocomplete="off">
								<div class="form-group col-sm-12">
									<div class="row">
										<div class="col-sm-3 pull-right">
											<label class="sr-only" asp-for="searchModel.NameSubModule"></label>
											<input class=" form-control inpt" asp-for="searchModel.NameSubModule" placeholder="نام ماژول " style="width: 100%">
										</div>
									</div>
									<hr style=" margin-top: 12px;margin-bottom: 12px;"/>
									<div class="row" style="margin-top: 15px">
										<div class="col-lg-9">
											<label class="sr-only" asp-for="searchModel.IsActiveString"></label>
											<select id="activing" class="form-control activer" asp-for="searchModel.IsActiveString" style="background-color: #dddddd; border-radius: 25px; border: 1px solid #bfbfbf;">
												<option value="true"> فعال </option>
												<option value="false"> غیرفعال</option>
												<option value="both"> هردو</option>
											</select>
										</div>
										<div class="col-lg-3">
											<button type="submit" class="btn btn-success btn-rounded waves-effect waves-light m-b-5 search" style="border-bottom-left-radius: 0px; border-top-left-radius: 0px; background-color: #950000; border-color: #950000; font-family: 'Web_Yekan' !important; margin-left: -3px "> <i class="fa fa-search" style="padding-left: 3px; font-size: 14px;"></i> جستجو</button>
											<a class="btn btn-info btn-rounded waves-effect waves-light m-b-5" style="border-bottom-right-radius: 0px; border-top-right-radius: 0px; background-color: #545353; border-color: #545353; font-family: 'Web_Yekan' !important;" asp-page="./Index">مشاهده همه</a>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="col-sm-12">
	<div permission="20113" class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title"><i class="fa fa-list" style="padding-left: 3px; font-size: 14px"></i> لیست ماژول ها</h3>
		</div>
		<div class="panel-body">
			<div class="row">
				<div class="col-sm-12 col-sm-12 col-xs-12">
					<table id="datatable" class="table table-striped table-bordered">
						<thead style="background-color: #ecefee">
						<tr>
							<th style="font-size: 10px !important; display: none" class="sizeSet">
								<span class="tooltip-container">
									<input class="checkboxtitle" type="checkbox" id="checkSelect" onclick="selectori(this)" checked="checked"/>
								</span>
							</th>
							<th style="font-size: 10px !important; width: 5% !important ; text-align:center" class="sizeSet">#</th>
							<th style="font-size: 10px !important; width: 80% !important ; text-align:center" class="sizeSet">نام ماژول</th>
							<th style="font-size: 10px !important; width: 65px; ">
								<span style="float: right;">
									<span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
								</span>
								<span class="act">
								</span>
								<a class="btn btn-danger pull-right m-rl-5 rad deact" onclick="deactiveAll()">
									<i class="fa faSize fa-trash"></i>
								</a>
							</th>
						</tr>
						</thead>
						<tbody>
						@foreach (var item in Model.Modules)
						{
							<tr>
								<td style="font-size: 16px !important; text-align: center;display:none">
									<input type="checkbox" name="foo" value="@item.Id" checked="checked"/>
								</td>
								<td style="font-size: 16px !important; text-align: center">@i </td>
								<td style="font-family: 'IranText' !important; font-size: 12px !important; text-align: center">
									@item.NameSubModule
								</td>
								@{
									i++;
								}
								<td>
									<a permission="20114" class="btn btn-warning pull-right m-rl-5 rad"
									   href="#showmodal=@Url.Page("./Index", "Edit", new { item.Id })">
										<i class="fa faSize fa-edit"></i>
									</a>
									@if (item.IsActiveString == "true")
									{
										<a permission="20116" id="googleLink" class="btn btn-danger pull-right m-rl-5 fff rad" onclick="DeActive('/Admin/Company/Module?id=@item.Id&amp;url=@url&amp;handler=DeActive')">
											<i class="fa faSize fa-trash"></i>
										</a>
									}
									else
									{
										<a permission="20116" onclick="IsActive('/Admin/Company/Module?id=@item.Id&amp;url=@url&amp;handler=IsActive')" class="btn btn-success pull-right m-rl-5 rad">
											<i class="fa faSize fa-rotate-left"></i>
										</a>
									}
								</td>
							</tr>
						}
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

@section PanelScripts{
	<script src="~/AdminTheme/assets/js/site.js"></script>
	<script src="~/AdminTheme/assets/datatables/jquery.dataTables.min.js"></script>
	<script src="~/AdminTheme/assets/datatables/dataTables.bootstrap.js"></script>
	<script>
		$('.activer').on('change',
			function(e) {
				e.preventDefault();
				$('.search').click();
			});
	</script>
	<script>

		if (document.getElementById("activing").selectedIndex == 1) {
			$('.deact').remove();
			$('.act').append(
				' <a class="btn btn-success pull-right m-rl-5 rad react" onclick="reActiveAll()">' + '<i class="fa faSize fa-rotate-left"></i>' + ' </a>'
			);
		}
		if (document.getElementById("activing").selectedIndex == 2) {
			$('.deact').remove();
		}

	</script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#datatable').dataTable({
				"lengthMenu": [[25, 10, 50, 100, -1], [25, 10, 50, 100, "All"]]
			});
		});
	</script>
	<script>
		$(document).ready(function() {
			$('#datatable2').dataTable(
				{
					"lengthMenu": [[25, 10, 50, 100, -1], [25, 10, 50, 100, "All"]]
				});
		});
	</script>
	<script>
		var checkboxes;

		function selectori(source) {
			checkboxes = document.getElementsByName('foo');
			for (var i = 0, n = checkboxes.length; i < n; i++) {
				checkboxes[i].checked = source.checked;
			}
		}
	</script>
	<script>
		function deactiveAll() {

			if (document.getElementById("checkSelect").checked == false) {
				$.Notification.autoHideNotify('error', 'top center', 'پیام سیستم ', " هیچ  عنوانی انتخاب نشده است ");
			} else {
				if (document.getElementById("sercheCheck").value == "false") {
					$.Notification.autoHideNotify('error', 'top center', 'پیام سیستم ', " لطفا در قسمت جستجوی  ماژول  مواردی  را انتخاب نموده و سپس جستجو را کلیک کنید ");
				} else if (document.getElementById("sercheCheck").value == "true") {
					swal({
							title: "آیا غیرفعال نمودن این  موارد انتخاب شده اطمینان دارید؟",
							text: "",
							type: "warning",
							showCancelButton: true,
							confirmButtonColor: "#DD6B55",
							confirmButtonText: "بله",
							cancelButtonText: "خیر",
							closeOnConfirm: false
						},
						function(isConfirm) {
							if (isConfirm) {
								checkboxes2 = document.getElementsByName('foo');
								let url3b = '';
								for (var i2 = 0, n2 = checkboxes2.length; i2 < n2; i2++) {
									if (checkboxes2[i2].checked == true) {
										const u2 = `&ids=${checkboxes2[i2].value}`;
										console.log(u2);
										url3b = url3b + u2;
										console.log(url3b);
									}
								}
								const url2b = '@Url.Page("/Company/Module/Index", "GroupDeActive")';
								window.location.href = url2b + url3b;
								console.log(url2b);
							}
						});

				}
			}
		}
	</script>
	<script>
		function reActiveAll() {

			if (document.getElementById("checkSelect").checked == false) {
				$.Notification.autoHideNotify('error', 'top center', 'پیام سیستم ', " هیچ  بخشی انتخاب نشده است ");
			} else {
				if (document.getElementById("sercheCheck").value == "false") {
					$.Notification.autoHideNotify('error', 'top center', 'پیام سیستم ', " لطفا در قسمت جستجوی  متن  حداقل یکی از فیلدهای عنوان را انتخاب نموده و سپس جستجو را کلیک کنید ");
				} else if (document.getElementById("sercheCheck").value == "true") {
					swal({
							title: "آیا فعال نمودن این  موارد انتخاب شده اطمینان دارید؟",
							text: "",
							type: "warning",
							showCancelButton: true,
							confirmButtonColor: "#DD6B55",
							confirmButtonText: "بله",
							cancelButtonText: "خیر",
							closeOnConfirm: false
						},
						function(isConfirm) {
							if (isConfirm) {
								checkboxes2 = document.getElementsByName('foo');
								let url3b = '';
								for (var i2 = 0, n2 = checkboxes2.length; i2 < n2; i2++) {
									if (checkboxes2[i2].checked == true) {
										const u2 = `&ids=${checkboxes2[i2].value}`;
										console.log(u2);
										url3b = url3b + u2;
										console.log(url3b);
									}
								}
								const url2b = '@Url.Page("/Company/Module/Index", "GroupReActive")';
								console.log(url2b);
								window.location.href = url2b + url3b;
							}
						});
				}
			}
		}
	</script>


}