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

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

            <div class="card card-body">
                <div class="toolbar d-flex justify-content-between">
                    <div>
                        <h5 class="mb-0">{{ translate('theme_list') }}</h5>
                        <p class="text-sm mb-0">
                            {{ translate('you_can_edit_the_themes_in_the_theme_list') }}
                        </p>
                    </div>
                    <div>
                        <a href="{{ url('admin/templates/add') }}" class="btn btn-primary btn-sm">{{ translate('add_new_theme') }}</a>
                        <a href="{{ url('admin/templates/add/auto') }}" class="btn btn-dark btn-sm">{{ translate('scan_templates_folder') }}</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/templates/list/ajax') }}">
                    <thead>
                        <tr>
                            <th data-sortable="true" data-field="name">{{ translate('theme_name') }}</th>
                            <th data-sortable="true" data-field="status" data-formatter="statusFormatter">{{ translate('status') }}</th>
                            <th data-sortable="true" data-field="created_at" data-formatter="dateFormatter">{{ translate('registration_date') }}</th>
                            <th data-sortable="true" data-field="updated_at" data-formatter="dateFormatter">{{ translate('last_update') }}</th>
                            <th data-field="id" data-formatter="buttonFormatter">{{ translate('edit_delete') }}</th>
                        </tr>
                    </thead>
                </table>
            </div>

        </div>
    </div>
</div>

@endsection
@section('footer')
<script>
    function statusFormatter(status, row) {
        console.log({status});
        if ( status == "active" ) {
            return '<label class="badge bg-success p-2 pt-1 pb-1">{{ translate('active') }}</label>';
        }
    }
    function buttonFormatter(id, row) {
        var url = "{{ url('admin/templates/detail') }}" + "/" + id;
        const update_active_status_url = "{{ route('admin.templates.update.status') }}";
        const active_theme_id = "{{ Common::template()->id }}";
        console.log(active_theme_id, id);
        let html = '';
        if ( row.name != 'default' ) {
            html += '<div class="btn-group btn-block" role="group" aria-label="editremove">';
                html += '<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="'+id+'" data-item-type="template"> <i class="fas fa-trash-alt"></i> </button>';
                
                html += `<a href="${update_active_status_url}?id=${id}" class="btn btn-sm ${(active_theme_id == id) ? "btn-success" : "btn-outline-success"}"> <i class="fas fa-check"></i> </a>`;

            html += '</div>';
        }else{
            html += '<a href="'+ url +'" class="btn btn-sm btn-primary d-block"> <i class="far fa-edit"></i> {{ translate('edit') }} </a>';
        }
        return html;
    }
    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