@extends('admin.index')
@section('title')
    {{ translate("team_title") }} -
@endsection
@section('header')
@endsection
@section('content')

<div class="row">
    <div class="col-12">

        <div class="card card-body">
            <div class="toolbar d-flex justify-content-between">
                <div>
                    <h5 class="mb-0">{{ translate("team_list_title") }}</h5>
                    <p class="text-sm mb-0">
                        {{ translate("team_list_description") }}
                    </p>
                </div>
                <div>
                    <a href="{{ url('admin/teams/add') }}" class="btn btn-primary btn-sm">{{ translate("add_team_member") }}</a>
                </div>
            </div>
            <table class="table" id="table1" data-locale="tr-TR" data-toolbar=".toolbar" data-search="true"
                data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-pagination="true"
                data-resizable="true" data-sortable="true" data-show-search-clear-button="true"
                data-side-pagination="server" data-url="{{ secure_url('admin/teams/list/ajax') }}">
                <thead>
                    <tr>
                        <th data-sortable="true" data-field="image" data-formatter="imageFormatter">{{ translate("photo_label") }}</th>
                        <th data-sortable="true" data-field="name">{{ translate("name_label") }}</th>
                        <th data-sortable="true" data-field="employee_position">{{ translate("position_label") }}</th>
                        <th data-sortable="true" data-field="social_media_accounts" data-formatter="socialMediaLinks">{{ translate("social_media_accounts_label") }}</th>
                        <th data-sortable="true" data-field="created_at" data-formatter="dateFormatter">{{ translate("created_at_label") }}</th>
                        <th data-formatter="buttonFormatter">{{ translate("edit_label") }}</th>
                    </tr>
                </thead>
            </table>
        </div>

    </div>
</div>

@endsection
@section('footer')
<script>
    function imageFormatter(image, row) {
        if (image != null) {
            return "<img src='/uploads/sliders/"+row.id+"/"+image+"' height='50' />";
        }
        return "{{ translate('photo_not_found') }}";
    }
    function socialMediaLinks(social_media_accounts, row) {
        var html = '';
        social_media_accounts.forEach(function(item){
            html += '<a href="'+item.url+'" target="_blank" class="btn btn-sm btn-outline-primary"><i class="'+item.icon+' fs-6"></i> '+'</a> ';
        });
        return html;
        console.log(social_media_accounts, row);
    }
    function defaultFormatter(def, row) {
        if ( def==1 ) {
            return '<i class="fa fa-check"></i>';
        }else{
            return '';
        }
    }
    function buttonFormatter(id,row) {
        var url = "{{ url('admin/teams/detail') }}" + "/" + row.id;
        return '<div class="btn-group btn-block" role="group" aria-label="editremove"><a href="'+ url +'" class="btn btn-sm btn-primary"> <i class="far fa-edit"></i> </a> <button type="button" class="btn btn-sm btn-outline-danger btn-remove-item" data-id="'+row.id+'" data-item-type="currency"> <i class="fas fa-trash-alt"></i> </button></div>';
    }
    function dateFormatter(date) {
        var date = new Date(date);
        var newDate = ("0" + (date.getDate())).slice(-2) + "/" + ("0" + (date.getMonth()+1)).slice(-2) + "/" + date.getFullYear() + " " + ("0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2) + ":" + ("0" + date.getMilliseconds()).slice(-2);
        return newDate;
    }
</script>
@endsection