@extends('layouts.admin_dynamic')

@section('content')
    <div class="content-wrapper">
        <!-- Page Header -->
        <section class="content-header">
            <h1>
                <i class="fa fa-tachometer"></i> Meter Details
                <small>{{ $meter->meter_number }}</small>
            </h1>

        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">

                <!-- Customer Info -->
                <div class="col-md-4">
                    <div class="box box-success">
                        <div class="box-header with-border">
                            <h3 class="box-title">Customer Information</h3>
                        </div>
                        <div class="box-body">
                            <p><strong>Customer:</strong>
                                {{ $meter->customer ? $meter->customer->name : 'No customer assigned' }}</p>
                            <p><strong>Phone:</strong> {{ $meter->customer ? $meter->customer->phone_number : 'N/A' }}</p>
                            <p><strong>Email:</strong> {{ $meter->customer ? $meter->customer->email : 'N/A' }}</p>
                            <p><strong>Balance:</strong> {{ number_format($meter->balance, 2) }} Liters</p>
                            <p><strong>Status:</strong>
                                <span class="label label-{{ $meter->status == 'active' ? 'success' : 'danger' }}">
                                    {{ ucfirst($meter->status) }}
                                </span>
                            </p>

                            <!-- Action Buttons -->
                            <button class="btn btn-danger btn-sm" data-action="tamper" data-toggle="modal"
                                data-target="#clearActionModal">
                                Clear Tamper
                            </button>
                            <button class="btn btn-warning btn-sm" data-action="credit" data-toggle="modal"
                                data-target="#clearActionModal">
                                Clear Credit
                            </button>

                        </div>
                    </div>
                </div>


                <!-- Generate Manual Token -->
                <div class="col-md-4">
                    <div class="box box-warning">
                        <div class="box-header with-border">
                            <h3 class="box-title">Generate Manual Token</h3>
                        </div>
                        <div class="box-body">
                            <form id="free-token-form" method="POST" action="/meter/generate-free-token">
                                @csrf
                                <div class="form-group">
                                    <label for="free_token_amount">Amount (KES)</label>
                                    <input type="number" id="free_token_amount" name="amount" class="form-control"
                                        placeholder="Enter amount in KES" required min="1" step="0.01">
                                </div>
                                <div class="form-group">
                                    <label for="free_token_reference">Meter Number</label>
                                    <input type="text" id="free_token_reference" name="meter_number" class="form-control"
                                        value="{{ $meter->meter_number }}" readonly>
                                </div>
                                {{-- <div class="form-group">
                    <label for="free_token_reason">Reason</label>
                    <textarea id="free_token_reason" name="reason" class="form-control" rows="3" placeholder="Enter reason for free token" required></textarea>
                </div> --}}
                                <button type="submit" class="btn btn-success">Generate Token</button>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Generate Stk Push -->
                <div class="col-md-4">
                    <div class="box box-warning">
                        <div class="box-header with-border">
                            <h3 class="box-title">Generate Stk Push</h3>
                        </div>
                        <div class="box-body">
                            <form id="stk-push-form" method="POST" action="/mpesa/c2b/initiate">
                                @csrf
                                <div class="form-group">
                                    <label for="phone_number">M-Pesa Phone Number</label>
                                    <input type="text" id="phone" name="phone" class="form-control" value=""
                                        placeholder="e.g., 2547XXXXXXXX" required>
                                </div>
                                <div class="form-group">
                                    <label for="input_type">Input Type</label>
                                    <select id="input_type" name="input_type" class="form-control" required>
                                        <option value="amount">Amount (KES)</option>
                                        <option value="liters">Liters</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="amount" id="amount_label">Amount (KES)</label>
                                    <input type="number" id="amount" name="amount" class="form-control"
                                        placeholder="Enter amount in KES" required min="1" step="0.01">
                                </div>
                                <div class="form-group">
                                    <label for="reference">Meter Number</label>
                                    <input type="text" id="reference" name="reference" class="form-control"
                                        value="{{ $meter->meter_number }}" readonly>
                                </div>
                                <button type="submit" class="btn btn-primary">Initiate M-Pesa Payment</button>
                            </form>
                        </div>
                    </div>
                </div>

            </div><!-- /.row -->

            <div class="row">

                <!-- Transactions -->
                <div class="col-md-12">
                    <div class="box box-info">
                        <div class="box-header with-border">
                            <h3 class="box-title">Recent Transactions</h3>
                        </div>
                        <div class="box-body">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>Transaction ID</th>
                                        <th>Amount (KES)</th>
                                        <th>Phone Number</th>
                                        <th>Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($transactions->take(5) as $transaction)
                                        <tr>
                                            <td>{{ $transaction->trans_id }}</td>
                                            <td>{{ number_format($transaction->amount, 2) }}</td>
                                            <td>
                                                {{-- <span class="label label-{{ $transaction->status == 'success' ? 'success' : 'danger' }}">
                                                {{ ucfirst($transaction->status) }}
                                            </span> --}}

                                                {{ $transaction->phone_number }}

                                            </td>
                                            <td>{{ $transaction->created_at->format('Y-m-d H:i:s') }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4">No transactions found.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Tokens -->
                <div class="col-md-12">
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="box-title">Recent Tokens</h3>
                        </div>
                        <div class="box-body">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>Token</th>
                                        <th>Water Units (Liters)</th>
                                        <th>Total Paid (KES)</th>
                                        <th>Generated</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($purchaseHistory as $purchase)
                                        <tr>
                                            <td>{{ $purchase['token'] ?? 'N/A' }}</td>
                                            <td>{{ number_format($purchase['total_unit'] ?? 0, 2) }}</td>
                                            <td>{{ number_format($purchase['total_paid'] ?? 0, 2) }}</td>
                                            <td>{{ isset($purchase['gen_datetime']) ? \Carbon\Carbon::parse($purchase['gen_datetime'])->format('Y-m-d H:i:s') : 'N/A' }}
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4">No tokens found.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Usage Data Form -->
                <!-- Usage Data Form -->
                <div class="col-md-12">
                    <div class="box box-info">
                        <div class="box-header with-border">
                            <h3 class="box-title">Get Usage Data</h3>
                        </div>
                        <div class="box-body">
                            <form id="usage-data-form" method="POST" action="">
                                @csrf
                                <div class="form-group">
                                    <label for="meter_number">Meter Number</label>
                                    <input type="text" id="meter_number" name="meter_number" class="form-control"
                                        value="{{ $meter->meter_number }}" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="data_type">Data Type</label>
                                    <select id="data_type" name="data_type" class="form-control" required>
                                        <option value="daily">Daily Data</option>
                                        <option value="hourly">Hourly Data</option>
                                        <option value="monthly">Monthly Data</option>
                                    </select>
                                </div>
                                <!-- Date Fields (hidden by default, shown based on data type) -->
                                <div id="date-fields" style="display: none;">
                                    <div class="form-group">
                                        <label for="year">Year</label>
                                        <select id="year" name="year" class="form-control" required>
                                            @for ($i = 2023; $i <= 2025; $i++)
                                                <option value="{{ $i }}">{{ $i }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="month">Month</label>
                                        <select id="month" name="month" class="form-control" required>
                                            @for ($i = 1; $i <= 12; $i++)
                                                <option value="{{ sprintf('%02d', $i) }}">
                                                    {{ date('F', mktime(0, 0, 0, $i, 1)) }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                    <div id="day-field" class="form-group" style="display: none;">
                                        <label for="day">Day</label>
                                        <select id="day" name="day" class="form-control" required>
                                            @for ($i = 1; $i <= 31; $i++)
                                                <option value="{{ sprintf('%02d', $i) }}">{{ $i }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary">Get Usage Data</button>
                            </form>
                            <div id="usage-result" class="mt-3"></div>
                        </div>
                    </div>
                </div>
                <!-- Clear Action Modal -->
                <div class="modal fade" id="clearActionModal" tabindex="-1" role="dialog"
                    aria-labelledby="clearActionLabel">
                    <div class="modal-dialog" role="document">
                        <form id="clear-action-form">
                            @csrf
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="clearActionLabel">Confirm Action</h4>
                                    <button type="button" class="close" data-dismiss="modal"
                                        aria-label="Close">×</button>
                                </div>
                                <div class="modal-body">
                                    <input type="hidden" id="action_type" name="action_type">
                                    <input type="hidden" id="meter_number" name="meter_number"
                                        value="{{ $meter->meter_number }}">

                                    <div class="form-group">
                                        <label for="reason">Reason</label>
                                        <textarea id="reason" name="reason" class="form-control" rows="3" required></textarea>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>



            </div><!-- /.row -->
        </section>
    </div>


    <script>
        var config = {
            POS_API_URL: "{{ env('POS_API_URL') }}" // No need for credentials here
        };
    </script>




    <script>
        // Handle STK Push form submission via AJAX
        $(document).ready(function() {


            // Handle input_type change for dynamic amount handling
            $('#input_type').on('change', function() {
                var inputType = $(this).val();
                var amountLabel = $('#amount_label');
                var amountInput = $('#amount');

                if (inputType === 'liters') {
                    amountLabel.text('Liters');
                    amountInput.attr('placeholder', 'Enter liters');
                    // Optional: Fetch or use a fixed rate (e.g., 50 KES per liter)
                    var rate = 50; // Define your rate here or fetch it via AJAX
                    amountInput.on('input', function() {
                        var liters = parseFloat($(this).val()) || 0;
                        var amountInKes = liters * rate;
                        $(this).val(liters); // Keep the input as liters
                        // Optionally store the calculated KES amount in a hidden field
                        $('<input>').attr({
                            type: 'hidden',
                            name: 'amount_in_kes',
                            value: amountInKes.toFixed(2)
                        }).appendTo('#stk-push-form');
                    });
                } else { // 'amount' (KES)
                    amountLabel.text('Amount (KES)');
                    amountInput.attr('placeholder', 'Enter amount in KES');
                    amountInput.off('input'); // Remove liters conversion listener
                    // Remove hidden field if it exists
                    $('#stk-push-form input[name="amount_in_kes"]').remove();
                }
            }).trigger('change'); // Trigger change to set initial state



            $('#stk-push-form').on('submit', function(event) {
                event.preventDefault(); // Prevent default form submission

                var form = $(this);

                $.ajax({
                    url: form.attr('action'),
                    method: 'POST',
                    data: form.serialize(),
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    beforeSend: function() {
                        $.notify({
                            message: "Initiating STK Push...."
                        }, {
                            type: 'success'
                        });
                    },
                    success: function(response) {
                        if (response.success) {
                            $.notify({
                                message: response.message
                            }, {
                                type: 'success'
                            });
                            // Start polling for payment status
                            setTimeout(function() {
                                checkPaymentStatus(response.CheckoutRequestID);
                            }, 10000);
                        } else {
                            $.notify({
                                message: response.message
                            }, {
                                type: 'danger'
                            });
                        }
                    },
                    error: function(xhr) {
                        $.notify({
                            message: xhr.responseJSON.message ||
                                "Failed to initiate payment...."
                        }, {
                            type: 'danger'
                        });
                    }
                });
            });

            // Poll payment status
            function checkPaymentStatus(agentRequestId) {
                $.ajax({
                    url: '/checkStatus/' + agentRequestId,
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    success: function(data) {
                        if (data.success) {

                            if (data.status == "completed") {
                                $.notify("Transaction successfull", {
                                    type: 'success'
                                });
                                setTimeout(function() {
                                    window.location.reload();
                                }, 2000); // Refresh page after success
                            } else if (data.status == "canceled") {
                                $.notify({
                                    message: data.error_message
                                }, {
                                    type: 'danger'
                                });
                                setTimeout(function() {
                                    window.location.reload();
                                }, 2000); // Refresh page after success
                            } else {
                                setTimeout(function() {
                                    checkPaymentStatus(agentRequestId);
                                }, 10000); // Retry after 5 seconds


                            }


                        } else {
                            // $.notify({ message: data.message }, { type: 'danger' });
                            setTimeout(function() {
                                checkPaymentStatus(agentRequestId);
                            }, 10000); // Retry after 5 seconds
                        }
                    },
                    error: function(xhr) {
                        $.notify({
                            message: xhr.responseJSON.message ||
                                "Error checking payment status...."
                        }, {
                            type: 'danger'
                        });
                    }
                });
            }
        });


        // Handle Usage Data form submission via button click
        $('#usage-data-form button').on('click', function(event) {
            event.preventDefault(); // Prevent default button action (form submission)

            var form = $('#usage-data-form');
            var meterNumber = form.find('#meter_number').val();
            var dataType = form.find('#data_type').val();
            var year = form.find('#year').val();
            var month = form.find('#month').val();
            var day = form.find('#day').val() || null;
            var url = '';

            // Map data type to proxy route
            switch (dataType) {
                case 'daily':
                    url = '/proxy/daily-data';
                    break;
                case 'hourly':
                    url = '/proxy/hourly-data';
                    break;
                case 'hourly_new':
                    url = '/proxy/hourly-data-new';
                    break;
                case 'monthly':
                    url = '/proxy/monthly-data';
                    break;
                default:
                    $.notify({
                        message: 'Invalid data type selected.'
                    }, {
                        type: 'danger'
                    });
                    return;
            }

            // Prepare request payload based on data type
            var payload = {
                meter_number: meterNumber,
                year: parseInt(year),
                month: parseInt(month),
                day: day ? parseInt(day) : null
            };

            // Remove day for monthly data
            if (dataType === 'monthly') {
                delete payload.day;
            }

            // Validate required fields
            if ((dataType === 'daily' || dataType === 'hourly' || dataType === 'hourly_new') && !day) {
                $.notify({
                    message: 'Please select a day for daily or hourly data.'
                }, {
                    type: 'danger'
                });
                return;
            }

            $.ajax({
                url: url,
                method: 'POST',
                data: JSON.stringify(payload),
                contentType: 'application/json',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                beforeSend: function() {
                    $.notify({
                        message: "Fetching usage data..."
                    }, {
                        type: 'success'
                    });
                    $('#usage-result').html('<p>Loading...</p>');
                },
                success: function(response) {
                    if (response.ResultCode === '00' || response.ResultCode === 'success') {
                        if (response.Result && response.Result.length > 0) {

                            var result = response.Result[0];
                            var resultHtml = '<h4>Usage Data</h4><ul>';

                            resultHtml += `<li>Meter Number: ${result.MeterNo || 'N/A'}</li>`;
                            resultHtml += `<li>Year: ${result.Year || 'N/A'}</li>`;
                            resultHtml += `<li>Month: ${('0' + result.Month).slice(-2) || 'N/A'}</li>`;

                            if (dataType === 'daily' || (dataType.includes('hourly') && result.Day !==
                                    undefined)) {
                                resultHtml += `<li>Day: ${('0' + result.Day).slice(-2) || 'N/A'}</li>`;
                            }

                            resultHtml +=
                                `<li>Total Units Counter: ${result.TotalUnitsCounter || 'N/A'}</li>`;
                            resultHtml +=
                                `<li>Current Credit Register: ${result.CurrentCreditRegister || 'N/A'}</li>`;

                            if (dataType === 'daily' || dataType.includes('hourly')) {
                                resultHtml += `<li>Relay Status: ${result.RelayStatus || 'N/A'}</li>`;
                            }

                            if (dataType.includes('hourly') && result.HourlyData) {
                                resultHtml +=
                                    `<li>Hourly Data: ${result.HourlyData.join(', ') || 'N/A'}</li>`;
                            }

                            resultHtml += '</ul>';
                            $('#usage-result').html(resultHtml);
                            $.notify({
                                message: 'Data fetched successfully.'
                            }, {
                                type: 'success'
                            });
                        } else {
                            // Result is null or empty
                            $('#usage-result').html('<p>No usage data available.</p>');
                            $.notify({
                                message: 'No usage data available.'
                            }, {
                                type: 'warning'
                            });
                        }


                    } else {
                        $('#usage-result').html(
                            `<p>Error: ${response.Reason || 'No data available.'}</p>`);
                        $.notify({
                            message: response.Reason || 'Failed to fetch data.'
                        }, {
                            type: 'danger'
                        });
                    }
                },
                error: function(xhr) {
                    $('#usage-result').html('<p>Error fetching data.</p>');
                    $.notify({
                        message: xhr.responseJSON?.error || xhr.responseJSON?.Reason ||
                            'An error occurred.'
                    }, {
                        type: 'danger'
                    });
                }
            });
        });

        // Show/hide date fields based on data type selection
        $('#data_type').on('change', function() {
            var dataType = $(this).val();
            $('#date-fields').show();
            $('#day-field').hide();

            if (dataType === 'monthly') {
                $('#day-field').hide();
            } else if (dataType === 'daily' || dataType === 'hourly' || dataType === 'hourly_new') {
                $('#day-field').show();
            }
        }).trigger('change');


        $(document).ready(function() {
            // Open modal
            $('[data-target="#clearActionModal"]').on('click', function() {
                var actionType = $(this).data('action');
                $('#action_type').val(actionType);
                $('#clearActionLabel').text(actionType === 'tamper' ? 'Clear Tamper' : 'Clear Credit');
            });



            document.getElementById('clear-action-form').addEventListener('submit', function(event) {
                event.preventDefault(); // Prevent default form submission
                event.stopPropagation(); // Stop event bubbling

                var actionType = $('#action_type').val();
                var meterNumber = $('#meter_number').val();
                var reason = $('#reason').val();

                var url = '/meter/clear-action';

                var payload = {
                    action_type: actionType,
                    meter_number: meterNumber,
                    reason: reason
                };

                $.ajax({
                    url: url,
                    method: 'POST',
                    data: JSON.stringify(payload),
                    contentType: 'application/json',
                    beforeSend: function() {
                        $.notify({
                            message: "Processing request..."
                        }, {
                            type: 'info'
                        });
                    },
                    success: function(response) {
                        if (response.success) {
                            // Differentiate messages based on action_type
                            if (actionType === 'credit') {
                                $.notify({
                                    message: response.result ||
                                        'Credit cleared successfully for token: ' +
                                        response.message
                                }, {
                                    type: 'success'
                                });
                            } else if (actionType === 'tamper') {
                                $.notify({
                                    message: response.result ||
                                        'Tamper cleared successfully.'
                                }, {
                                    type: 'success'
                                });
                            }
                            $('#clearActionModal').modal('hide');
                        } else {
                            $.notify({
                                message: response.reason || 'Action failed.'
                            }, {
                                type: 'danger'
                            });
                        }
                    },
                    error: function(xhr) {
                        $.notify({
                            message: xhr.responseJSON?.message || 'API error occurred.'
                        }, {
                            type: 'danger'
                        });
                    }
                });
            });
        });
    </script>
@endsection