@extends('layouts.customer')

@section('title')
   Click & Get
@endsection

@section('content')
<div class="py-5"></div>
<div class="container">
    <!--Section: Contact v.2-->
    <section class="mb-4">
        <!--Section heading-->
        <h2 class="h1-responsive font-weight-bold text-center my-4">Contact us</h2>
        <!--Section description-->
        <p class="text-center w-responsive mx-auto mb-5">Do you have any questions? Please do not hesitate to contact us directly. Our team will come back to you within a matter of hours to help you.</p>

        <div class="row">
            <!--Grid column-->
            <div class="col-md-9 mb-md-0 mb-5">
                <div class="messages-container">
                    @foreach($messages as $message)
                        <div class="message {{ $message->user_id == Auth::id() ? 'sender' : 'receiver' }}">
                            <div class="message-content">{{ $message->message }}</div>
                        </div>
                    @endforeach
                </div>
                <form action="/submitMessage" method="POST">
                    @csrf
                    <!--Grid row-->
                    <div class="row">
                        <!--Grid column-->
                        <div class="col-md-6">
                            <div class="md-form mb-0">
                                <input type="hidden" id="user_id" name="user_id" value="{{ Auth::id() }}">
                                <input type="hidden" id="name" name="name"  value="{{ auth()->user()->name }}" required class="form-control">
                            </div>
                        </div>
                        <!--Grid column-->

                        <!--Grid column-->
                        <div class="col-md-6">
                            <div class="md-form mb-0">
                                <input type="hidden" id="email" value="{{ auth()->user()->email }}"  name="email" required class="form-control">
                            </div>
                        </div>
                        <!--Grid column-->
                    </div>
                    <!--Grid row-->

                    <!--Grid row-->
                    <div class="row">
                        <!--Grid column-->
                        <div class="col-md-12">
                            <div class="md-form">
                                <textarea id="message" name="message" required rows="2" class="form-control md-textarea"></textarea>
                                <label for="message">Message</label>
                            </div>
                        </div>
                    </div>
                    <!--Grid row-->

                    <div class="text-center text-md-left">
                        <button class="w-100 p-2 btn btn-outline-primary" type="submit">SEND MESSAGE</button>
                    </div>
                </form>
            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-md-3 text-center">
                <ul class="list-unstyled mb-0">
                    <li><i class="fas fa-map-marker-alt fa-2x"></i>
                        <p>Central Mindanao University</p>
                    </li>
                    <li><i class="fas fa-phone mt-4 fa-2x"></i>
                        <p>+65965 933 44337</p>
                    </li>
                    <li><i class="fas fa-envelope mt-4 fa-2x"></i>
                        <p>admin@gmail.com</p>
                    </li>
                </ul>
            </div>
            <!--Grid column-->
        </div>
    </section>
    <!--Section: Contact v.2-->
</div>
<div class="py-5"></div>
@endsection