@extends('adminlte::page')

@section('title', __('clients.tab-title'))

@section('content_header')
    <h3 class="m-0 text-center menu-title">{{ __('clients.title') }}</h3>
@stop


@section('content')
    <div class="row">
        <div class="col-12 page-tab">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="clients-table" class="table table-hover clients-table w-100"></table>
                    </div>
                </div>
            </div>
            <div class="ft-pagination">
                <span class="float-right position-right-10"></span>
            </div>
        </div>
    </div>
@stop

@section('footer')
    @include('clients.modals.create')
    @include('clients.modals.delete')
    @include('clients.modals.edit')
    @include('clients.modals.import')
@append

@push('css')
    @include('adminlte::libs.css.datatables')
    @include('adminlte::libs.css.select2')
@endpush

@push('js')
    @include('adminlte::libs.js.datatables')
    @include('adminlte::libs.js.select2')
    @php
        $columns = [
            [
                'data' => 'name',
                'name' => 'name',
                'title' => __('clients.table.columns.name')
            ],
            [
                'data' => 'address',
                'name' => 'address',
                'title' => __('clients.table.columns.address')
            ],
            [
                'data' => 'city',
                'name' => 'city',
                'title' => __('clients.table.columns.city')
            ],
            [
                'data' => 'product_count',
                'name' => 'product_count',
                'title' => __('clients.table.columns.product_count')
            ],
            [
                'data' => 'travel_expense',
                'name' => 'travel_expense',
                'title' => __('clients.table.columns.travel_expense')
            ],
            [
                'data' => 'actions',
                'name' => 'actions',
                'title' => __('clients.table.columns.actions'),
                'sortable' => false,
                'width' => '8%'
            ]
        ];
        $url = url()->current();
        $endpoint = [
            'url' => "{$url}/all",
            'dataSrc' => 'data'
        ];
    @endphp

    {{-- Add inline js when developing or testing here. When you're finished, transfer to clients.js --}}
    <script defer type="text/javascript" src="{{ asset('/js/modal-helpers.min.js') }}"></script>
    <script defer type="text/javascript" src="{{ asset('/js/datatables-helpers.min.js') }}"></script>
    <script defer type="text/javascript" src="{{ asset('/js/clients.min.js') }}"></script>
    <script defer type="text/javascript" src="{{ asset('js/date-de.min.js') }}"></script>

    <script type="text/javascript">
        $(document).ready(function(){
        {{-- display create/edit forms with validation errors --}}
        @if($errors->hasBag('store-client'))
            $('#client-create-modal').modal('show')
            console.error(JSON.parse('{!! $errors->getBag('store-client')->toJson() !!}'))
        @endif
        @if($errors->hasBag('update-client'))
            showClientEditForm('{{ "{$url}/" . session()->get('clientId') }}')
            console.error(JSON.parse('{!! $errors->getBag('update-client')->toJson() !!}'))
        @endif

            let dt_settings = {
                ajax: JSON.parse('@json($endpoint)'),
                columns: JSON.parse('@json($columns)'),
                columnDefs:[
                    {
                        targets: [0],
                        "render": function ( data, type, row){
                            return '<a href="'+ '{{url('/clients')}}/'+row.client_id+'/profile">'+data+'</a>';
                        },
                    },
                ],
                buttons: [{
                    text: '{!! __('generic.buttons.add') !!}',
                    className: 'btn btn-primary',
                    action: () => $('#client-create-modal').modal('show')
                }],
                dom: '<"row pb-3"<"col-5"l><"col-5"f><"col-2 text-right"B>>rt<"row "pi>',
                initComplete: function(settings, json) {
                    var filterInput = $(this.api().table().container()).find('input[type=search]');
                    filterInput.addClass('dt-search-filter')
                    filterInput.attr('placeholder', 'Pretraži:')
                    // Find the closest '.ft-pagination' container relative to the current table
                    var ftPagination = $(this.api().table().container()).parents('.page-tab').find('.ft-pagination');

                    $(this.api().table().container()).find('.dataTables_paginate ').prependTo(ftPagination)
                    $(this.api().table().container()).find('.dataTables_info').prependTo(ftPagination.find('span'))
                }
            }

            var table = generateDatatable(dt_settings, $('#clients-table'));


        $('#client-delete-button').click(function () {
            $(this).prop('disabled', true)

            deleteEntity('{{ "{$url}/" }}' + this.dataset.client_id, function () {
                $('#client-delete-modal').modal('hide')
                setTimeout(function() {
                    table.ajax.reload()
                }, 500);
            })
        })

        $('#client-delete-modal').on('hidden.bs.modal', function () {
            $(this).find('#client-delete-button').attr('data-client', '')
            $(this).find('.client-name').text('')
            $(this).find('button').prop('disabled', false)
        })

        $(document).on('click', '.clients-table .btn-edit', function () {
            showClientEditForm('{{ "{$url}/" }}' + this.dataset.client_id)
        })

    })
    </script>
@endpush