<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            <i class="fa fa-file-text-o"></i> {!! trans('profile::profile.name') !!} <small> {!! trans('app.manage') !!} {!! trans('profile::profile.names') !!}</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="{!! guard_url('/') !!}"><i class="fa fa-dashboard"></i> {!! trans('app.home') !!} </a></li>
            <li class="active">{!! trans('profile::profile.names') !!}</li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
    <div id='profile-profile-entry'>
    </div>
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                    <li class="{!!(request('status') == '')?'active':'';!!}"><a href="{!!guard_url('profile/profile')!!}">{!! trans('profile::profile.names') !!}</a></li>
                    <li class="{!!(request('status') == 'archive')?'active':'';!!}"><a href="{!!guard_url('profile/profile?status=archive')!!}">Archived</a></li>
                    <li class="{!!(request('status') == 'deleted')?'active':'';!!}"><a href="{!!guard_url('profile/profile?status=deleted')!!}">Trashed</a></li>
                    <li class="pull-right">
                    <span class="actions">
                    <!--   
                    <a  class="btn btn-xs btn-purple"  href="{!!guard_url('profile/profile/reports')!!}"><i class="fa fa-bar-chart" aria-hidden="true"></i><span class="hidden-sm hidden-xs"> Reports</span></a>
                    @include('profile::admin.profile.partial.actions')
                    -->
                    @include('profile::admin.profile.partial.filter')
                    @include('profile::admin.profile.partial.column')
                    </span> 
                </li>
            </ul>
            <div class="tab-content">
                <table id="profile-profile-list" class="table table-striped data-table">
                    <thead class="list_head">
                        <th style="text-align: right;" width="1%"><a class="btn-reset-filter" href="#Reset" style="display:none; color:#fff;"><i class="fa fa-filter"></i></a> <input type="checkbox" id="profile-profile-check-all"></th>
                        <th data-field="email">{!! trans('profile::profile.label.email')!!}</th>
                    <th data-field="gender">{!! trans('profile::profile.label.gender')!!}</th>
                    <th data-field="candidate_name">{!! trans('profile::profile.label.candidate_name')!!}</th>
                    <th data-field="marital_status">{!! trans('profile::profile.label.marital_status')!!}</th>
                    <th data-field="age">{!! trans('profile::profile.label.age')!!}</th>
                    <th data-field="city_id">{!! trans('profile::profile.label.city_id')!!}</th>
                    <th data-field="religion">{!! trans('profile::profile.label.religion')!!}</th>
                    <th data-field="caste">{!! trans('profile::profile.label.caste')!!}</th>
                    <th data-field="complexion">{!! trans('profile::profile.label.complexion')!!}</th>
                    <th data-field="education">{!! trans('profile::profile.label.education')!!}</th>
                    <th data-field="employment_type">{!! trans('profile::profile.label.employment_type')!!}</th>
                    <th data-field="occupation">{!! trans('profile::profile.label.occupation')!!}</th>
                    <th data-field="star">{!! trans('profile::profile.label.star')!!}</th>
                    <th data-field="profile_status">{!! trans('profile::profile.label.profile_status')!!}</th>
                    <th data-field="expires_at">{!! trans('profile::profile.label.expires_at')!!}</th>
                    <th data-field="published">{!! trans('profile::profile.label.published')!!}</th>
                    <th data-field="plan">{!! trans('profile::profile.label.plan')!!}</th>
                    </thead>
                </table>
            </div>
        </div>
    </section>
</div>

<script type="text/javascript">

var oTable;
var oSearch;
$(document).ready(function(){
    app.load('#profile-profile-entry', '{!!guard_url('profile/profile/0')!!}');
    oTable = $('#profile-profile-list').dataTable( {
        'columnDefs': [{
            'targets': 0,
            'searchable': false,
            'orderable': false,
            'className': 'dt-body-center',
            'render': function (data, type, full, meta){
                return '<input type="checkbox" name="id[]" value="' + data.id + '">';
            }
        }], 
        
        "responsive" : true,
        "order": [[1, 'asc']],
        "bProcessing": true,
        "sDom": 'R<>rt<ilp><"clear">',
        "bServerSide": true,
        "sAjaxSource": '{!! guard_url('profile/profile') !!}',
        "fnServerData" : function ( sSource, aoData, fnCallback ) {

            $.each(oSearch, function(key, val){
                aoData.push( { 'name' : key, 'value' : val } );
            });
            app.dataTable(aoData);
            $.ajax({
                'dataType'  : 'json',
                'data'      : aoData,
                'type'      : 'GET',
                'url'       : sSource,
                'success'   : fnCallback
            });
        },

        "columns": [
            {data :'id'},
            {data :'email'},
            {data :'gender'},
            {data :'candidate_name'},
            {data :'marital_status'},
            {data :'age'},
            {data :'city_id'},
            {data :'religion'},
            {data :'caste'},
            {data :'complexion'},
            {data :'education'},
            {data :'employment_type'},
            {data :'occupation'},
            {data :'star'},
            {data :'profile_status'},
            {data :'expires_at'},
            {data :'published'},
            {data :'plan'},
        ],
        "pageLength": 25
    });

    $('#profile-profile-list tbody').on( 'click', 'tr td:not(:first-child)', function (e) {
        e.preventDefault();

        oTable.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
        var d = $('#profile-profile-list').DataTable().row( this ).data();
        $('#profile-profile-entry').load('{!!guard_url('profile/profile')!!}' + '/' + d.id);
    });

    $('#profile-profile-list tbody').on( 'change', "input[name^='id[]']", function (e) {
        e.preventDefault();

        aIds = [];
        $(".child").remove();
        $(this).parent().parent().removeClass('parent'); 
        $("input[name^='id[]']:checked").each(function(){
            aIds.push($(this).val());
        });
    });

    $("#profile-profile-check-all").on( 'change', function (e) {
        e.preventDefault();
        aIds = [];
        if ($(this).prop('checked')) {
            $("input[name^='id[]']").each(function(){
                $(this).prop('checked',true);
                aIds.push($(this).val());
            });

            return;
        }else{
            $("input[name^='id[]']").prop('checked',false);
        }
        
    });


    $(".reset_filter").click(function (e) {
        e.preventDefault();
        $("#form-search")[ 0 ].reset();
        $('#form-search input,#form-search select').each( function () {
          oTable.search( this.value ).draw();
        });
        $('#profile-profile-list .reset_filter').css('display', 'none');

    });


    // Add event listener for opening and closing details
    $('#profile-profile-list tbody').on('click', 'td.details-control', function (e) {
        e.preventDefault();
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    });

});
</script>