@extends('master.admin')

@push('header.scripts')
<!-- BEGIN PAGE LEVEL PLUGINS -->
<link href="{{ asset('public/assets/global/plugins/datatables/datatables.min.css') }}" type="text/css" />
<link href="{{ asset('public/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('public/assets/global/plugins/datatables/dataTables.responsive.css') }}" type="text/css" />
<!-- END PAGE LEVEL PLUGINS -->
<style>
    div.checker, div.radio {
        margin-right: 0;
        margin-left: 3px;
        display: block;
        margin-bottom: 10px;
    }
    .checkbox, .radio {
        position: relative;
        display: block;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    [type="radio"]:checked,
    [type="radio"]:not(:checked) {
        position: absolute;
        left: -9999px;
    }
    [type="radio"]:checked + label,
    [type="radio"]:not(:checked) + label
    {
        position: relative;
        padding-left: 28px;
        cursor: pointer;
        line-height: 20px;
        display: inline-block;
    }
    [type="radio"]:checked + label:before,
    [type="radio"]:not(:checked) + label:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 16px;
        height: 16px;
        border: 1px solid #666;
        border-radius: 100%;
        background: #fff;
    }
    [type="radio"]:checked + label:after,
    [type="radio"]:not(:checked) + label:after {
        content: '';
        width: 10px;
        height: 10px;
        background: blue;
        position: absolute;
        top: 3px;
        left: 3px;
        border-radius: 100%;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }
    [type="radio"]:not(:checked) + label:after {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    [type="radio"]:checked + label:after {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    .radio.active [type="radio"] + label:after {
        opacity: 1 !important;
        -webkit-transform: scale(1) !important;
        -moz-transform: scale(1) !important;
        transform: scale(1) !important;
    }
    .checkbox_team_delete input[type=checkbox], .checkbox-inline input[type=checkbox] {
         position: relative !important;
         margin-left: 0px !important;
        margin-top: 4px\9;
    }
    .checkbox_team_delete{  margin: 0px 10px 10px 10px !important}
    #teams_overview_delete_button{
        display:none; outline:0!important;  color:#FFF; background-color:#1f75b0; border-color:#1f75b0
    }
    #teams_overview_delete_button:hover {border-color:#3598dc;color:#FFF;background-color:#3598dc}
    .action_links{ text-decoration: underline !important;}
</style>
@stop

@push('footer.scripts')
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="{{ asset('public/assets/global/scripts/datatable.js') }}" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.js"></script>
<script src="{{ asset('public/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js') }}" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<script>

    let teams_lock_screen = true;
    var dataTableObj;
    var formData = $('#advance_search_form').serializeArray();
    var advance_search_form_data = {'action': 'advance_search', 'search_form_data': formData};
    var dt_html = '';

    $(function() {

        dt_html = $("#teams-outer-div").html();
        dataTableObj = dt_init();

        @role('superadmin')
            $('#advance_search_cantainer').show();
        @endrole

        $("#advance_search_form").submit(function (e) {
            var formData = $('#advance_search_form').serializeArray();
            advance_search_form_data = {'action': 'advance_search', 'search_form_data': formData};
            $("#teams_dt_wrapper").children().remove();
            $("#teams-outer-div").html(dt_html);
            dataTableObj = dt_init();
            e.preventDefault(); //STOP default action
        });

        // Delete Item record
        $('#teams-outer-div').on('click', 'a.list_remove', function (e) {
            $('#deleterecord_error_div').hide();
            $('#deleterecord_success_div').hide();
            $('#delete_record_dt_id').val('teams_dt');
            $('#delete_item_id').val( $(this).attr('data-id') );
            $('#delete_action_url').val( '{!! url("admin/teams") !!}/'+$(this).attr('data-id') );
            $('#confirmRemoveRecord').modal('show', {backdrop: 'static'});
            e.preventDefault();
        });


        $('#teams_overview_screen_lock_checkbox').on('switchChange.bootstrapSwitch', function (event, state) {

            if($("#teams_overview_screen_lock_checkbox").is(':checked')) {
                teams_lock_screen = true;
                console.log('Screen Lock');
                $('#teams_overview_delete_button').hide();
            }else{
                console.log('Screen un-lock');
                teams_lock_screen = false;
                $('#teams_overview_delete_button').show();
            }
        });



        $('#teams-outer-div').on('change', '.deleteteam_radio_option', function(e){

            if(teams_lock_screen){
                alert('Screen is locked, Please unlock screen to perform this action!');
                $(this).prop('checked', false);
            }

        });

        $("#teams_overview_delete_button").click(function (e) {

            let deleted_team_ids = [];
            $('.deleteteam_radio_option').each(function (index, obj) {
                if (this.checked === true) {
                    deleted_team_ids.push($(this).val());
                }
            });


            if( deleted_team_ids.length == '0'){
                alert('Please select at least one team to delete!')
            }else{

                console.log(deleted_team_ids);


                startBlockUI('.page-content-wrapper', 'animate');

                let token = $('#update_bib_number_form #token_csrf').val();
                $.ajax({
                    url : '{!! url("admin/teams/deletemultipleteams") !!}',
                    headers: {'X-CSRF-TOKEN': token},
                    type: 'POST',
                    data : {'team_ids': deleted_team_ids},
                    dataType: 'json',
                    success:function(response) {

                        $(deleted_team_ids).each(function (index, obj) {
                            $('#teams_dt #row_' + obj).remove();
                        });

                        if( response.status == '1' ){
                            show_push_notification('Success!', response.message , 'success');
                        }else{
                            show_push_notification('Error!', response.message , 'error');
                        }

                        endBlockUI('.page-content-wrapper');

                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        return false;
                    }
                });

            }

        });


        $('#teams-outer-div').on('change', '.active_radio_option', function(e){

            if(teams_lock_screen){
                alert('Screen is locked, Please unlock screen to perform this action!');
                $(this).prop('checked', false);
            }else{
                let id = $(this).data('id');
                let activeVal = $(this).val();

                $('#active_div_'+id+'_no').removeClass('active');
                $('#active_div_'+id+'_yes').removeClass('active');

                if(activeVal == '1'){
                    $('#active_div_'+id+'_yes').addClass('active');
                }else{
                    $('#active_div_'+id+'_no').addClass('active');
                }
                update_team_status(id, activeVal);
            }



        });

        $('#teams-outer-div').on('change', '.volunteers_paid_radio_option ', function(e){
            if(teams_lock_screen){
                alert('Screen is locked, Please unlock screen to perform this action!');
                $(this).prop('checked', false);
            }else {
                let id = $(this).data('id');
                let activeVal = $(this).val();

                $('#volunteers_paid_div_' + id + '_yes').removeClass('active');
                $('#volunteers_paid_div_' + id + '_no').removeClass('active');
                $('#volunteers_paid_div_' + id + '_na').removeClass('active');

                if (activeVal == '1') {
                    $('#volunteers_paid_div_' + id + '_yes').addClass('active');
                } else if (activeVal == '2') {
                    $('#volunteers_paid_div_' + id + '_na').addClass('active');
                } else {
                    $('#volunteers_paid_div_' + id + '_no').addClass('active');
                }
                update_team_volunteers_paid_status(id, activeVal);
            }
        });
        
        $('#teams-outer-div').on('change', '.hav_invoice_sent_radio_option ', function(e){
            if(teams_lock_screen){
                alert('Screen is locked, Please unlock screen to perform this action!');
                $(this).prop('checked', false);
            }else {
                let id = $(this).data('id');
                let activeVal = $(this).val();

                $('#hav_invoice_sent_div_' + id + '_yes').removeClass('active');
                $('#hav_invoice_sent_div_' + id + '_no').removeClass('active');
                $('#hav_invoice_sent_div_' + id + '_na').removeClass('active');

                if (activeVal == '1') {
                    $('#hav_invoice_sent_div_' + id + '_yes').addClass('active');
                } else if (activeVal == '2') {
                    $('#hav_invoice_sent_div_' + id + '_na').addClass('active');
                } else {
                    $('#hav_invoice_sent_div_' + id + '_no').addClass('active');
                }
                update_team_hav_invoice_sent_status(id, activeVal);
            }
        });

        // Update Bib Number Information
        $('#teams-outer-div').on('click', '.bib_number_editable ', function(e){
            if(teams_lock_screen){
                alert('Screen is locked, Please unlock screen to perform this action!');
            }else {

                $(this).hide();
                $('.team_bib_number_update_class').hide();
                $('#bib_number_hidden_field_'+$(this).data('id')).show();
                $('#bib_number_hidden_field_'+$(this).data('id')).focus();
                $('#bib_number_hidden_field_'+$(this).data('id')).select();

            }
            e.preventDefault();
        });

        $('#teams-outer-div').on('blur', '.team_bib_number_update_class', function () {
            $(this).hide();
            //console.log( $(this).data('id') + ' -- ' + $(this).data('bib_number') + ' -- ' + $(this).val() );

            if($(this).val() != '' && $(this).val() != '0' && $(this).val() != $(this).data('bib_number')){

                $('#update_bib_number_form #team_id').val( $(this).data('id') );
                $('#update_bib_number_form #bib_number').val( $(this).val() );
                update_team_bib_number_info( $(this).data('id') );

            }else{
                $('.bib_number_editable').show();
            }
        });


        // Update Start Time Information
        $('#teams-outer-div').on('click', '.start_time_editable ', function(e){
            if(teams_lock_screen){
                alert('Screen is locked, Please unlock screen to perform this action!');
            }else {

                $(this).hide();
                $('.team_start_time_update_class').hide();
                $('#start_time_hidden_field_'+$(this).data('id')).show();
                $('#start_time_hidden_field_'+$(this).data('id')).focus();
                $('#start_time_hidden_field_'+$(this).data('id')).select();

            }
            e.preventDefault();
        });

        $('#teams-outer-div').on('blur', '.team_start_time_update_class', function () {
            $(this).hide();
            //console.log( $(this).data('id') + ' -- ' + $(this).data('start_time') + ' -- ' + $(this).val() );

            if($(this).val() != '' && $(this).val() != '0' && $(this).val() != $(this).data('start_time')){

                $('#update_start_time_form #team_id').val( $(this).data('id') );
                $('#update_start_time_form #start_time').val( $(this).val() );
                update_team_start_time_info( $(this).data('id') );

            }else{
                $('.start_time_editable').show();
            }
        });

        @if(Session::has('teams-success'))
        show_push_notification('Success!', '{{ Session::get("teams-success") }}', 'success');
        @endif

    });



    function update_team_bib_number_info(team_id){

        $('.bib_number_update_loading_class').hide();
        $('#bib_number_update_loading_'+team_id).show();
        let token = $('#update_bib_number_form #token_csrf').val();
        $.ajax({
            url : '{!! url("admin/teams/updatebibnumber") !!}',
            headers: {'X-CSRF-TOKEN': token},
            type: 'POST',
            data : $('#update_bib_number_form').serialize(),
            dataType: 'json',
            success:function(response) {

                $('#bib_number_hyperlink_'+team_id).html(response.data.bib_number);
                $('#bib_number_hyperlink_'+team_id).attr('data-bib_number', response.data.bib_number);

                $('#bib_number_hidden_field_'+team_id).attr('data-bib_number', response.data.bib_number);

                $('#bib_number_update_loading_'+team_id).hide();
                $('.bib_number_editable').show();

            },
            error: function(jqXHR, textStatus, errorThrown) {
                return false;
            }
        });

    }


    function update_team_start_time_info(team_id){

        $('.start_time_update_loading_class').hide();
        $('#start_time_update_loading_'+team_id).show();
        let token = $('#update_start_time_form #token_csrf').val();
        $.ajax({
            url : '{!! url("admin/teams/updatestarttime") !!}',
            headers: {'X-CSRF-TOKEN': token},
            type: 'POST',
            data : $('#update_start_time_form').serialize(),
            dataType: 'json',
            success:function(response) {

                console.log(response.data);


                $('#start_time_hyperlink_'+team_id).html(response.data.start_time_text);
                $('#start_time_hyperlink_'+team_id).attr('data-start_time', response.data.start_time);
                $('#start_time_hidden_field_'+team_id).attr('data-start_time', response.data.start_time);

                $('#start_time_update_loading_'+team_id).hide();
                $('.start_time_editable').show();

            },
            error: function(jqXHR, textStatus, errorThrown) {
                return false;
            }
        });

    }


    function update_team_status(id, activeVal){

        var token = $('#token_csrf').val();
        $.ajax({
            url: '{!! url("admin/teams/ajaxstatusupdate") !!}',
            type: "POST",
            headers: {'X-CSRF-TOKEN': token},
            data: {'action': 'update', 'id' : id, 'active' : activeVal},
            dataType: 'json',
            success: function (response) {

                show_push_notification('Success!', response.message, 'success');

            },
            error: function (jqXHR, textStatus, errorThrown) {
                return false;
            }
        });

    }

    function update_team_volunteers_paid_status(id, activeVal){
        var token = $('#token_csrf').val();
        $.ajax({
            url: '{!! url("admin/teams/ajaxvolunteerpaidupdate") !!}',
            type: "POST",
            headers: {'X-CSRF-TOKEN': token},
            data: {'action': 'update', 'id' : id, 'active' : activeVal},
            dataType: 'json',
            success: function (response) {
                show_push_notification('Success!', response.message, 'success');
            },
            error: function (jqXHR, textStatus, errorThrown) {
                return false;
            }
        });
    }

    function update_team_hav_invoice_sent_status(id, activeVal){
        var token = $('#token_csrf').val();
        $.ajax({
            url: '{!! url("admin/teams/ajaxhavinvoicesentupdate") !!}',
            type: "POST",
            headers: {'X-CSRF-TOKEN': token},
            data: {'action': 'update', 'id' : id, 'active' : activeVal},
            dataType: 'json',
            success: function (response) {
                show_push_notification('Success!', response.message, 'success');
            },
            error: function (jqXHR, textStatus, errorThrown) {
                return false;
            }
        });
    }

    function dt_init() {
        var token = $('#token_csrf').val();
        @role('individual')
        returnObj = $('#teams_dt').DataTable({
            responsive: false,
            processing: true,
            serverSide: true,
            bFilter: false,
            "scrollX": true,
            "scrollY": false,
            "order": [[ 3, "ASC" ]],
            ajax: {
                url: '{!! url("admin/teams/ajax") !!}',
                type: "POST",
                headers: {'X-CSRF-TOKEN': token},
                data: advance_search_form_data
            },
            aLengthMenu: [
                [25, 50, 100, 200, -1],
                [25, 50, 100, 200, "All"]
            ],
            iDisplayLength: -1,
            columns: [
                {data: 'delete_team', name: 'delete_team', className: 'text-center', "bSearchable": false, "bSortable": false},
                {data: 'actions', name: 'actions', className: 'text-center', "bSearchable": false, "bSortable": false},
                {data: 'event_short_name', name: 'event_short_name'},
                {data: 'name', name: 'teams.name'},
                {data: 'teams_category_name', name: 'teams_category_name'},
                {data: 'captain_first_name', name: 'captain_first_name'},
                {data: 'team_roster_complete', name: 'teams.team_roster_complete',  className: 'text-center'},
                {data: 'bib_number', name: 'teams.bib_number',  className: 'text-center'},
                {data: 'start_time', name: 'teams.start_time',  className: 'text-center'},
                {data: 'active', name: 'teams.active',  className: 'text-center'},
                {data: 'creation_date', name: 'teams.creation_date',  className: 'text-center'},
            ]
        });
        @else
        returnObj = $('#teams_dt').DataTable({
            responsive: false,
            processing: true,
            serverSide: true,
            bFilter: false,
            "scrollX": true,
            "scrollY": false,
            "order": [[ 3, "ASC" ]],
            ajax: {
                url: '{!! url("admin/teams/ajax") !!}',
                type: "POST",
                headers: {'X-CSRF-TOKEN': token},
                data: advance_search_form_data
            },
            aLengthMenu: [
                [25, 50, 100, 200, -1],
                [25, 50, 100, 200, "All"]
            ],
            iDisplayLength: -1,
            columns: [
                {data: 'delete_team', name: 'delete_team', className: 'text-center', "bSearchable": false, "bSortable": false},
                {data: 'actions', name: 'actions', className: 'text-center', "bSearchable": false, "bSortable": false},
                {data: 'event_short_name', name: 'event_short_name'},
                {data: 'name', name: 'teams.name'},
                {data: 'teams_category_name', name: 'teams_category_name'},
                {data: 'team_type_name', name: 'team_type_name'},
                {data: 'captain_first_name', name: 'captain_first_name'},
                //{data: 'location', name: 'location'},
                {data: 'volunteer_option_name', name: 'volunteer_option_name'},
                {data: 'team_roster_complete', name: 'teams.team_roster_complete',  className: 'text-center'},
                {data: 'bib_number', name: 'teams.bib_number',  className: 'text-center'},
                {data: 'start_time', name: 'teams.start_time',  className: 'text-center'},
                {data: 'hav_invoice_sent', name: 'teams.hav_invoice_sent',  className: 'text-center'},
                {data: 'volunteers_paid', name: 'teams.volunteers_paid',  className: 'text-center'},
                {data: 'active', name: 'teams.active',  className: 'text-center'},
                {data: 'creation_date', name: 'teams.creation_date',  className: 'text-center'},
            ]
        });
        @endrole
            
        
    }

</script>
@stop

@section('content')
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <div class="page-content">
        <!-- BEGIN PAGE HEADER-->
        <!-- BEGIN PAGE BAR -->
        <div class="page-bar">

            <ul class="page-breadcrumb">
                <li>
                    <span>Teams</span>
                </li>
            </ul>
        </div>
        <!-- END PAGE BAR -->
        <!-- BEGIN PAGE TITLE-->
        <h3 class="page-title"> </h3>
        <!-- END PAGE TITLE-->
        <div class="row">
            <div class="col-md-12">
                <!-- BEGIN ADVANCE SEARCH-->
                <div class="row">
                    <div class="col-md-12" id="advance_search_cantainer" style="display: none;">
                        <div class="panel panel-default">
                            <div class="panel-heading"><i class="fa fa-search"></i> Advance Search</div>
                            <div class="panel-body">
                                <form id="advance_search_form" name="advance_search_form">
                                    <input type="hidden" name="token_csrf" id="token_csrf" value="{{ csrf_token() }}"/>

                                    <div class="row">

                                        <div class="col-md-3 col-sm-6">
                                            <label> Event </label>
                                            <div class="form-group">
                                                <select id="event_id" name="event_id" class="form-control">
                                                    <option value="">All</option>
                                                    @foreach(list_events() as $eventVal)
                                                        <option value="{{ $eventVal->id }}" {{{ ($eventVal->id == $searchData['event_id'])?'selected':''  }}}>{{ $eventVal->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-3 col-sm-6">
                                            <label> Team Name </label>
                                            <div class="form-group">
                                                <input type="text" id="name" name="name" class="form-control" placeholder="Team Name" value="{{$searchData['team_name']}}" />
                                            </div>
                                        </div>

                                        <div class="col-md-3 col-sm-6">
                                            <label> Team Captain </label>
                                            <div class="form-group">
                                                <input type="text" id="captain_name" name="captain_name" class="form-control" placeholder="Team Captain" value="{{$searchData['captain_name']}}" />
                                            </div>
                                        </div>

                                        <div class="col-md-3 col-sm-6">
                                            <label> Team Type </label>
                                            <div class="form-group">
                                                <select id="category_id" name="category_id" class="form-control">
                                                    <option value="">All</option>
                                                    @foreach(list_team_categories() as $category)
                                                        <option value="{{ $category->id }}" {{{ ($category->id == $searchData['category_id'])?'selected':''  }}}>{{ $category->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-3 col-sm-6">
                                            <label> Team Division </label>
                                            <div class="form-group">
                                                <select id="type_id" name="type_id" class="form-control">
                                                    <option value="">All</option>
                                                    @foreach(list_team_types() as $type)
                                                        <option value="{{ $type->id }}" {{{ ($type->id == $searchData['type_id'])?'selected':''  }}}>{{ $type->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-3 col-sm-6">
                                            <label> Volunteer Option </label>
                                            <div class="form-group">
                                                <select id="volunteer_option" name="volunteer_option" class="form-control">
                                                    <option value="">All</option>
                                                    @foreach(list_volunteer_options() as $option)
                                                        <option value="{{ $option->id }}" {{{ ($option->id == $searchData['volunteer_option'])?'selected':''  }}}>{{ $option->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-3 col-sm-6">
                                            <label> Approved </label>
                                            <div class="form-group">
                                                <select id="active" name="active" class="form-control">
                                                    <option value="">All</option>
                                                    <option value="1" {{{ ('1' == $searchData['active'])?'selected':''  }}}>Yes</option>
                                                    <option value="0" {{{ ('0' == $searchData['active'])?'selected':''  }}}>No</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-3 col-sm-6">
                                            <label> Volunteer Paid </label>
                                            <div class="form-group">
                                                <select id="volunteers_paid" name="volunteers_paid" class="form-control">
                                                    <option value="">All</option>
                                                    <option value="1" {{{ ('1' == $searchData['volunteers_paid'])?'selected':''  }}}>Yes</option>
                                                    <option value="0" {{{ ('0' == $searchData['volunteers_paid'])?'selected':''  }}}>No</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12 text-right">
                                            <label>  </label>
                                            <div class="form-group">
                                                <button type="button" id="dt_clear" name="dt_clear" class="btn default"
                                                        onclick="javascript:window.location.reload()">Clear
                                                </button>
                                                <button type="submit" class="btn blue">Search <i class="fa fa-search"></i></button>
                                            </div>
                                        </div>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END ADVANCE SEARCH-->

                <!-- Begin: life time statistics -->
                @if( $individual_registration == '1' )
                <div class="row">
                    <div class="col-md-12 actions text-right">
                        <a href="{!! url('admin/teams/create') !!}" class="btn btn-fit-height blue" style="margin-right: 5px;"><i class="fa fa-plus-circle"></i> Add New Team</a>
                    </div>
                </div>
                @endif

                <div class="portlet light portlet-fit portlet-datatable bordered">
                    <div class="portlet-title">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="caption">
                                    <i class="fa fa-group"></i>
                                    <span class="caption-subject font-dark sbold uppercase">Teams</span>
                                </div>
                                <div class="actions">
                                    <label class="control-label">&nbsp;</label>
                                    <div id="teams_overview_delete_button_div" class="form-group">
                                        <button type="button" id="teams_overview_delete_button" name="teams_overview_delete_button">Delete Selected Teams</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="actions text-right">
                                    <label class="control-label">Screen Lock</label>
                                    <div id="teams_overview_screen_lock" class="form-group">
                                        <input type="checkbox" id="teams_overview_screen_lock_checkbox" name="teams_overview_screen_lock_checkbox" value="unlock" class="make-switch" checked>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="portlet-body" style="height:auto !important;">
                        <div class="table-scrollable" id="teams-outer-div">
                            <table id="teams_dt" class="table table-striped table-bordered table-hover display nowrap" cellspacing="0" width="100%">
                                <thead>
                                    @role('individual')
                                    <tr>
                                        <th></th>
                                        <th class="text-center"> Actions </th>
                                        <th>Event</th>
                                        <th>Team Name</th>
                                        <th>Team Division</th>
                                        <th>Team Captain</th>
                                        <th class="text-center">Roster Complete</th>
                                        <th class="text-center">Bib No</th>
                                        <th class="text-center">Start Time</th>
                                        <th class="text-center">Accepted</th>
                                        <th class="text-center">Creation date</th>
                                    </tr>
                                    @else
                                    <tr>
                                        <th></th>
                                        <th class="text-center"> Actions </th>
                                        <th>Event</th>
                                        <th>Team Name</th>
                                        <th>Team Type</th>
                                        <th>Team Division</th>
                                        <th>Team Captain</th>
                                        <th>Volunteer Option</th>
                                        <th class="text-center">Roster Complete</th>
                                        <th class="text-center">Bib No</th>
                                        <th class="text-center">Start Time</th>
                                        <th class="text-center">HAV Invoice Sent</th>
                                        <th class="text-center">Volunteer Paid</th>
                                        <th class="text-center">Accepted</th>
                                        <th class="text-center">Creation date</th>
                                    </tr>
                                    @endrole
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- END CONTENT BODY -->
</div>
<!-- END CONTENT WRAPPER -->

<!-- BEGIN INCLUDE MODAL  "UPDATE BIB NUMBER MODAL" -->
<div class="modal fade" id="updateBibNumberModal" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <form class="modal-content" id="update_bib_number_form">
            <input type="hidden" name="token_csrf" id="token_csrf" value="{{ csrf_token() }}"/>
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">Update Bib Number</h4>
            </div>
            <div class="inbox-compose form-horizontal" role="form">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label col-md-3"><strong>Bib number:</strong></label>
                        <div class="col-md-9">
                            <input type="number" min="0" id="bib_number" name="bib_number" class="form-control" >
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input type="hidden" id="team_id" name="team_id"/>
                <button type="submit" class="btn btn-danger">Update</button>
                <button type="button" class="btn default" data-dismiss="modal">Close</button>
            </div>
        </form>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- END INCLUDE MODALS "Remove Order Item Confirmation" -->


<!-- BEGIN INCLUDE MODAL  "UPDATE START MODAL" -->
<div class="modal fade" id="updateStartModal" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <form class="modal-content" id="update_start_time_form">
            <input type="hidden" name="token_csrf" id="token_csrf" value="{{ csrf_token() }}"/>
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">Update Bib Number</h4>
            </div>
            <div class="inbox-compose form-horizontal" role="form">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label col-md-3"><strong>Start Time:</strong></label>
                        <div class="col-md-9">
                            <input type="time" id="start_time" name="start_time" class="form-control" >
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input type="hidden" id="team_id" name="team_id"/>
                <button type="submit" class="btn btn-danger">Update</button>
                <button type="button" class="btn default" data-dismiss="modal">Close</button>
            </div>
        </form>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- END INCLUDE MODALS "Remove Order Item Confirmation" -->
@stop