@extends('layouts.header')
@section('content')
<!--  BEGIN CONTENT AREA  -->
 <link href="{{asset('')}}cork/HTML/ltr/DemoV3/html/src/assets/css/dark/apps/chat.css" rel="stylesheet" type="text/css" />
 <link href="{{asset('')}}cork/HTML/ltr/DemoV3/html/src/assets/css/light/apps/chat.css" rel="stylesheet" type="text/css" />
	<br />
	@php
		$ConversationOpenStatus="11772fe5-cfa6-420d-a706-60e7e86b2b21";
	@endphp
	<style>
	.whatsapp-ico{
		fill: white;
		width: 40px;
		height: 40px;
		padding: 3px;
		background-color: #4dc247;
		border-radius: 50%;
		box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
		/* box-shadow: 2px 2px 11px rgba(0,0,0,0.7); */
	}

	.whatsapp-ico:hover{
		box-shadow: 2px 2px 11px rgba(0,0,0,0.7);
	}
	</style>
	
	<div class="page-header">
		<div class="breadcrumb-four">
			<ul class="breadcrumb">
				<li><a href="{{url('dashboard')}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></a></li>
				<!-- <li><span>Create Report</span></li> -->
				<li class="active"><a href="{{url('ViewWhatsAppConversation')}}">
					</svg>View WhatsApp Conversation</a>
				</li>
					<svg viewBox="0 0 32 32" class="whatsapp-ico"><path d=" M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z" fill-rule="evenodd"></path>
			</ul>
		</div>
	</div>
	<div id="toggleAccordion" class="accordion">
		<div class="card">
			<div class="card-header" id="...">
				<section class="mb-0 mt-0">
					<div role="menu" class="collapsed" data-bs-toggle="collapse" data-bs-target="#SearchReportBy" aria-expanded="false" aria-controls="SearchReportBy">
						Filter Converation By 
							<div class="icons">
								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zoom-in"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>
							</div>
					</div>
				</section>
			</div>

			<div id="SearchReportBy" class="collapse" aria-labelledby="..." data-bs-parent="#toggleAccordion">
				<div class="card-body">
					<form id="WhatsAppFilters" name="WhatsAppFilters">
					<div class="row">
						<div class="col-md-4">
							<label>Conversation Status </label>
							<select id="ConversationStatus" name="ConversationStatus" class="form-control">
								@foreach($ConversationStatus as $EachStatusId=>$EachStatus)
									@if($ConversationOpenStatus==$EachStatusId)
										<option value="{{$EachStatusId}}" selected>{{$EachStatus}}</option>
									@else
										<option value="{{$EachStatusId}}">{{$EachStatus}}</option>
									@endif
								
								@endforeach
							</select>
						</div>
					</div>
					</form>
					<div class="row">
						<div class="col-md-12" align="center">
							<a class="btn btn-outline-success  mb-2 me-4" onclick="GetWhatsAppDetails()">
								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zoom-in"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>
								<span class="btn-text-inner">Search</span>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="DisplayWhatsAppChats"></div>

@endsection