@extends('adminlte::page')

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

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


@section('content')
    <ul class="nav nav-tabs">

        <li class="nav-item">
            <a class="nav-link @if($tabIndex === 'in_progress')active @endif" href="#in_progress" data-toggle="tab">
                Otvoreni
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link @if($tabIndex === 'for_invoice')active @endif" href="#for_invoice" data-toggle="tab">
                Za fakturirati
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link @if($tabIndex === 'completed')active @endif" href="#completed" data-toggle="tab">
                Završeni
            </a>
        </li>
    </ul>
    <div class="row">
        <div id="in_progress" class="col-12 page-tab @if($tabIndex != 'in_progress') d-none @endif">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="working-orders-table" class="table table-hover working-orders-table w-100"></table>
                    </div>
                </div>
            </div>
            <div class="ft-pagination">
                <span class="float-right position-right-10"></span>
            </div>
        </div>
        <div id="for_invoice" class="col-12 page-tab @if($tabIndex != 'for_invoice') d-none @endif">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="working-orders-for_invoice-table" class="table table-hover working-orders-table w-100"></table>
                    </div>
                </div>
            </div>
            <div class="ft-pagination">
                <span class="float-right position-right-10"></span>
            </div>
        </div>
        <div id="completed" class="col-12 page-tab @if($tabIndex != 'completed') d-none @endif">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="working-orders-completed-table" class="table table-hover working-orders-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('working_orders.modals.create')
    @include('working_orders.modals.delete')
    @include('working_orders.modals.filters')
    @include('working_orders.modals.productInfo')
@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' => 'number',
                'name' => 'number',
                'title' => __('working_orders.table.columns.number'),
                 'width' => '10%'
            ],
            [
                'data' => 'delivery_date',
                'name' => 'delivery_date',
                'title' => __('working_orders.table.columns.delivery_date')
            ],
            [
                'data' => 'esb',
                'name' => 'esb',
                'title' => __('working_orders.table.columns.esb')
            ],
            [
                'data' => 'client',
                'name' => 'client',
                'title' => __('working_orders.table.columns.client')
            ],
            [
                'data' => 'location',
                'name' => 'location',
                'title' => __('working_orders.table.columns.location')
            ],
            [
                'data' => 'contact_number',
                'name' => 'contact_number',
                'title' => __('working_orders.table.columns.contact_number')
            ],
            [
                'data' => 'product',
                'name' => 'product',
                'title' => __('working_orders.table.columns.product')
            ],
            [
                'data' => 'fault_description',
                'name' => 'fault_description',
                'title' => __('working_orders.table.columns.fault_description')
            ],
            [
                'data' => 'serviser',
                'name' => 'serviser',
                'title' => __('working_orders.table.columns.serviser')
            ],
            [
                'data' => 'status',
                'name' => 'status',
                'title' => __('working_orders.table.columns.status')
            ],
            [
                'data' => 'actions',
                'name' => 'actions',
                'title' => __('working_orders.table.columns.actions'),
                'sortable' => false,
                'width' => '10%'
            ]
        ];
        $url = url()->current();
        $endpoint = [
            'url' => "{$url}/all?completed=0",
            'dataSrc' => 'data'
        ];
        $endpointCompleted = [
            'url' => "{$url}/all?completed=1",
            'dataSrc' => 'data'
        ];
    @endphp

    {{-- Add inline js when developing or testing here. When you're finished, transfer to working_orders.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/working_orders.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-working_order'))
            $('#working-order-create-modal').modal('show')
            console.error(JSON.parse('{!! $errors->getBag('store-working_order')->toJson() !!}'))
        @endif
        @if($errors->hasBag('update-working_order'))
            showWorkingOrderEditForm('{{ "{$url}/working_orders/" . session()->get('working_orderId') }}')
            console.error(JSON.parse('{!! $errors->getBag('update-working_order')->toJson() !!}'))
        @endif


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

        //Implementacija select2 na polja u filteru
        initializeSelect2("filter[product_id]", "Odaberite uređaj", filterModalBody);
        initializeSelect2("filter[client_id]", "Odaberite klijenta", filterModalBody);
        initializeSelect2("filter[user_id]", "Odaberite servisera", filterModalBody);
        initializeSelect2("filter[status]", "Odaberite status", filterModalBody, -1);

        @if($serviserId)
            $('[id="filter[user_id]" ]').val({{$serviserId}}).change()
        @endif

        // Setting za kreiranje tablica
        let dt_settings = {
            order: [0, 'desc'],
            ajax: {
                url: route('working_orders.all'),
                data: function (d) {
                    d.completed = 0;
                    d.date_from = $('[id="filter[date_from]"]').val();
                    d.date_to = $('[id="filter[date_to]"]').val();
                    d.product_id = $('[id="filter[product_id]"]').val();
                    d.client_id = $('[id="filter[client_id]"]').val();
                    d.serviser_id = $('[id="filter[user_id]"]').val();
                    d.status = $('[id="filter[status]"]').val();
                }
            },
            columns: JSON.parse('@json($columns)'),
            rowCallback: function(row, data, dataIndex) {
                $(row).css('background-color', hexToRgba(data.statusColor, '0.15'));
            },
            columnDefs: [
                {
                    targets: "_all",
                    defaultContent: "--",
                    className: "dt-center",
                },
                {
                    targets: 0,
                    render: function ( data, type, row){
                        if (type === 'sort') {
                            return row.pad;
                        }
                        return '<a data-order="' + row.id + '" href="'+route('working_orders.edit', {'workingOrderId': row.id} )+'">' + row.name + '</a>';
                    },
                    createdCell: function (td, cellData, rowData, row, col) {
                        $(td).css('border-left', '10px solid ' + hexToRgba(rowData.statusColor, rowData.s === '3' ? 1 : 0));
                    }
                },
                {
                    targets: 1,
                    type: 'de_date',
                },
                {
                    targets: 6,
                    render: function ( data, type, row){
                        return '<a class="product-info" data-product_id="' + row.product_id + '">' + data + '</a>';
                    }
                },
                {
                    targets: 9,
                    render: function ( data, type, row){
                        return '<span style="color: '+row.statusColor+'">'+row.status+'</span>';
                    }
                },
            ],
            buttons: [
                {
                    text: '{!! trans('generic.buttons.filter') !!}',
                    className: 'btn btn-light',
                    action: () => filterModal.modal('show')
                },
                {
                    text: '{!! trans('generic.buttons.add') !!}',
                    className: 'btn btn-primary',
                    action: () => window.location.href = route("working_orders.create")
                }
            ],
        }

        let initialTab = '{{ $tabIndex }}';
        let initialPage = {{ (int)($page ?? 0) }};
        let pageLength = 10;

        if (initialTab === 'in_progress' && initialPage > 0) {
            dt_settings.displayStart = initialPage * pageLength;
        } else {
            dt_settings.displayStart = 0;
        }

        var table_in_progress = generateDatatable(dt_settings, $('#working-orders-table'))

        // Clone the columns array and modify for completed orders
        let columnsCompleted = JSON.parse('@json($columns)');
        columnsCompleted.forEach(column => {
            if (column.data === 'contact_number') {
                column.data = 'execution_date';
                column.name = 'execution_date';
                column.title = '{!! __('working_orders.table.columns.execution_date') !!}';
            }
        });

        dt_settings.ajax = {
            url: route('working_orders.all'),
                data: function (d) {
                d.for_invoice = 1;
                d.date_from = $('[id="filter[date_from]"]').val();
                d.date_to = $('[id="filter[date_to]"]').val();
                d.product_id = $('[id="filter[product_id]"]').val();
                d.client_id = $('[id="filter[client_id]"]').val();
                d.serviser_id = $('[id="filter[user_id]"]').val();
                d.status = $('[id="filter[status]"]').val();
            }
        };

        // displayStart za for_invoice tab
        if (initialTab === 'for_invoice' && initialPage > 0) {
            dt_settings.displayStart = initialPage * pageLength;
        } else {
            dt_settings.displayStart = 0;
        }

        var table_for_invoice = generateDatatable(dt_settings, $('#working-orders-for_invoice-table'));

        // Apply modified columns settings for completed orders
        columnsCompleted.splice(10, 0, {
            data: "is_invoiced",
            name: "is_invoiced",
            title: '{!! __('working_orders.table.columns.is_invoiced') !!}'
        });
        dt_settings.columns = columnsCompleted;

        dt_settings.ajax = {
            url: route('working_orders.all'),
                data: function (d) {
                d.completed = 1;
                d.date_from = $('[id="filter[date_from]"]').val();
                d.date_to = $('[id="filter[date_to]"]').val();
                d.product_id = $('[id="filter[product_id]"]').val();
                d.client_id = $('[id="filter[client_id]"]').val();
                d.serviser_id = $('[id="filter[user_id]"]').val();
                d.status = $('[id="filter[status]"]').val();
            }
        };

        // displayStart za completed tab
        if (initialTab === 'completed' && initialPage > 0) {
            dt_settings.displayStart = initialPage * pageLength;
        } else {
            dt_settings.displayStart = 0;
        }

        var table_completed = generateDatatable(dt_settings, $('#working-orders-completed-table'));

        // Helper: vrati DataTable instancu za tablicu gdje je kliknut link
        function getTableFromElement(el) {
            const $table = $(el).closest('table');
            return $table.DataTable();
        }

        $(document).on('click', '.working-orders-table tbody a.btn-edit', function (e) {
            e.preventDefault();

            const table = getTableFromElement(this);
            const pageInfo = table.page.info();
            const currentPage = pageInfo.page; // 0-based index

            const activeTab = $('.content .container-fluid .nav-link.active').attr('href').replace('#', '');
            // in_progress / for_invoice / completed

            const url = new URL(this.href, window.location.origin);
            url.searchParams.set('tabIndex', activeTab);
            url.searchParams.set('page', currentPage);

            window.location.href = url.toString();
        });

        $(document).on('click', '#submit-filter', function (){
            table_in_progress.ajax.reload();
            table_completed.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_in_progress.ajax.reload();
            table_completed.ajax.reload();
        })

        $(document).on('click', '.product-info', function (){
            let product_id = $(this).data('product_id');

            $.ajax({
                type: "GET",
                url: route('products.view', { productId: product_id, basic: 1 }),
                success: function(response){
                    $('#product-info-modal').modal('show');

                    $('#info-esb').text(response.data.esb)
                    $('#info-producer').text(response.data.producer)
                    $('#info-type').text(response.data.model_type)
                    $('#info-serial').text(response.data.serial_number)

                },
                error: function(response) {
                    $('#errorModal').modal('show');
                }
            });
        });

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

            deleteEntity('{{ "{$url}/" }}' + this.dataset.wo_id, function () {
                table_in_progress.ajax.reload()
                table_completed.ajax.reload()
                $('#working-order-delete-modal').modal('hide')
            })
        })

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

        @if($errors->hasBag('store-working_order'))
            $(`#wo-create-modal`).modal('show')
            console.error(JSON.parse('{!! $errors->getBag('store-working_order')->toJson() !!}'))
        @endif

    })
    </script>
@endpush