@extends('admin.layouts.adminpanel')

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

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

@section('content')
    <div class="container-fluid">
        <div class="card">
            <div class="card-body table-responsive no-padding">
                <div class="alert alert-success" style="display:none"></div>
                <div class="alert alert-danger" style="{{ session('message') ? '' : 'display:none;' }}">
                    @if ($message = session()->pull('message'))
                        {!! $message !!}
                    @endif
                </div>
                @can('crear operaciones')
                    <div class="row">
                        <div class="col-lg-12">
                            <a href="javascript:loadContent('{{ route('operations.create') }}')" class="btn btn-info">
                                <i class="fas fa-plus-circle" style="padding-right: 5px"></i>
                                {{ __('New Operation') }}
                            </a>
                        </div>
                    </div><br>
                @endcan
                <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_operation" class="form-control" autocomplete="off">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="form-group">
                            <label for="account_id">{{ __('Account') }}</label>
                            <select class="form-control" name="account_id" id="account_id" onChange="drawTable()">
                                <option value="">
                                    {{ __('-- All accounts --') }}
                                </option>
                                @foreach ($accounts as $account)
                                    <option value="{{ $account->id }}">
                                        {{ $account->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-md-6 d-flex align-items-end">
                        <div style="margin-bottom: 1rem;">
                            <button type="button" class="btn btn-light" id="saveFilters">
                                {{ __('Save filters') }}
                            </button>
                            <button type="button" class="btn btn-light" style="margin-left: 10px;"
                                onclick="clearFilters()">
                                {{ __('Clear filters') }}
                            </button>
                        </div>
                    </div>

                </div>

                <br>

                <table id="tbl_operations" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>{{ __('Date') }}</th>
                            <th>{{ __('Operation') }}</th>
                            <th>{{ __('Bank') }}</th>
                            <th>{{ __('Account') }}</th>
                            <th>{{ __('Number') }}</th>
                            <th>{{ __('Type') }}</th>
                            <th>{{ __('Concept') }}</th>
                            <th>{{ __('Currency') }}</th>
                            <th>{{ __('Exchange Rate') }}</th>
                            <th style="text-align:right">{{ __('Amount') }}</th>
                            <th>{{ __('Actions') }}</td>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

            </div>
        </div>
    </div>
    <script>
        var filters = @json($filters);

        if (filters.account_id) {
            $('#account_id').val(filters.account_id);
            $('#account_id').trigger('change');
        }

        function drawTable() {

            initializeDataTable(
                "#tbl_operations",
                "{{ route('operations.datatables') }}",
                operationsTableColumns,
                [{
                        targets: 10,
                        width: "80px"
                    },
                    {
                        targets: 9,
                        className: "text-right",
                    },
                ],
                [
                    [0, "desc"]
                ]
            );
        }

        function handleAction(select) {
            const selectedOption = select.value;
            if (selectedOption === 'edit') {
                const url = select.options[select.selectedIndex].getAttribute('data-url');
                loadContent(url);
            } else if (selectedOption === 'delete') {
                const id = select.options[select.selectedIndex].getAttribute('data-id');
                const url = select.options[select.selectedIndex].getAttribute('data-url');

                deleteRow(url, 'tbl_operations', ['Operación', id]);
            }
            select.value = '';
        }

        $('#date_range_operation').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_operation").focus();
        });

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

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

        $('#date_range_operation').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_operation').val(startDate.format('YYYY/MM/DD') + ' - ' + endDate.format(
                    'YYYY/MM/DD'));

                drawTable();
            }
        });

        $('#saveFilters').on('click', function(e) {
            e.preventDefault();
            let defaultStartDate = null;
            if (startDate && startDate.isValid()) {
                defaultStartDate = startDate.format("YYYY/MM/DD");
            } else {
                defaultStartDate = "";
            }
            let defaultEndDate = null;
            if (endDate && endDate.isValid()) {
                defaultEndDate = endDate.format("YYYY/MM/DD");
            } else {
                defaultEndDate = "";
            }

            const filters = {
                account_id: $('#account_id').val(),
                startDate: defaultStartDate,
                endDate: defaultEndDate,
            };

            $.ajax({
                url: "{{ route('operations.save-filters') }}",
                method: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    filters: filters,
                },
                success: function(response) {
                    showStatus(true, response.status);
                },
                error: function(xhr) {
                    alert('{{ __('Failed to save filters.') }}');
                }
            });
        });

        function clearFilters() {

            startDate = undefined;
            endDate = undefined;

            var today = new Date();

            $('#date_range_operation').data('daterangepicker').setStartDate(today);
            $('#date_range_operation').data('daterangepicker').setEndDate(today);

            $('#account_id').val('');
            $('#date_range_operation').val('');

            drawTable();
        }

        startDate = undefined;
        endDate = undefined;

        $('#date_range_operation').val('');

        if (filters.startDate && filters.endDate) {
            startDate = moment(filters.startDate);
            endDate = moment(filters.endDate);

            if (startDate.isValid() && endDate.isValid()) {
                $('#date_range_operation').data('daterangepicker').setStartDate(startDate);
                $('#date_range_operation').data('daterangepicker').setEndDate(endDate);

                drawTable();
            } else {
                console.log('Invalid start or end date');
            }
        }
    </script>
@endsection