@extends('layouts.app')

@section('form-title') {{ __('Projects - To invoice') }} @endsection
@section('form-sub-title') {{ __('Click a project to view more information') }} @endsection

@section('breadcrumb') 
<li class="breadcrumb-item"><a href="{{ route('projects.index') }}">{{ __('Projects') }}</a> </li> 
<li class="breadcrumb-item">{{ __('To invoice') }}</li> 
@endsection
    
@section('content')

<div class="pcoded-inner-content">
  <div class="main-body">
    <div class="page-wrapper">
      <div class="page-body">
        <div class="row">
          <div class="card">
            <div class="card-header">
              <div class="row">
                <div class="col-sm-12">
                  <h5>{{ __('Projects - To invoice per client') }}</h5>
                </div>
              </div>
            </div>
            <div class="card-block">
                <div class="row">
                    <div class="col-sm-12">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs md-tabs" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-bs-toggle="tab" href="#clients" loaded="yes" role="tab">{{ $client_label }}</a>
                                <div class="slide"></div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#factories" loaded="no" role="tab">{{ __('Factories') }}</a>
                                <div class="slide"></div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#endusers" loaded="no" role="tab">{{ __('Endusers') }}</a>
                                <div class="slide"></div>
                            </li>
                        </ul>
                        <!-- Tab panes -->
                        <div class="tab-content card-block p-0">
                            <div class="tab-pane active" id="clients" role="tabpanel">
                              @include('to-invoice.client-projects')
                            </div>
                            <div class="tab-pane" id="factories" role="tabpanel">
                            </div>
                            <div class="tab-pane" id="endusers" role="tabpanel">
                            </div>
                        </div>
                        <input type="hidden" name="active_tab" id="active_tab" value="clients">
                        <input type="hidden" name="active_page" id="active_page" value="1">
                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('child-scripts')
<script>
    $(document).ready(function(){
        initFooTable();

        $(document).on('click', '.pagination a', function(event){
            event.preventDefault();
            let page = $(this).attr('href').split('page=')[1];
            $('#active_page').val(page);
            fetch_data();
        });

        $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
            let loaded = $(e.target).attr("loaded");
            let type = $(e.target).attr("href").split('#')[1];
            let page = 1;
            $('#active_tab').val(type);
            $('#active_page').val(page);
            
            fetch_data();
        });

        function fetch_data(){
            let owner_filter = $('#owner_filter').val();
            let type = $('#active_tab').val();
            let page = $('#active_page').val();

            $.ajax({
            url: "{{ route('to-invoice.index') }}",
            data: {page: page, type: type, owner: owner_filter},
            success: function(data){
                $('#'+type).html(data);
                initFooTable();
            }
            });
        }

        function initFooTable(){
            $('.data-table').footable({
                "paging": {
                "enabled": false,
                },
                "sorting": {
                "enabled": true
                }
            });
        }
    });

    $(document).on('click', '.check-all', function(){
        let isChecked = this.checked;
        let client = $(this).data('client');

        $('.p'+client).each(function(index, obj){
            this.checked = isChecked;
        });
    });
</script>
@endpush