@extends('admin.layouts.adminpanel')

@section('page_header')
    @php
        $page_title = 'Projects Balance';
    @endphp

    @include('admin.partials.page_header')
@endsection

@section('content')
    <div class="container-fluid">
        <div class="card">
            <div class="card-body table-responsive no-padding">

                {{-- Filters --}}
                <div class="row">
                    <div class="col-md-6 col-lg-3">
                        <div class="form-group">
                            <label><strong>{{ __('Date Range') }}</strong></label>
                            <div class="form-group input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="far fa-calendar"></i></span>
                                </div>
                                <input type="text" id="date_range_project" class="form-control" autocomplete="off">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="form-group">
                            <label for="subclient_id">{{ __('Client') }}</label>
                            <select class="form-control" name="subclient_id" id="subclient_id"
                                onChange="filterProjects();drawTable()">
                                <option value="">{{ __('-- Select client --') }}</option>
                                @foreach ($subclients as $subclient)
                                    <option value="{{ $subclient->id }}">
                                        {{ $subclient->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="form-group">
                            <label for="project_id">{{ __('Project') }}</label>
                            <select class="form-control" name="project_id" id="project_id" onChange="drawTable()">
                                <option value="">{{ __('-- Select project --') }}</option>
                                @foreach ($projects as $project)
                                    <option value="{{ $project->id }}" data-subclient_id="{{ $project->subclient_id }}">
                                        {{ $project->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="form-group">
                            <label for="status">{{ __('Status') }}</label>
                            <select class="form-control" name="status" id="status" onChange="drawTable()">
                                <option value="">{{ __('-- Select status --') }}</option>
                                <option value="En proceso">
                                    En proceso
                                </option>
                                <option value="Terminado">
                                    Terminado
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3 d-flex align-items-end">
                        <div style="margin-bottom: 1rem;">
                            <button type="button" class="btn btn-light" onclick="clearFilters()">
                                {{ __('Clear filters') }}
                            </button>
                        </div>
                    </div>
                </div>

                <br>

                {{-- Table --}}
                <table id="tbl_project_report" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>{{ __('Date') }}</th>
                            <th>{{ __('Client') }}</th>
                            <th>{{ __('Project') }}</th>
                            <th>{{ __('Revenue') }}</th>
                            <th>{{ __('Expenses') }}</th>
                            <th>Balance</th>
                            <th>{{ __('Status') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

            </div>
        </div>
    </div>
    <script>
        function drawTable() {

            initializeDataTable(
                "#tbl_project_report",
                "{{ route('reports.project-balance') }}",
                projectBalanceTableColumns,
                [{
                    targets: [3, 4, 5],
                    className: "text-right",
                }, ],
                [
                    [0, "desc"]
                ]
            );
        }

        function filterProjects() {
            var subclient_id = $('#subclient_id').val();

            $('#project_id option').each(function() {
                var option_subclient_id = $(this).data('subclient_id');

                if (subclient_id === '' || option_subclient_id == subclient_id || option_subclient_id ===
                    undefined) {
                    $(this).show().prop('disabled', false);
                } else {
                    $(this).hide().prop('disabled', true);
                }
            });

            $('#project_id').val($('#project_id option:visible:first').val());
        }

        $('#date_range_project').daterangepicker({
            locale: {
                autoUpdateInput: false,
                format: 'YYYY/MM/DD',
                applyLabel: "Aplicar",
                cancelLabel: "Cancelar",
                fromLabel: "De",
                toLabel: "A",
                customRangeLabel: "Personalizado",
                daysOfWeek: [
                    "Do",
                    "Lu",
                    "Ma",
                    "Mi",
                    "Ju",
                    "Vi",
                    "Sa"
                ],
                monthNames: [
                    "Enero",
                    "Febrero",
                    "Marzo",
                    "Abril",
                    "Mayo",
                    "Junio",
                    "Julio",
                    "Agosto",
                    "Septiembre",
                    "Octubre",
                    "Noviembre",
                    "Diciembre"
                ],
                firstDay: 1
            }
        }, function(start, end, label) {});

        $(".input-group-text i.far.fa-calendar").on("click", function() {
            $("#date_range_project").focus();
        });

        $('#date_range_project').on('cancel.daterangepicker', function(ev, picker) {
            if (!startDate && !endDate) {
                $('#date_range_project').val('');
            }
        });

        $('#date_range_project').on('hide.daterangepicker', function() {
            if (!startDate && !endDate) {
                $('#date_range_project').val('');
            }
        });

        $('#date_range_project').on('apply.daterangepicker', function(ev, picker) {

            if (picker.startDate && picker.endDate) {
                startDate = moment(picker.startDate, 'YYYY/MM/DD');
                endDate = moment(picker.endDate, 'YYYY/MM/DD');

                $('#date_range_project').val(startDate.format('YYYY/MM/DD') + ' - ' + endDate.format(
                    'YYYY/MM/DD'));

                drawTable();
            }
        });

        function clearFilters() {

            startDate = undefined;
            endDate = undefined;

            $('#date_range_project').data('daterangepicker').setStartDate(startDate);
            $('#date_range_project').data('daterangepicker').setEndDate(endDate);

            $('#date_range_project').val('');
            $('#subclient_id').val('');
            $('#project_id').val('');
            $('#status').val('');

            filterProjects();
            drawTable();
        }

        startDate = undefined;
        endDate = undefined;

        $('#date_range_project').val('');
    </script>
@endsection