@extends('layouts.admin')

@section('page-header', 'Members')

@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">
        <div class="alert alert-success print-success-msg" style="display:none">
            <p></p>
        </div>
        <div class="alert alert-danger print-error-msg-adoptions" style="display:none">
             <ul></ul>
         </div>

    <form class="form-inline header-form-wrapper">

        <div class="form-group ">
            <input type="text" class="form-control" name="filter[name]"
                placeholder="Search by name" value="{{ request()->input('filter.name') }}">
        </div>

        <div class="form-group">
            <select class="form-control" name="filter[status]">
                <option value="">Status</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="" > Completed 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" type="submit">Search</button>
    </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>Mobile</th>
            <th>Is Admin</th>
            <th>Completed Training session</th>
            <th >Action</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 id="mobile"> {{$member->mobile}}</td>
                    <form>

                    <td id="mobile" >
                        <div class="d-flex item-center">
                            <input data-id="{{$member->id}}" id="toggle{{$member->id}}off" class="toggle toggle-right" name="toggle{{$member->id}}" value="false" type="radio"