{% extends 'Admin/base.html.twig' %}
{% block title %}
    OceanExpert | Add Participant from file
{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ asset('css/admin-style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/font-awesome.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select2.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select2-bootstrap.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/AdminLTE.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/autocomplete.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/register.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/tipped.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/navbar-login.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap3-wysihtml5.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/jquery-ui.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/profile.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/zebra_tooltips.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/dataTables.bootstrap.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/jasny-bootstrap.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/importParticipants.css') }}">
    
<style type="text/css">
    .fileinput{margin-right: 10px;}
    .spacing{margin: 10px;}
    .hspacing{margin-left: 15px;}
</style>

{% endblock %}

{% block body %}
    {% include('navbarlogin.html.twig') %}
    <div class="wrapper">

        {% block sidebar %}
            {% include('Admin/adminSidebar.html.twig') %}
        {% endblock %}

        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">

                <ol class="breadcrumb">
                    <li><a href="{{ path('admin_dashboard') }}"><i class="fa fa-home"></i> Home</a></li>
                    <li class="active"><i class="fa fa-user-plus"></i> Event Upload Participants</li>
                </ol>
            </section>
            {% block content %}
                <div class="content">
                    <div class="col-lg-12">
                    	
                   
                    <div class="row">
                            <div class="form-group">
                                <legend>Add Participant from file to Event : {{ data.event.title }}</legend>
                            </div>
                            <div class="col-md-6">
                           <form method="POST" class="form-inline" role="form" enctype="multipart/form-data">
                               <div class="form-group">
                                   <label for="importfile">Select excel file to be uploaded</label>
                                   <input accept=".xls,.xlsx" type="file" name="importfile" id="importfile"  placeholder="Please select excel file" required/>
                               </div>
                               <button type="submit" class="btn btn-primary"><i class="fa fa-upload fa-fw"></i> Upload file</button>
                               <button class="btn btn-danger cancel hspacing" type="button"><i class="fa fa-times-circle fa-fw"></i> Cancel</button>
                           </form>
                            {% if data.fileerror is defined and data.fileerror != "" %}
                                <div class="text-danger">
                                    <i class="fa fa-exclamation-triangle"></i> {{ data.fileerror }}
                                </div>
                            {% endif %}

                                {% if data.participants is not defined or data.participants | length == 0 %}
                                    <div class="top-buffer">
                                        <a href="{{ asset('uploads/events/templates/import-experts.xlsx') }}">Click here</a> to download excel template to upload the participant details
                                    </div>
                                {% endif %}
                            </div>
                            
                    </div>
                    {% if data.participants is defined and data.participants | length > 0 %}
                       
                        <div class="row participantTable">
                            
                       	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="spacing">File name : <a href="{{ asset(data.importFile.path ~ data.importFile.filename ) }}" download="">{{ data.importFile.filename }}</a></div>
                       		<div class="table-responsive">
                       			<table class="table table-hover participantList">
                       				<thead>
                       					<tr>
                       						<th>Name</th>
                       						<th>Email</th>
                                            <th>Country</th>
                                            <th>Action</th>
                       					</tr>
                       				</thead>
                       				<tbody>
                                    {% for expert in data.participants %}
                                        {% if expert.status == 1 %}
                                            <tr class="text-danger">
                                                <td>
                                                    {{ expert.fname ~ " "~ expert.sname }}
                                                    <i class="fa fa-info-circle tipso" title="Expert already present in OceanExpert database."></i>
                                                </td>
                                                <td>{{ expert.email }}</td>
                                                <td>{{ expert.country }}</td>
                                                <td>
                                                    <div class="btn-group pull-right actionbtns">
                                                        <a href="{{ expert.OceanexpertProfile }}" class="action approve btn btn-success tipso" title="View Profile" target="_blank">
                                                            <i class="fa fa-eye"></i>
                                                        </a>
                                                        <button type="button" class="action delete btn btn-danger tipso" title="" data-original-title="" data-id="{{ expert.id }}"><i class="fa fa-times-circle fa-fw"></i> </button>
                                                    </div>
                                                </td> 
                                            </tr>
                                        {% else %}
                                            <tr>
                                                <td>{{ expert.fname ~ " "~ expert.sname }}</td>
                                                <td>{{ expert.email }}</td>
                                                <td>{{ expert.instCountry }}</td>
                                                <td>
                                                    <div class="btn-group pull-right actionbtns">
                                                        <a href="{{ path('import_edit_participant',{idEvent:data.event.idEvent,idUser: expert.id}) }}" class="action edit btn btn-success tipso" target="_blank" title=""><i class="fa fa-pencil"></i></a>
                                                        <button type="button" class="action delete btn btn-danger tipso" title="" data-id="{{ expert.id }}" data-original-title=""><i class="fa fa-times-circle fa-fw"></i> </button>
                                                    </div>
                                                </td>
                                            </tr>
                                        {% endif %}
                                            
                                            
                                            
                                       
                                    {% endfor %}
                       				</tbody>
                       			</table>
                       		</div>
                       	</div>
                       </div>
                        <div class="btn-group pull-right spacing">
                            <button type="button" class="btn btn-danger spacing cancel"><i class="fa fa-times-circle fa-fw"></i> Cancel</button>
                            <button type="button" class="btn btn-success spacing submitNext"><i class="fa fa-arrow-right fa-fw"></i> Next</button>
                        </div>
                        {#<button class="btn btn-danger pull-right" type="button"><i class="fa fa-times fa-fw"></i> Cancel</button>#}
                    {% endif %}
                    </div>
                </div>
            {% endblock %}
        </div>
    </div>
    {% include "footer.html.twig" %}
    <script src="{{ asset('js/app.min.js') }}"></script>
    <script src="{{asset('js/icheck.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/validator.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/jquery.inputmask.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/daterangepicker.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/bootstrap-timepicker.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/bootstrap-colorpicker.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/bootstrap-typeahead.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/jquery-ui.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/jquery.dataTables.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/dataTables.bootstrap.min.js')}}" type="text/javascript"></script>

    <script src="{{ asset('js/wysihtml5-0.3.0.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/handlebars.runtime.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap3-wysihtml5.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/tipped.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jquery.noty.packaged.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jasny-bootstrap.js') }}" type="text/javascript"></script>
    <script type="text/javascript" >
        
        var deleteParticipant = "{{ path('delete_import_participant') }}";
        var checkParticipantDetails = "{{ path('check_participants_details') }}";
        var addEventsParticipants = "{{ path('add_event_participants') }}";
        Tipped.create('.tipso',{ maxWidth: 250 });
        var participantTable = $(".participantList").DataTable({
            scrollCollapse: true,
            iDisplayLength: 20,
            lengthMenu: [ [10, 20, 50, 100, -1], [10, 20, 50, 100, "All"] ]
        });
        
        $("body").on("click",".cancel",function (e) {
            window.close();
        });
        
        $("body").on("click",".delete",function (e) {
            var $this = $(this);

            var participant = $this.closest("tr").children('.sorting_1').text();
            $.confirm({
                title: 'Confirm remove participant?',
                content: 'Are you sure you want to remove <strong>'+$.trim(participant)+'</strong> from this event participation list? This step cannot be undone.',
                buttons: {
                    confirm: {
                        text: 'Remove',
                        btnClass: 'btn-red',
                        keys: ['enter'],
                        action: function(){
                            $.ajax({
                                method: "POST",
                                url: deleteParticipant,
                                data: { idParticipant: $this.data("id") }
                            }).done(function( response ) {
                                if(response ==1 ){
                                    $('.participantList').DataTable().row( $this.parents('tr') ).remove().draw();

                                }else{
                                    $.alert("Could not delete the participant. Please try again later.");
                                }
                                
                            });
                        }
                    },
                    cancel: {
                        keys: ['esc'],
                        text: 'Cancel',
                        btnClass: 'btn-green'
                    }
                }
            });
            
        });

        $("body").on("click",".submitNext",function (e) {
            {% if data.importFile.id is defined and data.importFile.id != "" %}
            $.ajax({
                data: {idfile: {{ data.importFile.id }}},
                method: "POST",
                url: checkParticipantDetails,
            }).done(function( response ) {
                if(response.status == 1 ){
                    $.confirm({
                        title: 'Confirm Add all participants?',
                        content: 'Are you sure you want to import '+$('.participantList').DataTable().rows().count()+' participants to event <strong>{{ data.event.title }}</strong>?',
                        buttons: {
                            confirm: {
                                text: 'Yes Proceed',
                                keys: ['enter'],
                                btnClass: 'btn-green',
                                action: function(){
                                    $.ajax({
                                        data: {idfile: {{ data.importFile.id }}, idevent: {{ data.event.idEvent}}},
                                        method: "POST",
                                        url: addEventsParticipants,
                                    }).done(function( response ) {
                                        $.confirm({
                                            title: 'Import finish successfully',
                                            content: 'Are you want to import participants from another file?',
                                            buttons: {
                                                confirm: {
                                                    keys: ['enter'],
                                                    text: 'Yes Add New.',
                                                    btnClass: 'btn-green',
                                                    action: function () {
                                                        window.location.reload();
                                                    }
                                                },
                                                cancel: {
                                                    keys: ['esc'],
                                                    text: 'No close window.',
                                                    btnClass: 'btn-red',
                                                    action: function () {
                                                        window.close();
                                                    }
                                                }
                                            }
                                        });
                                    });
                                }
                            },
                            cancel: {
                                keys: ['esc'],
                                text: 'Cancel',
                                btnClass: 'btn-red'
                            }
                        }
                    });
                }else if (response.status == 0 ){
                    var content = "";
                    if(response.participants.length > 1){
                        content = "Couldnot import participants. Following user profiles are not created. <br />";
                        content += "Please edit the record from the table to create the expert profile and try again.";
                        var i = 1;
                        $.each(response.participants,function (key, val) {
                            content +="<br />"+ i+". <strong>"+ val.fname+" "+val.sname+" ("+val.email+")</strong>";
                            i++;
                        })
                    }else{
                        content = "Couldnot import participants. Following user profile is not created. <br />";
                        content += "Please edit the record from the table to create the expert profile and try again.";
                        content += "<strong>"+response.participants.fname+" "+response.participants.sname+" ("+response.participants.email+")</strong>";
                    }
                    $.alert(content);
                }

            });
         {% endif %}   
        });

        var which;

        $("input").click(function () {
            which = $(this).attr("id");
        });

        $( window ).unload(function() {
            if(which!="importfile"){
                window.opener.location.reload();
            }
        });
    </script>

{% endblock %}