@extends('layouts.master')

@section('title', __('tr.Student Activities'))
@section('titleicon', "icon-people")

@if(!$student)
@section('actiontitle', __('tr.My Activities'))
	@section('actionlink', route('student_activities', ['student'=>auth()->user()->id]))
@else
	@section('actiontitle', __('tr.Student Activities'))
	@section('actionlink', route('student_activities'))
@endif
@section('content')

<!-- BEGIN .main-content -->
<div class="main-content">
    
    <div class="row gutters">
        <div class="col-lg-12 col-xs-12 col-md-12 col-sm-12">
            <div class="card">
                <div class="card-body pb-0">
                    <div class="filter-box">
                        <div class="row">
                            <div class="col-md-2">
                                <input type="text" placeholder="@lang('tr.TextSearch')" id="text_search">
                            </div>
                            <div class="col-md-2 float">
                                <button class="btn btn-primary" type="button"
                                    id="search_button">@lang('tr.Search')</button>
                            </div>
                            {{--Button--}}
                            <div class="col-md-2 float">
                                <button class="btn btn-danger" type="button"
                                    id="reset_button">@lang('tr.Reset')</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
                    <div class="card-body">
                        <table id="student_activities_table" class="display" style="width:100%">
                            <thead>
                                <tr>
                                    <th>@lang('tr.Title')</th>
                                    <th>@lang('tr.Organizer')</th>
                                    <th>@lang('tr.Amount')</th>
                                    <th>@lang('tr.Activity Date')</th>
                                    <th width="5%"></th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Row end -->
</div>
<!-- END: .main-content -->

<script type="text/javascript">

    $(document).ready(function () {

        var showUrl = '{{ route('student_activity_show', ['studentActivity'=>'#id']) }}';
        let isStudent = "{{ $student ? 'true' : 'false' }}";
        let studentActivitiesUrl = "{{ $student ? route('student_activities', ['student'=> auth()->user()->id]) : route('student_activities') }}";
        var table = $('#student_activities_table').DataTable({
            processing: false,
            serverSide: true,
            scrollX: true,
            stateSave: false,
            rowId: 'id',
            language: dataTableLanguage,
            "ajax": {
                "url": studentActivitiesUrl,
                "dataSrc": "data.data"
            },
            "columns": [
                { "data": "title", "name": "title" },
                { "data": "organizer_name", "name": "organizer_name" },
                { "data": "amount", "name": "amount" },
                { "data": "start_date", "name": "start_date",fnCreatedCell: function (nTd, sData, oData, iRow, iCol) 
                    {
                        let startDate = oData.start_date;
                        let endDate = oData.end_date;
                        let html = '';

                        if (startDate) {
                            html = "<span class='badge-course'>@lang('tr.Start Date'):</span> <small>" + moment(startDate).format('DD/MM/YYYY') + "</small>";
                        }

                        if (endDate) {
                            html += "<br><span class='badge-course'>@lang('tr.End Date'):</span> <small>" + moment(endDate).format('DD/MM/YYYY') + "</small>";
                        }

                        if(isStudent == 'true')
                            html += "<br><span class='badge-course'>@lang('tr.Registration Status'):</span> <small>" + oData.student_activity_registration_status_label + "</small>";
                        

                        $(nTd).html(html);
                    }
                }, 
                {"data": "id", "name": "id", fnCreatedCell: function (nTd, sData, oData, iRow, iCol) 
                    {
                        let html = "";
                        html += "<a title='@lang('tr.View Details')' href='"+showUrl.replace('#id',oData.id)+"' target='_blank'><i class='icon-eye'></i></a>&nbsp;";
                        $(nTd).html(html);
                    }
                }
            ]
        });
        
        $('#search_button').on('click', function () {
            table.search($("#text_search").val());
            table.draw();
        });

        $('#text_search').keyup(function (e) {
            if (e.keyCode == 13)
                $('#search_button').trigger('click');
        });

        $('#reset_button').on('click', function () {
            $("#text_search").val("");
            $('#search_button').trigger('click');
        });

        $('#search_button').trigger('click');
    });
</script>
@stop