@extends('layouts.app')
@section('title', 'Deleted Invoice Report')

@section('css')
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
    :root {
        --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --danger-gradient: linear-gradient(135deg, #ff0844 0%, #ffb199 100%);
        --glass-bg: rgba(255, 255, 255, 0.7);
        --glass-border: rgba(255, 255, 255, 0.4);
        --card-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    }

    .report-container {
        font-family: 'Roboto', sans-serif;
        padding: 20px;
        background: #f0f2f5;
        min-height: 100vh;
    }

    .premium-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        padding: 0 10px;
    }

    .premium-title {
        font-size: 2.2rem;
        font-weight: 700;
        background: var(--danger-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0;
    }

    .glass-card {
        background: var(--glass-bg);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid var(--glass-border);
        border-radius: 20px;
        box-shadow: var(--card-shadow);
        padding: 24px;
        margin-bottom: 24px;
    }

    .custom-input {
        background: white !important;
        border: 1px solid #e0e6ed !important;
        border-radius: 12px !important;
        padding: 10px 15px !important;
        height: auto !important;
        font-size: 0.95rem !important;
        width: 100%;
    }

    .btn-premium-print {
        background: var(--primary-gradient);
        color: white !important;
        border: none;
        padding: 12px 25px;
        border-radius: 15px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

    .premium-table {
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 10px !important;
    }

    .premium-table thead th {
        border: none !important;
        background: transparent !important;
        color: #718096 !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        padding: 10px 20px !important;
    }

    .premium-table tbody tr {
        background: white !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.02) !important;
    }

    .premium-table tbody td {
        border: none !important;
        padding: 15px 20px !important;
    }

    .premium-table tbody td:first-child {
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
    }

    .premium-table tbody td:last-child {
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
    }
</style>
@endsection

@section('content')
<div class="report-container">
    <div class="premium-header">
        <h1 class="premium-title">Deleted Invoice Report</h1>
        <button type="button" class="btn btn-premium-print" id="print_deleted_report">
            <i class="fas fa-print"></i> @lang('messages.print')
        </button>
    </div>

    <div class="glass-card">
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    {!! Form::label('date_filter', __('report.date_range') . ':') !!}
                    {!! Form::text('date_filter', null, ['placeholder' => __('lang_v1.select_a_date_range'), 'class' => 'custom-input', 'readonly']); !!}
                </div>
            </div>
        </div>
    </div>

    <div class="glass-card">
        <div class="table-responsive">
            <table class="table premium-table" id="deleted_invoice_table">
                <thead>
                    <tr>
                        <th>Selection Date & Time</th>
                        <th>Invoice No</th>
                        <th>Type</th>
                        <th>Final Total</th>
                        <th>Deleted By</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@endsection

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

        deleted_invoice_table = $('#deleted_invoice_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '/ls-reports/deleted-invoice-report',
                data: function(d) {
                    if($('#date_filter').val()) {
                        d.start_date = $('#date_filter').data('daterangepicker').startDate.format('YYYY-MM-DD');
                        d.end_date = $('#date_filter').data('daterangepicker').endDate.format('YYYY-MM-DD');
                    }
                }
            },
            columns: [
                { data: 'deleted_at', name: 'activity_log.created_at' },
                { data: 'invoice_no', name: 'invoice_no', orderable: false, searchable: false },
                { data: 'description', name: 'activity_log.description' },
                { data: 'final_total', name: 'final_total', orderable: false, searchable: false },
                { data: 'user', name: 'users.first_name' }
            ],
            fnDrawCallback: function(oSettings) {
                __currency_convert_recursively($('#deleted_invoice_table'));
            }
        });

        $(document).on('click', '#print_deleted_report', function() {
            var start = '';
            var end = '';
            if($('#date_filter').val()) {
                start = $('#date_filter').data('daterangepicker').startDate.format('YYYY-MM-DD');
                end = $('#date_filter').data('daterangepicker').endDate.format('YYYY-MM-DD');
            }
            var url = '/ls-reports/print-deleted-invoice-report?start_date=' + start + '&end_date=' + end;
            window.open(url, '_blank');
        });
    });
</script>
@endsection