@extends('layouts.app')

@section('content')
<nav aria-label="breadcrumb">
	<ol class="breadcrumb">
		<li class="breadcrumb-item">
			<a href="{{ route('emails.index') }}" class="text-decoration-none fw-bold">Emails</a>
		</li>

		<li class="breadcrumb-item active" aria-current="page">{{ $template->id }}</li>
	</ol>
</nav>

<div class="card mb-3">
	<form id="form-schedule" action="{{ route('emails.schedule') }}" method="POST">
		<div class="card-header d-flex align-items-center justify-content-between">
			<h5 class="mb-0">Email</h5>

			<button type="submit" class="btn btn-secondary text-white"><i class="fas fa-save"></i> Save</button>
		</div>

		<div class="card-body">
			<div class="container-fluid">
				<div class="row mb-3">
					<label class="col-md-2 col-form-label">Subject</label>

					<div class="col-md-10">
						<input type="text" class="form-control" name="subject" value="@if ($email){{ $email->subject }}@else{{ $template->name }}@endif">
						<div class="form-text">required</div>
					</div>
				</div>

				<div class="row mb-3">
					<label class="col-md-2 col-form-label">Schedule</label>

					<div class="col-md-10">
						<select class="form-select" name="schedule">
							@if (!$email)
							<option value="" selected disabled>Select one</option>
							@endif 

							@foreach (config('constants.email.schedules') as $key => $schedule)
							<option value="{{ $schedule }}" @if ($email and $email->schedule == $schedule){{ 'selected'}}@endif>
								{{ ucwords(str_replace('_', ' ', $key)) }}
							</option>
							@endforeach
						</select>

						<div class="form-text">required</div>
					</div>
				</div>

				<div class="row mb-3">
					<label class="col-md-2 col-form-label">Preview</label>

					<div class="col-md-10">
						<div class="img-thumbnail">
							{!! $template->versions[0]->html_content !!}
						</div>
					</div>
				</div>
			</div>
		</div>

		<input type="hidden" name="template_number" value="{{ $template->id }}">
	</form>
</div>

<div class="card">
    <form id="form-send" action="{{ route('emails.send') }}" method="POST">
        <div class="card-header d-flex align-items-center justify-content-between">
            <h5 class="mb-0">Test Send</h5>

            <button type="submit" class="btn btn-secondary text-white"><i class="fas fa-paper-plane"></i> Send</button>
        </div>

        <div class="card-body">
			<div class="container-fluid">
				<div class="row mb-3">
					<label class="col-md-2 col-form-label">Sender Email</label>

					<div class="col-md-10">
						<input type="text" class="form-control-plaintext" name="sender_email" value="{{ config('services.sendgrid.sender_email') }}" readonly>
					</div>
				</div>

				<div class="row mb-3">
					<label class="col-md-2 col-form-label">Sender Name</label>

					<div class="col-md-10">
						<input type="text" class="form-control" name="sender_name">
						<div class="form-text">required</div>
					</div>
				</div>

				<div class="row mb-3">
					<label class="col-md-2 col-form-label">Recipient Email</label>

					<div class="col-md-10">
						<input type="text" class="form-control" name="recipient_email">
						<div class="form-text">required</div>
					</div>
				</div>

				<div class="row mb-3">
					<label class="col-md-2 col-form-label">Recipient Name</label>

					<div class="col-md-10">
						<input type="text" class="form-control" name="recipient_name">
						<div class="form-text">required</div>
					</div>
				</div>

				<div class="row mb-3">
					<label class="col-md-2 col-form-label">Subject</label>

					<div class="col-md-10">
						<input type="text" class="form-control" name="subject">
						<div class="form-text">required</div>
					</div>
				</div>

				<div class="row mb-3">
					<label class="col-md-2 col-form-label">Placeholders</label>

					<div class="col-md-10">
						<textarea class="form-control" name="placeholders" style="height: 10rem;">
{
   "first_name":"Timothy",
   "last_name":"Lee",
   "order_number":"#00001",
   "payment_status":"paid"
}
						</textarea>
						<div class="form-text">required</div>
					</div>
				</div>
            </div>
        </div>

		<input type="hidden" name="template_number" value="{{ $template->id }}">
    </form>
</div>
@endsection

@section('js')
<script>
	$('#form-schedule').submit(function(e)
	{
		e.preventDefault();

		const form = $(this);

		$.ajax({
			url: $(this).attr('action'),
			type: $(this).attr('method'),
			data: $(this).serialize(),
			dataType: 'json'

		}).done(function(res)
		{
			showNoty(res);
		});
	});

	$('#form-send').submit(function(e)
	{
		e.preventDefault();

		const form = $(this);

		$.ajax({
			url: $(this).attr('action'),
			type: $(this).attr('method'),
			data: $(this).serialize(),
			dataType: 'json'

		}).done(function(res)
		{
			showNoty(res);

			if (res.status == 'success')
			{
				form[0].reset();
			}
		});
	});
</script>
@endsection