@extends('layouts.app')
@section('title', 'Detailed Cash Register Report')

@section('css')
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
    .content, .content-header {
        font-family: 'Roboto', sans-serif !important;
    }
    .kpi-card {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid #f3f4f6;
    }
    .kpi-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    .kpi-icon {
        width: 48px;
        height: 48px;
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
@endsection

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">Detailed Cash Register Report</h1>
</section>

<!-- Main content -->
<section class="content">
    
    <!-- Summary KPI Widgets Row -->
    <div class="row" id="widgets_row" style="margin-bottom: 20px;">
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="kpi-card p-4 tw-p-5 tw-flex tw-items-center tw-justify-between">
                <div>
                    <span class="tw-text-sm tw-font-medium tw-text-gray-500">Registers Count</span>
                    <h3 class="tw-text-xl tw-font-bold tw-text-gray-900 tw-mt-1">
                        <span id="widget_open_count" class="tw-text-emerald-600">0</span> Open / 
                        <span id="widget_closed_count" class="tw-text-rose-500">0</span> Closed
                    </h3>
                </div>
                <div class="kpi-icon tw-bg-blue-50 tw-text-blue-600">
                    <svg xmlns="http://www.w3.org/2000/svg" class="tw-size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                    </svg>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="kpi-card p-4 tw-p-5 tw-flex tw-items-center tw-justify-between">
                <div>
                    <span class="tw-text-sm tw-font-medium tw-text-gray-500">Total Opening Cash</span>
                    <h3 class="tw-text-xl tw-font-bold tw-text-gray-900 tw-mt-1">
                        <span class="display_currency" data-currency_symbol="true" id="widget_total_opening">0.00</span>
                    </h3>
                </div>
                <div class="kpi-icon tw-bg-emerald-50 tw-text-emerald-600">
                    <svg xmlns="http://www.w3.org/2000/svg" class="tw-size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="kpi-card p-4 tw-p-5 tw-flex tw-items-center tw-justify-between">
                <div>
                    <span class="tw-text-sm tw-font-medium tw-text-gray-500">Refunds / Expenses</span>
                    <h3 class="tw-text-lg tw-font-bold tw-text-gray-900 tw-mt-1">
                        <span class="display_currency tw-text-rose-500" data-currency_symbol="true" id="widget_total_refund">0.00</span> / 
                        <span class="display_currency tw-text-orange-500" data-currency_symbol="true" id="widget_total_expense">0.00</span>
                    </h3>
                </div>
                <div class="kpi-icon tw-bg-red-50 tw-text-rose-600">
                    <svg xmlns="http://www.w3.org/2000/svg" class="tw-size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
                    </svg>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="kpi-card p-4 tw-p-5 tw-flex tw-items-center tw-justify-between">
                <div>
                    <span class="tw-text-sm tw-font-medium tw-text-gray-500">Total Payments Received</span>
                    <h3 class="tw-text-xl tw-font-bold tw-text-gray-900 tw-mt-1">
                        <span class="display_currency tw-text-indigo-600" data-currency_symbol="true" id="widget_total_payments">0.00</span>
                    </h3>
                </div>
                <div class="kpi-icon tw-bg-purple-50 tw-text-purple-600">
                    <svg xmlns="http://www.w3.org/2000/svg" class="tw-size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    @component('components.filters', ['title' => __('report.filters')])
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('register_location_id',  __('purchase.business_location') . ':') !!}
                {!! Form::select('register_location_id', $business_locations, null, ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('lang_v1.all')]); !!}
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('register_user_id',  'Cashier / User:') !!}
                {!! Form::select('register_user_id', $users, null, ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('lang_v1.all')]); !!}
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('register_status',  'Status:') !!}
                {!! Form::select('register_status', ['open' => 'Open', 'close' => 'Closed'], null, ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('lang_v1.all')]); !!}
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('register_date_filter', __('report.date_range') . ':') !!}
                {!! Form::text('register_date_filter', null, ['placeholder' => __('lang_v1.select_a_date_range'), 'class' => 'form-control', 'readonly']); !!}
            </div>
        </div>
    @endcomponent

    <!-- Datatable widget -->
    @component('components.widget', ['class' => 'box-primary'])
        <div class="table-responsive">
            <table class="table table-bordered table-striped" id="cash_register_table" style="width: 100%;">
                <thead>
                    <tr>
                        <th>Cashier / User</th>
                        <th>Location</th>
                        <th>Status</th>
                        <th>Open Time</th>
                        <th>Close Time</th>
                        <th>Opening Cash</th>
                        <th>Payments Recd</th>
                        <th>Refunds</th>
                        <th>Expenses</th>
                        <th>Expected Cash</th>
                        <th>Actual Cash</th>
                        <th>Cash Difference</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    @endcomponent

    <div class="modal fade view_register" tabindex="-1" role="dialog" 
        aria-labelledby="gridSystemModalLabel">
    </div>
</section>
<!-- /.content -->

@endsection

@section('javascript')
<script type="text/javascript">
    $(document).ready(function() {
        if($('#register_date_filter').length == 1) {
            $('#register_date_filter').daterangepicker(
                dateRangeSettings,
                function (start, end) {
                    $('#register_date_filter').val(start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format));
                    cash_register_table.ajax.reload();
                }
            );
            $('#register_date_filter').on('cancel.daterangepicker', function(ev, picker) {
                $('#register_date_filter').val('');
                cash_register_table.ajax.reload();
            });
        }

        cash_register_table = $('#cash_register_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '/ls-reports/cash-register-report',
                data: function(d) {
                    if($('#register_date_filter').val()) {
                        var start = $('#register_date_filter').data('daterangepicker').startDate.format('YYYY-MM-DD');
                        var end = $('#register_date_filter').data('daterangepicker').endDate.format('YYYY-MM-DD');
                        d.start_date = start;
                        d.end_date = end;
                    }
                    d.location_id = $('#register_location_id').val();
                    d.user_id = $('#register_user_id').val();
                    d.status = $('#register_status').val();
                }
            },
            columns: [
                { data: 'user_name', name: 'user_name' },
                { data: 'location_name', name: 'bl.name' },
                { data: 'status', name: 'cash_registers.status' },
                { data: 'created_at', name: 'cash_registers.created_at' },
                { data: 'closed_at', name: 'cash_registers.closed_at' },
                { data: 'cash_in_hand', name: 'cash_in_hand', searchable: false },
                { data: 'total_payment', name: 'total_payment', searchable: false },
                { data: 'total_refund', name: 'total_refund', searchable: false },
                { data: 'total_expense', name: 'total_expense', searchable: false },
                { data: 'expected_cash', name: 'expected_cash', searchable: false },
                { data: 'closing_amount', name: 'cash_registers.closing_amount' },
                { data: 'difference', name: 'difference', searchable: false },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ],
            fnDrawCallback: function(oSettings) {
                var api = this.api();
                var json = api.ajax.json();
                
                if (json && json.widget_data) {
                    $('#widget_open_count').text(json.widget_data.open_count);
                    $('#widget_closed_count').text(json.widget_data.closed_count);
                    
                    $('#widget_total_opening').attr('data-orig-value', json.widget_data.total_opening).text(json.widget_data.total_opening);
                    $('#widget_total_refund').attr('data-orig-value', json.widget_data.total_refund).text(json.widget_data.total_refund);
                    $('#widget_total_expense').attr('data-orig-value', json.widget_data.total_expense).text(json.widget_data.total_expense);
                    $('#widget_total_payments').attr('data-orig-value', json.widget_data.total_payments).text(json.widget_data.total_payments);
                    
                    __currency_convert_recursively($('#widgets_row'));
                }
                
                __currency_convert_recursively($('#cash_register_table'));
            }
        });

        $(document).on('change', '#register_location_id, #register_user_id, #register_status', function() {
            cash_register_table.ajax.reload();
        });
    });
</script>
@endsection