@extends('adminlte::page')

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

@section('content_header')
    <h3 class="m-0 text-center menu-title">{{ __('products.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="products-table" class="table table-hover products-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('products.modals.create')
    @include('products.modals.delete')
    @include('products.modals.edit')
    @include('products.modals.filters')
    @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' => 'esb',
                'name' => 'esb',
                'title' => __('products.table.columns.esb')
            ],
            [
                'data' => 'client',
                'name' => 'client',
                'title' => __('products.table.columns.client')
            ],
            [
                'data' => 'location',
                'name' => 'location',
                'title' => __('products.table.columns.location')
            ],
            [
                'data' => 'guarantee.start',
                'name' => 'guarantee.start',
                'title' => __('products.table.columns.guarantee_start')
            ],
            [
                'data' => 'producer',
                'name' => 'producer',
                'title' => __('products.table.columns.producer')
            ],
            [
                'data' => 'model_type',
                'name' => 'model_type',
                'title' => __('products.table.columns.model_type')
            ],
            [
                'data' => 'guarantee.month',
                'name' => 'guarantee.month',
                'title' => __('products.table.columns.guarantee')
            ],
            [
                'data' => 'serial_number',
                'name' => 'serial_number',
                'title' => __('products.table.columns.serial_number')
            ],
            [
                'data' => 'guarantee',
                'name' => 'guarantee',
                'title' => __('products.table.columns.guarantee_expires')
            ],
            [
                'data' => 'contract',
                'name' => 'contract',
                'title' => __('products.table.columns.contract_expires')
            ],
            [
                'data' => 'actions',
                'name' => 'actions',
                'title' => __('products.table.columns.actions'),
                'sortable' => false,
                'width' => '10%'
            ]
        ];
        $url = url()->current();
        $endpoint = [
            'url' => "{$url}/all",
            'dataSrc' => 'data'
        ];
    @endphp

    {{-- Add inline js when developing or testing here. When you're finished, transfer to products.js --}}
    <script defer type="text/javascript" src="{{ asset('js/tabswitcher.min.js') }}"></script>
    <script defer type="text/javascript" src="{{ asset('js/datatables-helpers.min.js') }}"></script>
    <script defer type="text/javascript" src="{{ asset('js/modal-helpers.min.js') }}"></script>
    <script defer type="text/javascript" src="{{ asset('js/flatpickr.min.js') }}"></script>
    <script defer type="text/javascript" src="{{ asset('/js/products.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(){

        let filterModal = $('#wo-filters-modal');

        //Implementacija select2 na polja u filter modalu
        initializeSelect2("filter[client_id]", "Odaberite klijenta", filterModal, 0, true);
        initializeSelect2("filter[location_id]", "Odaberite kliniku / odjel", filterModal, 0, true);

        //Implementacija select2 na polja u create modalu
        initializeSelect2("clientProduct[client_id]", "Odaberite korisnika / kupca", filterModal);
        initializeSelect2("clientProduct[location_id]", "Odaberite kliniku / odjel", filterModal);

        let dt_settings = {
            ajax: {
                url: route('products.all'),
                data: function (d) {
                    d.client_id = $('[id="filter[client_id]"]').val();
                    d.location_id = $('[id="filter[location_id]"]').val();
                    d.guarantee_start_from = $('[id="filter[guarantee_start_from]"]').val();
                    d.guarantee_start_to = $('[id="filter[guarantee_start_to]"]').val();
                    d.producer = $('[id="filter[producer]"]').val();
                    d.guarantee_expires_from = $('[id="filter[guarantee_expires_from]"]').val();
                    d.guarantee_expires_to = $('[id="filter[guarantee_expires_to]"]').val();
                    d.contract_expires_from = $('[id="filter[contract_expires_from]"]').val();
                    d.contract_expires_to = $('[id="filter[contract_expires_to]"]').val();
                }
            },
            columns: JSON.parse('@json($columns)'),
            columnDefs: [
                {
                    targets: "_all",
                    defaultContent: "--", // Ako se ovo promjeni pogledaju de_date.js za promjene
                    className: "dt-center",
                },
                {
                    targets: [3,8,9],
                    type: 'de_date'
                },
                {
                    targets: [8,9],
                    render: function (data, type, full, meta) {
                        if (data === null || data === undefined || data.expires === null) {
                            return null;
                        } else {
                            if(type == 'sort'){
                                return data.expires;
                            }

                            let prefix = '&#x2D;';
                            if(data.status == '#007B56') prefix = '&#8226;';

                            return '<span style="color: ' + data.status + '"><span style="font-weight: bold">' + prefix + '</span> ' + data.expires + '</span>';
                        }
                    }
                }
            ],
            buttons: [
                {
                    text: '{!! __('generic.buttons.filter') !!}',
                    className: 'btn btn-light',
                    action: () => filterModal.modal('show')
                },
                {
                    text: '{!! __('generic.buttons.add') !!}',
                    className: 'btn btn-primary',
                    action: () => $('#product-create-modal').modal('show')
                },
                {{--{--}}
                {{--    text: 'Import',--}}
                {{--    className: 'btn btn-light @if(\Illuminate\Support\Facades\Auth::id() != 1) d-none @endif',--}}
                {{--    action: () => $('#import-clients-modal').modal('show')--}}
                {{--},--}}
            ],
        }

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

        $('#products-table').on('processing.dt', function (e, settings, processing) {
            if (processing) {
                $(this).addClass('dark-processing'); // Add class when processing
            } else {
                $(this).removeClass('dark-processing'); // Remove class when not processing
            }
        });

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

            deleteEntity('{{ "{$url}/" }}' + this.dataset.product_id, function () {
                table.ajax.reload()
                $('#product-delete-modal').modal('hide')
            })
        })

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

        $(document).on('click', '.products-table .btn-edit', function () {
            showProductEditForm('{{ "{$url}/" }}' + this.dataset.product_id)
        })

        $(document).on('click', '#submit-filter', function (){
            table.ajax.reload();
        })

        $(document).on('click', '#reset-filter', function (){
            filterModal.find('select').val(null).trigger('change'); // Reset select2 values
            filterModal.find('input[type="text"]').val(''); // Reset input values
            table.ajax.reload();
        })


        {{-- display create/edit forms with validation errors --}}
        @if($errors->hasBag('store-product'))
            $('#product-create-modal').modal('show')

            //Dohvačanje i select old lokacije
            $('#product-create-modal .pick-client').trigger('change')
            setTimeout(function (){
                $('#product-create-modal .set-location').val( {{old('clientProduct.location_id')}} ).trigger('change')
            } , 300)

            console.error(JSON.parse('{!! $errors->getBag('store-product')->toJson() !!}'))
        @endif
        @if($errors->hasBag('update-product'))
            showProductEditForm('{{ "{$url}/" . session()->get('productId') }}')
            console.error(JSON.parse('{!! $errors->getBag('update-product')->toJson() !!}'))
        @endif
    })
    </script>
@endpush