@extends('layouts.app')

@section('form-title') {{ __('Articles') }} @endsection

@section('breadcrumb') 
<li class="breadcrumb-item">{{ __('Articles') }}</li> 
@endsection
    
@section('content')
<style>
    .cursor-pointer{
        cursor: pointer;
    }
</style>
<div class="pcoded-inner-content">
    <div class="main-body">
        <div class="page-wrapper">
            <div class="page-body">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5>{{ __('Quick filters') }}</h5>
                            </div>
                            <div class="card-block">
                                <div class="row p-2 align-items-center cursor-pointer quick-filter" data-type="delivery-task-planned" style="background-color: #960ADC; color:#fff;">
                                    <div class="col-auto bg-white text-center rounded-circle p-2">
                                        <span style="color:#960ADC;">{!! config('furnit.delivery_icon') !!}</span>
                                    </div>
                                    <div class="col">{{ __('Show articles expected to be delivered (=Delivery task planned)') }}</div>
                                </div>
                                <div class="row p-2 mt-2 align-items-center cursor-pointer quick-filter" data-type="retrieve-task-planned" style="background-color: #960ADC; color:#fff;">
                                    <div class="col-auto bg-white text-center rounded-circle p-2">
                                        <span style="color:#960ADC;">{!! config('furnit.retrieve_icon') !!}</span>
                                    </div>
                                    <div class="col">{{ __('Show articles that need to be retrieved (=Retrieve task planned)') }}</div>
                                </div>
                                <div class="row p-2 mt-2 align-items-center cursor-pointer quick-filter" data-type="delivery-task-not-planned" style="background-color: #E74C3C; color:#fff;">
                                    <div class="col-auto bg-white text-center rounded-circle p-2">
                                        <span style="color:#E74C3C;">{!! config('furnit.delivery_icon') !!}</span>
                                    </div>
                                    <div class="col">{{ __('Show delivery articles that have not yet been ordered (=Delivery task not planned)') }}</div>
                                </div>
                                <div class="row p-2 mt-2 align-items-center cursor-pointer quick-filter" data-type="retrieve-task-not-planned" style="background-color: #E74C3C; color:#fff;">
                                    <div class="col-auto bg-white text-center rounded-circle p-2">
                                        <span style="color:#E74C3C;">{!! config('furnit.retrieve_icon') !!}</span>
                                    </div>
                                    <div class="col">{{ __('Show items that need to be retrieved and have not yet been ordered (=Retrieve task not planned)') }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5>{{ __('Filter') }}</h5>
                            </div>
                            <div class="card-block">
                                <form name="frm_filter" id="frm_filter">
                                    <div class="row">
                                        @if(canViewUpdate('View supplier'))
                                        <div class="col-6">
                                            <p style="font-weight: 600;">{{ __('Supplier') }}</p>
                                            <div class="checkbox-zoom zoom-primary">
                                                <label class="form-label">
                                                    <input type="checkbox" class="single-selection" id="select-all-suppliers" checked>
                                                    <span class="cr">
                                                        <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                    </span>
                                                    <span>{{ __('(De) select all') }}</span>
                                                </label>
                                            </div><br>
                                            <hr>
                                            @foreach($suppliers as $supplier)
                                            <div class="checkbox-zoom zoom-primary">
                                                <label class="form-label">
                                                    <input type="checkbox" class="single-selection" name="suppliers[]" onclick="fetch_articles(1);" value="{{ $supplier->id }}" checked>
                                                    <span class="cr">
                                                        <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                    </span>
                                                    <span>{{ $supplier->name }}</span>
                                                </label>
                                            </div><br>
                                            @endforeach
                                        </div>
                                        @endif
                                        <div class="col-6">
                                            <div class="row">
                                                <div class="col-12">
                                                    <p style="font-weight: 600;">{{ __('Location') }}</p>
                                                    <div class="checkbox-zoom zoom-primary text-danger">
                                                        <label class="form-label">
                                                            <input type="checkbox" class="single-selection get-articles" name="locations[]" value="supplier" checked>
                                                            <span class="cr">
                                                                <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                            </span>
                                                            <span>{{ __('Supplier') }}</span>
                                                        </label>
                                                    </div><br>
                                                    <div class="checkbox-zoom zoom-primary text-success">
                                                        <label class="form-label">
                                                            <input type="checkbox" class="single-selection get-articles" name="locations[]" value="appowner" checked>
                                                            <span class="cr">
                                                                <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                            </span>
                                                            <span>{{ applicationOwner()->name }}</span>
                                                        </label>
                                                    </div><br>
                                                    <div class="checkbox-zoom zoom-primary text-default">
                                                        <label class="form-label">
                                                            <input type="checkbox" class="single-selection get-articles" name="locations[]" value="enduser">
                                                            <span class="cr">
                                                                <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                            </span>
                                                            <span>{{ __('EndUser') }}</span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row mt-4">
                                                <div class="col-12">
                                                    <p style="font-weight: 600;">{{ __('Transport') }}</p>
                                                    <div class="checkbox-zoom zoom-primary">
                                                        <label class="form-label">
                                                            <input type="checkbox" class="single-selection get-articles" name="transports[]" value="delivery" checked>
                                                            <span class="cr">
                                                                <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                            </span>
                                                            <span>
                                                                <i class="helper me-1">{!! config('furnit.delivery_icon') !!}</i> 
                                                                {{ __('Delivery') }}
                                                            </span>
                                                        </label>
                                                    </div><br>
                                                    <div class="checkbox-zoom zoom-primary">
                                                        <label class="form-label">
                                                            <input type="checkbox" class="single-selection get-articles" name="transports[]" value="retreive" checked>
                                                            <span class="cr">
                                                                <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                            </span>
                                                            <span>
                                                                <i class="helper me-1">{!! config('furnit.retrieve_icon') !!}</i> 
                                                                {{ __('Retreive') }}
                                                            </span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row mt-4">
                                                <div class="col-12">
                                                    <p style="font-weight: 600;">{{ __('Article task status') }}</p>
                                                    <div class="checkbox-zoom zoom-primary">
                                                        <label class="form-label">
                                                            <input type="checkbox" class="single-selection get-articles" name="article_status[]" value="retrieve-task-not-planned" checked>
                                                            <span class="cr">
                                                                <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                            </span>
                                                            <span>{{ __('Retrieve task not planned') }}</span>
                                                        </label>
                                                    </div><br>
                                                    <div class="checkbox-zoom zoom-primary">
                                                        <label class="form-label">
                                                            <input type="checkbox" class="single-selection get-articles" name="article_status[]" value="retrieve-task-planned" checked>
                                                            <span class="cr">
                                                                <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                            </span>
                                                            <span>{{ __('Retrieve task planned') }}</span>
                                                        </label>
                                                    </div><br>
                                                    <div class="checkbox-zoom zoom-primary">
                                                        <label class="form-label">
                                                            <input type="checkbox" class="single-selection get-articles" name="article_status[]" value="delivery-task-not-planned" checked>
                                                            <span class="cr">
                                                                <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                            </span>
                                                            <span>{{ __('Delivery task not planned') }}</span>
                                                        </label>
                                                    </div><br>
                                                    <div class="checkbox-zoom zoom-primary">
                                                        <label class="form-label">
                                                            <input type="checkbox" class="single-selection get-articles" name="article_status[]" value="delivery-task-planned" checked>
                                                            <span class="cr">
                                                                <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                            </span>
                                                            <span>{{ __('Delivery task planned') }}</span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="card">
                        <form name="frm_sort" id="frm_sort">
                            <div class="card-header">
                                <div class="row">
                                    <div class="col-sm-8">
                                        <h5>{{ __('Articles') }}</h5>
                                    </div>
                                    {{-- <div class="col-sm-3">
                                        {!! articleSortOptions($name = 'article_sort_by', $selected = NULL, $class = 'get-articles') !!}
                                    </div> --}}
                                    <div class="col-sm-4">
                                        <div class="row">
                                            <div class="col-md-4">{{ __('Show projects') }}:</div>
                                            <div class="col-md-8">
                                                <div class="checkbox-zoom zoom-primary w-100">
                                                    <label class="form-label w-100">
                                                        <input type="checkbox" class="single-selection get-articles" name="show_future_deadline" id="show_future_deadline" value="yes" checked>
                                                        <span class="cr">
                                                            <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                                        </span>
                                                        <span>{{ __('With future deadlines') }}</span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="card-block" id="container-articles"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('child-scripts')
<script>
$(document).ready(function(){
    // Initial call
    fetch_articles(1);

    // Handler for pagination links
    $(document).on('click', '.pagination a', function(event){
      event.preventDefault();
      let page = $(this).attr('href').split('page=')[1];
      fetch_articles(page);
    });

    // "Select All" handler for suppliers
    $(document).on('change', '#select-all-suppliers', function(){
        var isChecked = $(this).is(':checked');
        // Temporarily unbind the change event for supplier checkboxes
        //$("input[name='suppliers[]']").off('change', supplierChangeHandler);
        // Update all supplier checkboxes
        $("input[name='suppliers[]']").prop('checked', isChecked);
        // Call fetch_articles just once after updating
        fetch_articles(1);
        // Rebind the change event for supplier checkboxes
        //$("input[name='suppliers[]']").on('change', supplierChangeHandler);
    });

    $(document).on('change', '.get-articles', function(){
        fetch_articles(1);
    });

    // Quick filter and other handlers remain unchanged
    $(document).on('click', '.quick-filter', function(){
        let type = $(this).data('type');
        
        if(type === 'delivery-task-planned'){
            setQuickFilter('supplier', 'delivery', type);
        } else if(type === 'retrieve-task-planned'){
            setQuickFilter('supplier', 'retreive', type);
        } else if(type === 'delivery-task-not-planned'){
            setQuickFilter('supplier', 'delivery', type);
        } else if(type === 'retrieve-task-not-planned'){
            setQuickFilter('supplier', 'retreive', type);
        }
    });

    function setQuickFilter(location, transport, article_task_status) {
        $('input[name="locations[]"]').each(function() {
            $(this).prop('checked', false);
            if ($(this).val() === location) {
                $(this).prop('checked', true);
            }
        });

        $('input[name="transports[]"]').each(function() {
            $(this).prop('checked', false);
            if ($(this).val() === transport) {
                $(this).prop('checked', true);
            }
        });

        $('input[name="suppliers[]"]').each(function() {
            $(this).prop('checked', true);
        });

        $('input[name="article_status[]"]').each(function() {
            $(this).prop('checked', false);
            if ($(this).val() === article_task_status) {
                $(this).prop('checked', true);
            }
        });

        $('#show_future_deadline').prop('checked', true);
        fetch_articles(1);
    }

    $(document).on('click', '.btn-location-to-appowner', function(){
        var articles = $('input[name="articles[]"]:checked').map(function() {
            return $(this).val();
        }).get();

        if(articles.length > 0){
            $.ajax({
                type: "POST",
                url: "{{ route('change.article.location.to.appowner') }}",
                data: {articles: articles},
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                success: function(response) {
                    fetch_articles(1);
                }
            });
        }
    });
});

// Function to fetch articles via AJAX
function fetch_articles(page){
    let filters = {
        suppliers: $('input[name="suppliers[]"]:checked').map(function(){ return $(this).val(); }).get(),
        locations: $('input[name="locations[]"]:checked').map(function(){ return $(this).val(); }).get(),
        transports: $('input[name="transports[]"]:checked').map(function(){ return $(this).val(); }).get(),
        article_status: $('input[name="article_status[]"]:checked').map(function(){ return $(this).val(); }).get(),
    };

    let sorts = {
        article_sort_by: $('#article_sort_by').val(),
        show_future_deadline: ($('#show_future_deadline').is(':checked') ? 'yes' : 'no'),
        articles_at_enduser: ($('#articles_at_enduser').is(':checked') ? 'yes' : 'no')
    };

    $.ajax({
        method: 'POST',
        url: "{{ route('articles.list') }}",
        data: {page: page, filters: filters, sorts: sorts},
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        success: function(data){
            $('#container-articles').html(data);
            initFooTable();
        }
    });
}

function initFooTable(){
    $('.data-table').footable({
    "paging": {
        "enabled": false,
    },
    "sorting": {
        "enabled": true
    }
    });
}
</script>
@endpush