@extends('layouts.admin')

@section('page-header', 'Send Mails')

@section('styles')
<style>
      div.dataTables_wrapper {
        width: 800px;
        margin: 0 auto;
    }


    body,html{
    background: #efefef;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    z-index: -1;
}

.btn{
    border: 3px solid #1a1a1a;
    display: inline-block;
    padding: 10px;
    position: relative;
    text-align: center;
    transition: background 600ms ease, color 600ms ease;
}

input[type="radio"].toggle {
    display: none;
    & + label{
        cursor: pointer;
        min-width: 60px;
        &:hover{
            background: none;
            color: #1a1a1a;
        }
        &:after{
            background: #1a1a1a;
            content: "";
            height: 100%;
            position: absolute;
            top: 0;
            transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
            width: 100%;
            z-index: -1;
        }
    }
    &.toggle-left + label {
        border-right: 0;
        &:after{
            left: 100%
        }
    }
    &.toggle-right + label{
        margin-left: -5px;
        &:after{
            left: -100%;
        }
    }
    &:checked + label {
        cursor: default;
        color: #fff;
        transition: color 200ms;
        &:after{
            left: 0;
        }
    }
}

</style>
@endsection

@section('content')
    <div class="white-component">
        @if ($msg = Session::get('success'))
        <div class="alert alert-success alert-block">
            <button type="button" class="close" data-dismiss="alert">×</button>

            <strong>{{ $msg }}</strong>
        </div>
        @endif
        @if ($error = Session::get('error'))
        <div class="alert alert-danger alert-block">
            <button type="button" class="close" data-dismiss="alert">×</button>

            <strong>{{ $error }}</strong>
        </div>
        @endif

    <form id="filter_form">
        <div class="form-group row">

        </div>
          <div class="form-group">
            <label for="subject">Subject:</label>
            <input type="text" class="form-control required_field" id="subject" value="{{ request()->input('subject') }}" name="subject">
            <div class="invalid-feedback">Please enter a subject for your email.</div>
          </div>

          <div class="form-group">
            <label for="message">Message:</label>
            <textarea class="form-control"  id="editor" name="message" tabindex="0" >{{ request()->input('message') }}</textarea>
            <div class="invalid-feedback">Please enter a message for your email.</div>
          </div>

          <div class="form-inline header-form-wrapper">
              
                      {{-- <div class="form-group ">
                          <input type="text" class="form-control" name="filter[name]"
                              placeholder="Filter by name" value="{{ request()->input('filter.name') }}">
                      </div> --}}
                      <div class="form-group ">
                          <input type="text" class="form-control" name="filter[country]"
                              placeholder="Filter by country" value="{{ request()->input('filter.country') }}">
                      </div>
                      {{-- <div class="form-group ">
                          <input type="text" class="form-control" name="filter[city]"
                              placeholder="Filter by city" value="{{ request()->input('filter.city') }}">
                      </div>
                      <div class="form-group ">
                          <input type="text" class="form-control" name="filter[email]"
                              placeholder="Filter by email" value="{{ request()->input('filter.email') }}">
                      </div>
                      <div class="form-group ">
                          <input type="text" class="form-control" name="filter[province]"
                              placeholder="Filter by state" value="{{ request()->input('filter.province') }}">
                      </div> --}}
              
                      <div class="form-group">
                          <select class="form-control" name="filter[status]">
                              <option value="">Status</option>
                              <option value="{{ App\USER::STATUS_PENDING_APPROVAL }}"
                                  @if (request()->input('filter.status') === App\USER::STATUS_PENDING_APPROVAL) selected @endif>Pending</option>
                              <option value="{{ App\USER::STATUS_ACTIVE }}"
                                  @if (request()->input('filter.status') === App\USER::STATUS_ACTIVE) selected @endif>Active</option>
                              <option value="{{ App\USER::STATUS_INACTIVE }}"
                                  @if (request()->input('filter.status') === App\USER::STATUS_INACTIVE) selected @endif>Inactive</option>
                          </select>
              
                      </div>
                      {{-- <div class="form-group">
                          <select class="form-control" name="filter[training_session_id]">
                              <option  value="" > Preferred Training Session </option>
                              @foreach($sessions as $session)
                                      <option value="{{$session->id}}"
                                          @if (request()->input('filter.training_session_id') == $session->id) selected @endif
                                          >
                                      {{\Carbon\Carbon::parse($session->start_date)->format('jS F').' - '.
                                          \Carbon\Carbon::parse($session->end_date)->format('jS F Y')
                                          .'  '.$session->location}}</option>
                              @endforeach
                          </select>
              
                      </div> --}}
                      <button class="btn btn-primary ml-3" type="submit" value="filter">Filter</button>
                      <button class="btn btn-success ml-3" type="submit" value="submit">Send</button>
                      
          </div>
    </form>

    <table id="example" class="table table-striped table-bordered" style="width:100%">
     <thead>
     <th>Member</th>
            <th>Country</th>
            <th>State</th>
            <th>City</th>
            <th>Status</th>
        </thead>
        <tbody>
        @forelse ($members as $member)
           
                <tr>
                    <td id="fname">
                        <a href="{{ route('profile.show',$member->id) }}" class="">{{ $member->name }}</a>
                        <br>
                        <a href="mailto:{{ $member->email }}">{{ $member->email }}</a>
                    </td>

                    <td id=""> {{$member->country}}</td>
                    <td id=""> {{$member->province}}</td>

                    <td id="city"> {{$member->city}}</td>
                    <td>
                        @if($member->status == App\USER::STATUS_PENDING_APPROVAL)
                            Pending
                        @elseif($member->status == App\USER::STATUS_ACTIVE)
                            Approved 
                        @else
                            Inactive
                        @endif
                    </td>
                </tr>
           
        @empty
            <tr>
                <td><div class="no-data">No Members</div></td>
            </tr>
        @endforelse
        </tbody>
        
    </table>


    {{ $members->appends(request()->except('page'))->links() }}
</div>
@endsection
@section('scripts')
<script>
$.ajaxSetup({
    headers: { 'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content }
});

$(function() {
    
    $('button[type="submit"]').click(function() {
      var action = $(this).val();
      $('.required_field').attr('required',  action == 'submit' ? true : false);
      $('#filter_form').attr('action', action == 'submit' ? "{{ route('admin.mail.send') }}" : "");
    });
  });



$(document).ready(function() {
  $('#example').DataTable({
    columnDefs: [
    {bSortable: false, targets: [3,4,5,6]} 
  ],
  "bPaginate": false

  });
} );

</script>
@endsection