@extends('layouts.portal.app')
	@section('content')
		<div class="content-wrapper">
			<div class="container-xxl flex-grow-1 container-p-y">
				<div class="card">
					<h4 class="breadcrumb ml-3"> <span class="text-muted fw-light breadcrumb-link"> Home /</span> Bulk Messages - {{ number_format($companyBulkMessages->total()) }} records fetched </h4>

					@if(Session::has('errorResponse')) 
						<h6 class="row"> 
							<div class="col-md-12 temporary-alert">
								<div class="alert alert-danger alert-dismissible" role="alert"> <i class="fa fa-info-circle"></i> {!! Session::has('errorResponse') ? Session::get("errorResponse") : '' !!} <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> </button> </div>
							</div>
						</h6>
					@endif
					
					<div class="card-header d-flex border-top rounded-0 flex-wrap py-2">
						<div class="ms-auto d-flex justify-content-start justify-content-md-end align-items-baseline pull-right">
							<a href="javascript:;" class="btn btn-outline-primary ms-2 ms-sm-0 waves-effect waves-light create-company-bulk-message disabled-btn"><span><i class="ti ti-plus me-0 me-sm-1 ti-xs"></i> <span class="d-none d-sm-inline-block"> Send </span> Message </span></a> 
						</div>
					</div>

					<div class="card-datatable table-responsive text-nowrap">
						<table class="table">
							<thead class="border-top">
								<tr>
									<th> # </th>
									<th> Message Mode </th>
									<th> Recipient </th>
									<th> Message </th>
									<th> Date Sent </th>
									<th> Actions </th>
								</tr>
							</thead>

							<tbody>
								@foreach($companyBulkMessages as $companyBulkMessage)
									<tr>
										<td> <a href="javascript:;" class="text-success company-bulk-message-summary{{ $companyBulkMessage->id }}"> {{ $companyBulkMessage->ref_no }} </a> </td>

										<td> {{ $companyBulkMessage->messageMode->name?? '' }} </td>

										<td> {{ $companyBulkMessage->phone }} </td>

										<td> {{ Str::limit($companyBulkMessage->content, 25) }} </td>

										<td> {{ \Carbon\Carbon::parse($companyBulkMessage->created_at)->format('d M Y') }} at {{ \Carbon\Carbon::parse($companyBulkMessage->created_at)->format('h:i A') }} </td>

										<td> 
											<a href="{{ $companyBulkMessage->id }}" class="delete-company-bulk-message disabled-btn text-danger"> <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="icon icon-tabler icons-tabler-outline icon-tabler-trash"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7l16 0" /><path d="M10 11l0 6" /><path d="M14 11l0 6" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg> </a>
										</td>
									</tr>	

									@include('portal.companies.bulk-messages.summary')

									<script type="text/javascript">
										document.addEventListener('DOMContentLoaded', function()
										{
											$('.company-bulk-message-summary{{ $companyBulkMessage->id }}').click(function(e)
											{
												e.preventDefault();

												$('#company-bulk-message-summary{{ $companyBulkMessage->id }}').offcanvas("toggle");
											});
										});
									</script>
								@endforeach
							</tbody>
						</table>

						{{ $companyBulkMessages->render() }}
					</div>
				</div>
			</div>
		</div>

		@include('portal.companies.bulk-messages.delete')
		<script type="text/javascript" src="{{ url('custom/companies/bulk-messages/delete.js') }}"></script>
	@endsection