@extends('layouts.app')
@section('title', trans('menu.machinery_title'))

@section('plugin-styles')
    <link rel="stylesheet" href="{{ asset('vendors/jquery-file-upload/uploadfile.css') }}">
@stop

@section('content')
    <div class="content">
        @php $icon = App\Services\HtmlUtils::icon("icon-chevron-right");@endphp

        <x-content.header title_classes="flex items-center gap-2 flex-wrap"
            title="{!! ($category ? $category->name . ' ' . $icon . ' ' : '') . __('menu.machinery_title') !!}"
            subTitle="{{ $totalCount }} {{ __('title.lbl_total_equipment') }}">
            <x-slot:headerRight>
                @can('create machineries')
                    <a href="{{ url('machineries/create?category_id=' . ($category ? $category->id : 0)) }}"
                        class="btn-secondary-sm"><x-svg-icon icon="icon-plus" /></i>{{ trans('forms.lbl_add_new') }}</a>
                @endcan

                <a href="{{ route('machineries.categories.index') }}"
                    class="btn-secondary-sm {{ isActive('machineries.categories.index') ? 'active' : '' }}">
                    <x-svg-icon icon="icon-folder" />
                    {{ trans('title.categories') }}
                </a>

                <a class="btn-tertiary-sm" href="{{ route('machineries.reports.index') }}"><x-svg-icon
                        icon="icon-dataflow" />{{ trans('forms.machinery_reports') }}</a>
            </x-slot:headerRight>
        </x-content.header>

        @include('machinery::stats-cards')

        @include('machinery::filter')

        <div class="relative">
            <div
                class="selection-overlay hidden absolute top-1 left-16 right-1 bg-white/90 rounded-t-lg px-4 py-3 lg:py-2 flex items-center gap-3 z-[20]">
                <span class="text-md-semibold text-custom-grey-600"><span class="selected-count">0</span>
                    {{ trans('forms.lbl_items_selected') }}</span>
                <x-svg-icon icon="vertical-bar" />

                @if ($user->hasAnyPermission(['delete machineries']))
                    <a href="javascript:;" data-uri="{{ url('machineries') }}"
                        class="btn-delete-all text-sm-semibold text-custom-orange-500 flex items-center gap-2">
                        <x-svg-icon width="24" height="24" icon="icon-trash" />
                        <span class="hidden lg:inline-block">{{ trans('forms.lbl_delete') }}</span>
                    </a>
                    <x-svg-icon icon="vertical-bar" />
                @endif

                @if ($user->can('update machineries'))
                    <a href="javascript:;" data-toggle="modal" data-target="#modal-bulk-edit"
                        class="btn-bulk-edit text-sm-semibold text-custom-orange-500 flex items-center gap-2">
                        <x-svg-icon width="24" height="24" icon="icon-edit" />
                        <span class="hidden lg:inline-block">{{ trans('forms.lbl_bulk_edit') }}</span>
                    </a>
                @endif
            </div>

            <table id="datatable" class="table-custom-striped w-full" style="width: 100%;">

                <thead>

                    <tr>

                        <th scope="col">

                            <input class="table-header-checkbox" type="checkbox" name="select_all" id="select-all"
                                value="1">

                        </th>
                        <th scope="col">{{ trans('tables.name_title') }}</th>
                        <th scope="col">{{ trans('machineries.category') }}</th>
                        <th scope="col">{{ trans('machineries.maintenance_model') }}</th>

                        <th scope="col">{{ trans('tables.serial_number') }} #</th>

                        <th scope="col">{{ trans('tables.status_title') }}</th>

                        <th scope="col">{{ trans('machineries.maintenance_next_maintenance') }}</th>

                        <th scope="col">{{ trans('tables.action_title') }}</th>

                    </tr>

                </thead>

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

    @include('machinery::bulk-edit')
@stop
@section('footer-script')

    <script src="{{ asset('js/jquery-file-upload-document-creator.js') }}"></script>

    <script type="text/javascript">
        PDDataTable({
            url: "{{ route('machineries.index') }}",
            searching: false,
            order: [
                [3, 'desc'],
                [1, 'asc']
            ],
            columns: [{
                    data: 'checkboxgrid',
                    name: 'checkboxgrid',
                    orderable: false,
                    searchable: false,
                    className: "checkbox-column"
                },
                {
                    data: 'name',
                    name: 'name',
                    className: "!text-custom-grey-900 !font-medium"
                },
                {
                    data: 'category.name',
                    name: 'category.name'
                },
                {
                    data: 'model',
                    name: 'model',
                    className: 'row-status'
                },
                {
                    data: 'serial_number',
                    name: 'serial_number',
                    className: 'row-status'
                },
                {
                    data: 'status',
                    name: 'status',
                    className: 'status'
                },
                {
                    data: 'next_maintenance_at',
                    name: 'next_maintenance_at',
                    className: 'start_date'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false,
                    className: "text-right row-action"
                }
            ],
            callbackFunc: function(d) {
                // Handle bulk edit button click
                $('.btn-bulk-edit').on('click', function() {
                    let ids = '',
                        val = [];

                    if (PDTable !== null) {
                        let rows = PDTable.rows({
                            'search': 'applied'
                        }).nodes();
                        $(rows).find(".checkbox-column").find(':checkbox:checked').each(function(i) {
                            if ($(this).val() !== "") {
                                val[i] = $(this).val();
                            }
                        });
                    } else {
                        $("#datatableCustom .row-checkbox:checked").each(function(i) {
                            if ($(this).val() !== "") {
                                val[i] = $(this).val();
                            }
                        });
                    }

                    if (val === undefined || val.length == 0) {
                        alert(localize_string.lbl_no_row_selected_text);
                        return false;
                    }

                    $('#bulk-edit-ids').val(val.join(','));
                });

                d.term = $('input[name="query"]').val();
                d.active = $('.tabs-btn-box.active').attr('data-val');
                d.location_id = $('input[name="location_id[]"]:checked').map(function() {
                    return $(this).val();
                }).get();
                d.workstation_id = $('input[name="workstation_id[]"]:checked').map(function() {
                    return $(this).val();
                }).get();
                d.category_id = $('input[name="category_id[]"]:checked').map(function() {
                    return $(this).val();
                }).get();
                d.status = $('select[name="status"]').val();
            },
            drawCallback: function(settings) {
                if (this.api().page.info().pages > 1) {
                    $('.dataTables_paginate').show();
                }

                if ($(".btn-filter span.spinner-border").length > 0) {
                    spinner($(".btn-filter"), false);
                }
            }
        });

        $('body').on('click', '.tabs-btn-box', function() {
            // Reset all tabs and contents for the second set filter
            $(".tabs-btn-box").removeClass("active");

            // Set new active state for the clicked tab in the filter set
            $(this).addClass("active");

            PDTable.draw();
        });

        $(document).on("multi_select_option_change", function(event, eventInfo) {
            PDTable.draw();
        });


        searchTerm = _.debounce(function(data) {
            PDTable.draw();
        }, 500);

        $("body").on("keydown", "#query", function() {
            searchTerm();
        });

        $("body").on("change", "#location_id", function() {
            PDTable.draw();
        });
        $("body").on("change", "#workstation_id", function() {
            PDTable.draw();
        });

        $("body").on("change", "select[name='status']", function() {
            PDTable.draw();
        });
    </script>
@stop