@extends('layouts.app')

@section('content')


<div class="pagetitle">
    <h1>Blank Page</h1>
    <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="index.html">Home</a></li>
        <li class="breadcrumb-item">Pages</li>
        <li class="breadcrumb-item active">Blank</li>
      </ol>
    </nav>
  </div><!-- End Page Title -->

  <section class="section">
    <div class="row">
      <div class="col-lg-6">

        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Trimite Mesaj</h5>
            <form action="{{route('send-message')}}" method="post">
                @csrf 
                <label for="">Utilizator</label>
                <select name="user_id" id="" class="form-control">
                <option value="">Alegeti Destinatar</option>
                @php $destinations = \App\Models\Access::all(); @endphp
                @foreach($destinations as $destination)
                    <option value="{{$destination->user_id}}">{{$destination->user->username}}</option>
                @endforeach
                </select>
                <label for="">Mesaj</label>
                <textarea name="message" id="" cols="30" rows="3" class="form-control"></textarea>

                <button class="btn btn-success form-control mt-3"><i class="bi bi-envelope"></i> Trimite</button>
            </form>
          </div>
        </div>

      </div>

      <div class="col-lg-6">

        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Mesaje Primite</h5>
            <table class="table table-borderless datatable">
                <thead>
                  <tr>
                    <th scope="col">#ID</th>
                    <th scope="col">Trimis De</th>
                    <th scope="col">Mesaj</th>
                    <th scope="col">Optiuni</th>
                   
                  </tr>
                </thead>
                <tbody>
                @foreach($messages as $message)
                  <tr>
                    <th scope="row"><a href="#">#{{$message->id}}</a></th>
                    <td>{{$message->sender->username}}</td>
                    <td></td>

                    <td>
                        <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#response-modal{{$message->id}}"><i class="bi bi-envelope"></i></button>
                        <a href="{{route('destroy-message',$message->id)}}" class="btn btn-danger"><i class="bi bi-trash"></i></a>
                    </td>
                  </tr>

                <!--Response modal -->
                <div class="modal fade" id="response-modal{{$message->id}}" tabindex="-1">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title"><i class="bi bi-envelope"></i> {{$message->sender->username}}</h5>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                         <form action="{{route('response',$message->id)}}" method="post" id="response-form{{$message->id}}">
                            @csrf 

                            <label for="">Mesaj</label>
                            <textarea name="received" id="" cols="30" rows="3" class="form-control"></textarea>
                            <label for="">Raspuns</label>
                            <textarea name="message" id="" cols="30" rows="3" class="form-control"></textarea>
                        </form>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Inchide</button>
                          <button type="submit" form="response-form{{$message->id}}" class="btn btn-primary"><i class="bi bi-envelope"></i> Trimite</button>
                        </div>
                      </div>
                    </div>
                  </div><!-- End Basic Modal-->
                <!--End of response modal -->
                @endforeach
                </tbody>
            </table>
          </div>
        </div>

      </div>
    </div>
  </section>


@endsection