@extends('layouts.app')

@section('title', 'Vouchers - VPN Admin')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/vendor/jquery-datatable/dataTables.bootstrap4.min.css') }}">
<style>
    .dataTables_filter {
        display: none;
    }
</style>
@endpush

@section('content')
<!-- Page Loader -->
<div class="page-loader-wrapper">
    <div class="loader">
        <div class="m-t-30"><img src="{{ asset('assets/images/logo-icon.svg') }}" width="48" height="48" alt="VPN Admin"></div>
        <p>Please wait...</p>
    </div>
</div>

<!-- main page content body part -->
<div id="main-content">
    <div class="container-fluid">
        <div class="block-header">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <h2>Vouchers</h2>
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i class="fa fa-dashboard"></i></a></li>
                        <li class="breadcrumb-item active">Vouchers</li>
                    </ul>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="d-flex flex-row-reverse">
                        <div class="page_action">
                            <select class="form-control" id="statusFilter" style="display: inline-block; width: auto; margin-right: 10px;">
                                <option value="false">All Vouchers</option>
                                <option value="true">Active Only</option>
                            </select>
                            <button type="button" class="btn btn-primary" id="refreshTable"><i class="fa fa-refresh"></i> Refresh</button>
                            @can('create vouchers')
                            <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#createVoucherModal"><i class="fa fa-plus"></i> Create New Voucher</button>
                            @endcan
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-lg-12">
                <div class="card">
                    <div class="header">
                        <h2><strong>Vouchers</strong></h2>
                    </div>
                    <div class="body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped table-hover js-basic-example dataTable" id="vouchersTable" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Code</th>
                                        <th>Price</th>
                                        <th>Validity</th>
                                        <th>Device Limit</th>
                                        <th>Used</th>
                                        <th>Expires At</th>
                                        <th>Created At</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Data will be loaded via AJAX -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Create/Edit Voucher Modal -->
<div class="modal fade" id="createVoucherModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="voucherModalTitle">Create New Voucher</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="voucherForm">
                @csrf
                <div class="modal-body">
                    <div id="voucherFormAlert" class="alert" style="display: none;" role="alert"></div>
                    <input type="hidden" id="voucher_id" name="voucher_id">
                    <input type="hidden" id="_method" name="_method" value="POST">

                    <div class="form-group" id="voucherCodeGroup" style="display: none;">
                        <label>Voucher Code</label>
                        <input type="text" class="form-control" id="code" name="code" readonly>
                        <small class="form-text text-muted">Code is generated automatically by the API.</small>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Price <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="number" class="form-control" id="price" name="price" step="0.01" min="0" value="0" required>
                                    <select class="form-control" id="currency" name="currency" style="max-width: 100px;" required>
                                        <option value="USD">USD</option>
                                        <option value="EUR">EUR</option>
                                        <option value="GBP">GBP</option>
                                        <option value="AED">AED</option>
                                        <option value="INR">INR</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Expires At <span class="text-danger">*</span></label>
                                <input type="datetime-local" class="form-control" id="expires_at" name="expires_at" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Validity (Days) <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="validity_days" name="validity_days" min="1" value="1" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Device Limit <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="device_limit" name="device_limit" min="1" value="1" required>
                            </div>
                        </div>
                    </div>

                    <div class="form-group" id="isActiveGroup" style="display: none;">
                        <div class="checkbox">
                            <input type="checkbox" id="is_active" name="is_active" checked>
                            <label for="is_active">Active</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Voucher</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('assets/vendor/jquery-datatable/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/vendor/jquery-datatable/dataTables.bootstrap4.min.js') }}"></script>
<script>
$(document).ready(function() {
    showFullScreenLoader();

    function getCurrentDateTimeLocal() {
        var now = new Date();
        now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
        return now.toISOString().slice(0, 16);
    }

    // API returns UTC datetimes often without a Z/offset — force parse as UTC
    function parseApiUtcDate(value) {
        if (!value) {
            return null;
        }
        var s = String(value).trim();
        if (s.indexOf(' ') !== -1 && s.indexOf('T') === -1) {
            s = s.replace(' ', 'T');
        }
        // Keep up to 3 ms digits for broader browser support
        s = s.replace(/(\.\d{3})\d+/, '$1');
        if (!/[zZ]$/.test(s) && !/[+-]\d{2}:?\d{2}$/.test(s)) {
            s += 'Z';
        }
        var date = new Date(s);
        return isNaN(date.getTime()) ? null : date;
    }

    function pad2(n) {
        return String(n).padStart(2, '0');
    }

    // Convert datetime-local (browser local) value to UTC ISO 8601 for the API
    function toUtcIsoString(dateTimeLocalValue) {
        if (!dateTimeLocalValue) {
            return '';
        }
        var date = new Date(dateTimeLocalValue);
        if (isNaN(date.getTime())) {
            return dateTimeLocalValue;
        }
        return date.toISOString();
    }

    // Convert UTC from API to datetime-local (browser local) for the input
    function utcToDateTimeLocal(utcString) {
        var date = parseApiUtcDate(utcString);
        if (!date) {
            return '';
        }
        return date.getFullYear() + '-' + pad2(date.getMonth() + 1) + '-' + pad2(date.getDate())
            + 'T' + pad2(date.getHours()) + ':' + pad2(date.getMinutes());
    }

    // Format UTC datetime for table display in the browser's local timezone
    function formatLocalDateTime(utcString) {
        var date = parseApiUtcDate(utcString);
        if (!date) {
            return utcString ? utcString : '—';
        }
        return date.getFullYear() + '-' + pad2(date.getMonth() + 1) + '-' + pad2(date.getDate())
            + ' ' + pad2(date.getHours()) + ':' + pad2(date.getMinutes());
    }

    function hideVoucherFormAlert() {
        $('#voucherFormAlert').hide().removeClass('alert-success alert-danger').text('');
    }

    function showVoucherFormAlert(message, type) {
        var $alert = $('#voucherFormAlert');
        $alert
            .removeClass('alert-success alert-danger')
            .addClass(type === 'success' ? 'alert-success' : 'alert-danger')
            .text(message)
            .show();
    }

    var table = $('#vouchersTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('vouchers.index') }}?active_only=false",
            error: function(xhr, error, thrown) {
                hideFullScreenLoader();
                console.error('DataTables Error:', error);
                console.error('Response:', xhr.responseText);
                alert('Error loading vouchers data. Please check console for details.');
            }
        },
        columns: [
            { data: 'code', name: 'code', orderable: true, searchable: false },
            { data: 'price', name: 'price', orderable: true, searchable: false },
            { data: 'validity_days', name: 'validity_days', orderable: true, searchable: false },
            { data: 'device_limit', name: 'device_limit', orderable: true, searchable: false },
            { data: 'used_count', name: 'used_count', orderable: true, searchable: false },
            {
                data: 'expires_at',
                name: 'expires_at',
                orderable: true,
                searchable: false,
                render: function(data) {
                    if (!data) {
                        return '—';
                    }
                    var date = parseApiUtcDate(data);
                    if (!date) {
                        return data;
                    }
                    var formatted = formatLocalDateTime(data);
                    if (date.getTime() < Date.now()) {
                        return '<span class="text-danger font-weight-bold">' + formatted + '</span>';
                    }
                    return formatted;
                }
            },
            {
                data: 'created_at',
                name: 'created_at',
                orderable: true,
                searchable: false,
                render: function(data) {
                    return formatLocalDateTime(data);
                }
            },
            { data: 'is_active', name: 'is_active', orderable: true, searchable: false },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
        order: [[6, 'desc']], // default sort: Created At (newest first)
        pageLength: 10,
        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
        deferRender: true,
        language: {
            processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>',
            emptyTable: "No vouchers found",
            zeroRecords: "No matching vouchers found"
        }
    });

    table.on('preXhr.dt', function() {
        showFullScreenLoader();
    });

    table.on('xhr.dt', function() {
        hideFullScreenLoader();
    });

    table.on('error.dt', function() {
        hideFullScreenLoader();
    });

    function getTableUrl() {
        var activeOnly = $('#statusFilter').val();
        return activeOnly === ''
            ? "{{ route('vouchers.index') }}?active_only=false"
            : "{{ route('vouchers.index') }}?active_only=" + activeOnly;
    }

    $('#statusFilter').on('change', function() {
        showFullScreenLoader();
        table.ajax.url(getTableUrl()).load(function() {
            hideFullScreenLoader();
        });
    });

    $('#refreshTable').on('click', function() {
        showFullScreenLoader();
        table.ajax.url(getTableUrl()).load(function() {
            hideFullScreenLoader();
        });
    });

    $('#createVoucherModal').on('show.bs.modal', function() {
        var voucherId = $('#voucher_id').val();
        hideVoucherFormAlert();
        if (!voucherId || voucherId === '') {
            $('#voucherForm')[0].reset();
            $('#voucher_id').val('');
            $('#_method').val('POST');
            $('#voucherModalTitle').text('Create New Voucher');
            $('#voucherCodeGroup').hide();
            $('#isActiveGroup').hide();
            $('#is_active').prop('checked', true);
            $('#price').val(0);
            $('#validity_days').val(1);
            $('#device_limit').val(1);
            $('#currency').val('USD');
            // Auto-fill expires at with current date & time
            $('#expires_at').val(getCurrentDateTimeLocal());
        }
    });

    $('#createVoucherModal').on('hidden.bs.modal', function() {
        $('#voucher_id').val('');
        hideVoucherFormAlert();
    });

    $(document).on('click', '.edit-voucher', function(e) {
        e.preventDefault();
        showFullScreenLoader();
        var voucherId = $(this).data('id');

        $.ajax({
            url: '{{ url("vouchers") }}/' + voucherId,
            method: 'GET',
            success: function(voucher) {
                hideFullScreenLoader();
                hideVoucherFormAlert();
                $('#voucher_id').val(voucher.id);
                $('#_method').val('PUT');
                $('#code').val(voucher.code || '');
                $('#price').val(voucher.price || 0);
                $('#currency').val(voucher.currency || 'USD');
                $('#validity_days').val(voucher.validity_days || 1);
                $('#device_limit').val(voucher.device_limit || 1);
                $('#expires_at').val(utcToDateTimeLocal(voucher.expires_at) || '');

                var isActive = voucher.is_active;
                if (typeof isActive === 'string') {
                    isActive = (isActive === '1' || isActive === 'true');
                } else {
                    isActive = (isActive == 1 || isActive === true);
                }
                $('#is_active').prop('checked', isActive);

                $('#voucherCodeGroup').show();
                $('#isActiveGroup').show();
                $('#voucherModalTitle').text('Edit Voucher');
                $('#createVoucherModal').modal('show');
            },
            error: function(xhr) {
                hideFullScreenLoader();
                console.error('Error loading voucher:', xhr);
                alert('Error loading voucher data. Please try again.');
            }
        });
    });

    $('#voucherForm').on('submit', function(e) {
        e.preventDefault();
        hideVoucherFormAlert();
        showFullScreenLoader();

        var voucherId = $('#voucher_id').val();
        var url = voucherId ? '{{ url("vouchers") }}/' + voucherId : '{{ route("vouchers.store") }}';
        var method = voucherId ? 'PUT' : 'POST';

        var formData = {
            device_limit: parseInt($('#device_limit').val(), 10),
            validity_days: parseInt($('#validity_days').val(), 10),
            price: parseFloat($('#price').val()),
            currency: $('#currency').val(),
            expires_at: toUtcIsoString($('#expires_at').val()),
            _token: $('meta[name="csrf-token"]').attr('content')
        };

        if (voucherId) {
            formData.is_active = $('#is_active').is(':checked');
            formData._method = 'PUT';
        }

        $.ajax({
            url: url,
            method: method,
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(response) {
                hideFullScreenLoader();
                showVoucherFormAlert(response.message || 'Voucher saved successfully', 'success');
                table.ajax.url(getTableUrl()).load();
                setTimeout(function() {
                    $('#createVoucherModal').modal('hide');
                    $('#voucher_id').val('');
                }, 1500);
            },
            error: function(xhr) {
                hideFullScreenLoader();
                var errorMsg = xhr.responseJSON?.message || 'An error occurred';
                showVoucherFormAlert(errorMsg, 'error');
            }
        });
    });

    $(document).on('click', '.deactivate-voucher', function() {
        var voucherId = $(this).data('id');
        if (confirm('Are you sure you want to deactivate this voucher? It will be set to inactive.')) {
            showFullScreenLoader();
            $.ajax({
                url: '{{ url("vouchers") }}/' + voucherId,
                method: 'DELETE',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'X-Requested-With': 'XMLHttpRequest'
                },
                success: function(response) {
                    table.ajax.url(getTableUrl()).load(function() {
                        hideFullScreenLoader();
                        if (typeof showSuccessToast === 'function') {
                            showSuccessToast(response.message || 'Voucher deactivated successfully');
                        }
                    });
                },
                error: function(xhr) {
                    hideFullScreenLoader();
                    var errorMsg = xhr.responseJSON?.message || 'Cannot deactivate voucher';
                    alert(errorMsg);
                }
            });
        }
    });

    $(document).on('click', '.activate-voucher', function() {
        var voucherId = $(this).data('id');
        if (confirm('Are you sure you want to activate this voucher?')) {
            showFullScreenLoader();
            $.ajax({
                url: '{{ url("vouchers") }}/' + voucherId,
                method: 'GET',
                success: function(voucher) {
                    var updateData = {
                        device_limit: voucher.device_limit,
                        validity_days: voucher.validity_days,
                        price: voucher.price,
                        currency: voucher.currency,
                        expires_at: voucher.expires_at, // already UTC from API
                        is_active: true,
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        _method: 'PUT'
                    };

                    $.ajax({
                        url: '{{ url("vouchers") }}/' + voucherId,
                        method: 'PUT',
                        data: updateData,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        success: function() {
                            table.ajax.url(getTableUrl()).load(function() {
                                hideFullScreenLoader();
                                if (typeof showSuccessToast === 'function') {
                                    showSuccessToast('Voucher activated successfully');
                                }
                            });
                        },
                        error: function(xhr) {
                            hideFullScreenLoader();
                            var errorMsg = xhr.responseJSON?.message || 'Cannot activate voucher';
                            alert(errorMsg);
                        }
                    });
                },
                error: function() {
                    hideFullScreenLoader();
                    alert('Error loading voucher details. Please try again.');
                }
            });
        }
    });
});
</script>
@endpush