@extends('layouts.admin')

@section('style')
    @parent
    <link rel="stylesheet" href="/css/test.css">
    <style>
        .answer {
            font-style: italic;
        }

        h5 {
            margin-bottom: 0;
        }

        .question {
            padding: 15px 0;
        }

        .five .form-inputs .form-group {
            display: block;
        }

        .form-inputs img {
            width: 100px;
        }
    </style>
@endsection

@section('content')
<div class="row">
      
    <div class="col-md-12">
      <div class="card">
          <div class="card-header">
            <h4 class="card-title">Answers <strong>{{ $user['name'] }}</strong> - <strong>{{ $user['email'] }}</strong></h4>
            @if (isset($user['status']))
                @if ($user['status'] == 'rejected')
                    <h3>REJECTED</h3>
                @else
                    <h3>ACCEPTED</h3>
                @endif
                
            @else
                <button class="btn btn-danger response" data-type="reject" data-user="{{ $user['email'] }}" {{ isset($user['status']) ? 'disabled' : '' }}>Reject</button>
                <button class="btn btn-success response" data-type="accept" data-user="{{ $user['email'] }}" {{ isset($user['status']) ? 'disabled' : '' }}>Accept</button>
            @endif
            
          </div>
          <div class="card-body">
            @if (count($answer))
                <div class="question">
                    <h5 class="question-text">1. World Food Day is celebrated on the 16th of October every year and is a day of action dedicated to tackling global hunger. Cravvings is a platform that connects people to food vendors around them and allows them share their experiences by leaving reviews.</h5>
                    <div class="form-group">
                        <label htmlFor="cel-post">Come up with a celebratory post for Cravvings to celebrate World Food Day</label>
                        <div class="answer">
                            {{ $answer[0]['wfd'] ?? '' }}
                        </div>
                    </div>
                    <div class="form-group">
                        <label htmlFor="on-off">Come up with offline and online activities Cravvings can do to celebrate World Food Day</label>
                        <div class="answer">
                            {{ $answer[0]['offline'] ?? '' }}
                        </div>
                    </div>
                    
                </div>
                @isset($answer[1])
                    <div class="question">
                        <h5 class="question-text">2. What brand’s content do you like and why?</h5>
                        <div class="form-group">
                            <div class="answer">
                                {{ $answer[1]['brandcontent'] ?? '' }}
                            </div>
                        </div>
                    </div>
                @endisset
                @isset($answer[2])
                    <div class="question">
                        <h5 class="question-text">3. Share three alternative uses for a pen</h5>
                        <div class="form-group">
                            <label htmlFor="penone">Use Case 1</label>
                            <div class="answer">
                                {{ $answer[2]['penone'] ?? '' }}
                            </div>
                        </div>
                        <div class="form-group">
                            <label htmlFor="penone">Use Case 2</label>
                            <div class="answer">
                                {{ $answer[2]['pentwo'] ?? '' }}
                            </div>
                        </div>
                        <div class="form-group">
                            <label htmlFor="penone">Use Case 3</label>
                            <div class="answer">
                                {{ $answer[2]['penthree'] ?? '' }}
                            </div>
                        </div>
                    </div>
                @endisset
                @isset($answer[3])
                    <div class="question">
                        <h5 class="question-text">4. What’s one cost-effective thing we can do to create more awareness for Cravvings?</h5>
                        <div class="form-group">
                            <div class="answer">
                                {{ $answer[3]['brand'] ?? '' }}
                            </div>
                        </div>
                    </div>
                @endisset
                @isset($answer[4])
                <div class="question five">
                    <h5 class="question-text">5. Caption these</h5>
                    <div class="form-inputs">
                    <div class="form-group">
                        <label htmlFor="cap-one">
                            <img src="/images/test/caption1.jpg" alt="Caption One"/>
                        </label>
                        <div class="answer">
                            {{ $answer[4]['captionone'] ?? '' }}
                        </div>
                    </div>
                    <div class="form-group">
                        <label htmlFor="cap-two">
                            <img src="/images/test/caption2.png" alt="Caption two"/>
                        </label>
                        <div class="answer">
                            {{ $answer[4]['captiontwo'] ?? '' }}
                        </div>
                    </div>
                    <div class="form-group">
                        <label htmlFor="cap-three">
                            <img src="/images/test/caption3.png" alt="Caption three"/>
                        </label>
                        <div class="answer">
                            {{ $answer[4]['captionthree'] ?? '' }}
                        </div>
                    </div>
                    <div class="form-group">
                        <label htmlFor="cap-four">
                            <img src="/images/test/caption4.jpg" alt="Caption four"/>
                        </label>
                        <div class="answer">
                            {{ $answer[4]['captionfour'] ?? '' }}
                        </div>
                    </div>
                    </div>
                </div>
                @endisset
            @endif
          </div>
      </div>
      </div>
  </div>
@endsection

@section('scripts')
    <script>
        document.querySelectorAll('.response').forEach(resp => {
            resp.addEventListener('click', function(e) {
                const {user, type} = e.target.dataset;
                const headers = {
                    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('value'),
                    'X-Requested-With': 'XMLHttpRequest'
                }
                
                const con = confirm('Are you sure?');
                if(con){
                    fetch(`/admin/tester/${type}`, {method: 'POST', credentials: 'same-origin', body: JSON.stringify({email: user}), headers})
                    .then(response => response.json())
                    .then(res => {
                        if(res.status === 'success') {
                            e.target.textContent = res.message;
                        }
                    })
                    .catch(error => console.error(error))
                }
            });
        });
    </script>
@endsection