@extends(get_view('index'))
@section('title')Ürün Listesi - @endsection
@section('header')

<style>
    .float-left{
        float: left;
    }
    .float-right{
        float: right;
    }
    .table tr td, .table tr th{
        vertical-align: middle;
        font-size: 14px;
    }
</style>

@endsection
@section('content')

@include(get_view('components.pages.page-title'), ['title' => translate('products')])

<div class="container">

    @if ( session('success') )
        <div class="alert alert-success text-center mt-4 mb-4">
            {{ translate('order_created_successfully') }}
        </div>
    @endif

    <div class="row pt-4 pb-3">
        <div class="col-md-4 col-sm-4">
            <h5>{{ translate('cart') }}</h5>

            <div class="site_cart">
                <div id="sidebarCart">
                    @include(get_view('components.salesman.cart'))
                </div>
                
                <div class="cart_item_not_found" @if( count(cart()['products']) > 0 ) style="display: none" @endif>
                    <div class="alert alert-warning text-center">
                        {{ translate('cart_empty') }}
                    </div>
                </div>
                
                @include(get_view('components.salesman.cart-form'))
            </div>
        </div>
        <div class="col-md-8 col-sm-8">

            <table class="table table-striped" id="table1" data-locale="{{ get_language_code() }}-{{ strtoupper(get_language_code()) }}" 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="false" data-show-search-clear-button="true"
                data-side-pagination="server" data-url="{{ secure_url('salesman/products/list/ajax') }}">
                <thead>
                    <tr>
                        <th data-sortable="false" data-field="first_image.name" data-formatter="imageFormatter">{{ translate('image') }}</th>
                        <th data-sortable="false" data-field="default_content.name">{{ translate('product_name') }}</th>
                        <th data-sortable="false" data-field="price" data-formatter="priceFormatter">{{ translate('product_price') }}</th>
                        <th data-sortable="false" data-field="category.default_content.name">{{ translate('category_name') }}</th>
                        <th data-field="id" data-formatter="buttonFormatter"></th>
                    </tr>
                </thead>
            </table>

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


@endsection
@section('footer')
<script src="{{ get_asset('js/cart/cart.js?v='.time()) }}"></script>
<script src="{{ asset('js/bootstrap-table.min.js') }}"></script>
<script src="{{ asset('js/bootstrap-table-locale-all.min.js') }}"></script>
<script>
    $(document).ready(function () {
        $("#table1").bootstrapTable();
    })

    function priceFormatter(price, row) {
        var result = formatMoney(price) + " TL";
        return result;
    }
    function imageFormatter(image, row) {
        var img = "Fotoğraf Bulunamadı";
        if ( image != null ) {
            img = "<img src='/images/product_images/"+row.id+"/small/"+image+"' alt='"+row.default_content.name+"' height='32'>";
        }
        return img;
    }
    function buttonFormatter(id, row) {
        return "<button class='btn btn-primary btn-sm w-100' onclick='cart_add(this)' data-product-id='"+id+"'><i class='fa fa-shopping-cart'></i></button>";
    }
</script>

<script>
(function () {
'use strict'

var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms)
    .forEach(function (form) {
        form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
                event.preventDefault()
                event.stopPropagation()
            }

            form.classList.add('was-validated')
        }, false)
    })
})()
</script>
@endsection