@model AccountManagement.Application.Contracts.Task.OperationModalViewModel
@using System.Security.Claims
@using AccountManagement.Application.Contracts.Media

@{
	//OPeration Rquest Modal
	string adminVersion = _0_Framework.Application.Version.AdminVersion;


	//Ticket needs
	MediaViewModel voice = null;
	var userId = Convert.ToInt64(User.FindFirstValue("AccountId"));

	string svgName = "unknow";
	string[] fileExtensions = new string[]
	{
		".ai", ".avi", ".bmp", ".crd", ".csv", ".dll", ".doc", ".docx", ".dwg",
		".eps", ".exe", ".flv", ".giff", ".html", ".iso", ".java", ".jpg", ".mdb",
		".mid", ".mov", ".mp3", ".mp4", ".mpeg", ".pdf", ".png", ".ppt", ".ps",
		".psd", ".pub", ".rar", ".raw", ".rss", ".svg", ".tiff", ".txt", ".wav",
		".wma", ".xml", ".xsl", ".zip"
	};
	int i = 1;

	// Tasks
	<script src="~/AssetsClient/js/jquery-ui.js"></script>
	<link href="~/assetsadminnew/tasks/css/task-manager-create.css?ver=@adminVersion" rel="stylesheet" />
	<link href="~/AssetsClient/css/select2.css?ver=@adminVersion" rel="stylesheet" />
	<link href="~/assetsadminnew/tasks/css/detailmodal.css?ver=@adminVersion" rel="stylesheet" />
	<link href="~/assetsadminnew/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" />

	<link href="~/assetsadminnew/tasks/css/task-manager-create.css?ver=@adminVersion" rel="stylesheet" />
	<link href="~/AssetsClient/css/select2.css?ver=@adminVersion" rel="stylesheet" />
	<link href="~/assetsadminnew/tasks/css/operationrequestmodal.css?ver=@adminVersion" rel="stylesheet" />
	<link href="~/AssetsAdminNew/Ticket/css/ticket-list.css?ver=@adminVersion" rel="stylesheet" />
	<link href="~/AssetsAdminNew/Ticket/css/ticket-create.css?ver=@adminVersion" rel="stylesheet" />
	<link href="~/AssetsAdminNew/Ticket/css/ticket-message.css?ver=@adminVersion" rel="stylesheet" />
	<link href="~/AssetsAdminNew/Ticket/css/Index.css?ver=@adminVersion" rel="stylesheet" />


	if (Model.TaskDetails.AssignViewModels?.Count > 1)
	{
		<style>
			.modal-xl-taskTime {
				max-width: 720px;
			}
		</style>
	}
	else
	{
		<style>
			.modal-xl-taskTime {
				max-width: 500px;
			}
		</style>
	}


	<style>

		.modal-xl-taskTime {
			max-width: 970px;
		}

		/*.modal-content {
					width: 970px;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					height: auto;
					overflow: hidden;
						}*/

		.taskSection {
			position: relative;
			width: 60%;
			transition: width 0.3s ease;
		}

		.ticketSection {
			width: 40%;
			color: white;
			transition: width 0.3s ease;
			overflow-y: auto;
		}

		.overlayTicket {
			background: #000000b8;
			height: 100%;
			width: 100%;
			position: fixed;
			z-index: 10;
			display: none;
		}

		.ticketSection.hide {
			width: 0;
			padding: 0;
			overflow: hidden;
		}

		.ticketSection.showTicket {
			display: block !important;
		}

		.taskSection.expand {
			width: 100%;
		}

		.overlayTicket.showTicket {
			display: block !important;
		}

		.toggleButton {
			position: absolute;
			right: -12px;
			background: #41D1D1;
			width: 30px;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			top: 60px;
			z-index: 20;
		}

		.toggleButtonMobile {
			position: fixed;
			bottom: 0;
			left: 50%;
			transform: translate(-50%, 0);
			padding: 20px;
			font-size: 16px;
			font-weight: 700;
			background-color: #41D1D1;
			color: #fff;
		}

		/*.infoTicketHead {
					margin: 15px 0 0 0;
						}*/

		.header-custom-color {
			border-radius: 20px 0 0 0;
		}

		.rotate {
			transform: rotate(180deg);
			transition: transform 0.3s ease;
		}

		#messageContent {
			height: 600px;
		}

		.taskDescText.expanded {
			height: 150px;
		}

		@@media (max-width: 1366px) {
			.modal-xl-taskTime {
				max-width: 750px;
			}

			#messageContent {
				height: 345px;
			}

			.modal-content {
				height: 550px;
			}

			#responsive-in-mobile {
				height: 390px;
			}
		}

		@@media (max-width: 992px) {
			.modal-content {
				width: 700px;
				height: auto;
			}


			.actionBtnsection {
				width: 100% !important;
			}
		}

		@@media (max-width: 768px) {
			.modal-content {
				width: auto;
				position: relative;
				overflow: visible;
				transform: none;
				left: auto;
				top: auto;
			}

			.actionBtnsection.actionBtn {
				font-size: 12px;
			}

			#overlayTicket {
				z-index: 42;
			}

			#taskSection {
				width: 100%;
			}

			#ticketsection {
				width: 0%;
			}

			.d-flex.w-100 {
				flex-direction: column-reverse;
			}

			#ticketSection {
				width: 100%;
				border-left: none;
				border-bottom: 1px solid #BFBFBF;
				border-radius: 20px 20px 0 0 !important;
				position: fixed;
				bottom: 0;
				left: 0;
				z-index: 200;
				display: none;
			}

			#taskSection.expand {
				width: 100%;
			}
		}
	</style>
}

<div class="modal-content">
	<div class="d-flex w-100 h-100">
		<div class="overlayTicket" id="overlayTicket"></div>

		<div id="ticketSection" class="ticketSection px-0">
			<div class="" style="position: relative; background-color: #EBEEF3; border-left: 1px solid #BFBFBF; border-radius: 0 20px 20px 0;height: 100%;">
				<div class="modal-header d-block text-center">
					<button type="button" class="btn-close position-absolute text-start d-none d-md-block" data-bs-dismiss="modal" aria-label="Close"></button>
					<button type="button" class="btn-close position-absolute text-start d-block d-md-none" id="closeToggleButtonMobile"></button>
					<h6 class="modal-title" style="font-size: 14px;">شماره پشتیبانی: @Model.TaskDetails.TicketViewModel.TicketNumber</h6>
				</div>

				<div class="modal-body p-2">
					<div class="container-fluid">
						<div class="row p-0">
							<div class="col-12 p-0">
								<div class="infoTicketHead d-flex align-items-center justify-content-between">
									<div class="d-flex align-items-center">
										<div class="img-bor1">
											<img src="~/assetsclient/images/user_alt_fill.png" alt="Avatar" />
										</div>
										<div class="">
											<div class="textTitle1">@Model.TaskDetails.TicketViewModel.ContractingPartyName</div>
											<div class="textTitle2">@Model.TaskDetails.TicketViewModel.WorkshopName</div>
										</div>
									</div>
									<div class="img-bor2">
										<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
											<path d="M2.19671 0.621211L2.28367 0.534255C2.67419 0.143731 3.30736 0.14373 3.69788 0.534254L5.86261 2.69899C6.25314 3.08951 6.25314 3.72268 5.86261 4.1132L4.33331 5.64251C4.06589 5.90993 3.99959 6.31847 4.16872 6.65673C5.14645 8.61219 6.73205 10.1978 8.6875 11.1755C9.02577 11.3446 9.43431 11.2783 9.70173 11.0109L11.231 9.48162C11.6216 9.0911 12.2547 9.0911 12.6452 9.48162L14.81 11.6464C15.2005 12.0369 15.2005 12.67 14.81 13.0606L14.723 13.1475C12.6117 15.2589 9.26911 15.4964 6.88039 13.7049L6.51408 13.4302C4.77055 12.1225 3.22173 10.5737 1.91408 8.83016L1.63935 8.46385C-0.152188 6.07513 0.0853593 2.73256 2.19671 0.621211Z" fill="#5B5B5B" />
										</svg>
										@* @Model.Sender.Mobile *@
									</div>
								</div>
							</div>
							
							<div class="col-12 p-0 col-lg-12">


								<div class="ticket-message-container" id="messageContent">
								</div>

								@if (!Model.TaskDetails.IsDone && !Model.TaskDetails.IsCancel && !(Model.TaskDetails.TicketViewModel.ResponseViewModels.Any(x => x.IsActive == "false" && x.AdminAccountId == userId)))
								{
									<div id="actionTicketMessage" class="footer-message-container my-2" style="position: relative;">
										<div class="container px-1">
											<div class="row align-items-center">

												<div class="col-3">
													<div class="message-input-div">
														<button type="button" class="btn-sendTi" id="saveAdminResponseTicket">
															<svg width="21" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
																<path d="M2.50665 18.8657C2.4129 18.8973 2.31352 18.8989 2.21906 18.8703C2.1246 18.8416 2.03857 18.7838 1.9701 18.703C1.90162 18.6222 1.85325 18.5214 1.83011 18.4112C1.80697 18.3011 1.80993 18.1857 1.83867 18.0773L3.59301 11.4547H9.73609C9.87958 11.4547 10.0172 11.3885 10.1187 11.2707C10.2201 11.1528 10.2771 10.993 10.2771 10.8264C10.2771 10.6597 10.2201 10.4999 10.1187 10.3821C10.0172 10.2642 9.87958 10.198 9.73609 10.198H3.59301L1.83867 3.5754C1.8101 3.46709 1.80727 3.35183 1.83049 3.24181C1.8537 3.13179 1.90209 3.0311 1.97054 2.9504C2.03899 2.86971 2.12495 2.812 2.21932 2.78339C2.31369 2.75478 2.41297 2.75634 2.50665 2.78789C7.2784 4.39951 11.7782 6.94551 15.8121 10.3162C15.8818 10.3743 15.9386 10.451 15.9777 10.5397C16.0169 10.6284 16.0373 10.7267 16.0373 10.8264C16.0373 10.9261 16.0169 11.0243 15.9777 11.113C15.9386 11.2018 15.8818 11.2784 15.8121 11.3366C11.7783 14.7075 7.27846 17.2538 2.50665 18.8657Z" fill="white" />
															</svg>
															<div class="spinner-loading loading" style="display: none">
																<span class="spinner-border spinner-border-sm loading text-white" role="status" aria-hidden="true"></span>
															</div>
														</button>
														<button type="button" class="btn-voice-file-Ti record_btn" id="upload-voice-ticket-messageAdmin">
															<svg width="21" height="21" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
																<rect x="6" y="2.125" width="4" height="7.79167" rx="2" stroke="white" stroke-width="1.2" stroke-linejoin="round" />
																<path d="M3.4 7.79199C3.4 9.06695 3.87634 10.2965 4.73465 11.2084C5.59412 12.1216 6.76786 12.642 8 12.642C9.23214 12.642 10.4059 12.1216 11.2653 11.2084C12.1237 10.2965 12.6 9.06695 12.6 7.79199" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
																<path d="M8 14.8747V13.458" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
															</svg>
															<div class="spinner-loading loading" style="display: none">
																<span class="spinner-border spinner-border-sm loading text-white" role="status" aria-hidden="true"></span>
															</div>
															<input type="file" class="d-none" id="Command_Voice">
														</button>
													</div>
												</div>

												<div class="col-9">

													<div class="upload-voice-containerTi align-items-center justify-content-center" style="display: none">
														<div id="upload-voice-recording" class="text-center">
															<svg width="30" height="30" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
																<path d="M29.94 42.8076V42.5805L29.7139 42.5588C25.9145 42.1942 22.709 40.6562 20.4538 38.2294C18.1993 35.8033 16.8813 32.4746 16.8813 28.5034V24.6695C16.8813 23.7829 17.5993 23.0901 18.4997 23.0901C19.4 23.0901 20.118 23.7829 20.118 24.6695V28.3672C20.118 31.7435 21.2628 34.5597 23.2701 36.532C25.2769 38.5039 28.1261 39.6129 31.4999 39.6129C34.8737 39.6129 37.7229 38.5039 39.7298 36.532C41.7371 34.5597 42.8819 31.7435 42.8819 28.3672V24.6695C42.8819 23.7863 43.6159 23.0901 44.5197 23.0901C45.4165 23.0901 46.1185 23.7796 46.1185 24.6695V28.5034C46.1185 32.4746 44.8006 35.8033 42.5461 38.2294C40.2909 40.6562 37.0853 42.1942 33.286 42.5588L33.0599 42.5805V42.8076V46.7583V47.0083H33.3099H40.4522C41.3524 47.0083 42.09 47.7205 42.09 48.6071C42.09 49.476 41.3507 50.206 40.4522 50.206H22.5476C21.6492 50.206 20.9099 49.476 20.9099 48.6071C20.9099 47.7205 21.6474 47.0083 22.5476 47.0083H29.69H29.94V46.7583V42.8076ZM38.1198 28.0558C38.1198 32.2488 35.3021 35.0844 31.4999 35.0844C27.6977 35.0844 24.88 32.2488 24.88 28.0558V14.9388C24.88 10.7457 27.6977 7.91016 31.4999 7.91016C35.3021 7.91016 38.1198 10.7457 38.1198 14.9388V28.0558Z" fill="url(#paint0_linear_1349_16648)" stroke="url(#paint1_linear_1349_16648)" stroke-width="0.5" />
																<g filter="url(#filter0_bd_1349_16648)">
																	<circle cx="31.5" cy="31" r="13" fill="#2AB8B8" fill-opacity="0.6" shape-rendering="crispEdges" />
																	<circle cx="31.5" cy="31" r="12.65" stroke="url(#paint2_linear_1349_16648)" stroke-width="0.7" shape-rendering="crispEdges" />
																</g>
																<path d="M30.63 36.1383C30.9524 36.1383 31.1933 35.8829 31.1933 35.575V25.9867C31.1933 25.6716 30.9452 25.4234 30.63 25.4234C30.3149 25.4234 30.0667 25.6716 30.0667 25.9867V35.575C30.0667 35.8837 30.3141 36.1383 30.63 36.1383ZM34.1048 35.0139C34.4264 35.0139 34.6681 34.7649 34.6681 34.4506V27.1111C34.6681 26.796 34.42 26.5478 34.1048 26.5478C33.7833 26.5478 33.5415 26.7968 33.5415 27.1111V34.4506C33.5415 34.7649 33.7833 35.0139 34.1048 35.0139ZM28.8898 34.206C29.2098 34.206 29.4587 33.9586 29.4587 33.6426V27.9191C29.4587 27.6032 29.2098 27.3558 28.8898 27.3558C28.573 27.3558 28.3321 27.6056 28.3321 27.9191V33.6426C28.3321 33.9562 28.573 34.206 28.8898 34.206ZM32.3703 33.494C32.6878 33.494 32.9279 33.2378 32.9279 32.9307V28.631C32.9279 28.3175 32.687 28.0677 32.3703 28.0677C32.0479 28.0677 31.8069 28.3231 31.8069 28.631V32.9307C31.8069 33.2386 32.0479 33.494 32.3703 33.494ZM35.8394 32.5335C36.161 32.5335 36.4027 32.2845 36.4027 31.9702V29.5915C36.4027 29.2772 36.161 29.0282 35.8394 29.0282C35.5178 29.0282 35.2761 29.2772 35.2761 29.5915V31.9702C35.2761 32.2853 35.5243 32.5335 35.8394 32.5335ZM27.1552 32.0872C27.4768 32.0872 27.7185 31.8382 27.7185 31.5239V30.0379C27.7185 29.7243 27.4719 29.4689 27.1552 29.4689C26.832 29.4689 26.5919 29.7251 26.5919 30.0379V31.5239C26.5919 31.8382 26.8336 32.0872 27.1552 32.0872Z" fill="url(#paint3_linear_1349_16648)" fill-opacity="0.8" stroke="url(#paint4_linear_1349_16648)" stroke-width="0.2" />
																<defs>
																	<filter id="filter0_bd_1349_16648" x="10.5" y="10" width="42" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
																		<feFlood flood-opacity="0" result="BackgroundImageFix" />
																		<feGaussianBlur in="BackgroundImageFix" stdDeviation="3" />
																		<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1349_16648" />
																		<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
																		<feOffset />
																		<feGaussianBlur stdDeviation="4" />
																		<feComposite in2="hardAlpha" operator="out" />
																		<feColorMatrix type="matrix" values="0 0 0 0 0.164706 0 0 0 0 0.721569 0 0 0 0 0.721569 0 0 0 0.64 0" />
																		<feBlend mode="normal" in2="effect1_backgroundBlur_1349_16648" result="effect2_dropShadow_1349_16648" />
																		<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1349_16648" result="shape" />
																	</filter>
																	<linearGradient id="paint0_linear_1349_16648" x1="16.4428" y1="5.31527" x2="57.5413" y2="18.8131" gradientUnits="userSpaceOnUse">
																		<stop stop-color="#329E7A" />
																		<stop offset="1" stop-color="#25A2A2" />
																	</linearGradient>
																	<linearGradient id="paint1_linear_1349_16648" x1="32.739" y1="7.66016" x2="31.3903" y2="50.4134" gradientUnits="userSpaceOnUse">
																		<stop stop-color="#CFFFFF" />
																		<stop offset="1" stop-color="#CFFFFF" stop-opacity="0.5" />
																	</linearGradient>
																	<linearGradient id="paint2_linear_1349_16648" x1="32.5833" y1="18" x2="32.0137" y2="43.9875" gradientUnits="userSpaceOnUse">
																		<stop stop-color="#CFFFFF" />
																		<stop offset="1" stop-color="#CFFFFF" stop-opacity="0.5" />
																	</linearGradient>
																	<linearGradient id="paint3_linear_1349_16648" x1="26.5911" y1="24.4548" x2="41.2864" y2="29.531" gradientUnits="userSpaceOnUse">
																		<stop stop-color="#FFFAFA" />
																		<stop offset="1" stop-color="#FFFAFA" stop-opacity="0.4" />
																	</linearGradient>
																	<linearGradient id="paint4_linear_1349_16648" x1="31.4973" y1="36.0383" x2="31.7227" y2="25.5283" gradientUnits="userSpaceOnUse">
																		<stop stop-color="white" stop-opacity="0.8" />
																		<stop offset="1" stop-color="white" stop-opacity="0.2" />
																	</linearGradient>
																</defs>
															</svg>
														</div>

														<div id="waveArea" class="align-items-center" style="width: 100%; padding: 5px;" style="display: none;">
															<input type="file" class="d-none" id="Command_Voice">
															@*     <audio controls id="playAudio" style="display: none;">
														<source src="" type="audio/ogg" >
														Your browser does not support the audio element.
														</audio> *@
															<div class="audio-player">
																<button type="button" id="removeVoice" class="bg-transparent">
																	<svg width="22" height="22" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
																		<path d="M2.82471 6.77522L6.81477 2.78516M2.82471 2.78516L6.81477 6.77522" stroke="#FF5555" stroke-linecap="round" stroke-linejoin="round" />
																	</svg>
																</button>
																<div id="waveform" class="waveform"></div>
																<button type="button" id="play-pause" class="player-btn play"></button>
															</div>
															<div class="d-flex justify-content-between align-items-center mx-1 d-none" id="upload-container-voice">
																<div class="upload-box-voiceTi empty" id="msg_box_ticket_messageAdmin" style="display: none">
																	<div class="spinner-loading loading" style="display: none">
																		<span class="spinner-border spinner-border-sm loading text-white" role="status" aria-hidden="true"></span>
																	</div>
																</div>
															</div>
														</div>
													</div>

													<div class="position-relative" id="documentFilesDiv">
														<div id="upload-container-docTi">
														</div>

														<textarea id="Response" class="form-control" rows="2" style="resize: none;"> </textarea>
														<button class="upload-file-new bg-transparent" id="upload-doc-msg" type="submit">
															<svg width="26" height="26" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
																<path d="M2.875 7.70313C2.875 7.00534 2.875 6.65645 2.96112 6.37256C3.15502 5.73335 3.65523 5.23314 4.29443 5.03924C4.57833 4.95312 4.92722 4.95312 5.625 4.95312H7.9783C8.77084 4.95312 9.16711 4.95312 9.52561 5.09698C9.88412 5.24083 10.1705 5.51474 10.7432 6.06256L12.4583 7.70313V10.4531H2.875V7.70313V7.70313Z" fill="#538AF6" fill-opacity="0.25" />
																<path d="M2.875 10.9031C2.875 9.78302 2.875 9.22297 3.09299 8.79514C3.28473 8.41882 3.59069 8.11286 3.96702 7.92111C4.39484 7.70312 4.95489 7.70312 6.075 7.70312H16.925C18.0451 7.70312 18.6052 7.70312 19.033 7.92111C19.4093 8.11286 19.7153 8.41882 19.907 8.79514C20.125 9.22297 20.125 9.78302 20.125 10.9031V14.5865C20.125 15.7066 20.125 16.2666 19.907 16.6944C19.7153 17.0708 19.4093 17.3767 19.033 17.5685C18.6052 17.7865 18.0451 17.7865 16.925 17.7865H6.075C4.95489 17.7865 4.39484 17.7865 3.96702 17.5685C3.59069 17.3767 3.28473 17.0708 3.09299 16.6944C2.875 16.2666 2.875 15.7066 2.875 14.5865V10.9031Z" fill="#538AF6" />
															</svg>
														</button>

														<input type="file" class="d-none" id="Command_Document1" accept=".pdf,.doc,.docx,.txt, image/*">
														<input type="file" class="d-none" id="Command_Document2" accept=".pdf,.doc,.docx,.txt, image/*">
														<input type="file" class="d-none" id="Command_Document3" accept=".pdf,.doc,.docx,.txt, image/*">
														<input type="file" class="d-none" id="Command_Document4" accept=".pdf,.doc,.docx,.txt, image/*">

													</div>
												</div>
												<div id="fileItems" style="display: none"></div>
												<div id="voiceItem" style="display: none"></div>
											</div>
										</div>
									</div>
								}

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

		<div id="taskSection" class="taskSection ps-md-0">
			<button class="toggleButton d-none d-md-block" id="toggleSidebar">
			<svg width="25" height="25" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path d="M4.5 3L7.5 6L4.5 9" stroke="white" stroke-linecap="round" />
			</svg>
			</button>
			<button class="toggleButtonMobile d-block d-md-none" id="toggleSidebarMobile">
				نمایش تیکت
			</button>
			
			<div>
				<div class="modal-header d-block text-center header-custom-color">
					<div class="row">
						<div class="col-5 col-md-4 text-start">
							<h6 class="modal-title">جزئیات وظیفه</h6>
						</div>
					</div>
				</div>

				<div class="modal-body p-2" style="overflow-y: auto;">
					<div class="container-fluid">

						<div class="row">
							<div id="assignsSection" class="pe-0 @(Model.TaskDetails.AssignViewModels?.Count > 0 && Model.TaskDetails.AssignViewModels?.Count != 1 ? "col-12 col-md-3" : "d-none")">
								<div class="assigns_section">
									@* 		@if (Model.TaskDetails.AssignViewModels?.Count > 0 && Model.TaskDetails.AssignViewModels?.Count != 1)
									{ *@
									<button type="button" class="btnAssignList blue active" onclick="showAllRequestAction()">
										<span>
											کل درخواست‌ها
										</span>
										<span>
											<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
												<path d="M14.25 2.25V2.25C15.0784 2.25 15.75 2.92157 15.75 3.75V11.37C15.75 12.3781 15.75 12.8821 15.5538 13.2672C15.3812 13.6059 15.1059 13.8812 14.7672 14.0538C14.3821 14.25 13.8781 14.25 12.87 14.25H5.13C4.12191 14.25 3.61786 14.25 3.23282 14.0538C2.89413 13.8812 2.61876 13.6059 2.44619 13.2672C2.25 12.8821 2.25 12.3781 2.25 11.37V3.75C2.25 2.92157 2.92157 2.25 3.75 2.25V2.25" stroke="#33363F" stroke-width="1.5" />
												<path d="M14.25 2.25H13.5885C13.3755 2.25 13.269 2.25 13.1718 2.26944C12.9366 2.31652 12.7261 2.44661 12.5787 2.63598C12.5179 2.71418 12.4703 2.80945 12.375 3V3C12.2797 3.19055 12.2321 3.28582 12.1713 3.36402C12.0239 3.55339 11.8134 3.68348 11.5782 3.73056C11.481 3.75 11.3745 3.75 11.1615 3.75H6.6875C6.54734 3.75 6.47727 3.75 6.4134 3.74174C6.10422 3.70175 5.83138 3.51986 5.67555 3.24984C5.64336 3.19406 5.61641 3.12938 5.5625 3V3C5.50859 2.87062 5.48164 2.80594 5.44945 2.75016C5.29362 2.48014 5.02078 2.29825 4.7116 2.25826C4.64774 2.25 4.57766 2.25 4.4375 2.25H3.75" stroke="#33363F" stroke-width="1.5" />
												<path d="M15.75 6H13.5885C13.3755 6 13.269 6 13.1718 6.01944C12.9366 6.06652 12.7261 6.19661 12.5787 6.38598C12.5179 6.46418 12.4703 6.55945 12.375 6.75V6.75C12.2797 6.94055 12.2321 7.03582 12.1713 7.11402C12.0239 7.30339 11.8134 7.43348 11.5782 7.48056C11.481 7.5 11.3745 7.5 11.1615 7.5H6.6875C6.54734 7.5 6.47727 7.5 6.4134 7.49174C6.10422 7.45175 5.83138 7.26986 5.67555 6.99984C5.64336 6.94406 5.61641 6.87938 5.5625 6.75V6.75C5.50859 6.62062 5.48164 6.55594 5.44945 6.50016C5.29362 6.23014 5.02078 6.04825 4.7116 6.00826C4.64774 6 4.57766 6 4.4375 6H2.25" stroke="#33363F" stroke-width="1.5" />
												<path d="M15.75 9.75H13.5885C13.3755 9.75 13.269 9.75 13.1718 9.76944C12.9366 9.81652 12.7261 9.94661 12.5787 10.136C12.5179 10.2142 12.4703 10.3095 12.375 10.5V10.5C12.2797 10.6905 12.2321 10.7858 12.1713 10.864C12.0239 11.0534 11.8134 11.1835 11.5782 11.2306C11.481 11.25 11.3745 11.25 11.1615 11.25H6.6875C6.54734 11.25 6.47727 11.25 6.4134 11.2417C6.10422 11.2018 5.83138 11.0199 5.67555 10.7498C5.64336 10.6941 5.61641 10.6294 5.5625 10.5V10.5C5.50859 10.3706 5.48164 10.3059 5.44945 10.2502C5.29362 9.98014 5.02078 9.79825 4.7116 9.75826C4.64774 9.75 4.57766 9.75 4.4375 9.75H2.25" stroke="#33363F" stroke-width="1.5" />
											</svg>
										</span>
									</button>
									@foreach (var assign in Model.TaskDetails.AssignViewModels!)
									{
										var btnColor = string.Empty;
										var svgCode = string.Empty;
										@if (assign.IsCanceledRequest)
										{
											btnColor = "red";
											svgCode = @"
									<svg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'>
									<path d='M14.25 4.75L4.75 14.25' stroke='#EF4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>
									<path d='M4.75 4.75L14.25 14.25' stroke='#EF4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>
									</svg>";
										}
										else if (assign.TimeRequest)
										{
											btnColor = "orange";
											svgCode = @"
									<svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'>
									<path d='M4.05025 4.05025C2.9051 5.1954 2.19245 6.70219 2.03371 8.31388C1.87497 9.92557 2.27997 11.5424 3.17971 12.889C4.07945 14.2355 5.41825 15.2285 6.96801 15.6986C8.51776 16.1687 10.1826 16.0869 11.6788 15.4672C13.175 14.8474 14.41 13.728 15.1734 12.2998C15.9369 10.8715 16.1814 9.22274 15.8655 7.63437C15.5496 6.046 14.6926 4.61632 13.4408 3.58893C12.1889 2.56154 10.6195 2 9 2' stroke='#EAB308' stroke-width='2' stroke-linecap='round'/>
									<path d='M9 9L4.5 4.5' stroke='#EAB308' stroke-width='2' stroke-linecap='round'/>
									<path d='M9 2.25V3.75' stroke='#EAB308' stroke-width='2' stroke-linecap='round'/>
									<path d='M15.75 9L14.25 9' stroke='#EAB308' stroke-width='2' stroke-linecap='round'/>
									<path d='M9 14.25V15.75' stroke='#EAB308' stroke-width='2' stroke-linecap='round'/>
									<path d='M3.75 9L2.25 9' stroke='#EAB308' stroke-width='2' stroke-linecap='round'/>
									</svg>";
										}
										else if (assign.IsDoneRequest)
										{
											btnColor = "green";
											svgCode = @"
									<svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'>
									<path d='M3.75 10.5L5.98309 12.1748C6.41178 12.4963 7.01772 12.4228 7.35705 12.0081L13.5 4.5' stroke='#84CC16' stroke-width='2' stroke-linecap='round'/>
									</svg>";
										}

										<button type="button" id="btnAssignList" class="btnAssignList @btnColor" data-id="@assign.Id" onclick="loadChatMessageRequest(@assign.Id)">
											<span id="AssignedName_@assign.Id">
												@assign.AssignedName
											</span>
											<span>
												@Html.Raw(svgCode)
											</span>
										</button>
									}
									@* } *@
								</div>
							</div>

							<div id="chatSection" class="@(Model.TaskDetails.AssignViewModels?.Count > 0 && Model.TaskDetails.AssignViewModels?.Count != 1 ? "col-12 col-md-9" : "col-12")">
								<div class="chat-section">
									<div class="chat-card-main" style="position: sticky;top: 5px;z-index: 40;">
										<div class="row">
											<div class="col-6">
												<h6 class="taskTitle text-start row align-items-center mb-1">
													<span class="col-5 col-md-4 p-0">طرف حساب:</span>
													<span class="taskTitleSub col-7 col-md-8">@Model.TaskDetails.ContractingPartyName</span>
												</h6>
												<h6 class="taskTitle text-start row align-items-center">
													<span class="col-5 col-md-4 p-0">عنوان وظیفه:</span>
													<span class="taskTitleSub col-7 col-md-8">@Model.TaskDetails.Title</span>
												</h6>
											</div>
											<div class="col-6">
												<h6 class="taskTitle text-end row align-items-center mb-1">
													<span class="col-6 col-md-5 ps-0">تاریخ ایجاد:</span>
													<span class="taskTitleSub text-center col-6 col-md-7 justify-content-center">@Model.TaskDetails.CreateDateFa</span>
												</h6>
												<h6 class="taskTitle text-end row align-items-center">
													<span class="col-6 col-md-5 ps-0">تاریخ سررسید:</span>
													<span class="@(Model.TaskDetails.AssignViewModels?.First() != null ? "" : "taskTitleSub") text-center col-6 col-md-7 justify-content-center" id="AssignEndTaskDateFa">@Model.TaskDetails.AssignViewModels?.First().EndTaskDateFa</span>
												</h6>
											</div>
										</div>
										@if (!String.IsNullOrWhiteSpace(Model.TaskDetails.Description))
										{
											<div class="taskTitle">توضیحات :</div>
											<div class="taskDesc">
												<div class="taskDescText" id="taskDescText">
													@Html.Raw(Model.TaskDetails.Description)
												</div>
											</div>
										}

										@if (Model.TaskDetails.medias.Count > 0)
										{
											@foreach (var item in Model.TaskDetails.medias)
											{
												if (item.Category == "صوت")
												{
													voice = item;
													<div id="waveArea" class="align-items-center" style="width: 100%; padding: 5px; @(voice == null ? "display: none" : "");">
														<div class="audio-player">
															<div id="waveform" class="waveform"></div>
															<button id="play-pause" class="player-btn play"></button>
														</div>
													</div>
												}
											}

											<div class="d-flex align-items-center justify-content-end">

												@foreach (var item in Model.TaskDetails.medias)
												{
													if (item.Category == "فایل")
													{
														string fileName = System.IO.Path.GetFileName(item.Path);
														string extension = System.IO.Path.GetExtension(fileName);
														string nameWithoutExtension = fileName.Substring(0, fileName.LastIndexOf("."));
														int maxLength = 20 - extension.Length;
														int sliceLength = Math.Max((maxLength - 3) / 2, 0);

														string start = nameWithoutExtension.Substring(0, Math.Min(sliceLength, nameWithoutExtension.Length));
														string end = nameWithoutExtension.Substring(Math.Max(nameWithoutExtension.Length - sliceLength, 0));

														var inBox = "inBox" + i;
														@if (item.Path.EndsWith(".jpg") || item.Path.EndsWith(".jpeg") || item.Path.EndsWith(".png") || item.Path.EndsWith(".gif") || item.Path.EndsWith(".webp"))
														{
															<div class="upload-box empty inBox@(i)">
																<section class="gallery">
																	<section class="container">
																		<div class="row p-0">
																			<div class="lightbox_img_wrap">
																				<img class="lightbox-enabled min-img" src="@Url.Page("./Index", "ShowPicture", new { filePath = item.Path })" data-imgsrc="@Url.Page("./Index", "ShowPicture", new { filePath = item.Path })" id="@Model.TaskDetails.Id" />
																			</div>
																		</div>
																	</section>
																</section>
																<section class="lightbox-container">

																	<span class="material-symbols-outlined material-icons lightbox-btn left" id="left">
																		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
																			<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
																		</svg>
																	</span>
																	<span class="material-symbols-outlined material-icons lightbox-btn right" id="right">
																		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
																			<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
																		</svg>
																	</span>
																	<span id="close" class="close material-icons material-symbols-outlined">
																		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
																			<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
																		</svg>
																	</span>
																	<div class="lightbox-image-wrapper">
																		<img alt="lightboximage" class="lightbox-image">

																	</div>
																</section>
															</div>
														}
														else
														{
															if (fileExtensions.Contains(extension))
															{
																svgName = extension.TrimStart('.').ToLower();
																<a href="@Url.Page("./Index", "GetFile", new { filePath = item.Path, id = Model.TaskDetails.Id })"><img class="uploaded-file" src="/common/filesvg/@(svgName).svg" /></a>
															}
															else
															{
																<a href="@Url.Page("./Index", "GetFile", new { filePath = item.Path, id = Model.TaskDetails.Id })"><img class="uploaded-file" src="/common/filesvg/unknow.svg" /></a>
															}
														}
														i++;
													}
												}

											</div>
										}


										<div class="row">
											<span class="col-2" style="font-size: 11px;line-height: 22px;">@Model.TaskDetails.CreateDateFa</span>


											<button class="taskDescMore col-8" id="showMoreButton">
												<svg width="20px" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
													<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
												</svg>
											</button>
											<span class="col-2"></span>
										</div>

									</div>

									<div id="mainChat" class="mainChat">
										<div id="LoadingCard">
											<div class="px-2">
												@for (int j = 0; j < 4; j++)
												{
													bool isOdd = j % 2 != 0;
													string marginStyle = isOdd ? "margin-right: auto;" : "margin-left: auto;";

													<div class="skeleton-loader" style="height: 90px; width: 330px; @marginStyle"></div>
												}
											</div>
										</div>

										<div id="ajaxChatSection">
										</div>
									</div>

								</div>

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

				<div class="modal-footer justify-content-center align-items-center p-2 pt-0">
					<div class="row">
						<div class="col-6 text-end">
							<button type="button" class="btn-cancel2 d-flex align-items-center justify-content-center" data-bs-dismiss="modal">بستن</button>
						</div>
						@if (!Model.TaskDetails.IsDone)
						{
							<div class="col-6 text-start">
								<button id="save" type="button" class="btn-register text-white disable">ارسال</button>
							</div>
						}
					</div>
				</div>
			</div>
		</div>

	</div>
</div>






@* //Operation Task *@
<script src="~/assetsclient/libs/jalaali-js/jalaali.js"></script>
<script src="~/assetsclient/js/site.js"></script>
<script src="~/admintheme/js/jquery.mask_1.14.16.min.js"></script>
<script src="~/AssetsAdminNew/libs/wavesurfer/wavesurfer.min.js"></script>
<script src="~/assetsadminnew/libs/sweetalert2/sweetalert2.all.min.js"></script>

<script>
	var loadOperationRequestTaskDetailsAjax = '@Url.Page("./Index", "OperationRequestTaskDetailsAjax")';

	var btnAllRequestActive = @(Model.TaskDetails.AssignViewModels?.Count == 1 ? "true" : "false");
	var CountAssignViewModel = @(Model.TaskDetails.AssignViewModels?.Count);

	var antiForgeryToken = $('@Html.AntiForgeryToken()').val();

	var changeTime = '@Url.Page("./Index", "ChangeTime")';
	var AcceptTimeRequest = '@Url.Page("./Index", "AcceptTimeRequest")';
	var RejectTimeRequest = '@Url.Page("./Index", "RejectTimeRequest")';
	var RejectCancel = '@Url.Page("./Index", "RejectCancel")';
	var AcceptCancel = '@Url.Page("./Index", "AcceptCancel")';
	var RejectComplete = '@Url.Page("./Index", "RejectComplete")';
	var AcceptComplete = '@Url.Page("./Index", "AcceptComplete")';
	
	// // Tasks
	var createSaveTaskAjax = '@Url.Page("/Company/Task/Create", "CreateSaveTask")';
	var voiceSrc = '@(voice == null ? "" : @Url.Page("./Index", "ShowVoice", new { filePath = voice?.Path }))';
	var loadChatMessageAjax = '@Url.Page("./Index", "ChatMessageDetailsTask")';
	var postSaveComplete = '@Url.Page("./Index", "Complete")';
	var postCreateCancelRequest = '@Url.Page("./Index", "CreateCancelRequest")';
	var postCreateTimeRequest = '@Url.Page("./Index", "CreateTimeRequest")';
	var postCreateAssign = '@Url.Page("./Index", "CreateAssign")';
	//task ticket (ajx for edit,reject,or submit)
	var submmition = `@Url.Page("./Index", "SubmitionTaskTicketModal")`
	


	// Tickets
	var sendMsgTicketAjax = '@Url.Page("/Company/Task/Index", "SaveAdminResponseTicket")';
	var loadMessagesAjax = '@Url.Page("/Company/Task/Index", "ShowDetailTicketMessagesByAdminAjax")';
	var uploadFileTicketAjax = '@Url.Page("/Company/Task/Index", "UploadFile")';
	var deleteFileTicketAjax = '@Url.Page("/Company/Task/Index", "DeleteFile")';
	var deleteAllFilesTicketAjax = '@Url.Page("/Company/Task/Index", "RemoveAllTempFiles")';
	var urlAjaxAcceptPendingAdminResponse = '@Url.Page("/Company/Ticket/Index", "AcceptPendingAdminResponse")';
	var urlAjaxRejectPendingAdminResponse = '@Url.Page("/Company/Ticket/Index", "RejectPendingAdminResponse")';
	var urlAjaxEditPendingAdminResponse = '@Url.Page("/Company/Ticket/Index", "EditPendingAdminResponse")';

	var taskId = Number(@Model.TaskDetails.Id);
	var TicketId = Number(@Model.TaskDetails.TicketViewModel.Id);
	var UserId = @User.FindFirstValue("AccountId");

	document.getElementById('toggleSidebar').addEventListener('click', function () {
		const ticket = document.getElementById('ticketSection');
		const task = document.getElementById('taskSection');
		const arrow = this.querySelector('svg');
		ticket.classList.toggle('hide');
		task.classList.toggle('expand');
		arrow.classList.toggle('rotate');
	});

	document.getElementById('toggleSidebarMobile').addEventListener('click', function () {
		const overlay = document.getElementById('overlayTicket');
		overlay.classList.toggle('showTicket');

		const ticket = document.getElementById('ticketSection');
		ticket.classList.toggle('showTicket');
	});

	document.getElementById('closeToggleButtonMobile').addEventListener('click', function () {
		const overlay = document.getElementById('overlayTicket');
		overlay.classList.toggle('showTicket');

		const ticket = document.getElementById('ticketSection');
		ticket.classList.toggle('showTicket');
	});

	var IsActiveAction = false;
	var hideActionTaskForTicketMessage = true;
</script>

<script src="~/assetsadminnew/tasks/js/operationrequestmodal.js?ver=@adminVersion"></script>

@if (Convert.ToInt64(User.FindFirstValue("AccountId")) == Model.TaskDetails.SenderId)
{
	<script src="~/assetsadminnew/tasks/js/detailmodalSender.js?ver=@adminVersion"></script>
}
else
{
	<script src="~/assetsadminnew/tasks/js/detailmodal.js?ver=@adminVersion"></script>
}

@* tickets *@
<script src="~/assetsadminnew/ticket/js/detailTicketModal.js?ver=@adminVersion"></script>