@extends('layouts.app')
@section('title', 'Closed Register Logs')

@section('content')
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">Closed Register Logs</h1>
</section>

<section class="content">
    @component('components.filters', ['title' => __('report.filters')])
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('crl_date_filter', __('report.date_range') . ':') !!}
                {!! Form::text('crl_date_filter', null, ['placeholder' => __('lang_v1.select_a_date_range'), 'class' => 'form-control', 'readonly', 'id' => 'crl_date_filter']); !!}
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('crl_location_id', __('business.business_location') . ':') !!}
                {!! Form::select('crl_location_id', $business_locations ?? [], null, ['class' => 'form-control select2', 'style' => 'width:100%']); !!}
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('crl_user_id', __('report.user') . ':') !!}
                {!! Form::select('crl_user_id', $users ?? [], null, ['class' => 'form-control select2', 'style' => 'width:100%']); !!}
            </div>
        </div>
    @endcomponent

    @component('components.widget', ['class' => 'box-primary', 'title' => 'Closed Register Logs'])
        <div class="table-responsive">
            <table class="table table-bordered table-striped" id="closed_register_logs_table">
                <thead>
                    <tr>
                        <th>@lang('report.open_time')</th>
                        <th>@lang('report.close_time')</th>
                        <th>@lang('sale.location')</th>
                        <th>@lang('report.user')</th>
                        <th>@lang('messages.action')</th>
                    </tr>
                </thead>
            </table>
        </div>
    @endcomponent
</section>
@endsection

@section('javascript')
<script>
$(document).ready(function () {
    if ($('.select2').length) {
        $('.select2').select2({ width: '100%' });
    }

    var start = moment();
    var end = moment();
    if ($('#crl_date_filter').length) {
        $('#crl_date_filter').daterangepicker(
            $.extend(true, {}, dateRangeSettings, { startDate: start, endDate: end }),
            function (start, end) {
                $('#crl_date_filter').val(start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format));
                table.ajax.reload();
            }
        );
        $('#crl_date_filter').val(start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format));

        $('#crl_date_filter').on('cancel.daterangepicker', function () {
            $('#crl_date_filter').val('');
            table.ajax.reload();
        });
    }

    var table = $('#closed_register_logs_table').DataTable({
        processing: true,
        serverSide: true,
        aaSorting: [[1, 'desc']],
        ajax: {
            url: "{{ action([\App\Http\Controllers\ClosedRegisterLogController::class, 'index']) }}",
            data: function (d) {
                if ($('#crl_date_filter').length && $('#crl_date_filter').val()) {
                    d.start_date = $('#crl_date_filter').data('daterangepicker').startDate.format('YYYY-MM-DD');
                    d.end_date = $('#crl_date_filter').data('daterangepicker').endDate.format('YYYY-MM-DD');
                }
                d.location_id = $('#crl_location_id').val();
                d.user_id = $('#crl_user_id').val();
            }
        },
        columns: [
            { data: 'open_time', name: 'open_time' },
            { data: 'closed_at', name: 'closed_at' },
            { data: 'location_name', name: 'bl.name' },
            { data: 'user_name', name: 'user_name', orderable: false },
            { data: 'action', name: 'action', orderable: false, searchable: false },
        ]
    });

    $(document).on('change', '#crl_location_id, #crl_user_id', function () {
        table.ajax.reload();
    });
});
</script>
@endsection