@model CompanyManagment.App.Contracts.Contract.ComputingViewModel
@{
    <style>
        .modal .modal-dialog .modal-content{
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            border-color: #DDDDDD;
            padding: 0px 30px;
            border-radius: 10px;
            background-color: #ededed;
            border: none;
        }
        .modal2-btns {
            float: left;
            padding: 15px;
        }

        .modal2-btn {
            border-radius: 16px;
            font-size: 12px;
        }

		.modal-body2 {
			background-color: #f2fbfb;
			width: 100%;
			height: 674px;
			border-radius: 25px;
			position: absolute;
		}

		.rotateHead {
			width: 100%;
			margin-top: 10px;
			height: 20px;
			background-color: #eb950a;
			box-shadow: 1px 1px 5px 2px rgb(0 0 0 / 19%);
			border-radius: 10px;
			color: #fff;
			font-size: 12px;
			line-height: 1.7;
		}

		.rotateItems {
			width: 100%;
			margin-top: 3px;
			height: 17px;
			box-shadow: 1px 1px 5px 2px rgb(0 0 0 / 19%);
			border-radius: 10px;
			font-size: 12px;
		}

		.rotateParntModal {
			height: 600px !important;
		}
        .noRotating{
            background-color: #fe8470;
        }
        .hasRotating{
            background-color: #1bff01;
        }
        
    </style>
    string noRotating = "noRotating";
    string hasRotating = "hasRotating"; 

}



<div class="modal-body2" dir="rtl">
   
    <div class="row container" style="background-color: #a3e2ef;
    border-radius: 25px 25px 0px 0px;
    position: absolute;
    right: 10px;
    width: 100%;
    margin-bottom: 25px;">
        <div class="col-xs-6" style="text-align:center">
         
                <h5> @Model.YearAndMonth</h5>
        </div>

        
        <div class="col-xs-6" style="text-align:center">
            <h5>@Model.EmployeeFullName</h5>
        </div>

    </div>
    <div class="row container" style="margin-top: 38px;
    position: absolute;
    background-color: antiquewhite;
    width: 100%;
    right: 10px;">
            <div class="col-xs-3" style="text-align:right">
                @if (Model.HasRollCall)
                {
                    <h5> حضور غیاب</h5>
                }
                else
                {
                    <h5> استاتیک</h5>
                }
             
            </div>


            <div class="col-xs-3" style="text-align:left"> <h5>نوع ساعت کاری :</h5> </div>


        <div class="col-xs-3 @(!Model.HasRotatingShift? @noRotating :@hasRotating )" style="text-align:right ">
                
                <h5>@Model.RotatingStatus</h5>
            </div>
            <div class="col-xs-3" style="text-align:left">
                <h5>وضعیت نوبت کاری : </h5>
            </div>

        </div>
    
    <div class="container" style="height: 550px;margin-top: 67px">
        <div class="rotateHead">
            <span style="border-left: 1px solid;padding: 0px 30px;">تاریخ</span>
            <span style="border-left: 1px solid;padding: 0px 10px;"> کارکرد صبح </span>
            <span style="border-left: 1px solid;padding: 0px 10px;"> کارکرد عصر </span>
            <span style="border-left: 1px solid;padding: 0px 10px;"> کارکرد شب </span>
            <span style="border-left: 1px solid;padding: 0px 10px;"> نوبت صبح </span>
            <span style="border-left: 1px solid;padding: 0px 10px;"> نوبت عصر </span>
            <span style="padding: 0px 10px;"> نوبت شب </span>
        </div>
        <div id="rotatingList">
         
           
                    @foreach (var item in @Model.RotatingResultList)
                    {
            
                        <div class="rotateItems">
                            <span style="border-left: 1px solid;padding: 0px 15px;width : 15.3%;display:inline-block;font-family: 'IranText' !important;font-size: 10px;">@item.RotatingDate</span>
                            <span style="border-left: 1px solid;padding: 0px 22px;width: 14%;display: inline-block;">@item.MorningString</span>
                            <span style="border-left: 1px solid;padding: 0px 20px;display: inline-block;width: 13.1%;">@item.EveningString </span>
                            <span style="border-left: 1px solid;padding: 0px 22px;display: inline-block;width: 13.2%;">@item.NightString</span>
                            <span style="border-left: 1px solid;padding: 0px 30px;display: inline-block;width: 13%;">
                                @if (item.IsMorningShift == true) {
                                    <i class="ion-checkmark-circled" style="color: #1bff01;"></i>
                                }else{
                                    <i class="ion-checkmark-circled" style="color: #f2fbfb;"></i>
                                }
                            </span>
                            <span style="border-left: 1px solid;padding: 0px 30px;display: inline-block;width: 12.7%;"> 
                                @if (item.IsEveningShift == true) {
                                    <i class="ion-checkmark-circled" style="color: #1bff01;"></i>
                                }else{
                                    <i class="ion-checkmark-circled" style="color: #f2fbfb;"></i>
                                }
                            </span>
                            <span style="padding: 0px 30px;display: inline-block;width: 12.7%;">
                                @if (item.IsNightShift == true) {
                                    <i class="ion-checkmark-circled" style="color: #1bff01;"></i>
                                }else{
                                    <i class="ion-checkmark-circled" style="color: #f2fbfb;"></i>
                                }
                            </span>
                        </div>
                    }
                    
             
              
           
        </div>
    </div>
    <div class="row">
        <div class="col-md-9"></div>
        <div class="modal2-btns col-md-3">
            <a type="button" id="closeRotate" class="btn pull-left m-l-10" style="background-color: #e7f2f3;border-radius: 15px;box-shadow: 1px 1px 5px 2px rgb(0 0 0 / 19%);" data-dismiss="modal" data-parent-modal="#edit-modal">بستن</a>

        </div>
    </div>
</div>