@extends('layouts.admin')

@section('content')

<div class="page-wrapper">
	<div class="content">
		<div class="page-header">
			<div class="add-item d-flex">
				<div class="page-title">
					<h4>{{ __('messages.Connected Clients') }}</h4>
					<h6>{{ __('messages.Manage your clients') }}</h6>
				</div>
			</div>
		</div>

		<!-- /product list -->
		<div class="card">
			<div class="card-body pb-0">
				<div class="table-top table-top-two table-top-new">
					
					<div class="search-set mb-0">
						<div class="total-employees">
							<h6><i data-feather="users" class="feather-user"></i>
								{{ __('messages.Total Connected Clients') }} <span>{{ $clients->count() }}</span></h6>
						</div>
						<div class="search-input">
							<a href="" class="btn btn-searchset"><i data-feather="search" class="feather-search"></i></a>
							<input type="search" class="form-control">
						</div>
						
					</div>
				</div>
			</div>
		</div>
		<!-- /product list -->

		
		<div class="employee-grid-widget">
			<div class="row">	
				@if($clients->count() > 0)
		        @foreach($clients as $client)
				<div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6">
					<div class="employee-grid-profile">
						<div class="profile-info">
							<div class="profile-pic">
								<img src="{{ Storage::disk('s3')->url('avatar/'.$client->client->avatar) }}" alt="">
							</div>

							<h4>{{ $client->client->first_name }} {{ $client->client->last_name }}</h4>
							<span>{{ $client->client->email }}</span>
						</div>
						<ul class="department">
							<li>
								{{ __('messages.Joined') }}
								<span>{{ date('d M Y', strtotime($client->client->created_at)) }}</span>
							</li>
							<li style="text-align: right;">
								<a href="{{ route('accountant.client', $client->client_id) }}"
								class="btn btn-sm btn-primary">{{ __('messages.View Details') }}</a>
								<br>
								<button class="btn btn-sm btn-secondary mt-1" data-bs-toggle="modal" data-bs-target="#messageModal" 
							        onclick="openMessageModal('{{ $client->client_id }}')">
							        {{ __('messages.Send Message') }}
							    </button>
							</li>
						</ul>
					</div> 
				</div>
		        @endforeach
		        @endif
			</div>
		</div>
	</div>
</div>

<div id="messageModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('messages.Send Message') }}</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="messageForm" action="{{ route('send.message') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="client_id" id="modal_client_id">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="subject">{{ __('messages.Subject') }}</label>
                        <input type="text" class="form-control" id="subject" name="subject" required>
                    </div>
                    <div class="form-group">
                        <label for="message">{{ __('messages.Message') }}</label>
                        <textarea class="form-control" id="message" name="message" rows="4" required></textarea>
                    </div>
                    <div class="form-group">
                        <label for="attachment">{{ __('messages.Attachment') }} ({{ __('messages.Optional') }})</label>
                        <input type="file" class="form-control" id="attachment" name="attachment">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('messages.Close') }}</button>
                    <button type="submit" class="btn btn-primary">{{ __('messages.Send') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

<script>
    function openMessageModal(clientId) {
        document.getElementById('modal_client_id').value = clientId;
    }
</script>