@extends('admin.index')
@section('title')
    {{ translate("product_list_title") }} - 
@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("products_label") }}</h5>
                        <p class="text-sm">{{ translate("product_management_description") }}</p>
                    </div>
                    <div>
                        <a href="{{ url('admin/products/add') }}" class="btn btn-primary btn-sm">{{ translate("add_new_product") }}</a>
                        <a href="{{ url('admin/products/add/multi') }}" class="btn btn-primary btn-sm">{{ translate("add_multiple_products") }}</a>
                    </div>
                </div>
                <table class="table table-striped" 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/products/list/ajax')}}">
                    <thead>
                        <tr>
                            <th data-sortable="true" data-field="first_image.name" data-formatter="imageFormatter">{{ translate("first_image_label") }}</th>
                            <th data-sortable="true" data-field="default_content.name" data-formatter="productNameFormatter">{{ translate("product_name_label") }}</th>
                            <th data-sortable="true" data-field="category.default_content.name">{{ translate("category_name_label") }}</th>
                            <th data-sortable="true" data-field="price">{{ translate("product_price_label") }}</th>
                            <th data-sortable="true" data-field="created_at" data-formatter="dateFormatter">{{ translate("record_date_label") }}</th>
                            <th data-sortable="true" data-field="showroom" data-formatter="showroomFormatter">{{ translate("showroom_label") }}</th>
                            <th data-field="id" data-formatter="buttonFormatter">{{ translate("edit_delete_label") }}</th>
                        </tr>
                    </thead>
                </table>
            </div>

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

@endsection
@section('footer')
<script>
    function productNameFormatter(name, row) {
        var html = "";
        html = row.content.name ?? '';

        if ( html != null && html.length > 45 ) {
            html = html.substring(0,45);
            html = html + "...";
        }

        return html ? html : "-";
    }
    function showroomFormatter(showroom, row){
        if ( showroom == 1 ) {
            return "<span class='badge bg-success text-white' style='min-width: 50px;'><i class='fa fa-check'></i></span>";
        }else{
            return "<span class='badge bg-gradient-secondary text-white' style='min-width: 50px;'><i class='fa fa-times'></i></span>";
        }
    }
    function imageFormatter(image, row) {
        var img = "{{ translate('image_not_found') }}";
        if ( image != null && image != "" ) {
            img = "<img src='/uploads/product_images/"+row.id+"/"+image+"' alt='' height='32'>";
        }
        return img;
    }
    function buttonFormatter(id, row) {
        var url = "{{ url('admin/products/detail') }}" + "/" + id;
        
        if (row.showroom == 0) {
            return '<div class="btn-group btn-block" role="group" aria-label="editremove"><button type="button" class="btn btn-sm btn-outline-dark" onclick="showroom(this)" data-id="'+id+'"> <i class="far fa-eye-slash"></i> </button> <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="product"> <i class="fas fa-trash-alt"></i> </button> </div>';
        }
        return '<div class="btn-group btn-block" role="group" aria-label="editremove"><button type="button" class="btn btn-sm btn-dark" onclick="showroom(this)" data-id="'+id+'"> <i class="far fa-eye"></i> </button> <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="product"> <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;
    }
    function showroom(element){
        var id = $(element).data('id');

        // Ajax Post
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.post("{{ url('admin/product/select-showroom') }}",{ id: id }).done(function( data, status ) {
            if (status == "success") {
                $('table').bootstrapTable("refresh")
            }else{
                alert("Error");
            }
        });
    }
</script>
@endsection