@extends('layouts.parents.master') 
@section('title')
    {{studentCommonName(auth()->guard('student')->user()->username).__(' | Mail Box')}}
@endsection
@section('headerTitle')
  {{__('Mail Box')}}
@endsection
@section('content')
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <!-- <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{route('student.parent.dashboard')}}">Home</a></li>
              <li class="breadcrumb-item active">Mail Box</li>
            </ol>
          </div>
        </div>
      </div>
    </section> -->
    <!-- Main content -->
  
    <section class="content">
        <div class="container-fluid">
            <a href="#" class="btn btn-success compose-email">Compose</a>
            <div class="row">
                
                <div class="col-12">
                    <div class="card">
                       
                        <!-- /.card-header -->
                        <div class="card-body">
                            <table id="emailInbox" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Emails</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($responseData as $key)
                                    @php
                                        $r = date("d-M-y",strtotime($key->date));
                                        $sr = $r.' @ '.$key->time;
                                        $ssubject = $key->subject;
                                        $ssubject=htmlspecialchars($ssubject, ENT_QUOTES, 'UTF-8');
                                        $sreply = SUBSTR($key->reply,0,100).'..';
                                        $textMessages = "To :[".$key->sentto."]-".$sr."<br><br><b>".$ssubject."</b>";
                                        if($key->pattach != '') {
                                        $textMessages .= "<a target='_blank' href='".$key->pattach."'> Attachment Sent</a>";
                                        }
                                        $textMessages .=  "<br><br>Reply:<br>".$sreply;

                                        if($key->sattach) {
                                            $textMessages .=  "<br><br><a target='_blank' href='".$key->sattach."'>Attachment Received</a>";
                                        }

                                    @endphp
                                    <tr>
                                        <td>{!! $textMessages !!}</td>
                                        <td><a href="#" class="btn btn-success view-email" data-id="{{$key->id}}">View</a> | <a href="#" class="btn btn-primary edit-email" data-id="{{$key->id}}">Edit</a> | <a href="#" class="btn btn-danger delete-email" data-id="{{$key->id}}">Delete</a></td>
                                    </tr>
                                @endforeach
                            </tbody>
                            </table>
                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>
            </div>
        </div>
    </section>
</div> 
<div class="modal fade" id="composeMailModal" tabindex="-1" role="dialog" aria-labelledby="composeMailModal" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title" id="composeMailModal">Compose Mail</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                  </button>
              </div>
              <form id="composeEmailForm" action="{{route('student.parent.save-email')}}" method="post" enctype="multipart/form-data"> 
                <input type="hidden" name="id" value="">
                <div class="modal-body">
                    <div class='form-row'>
                        <div class='form-group col-md-12'>
                            <label for='smarkto'>Send to:</label>
                            <select name='smarkto' id='smarkto' class='form-control' required>
                                <option value=''>Select Send To</option>
                                <option value='Principal'>Principal</option>
                                <option value='Office'>Office</option>
                                <option value='Hostel'>Hostel</option>
                                <option value='Accounts'>Accounts</option>
                            </select>
                        </div>
                    </div>
                    <div class='form-row'>
                        <div class='form-group col-md-12'>
                            <label for='smarkto'>Subject</label>
                            <input type='text' class='form-control' required name='ssubject' placeholder='Enter Subject'>
                        </div>
                    </div> 
                    <div class='form-row'>
                        <div class='form-group col-md-12'>
                            <label for='smarkto'>Detail:</label>
                            <textarea class='form-control' required name='sdetail' rows='7' placeholder='Enter detail'></textarea>
                        </div>
                    </div>   
                    <div class='form-row'>
                        <div class='form-group col-md-12'>
                            <label for='pattach'>Attachment</label>
                            <input type='text' class='form-control' name='pattach' placeholder='Paste the Link here'>
                            <a target='_blank' href='https://postimages.org'>Attach link and paste the <b>LINK</b> above</a>
                        </div>
                    </div>      
                    <div class="modal-footer">
                        <input type='submit' name='submit' class='btn btn-info btn-large' value='Submit'>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>              
                </div>
             </form>   
          </div>
      </div>
  </div>
  <div class="modal fade" id="viewComposeMailModal" tabindex="-1" role="dialog" aria-labelledby="viewComposeMailModal" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title" id="composeMailModal">View Mail</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                  </button>
              </div>
              <form id="viewComposeEmailForm" action="{{route('student.parent.save-email')}}" method="post" enctype="multipart/form-data"> 
                <input type="hidden" name="id" value="">
                <div class="modal-body">
                    <div class='form-row'>
                        <div class='form-group col-md-6'>
                            <label for='smarkto'>Send to:</label>
                            <input type='text' class='form-control' required name='smarkto' placeholder='Enter Subject' readonly>
                        </div>
                        <div class='form-group col-md-6'>
                            <label for='smarkto'>Subject</label>
                            <input type='text' class='form-control' required name='ssubject' placeholder='Enter Subject' readonly>
                        </div>
                    </div>
                    <div class='form-row'>
                        <div class='form-group col-md-12'>
                            <label for='smarkto'>You query:</label>
                            <textarea class='form-control' required name='sdetail' rows='7' placeholder='Enter detail' readonly></textarea>
                        </div>
                    </div>   
                    <div class='form-row'>
                        <div class='form-group col-md-12'>
                            <label for='pattach'>Attachment</label>
                            <input type='text' class='form-control' name='pattach' placeholder='Paste the Link here' readonly>
                        </div>
                    </div>
                    <div class='form-row'>
                        <label for='smarkto'>Reply:</label>
                        <textarea class='form-control' required name='sreply' rows='7' placeholder='Reply Here' readonly></textarea>
                    </div>       
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>              
                </div>
             </form>   
          </div>
      </div>
  </div>  
@endsection
@push('web-scripts')
   <script>
        $(document).ready(async function() {
            $('#emailInbox').DataTable({
               "ordering": false
            });
        });

        $(".compose-email").on("click", function(e){
            e.preventDefault();
            $("#composeMailModal").modal('toggle');
            $("#composeEmailForm input[name='id']").val('');
        });   
        
        $('#composeEmailForm').on('submit', async function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const submitButton = $('#composeEmailForm input[type="submit"]');
            const originalText = submitButton.val();
            const options = {
                type:  $(this).attr('method'),
                data: formData,
                contentType: false,
                processData: false,
                url:  $(this).attr('action'),
                headers: { Accept: "application/json" },
                dataType:'json',
                beforeSend: function () {
                    $('.invalid-feedback').remove();
                    $('.is-invalid').removeClass('is-invalid');
                    submitButton.prop('disabled', true).val('Submitting...'); 
                },
                complete: function () {
                    submitButton.prop('disabled', false).val(originalText);
                }
            };
            try {
                if ($(this).valid()) { 
                    const response = await ajaxRequest(options);
                    if(response.success) {
                        $.NotificationApp.successMessageWithReload(response.message, true)
                    }
                }
            } catch (error) {
                console.log(error.xhr.responseJSON.message);
                alert(error.xhr.responseJSON.message);
            }    
        }); 

        $(document).on('click', '.edit-email', async function(e) {
            e.preventDefault();
            let id = $(this).data('id');
            const options = {
                type:  'POST',
                data: {id:id},
                url:  "{{route('student.parent.edit-email')}}",
                headers: { Accept: "application/json" },
                dataType:'json',
            };
            try {
                const response = await ajaxRequest(options);
                if(response.success) {
                    $("#composeEmailForm input[name='id']").val(response.data.id)
                    $("#composeEmailForm select[name='smarkto']").val(response.data.sentto).trigger("change")
                    $("#composeEmailForm input[name='ssubject']").val(response.data.subject)
                    $("#composeEmailForm textarea[name='sdetail']").val(response.data.detail)
                    $("#composeEmailForm input[name='pattach']").val(response.data.pattach)
                    $("#composeMailModal").modal('toggle');
                } else {
                    $.NotificationApp.errorMessage(response.message);
                }
            } catch (error) {
                console.log(error);
                alert(error.xhr.responseJSON.message);
            }    
        });

        $(document).on("click", ".delete-email", async function(e) {
            e.preventDefault();
            let id = $(this).data('id');
            Swal.fire({
                title: 'Warning!',
                text: 'Are you sure you want to delete email?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                cancelButtonText: 'No',
                confirmButtonText: 'Yes'
            }).then(async (result) => {
                if (result.isConfirmed) {
                    const options = {
                        type:  'POST',
                        data: {id:id},
                        url:  "{{route('student.parent.delete-email')}}",
                        headers: { Accept: "application/json" },
                        dataType:'json',
                    };
                    try {
                        const response = await ajaxRequest(options);
                        if(response.success) {
                            $.NotificationApp.successMessageWithReload(response.message, true)
                        } else {
                            $.NotificationApp.errorMessage(response.message);
                        }
                    } catch (error) {
                        console.log(error);
                        alert(error.xhr.responseJSON.message);
                    }    
                }
            });
        });
        $(document).on('click', '.view-email', async function(e) {
            e.preventDefault();
            let id = $(this).data('id');
            const options = {
                type:  'POST',
                data: {id:id},
                url:  "{{route('student.parent.edit-email')}}",
                headers: { Accept: "application/json" },
                dataType:'json',
            };
            try {
                const response = await ajaxRequest(options);
                if(response.success) {
                    $("#viewComposeEmailForm input[name='id']").val(response.data.id);
                    $("#viewComposeEmailForm input[name='smarkto']").val(response.data.sentto);
                    $("#viewComposeEmailForm input[name='ssubject']").val(response.data.subject);
                    $("#viewComposeEmailForm textarea[name='sdetail']").val(response.data.detail);
                    $("#viewComposeEmailForm input[name='pattach']").val(response.data.pattach);
                    $("#viewComposeEmailForm textarea[name='sreply']").val(response.data.reply);
                    $("#viewComposeMailModal").modal('toggle');
                } else {
                    $.NotificationApp.errorMessage(response.message);
                }
            } catch (error) {
                console.log(error);
                alert(error.xhr.responseJSON.message);
            }    
        });
   </script>
@endpush