@extends('admin.layouts.master-soyuz')
@section('title', __('Wallet Settings | '))

@section('body')
@component('admin.component.breadcumb',['secondactive' => 'active'])
@slot('heading'){{ __('Wallet Settings') }}@endslot
@slot('menu1'){{ __('Wallet Settings') }}@endslot
@endcomponent

@php $isOn = $wallet == 1; @endphp

<div class="contentbar">
    {{-- Hero status --}}
    <div class="card m-b-30" style="border:0;border-radius:14px;overflow:hidden;
        background: {{ $isOn ? 'linear-gradient(135deg,#dcfce7 0%,#bbf7d0 100%)' : 'linear-gradient(135deg,#f1f5f9 0%,#e2e8f0 100%)' }};">
        <div class="card-body" style="padding:24px;">
            <div class="row align-items-center">
                <div class="col-md-1 text-center">
                    <div style="width:64px;height:64px;border-radius:50%;background:{{ $isOn ? '#16a34a' : '#94a3b8' }};color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto;">
                        <i class="feather icon-credit-card"></i>
                    </div>
                </div>
                <div class="col-md-8">
                    <h4 style="margin:0;font-weight:800;color:#0a1430;">
                        {{ $isOn ? __('Wallet System is ACTIVE') : __('Wallet System is OFF') }}
                    </h4>
                    <p style="margin:6px 0 0;color:#475569;font-size:14px;">
                        {{ $isOn
                            ? __('Customers can store credit and pay using their wallet balance.')
                            : __('Toggle on the wallet to allow customers to add and spend wallet balance.')
                        }}
                    </p>
                </div>
                <div class="col-md-3 text-right">
                    <label class="switch" style="margin:0;">
                        <input {{ $isOn ? 'checked' : '' }} type="checkbox" class="wallet_enable" name="wallet_enable">
                        <span class="knob"></span>
                    </label>
                </div>
            </div>
        </div>
    </div>

    {{-- Stats grid (only shown when ON) --}}
    <div class="wallet-dashboard {{ $isOn ? '' : 'd-none' }}">
        <div class="row">
            @php
                $tiles = [
                    ['label' => __('Active Wallet Users'),   'value' => $states['activeuser'],   'icon' => 'feather icon-users',           'color' => '#16a34a', 'bg' => '#dcfce7', 'help' => __('Counted active wallet users only')],
                    ['label' => __('Total Wallet Users'),    'value' => $states['totaluser'],    'icon' => 'feather icon-user-plus',       'color' => '#3b6df0', 'bg' => '#dbeafe', 'help' => __('Active and inactive wallet users')],
                    ['label' => __('Wallet Transactions'),   'value' => $states['wallettxn'],    'icon' => 'feather icon-bar-chart-line',  'color' => '#f59e0b', 'bg' => '#fef3c7', 'help' => __('Total transactions made on') . ' ' . config('app.name')],
                    ['label' => __('Overall Balance'),       'value' => '<i class="'.$defCurrency->currency_symbol.'"></i> ' . $states['overallwalletbalance'], 'icon' => 'feather icon-dollar-sign', 'color' => '#a855f7', 'bg' => '#f3e8ff', 'help' => __('Overall balance of active wallet users'), 'raw' => true, 'negative' => $states['overallwalletbalance'] < 0],
                    ['label' => __('Wallet Orders'),         'value' => $states['walletorders'], 'icon' => 'feather icon-shopping-cart',   'color' => '#06b6d4', 'bg' => '#cffafe', 'help' => __('Total orders paid via wallet')],
                ];
            @endphp
            @foreach($tiles as $tile)
                <div class="col-md-6 col-xl-4 mb-3">
                    <div class="card m-0" style="border:0;border-radius:12px;box-shadow:0 1px 3px rgba(15,23,42,.06);height:100%;">
                        <div class="card-body" style="padding:20px;">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <div style="width:42px;height:42px;border-radius:10px;background:{{ $tile['bg'] }};color:{{ $tile['color'] }};display:flex;align-items:center;justify-content:center;font-size:20px;">
                                    <i class="{{ $tile['icon'] }}"></i>
                                </div>
                            </div>
                            <h3 style="margin:0;font-weight:800;color:{{ ($tile['negative'] ?? false) ? '#dc2626' : '#0a1430' }};font-size:24px;">
                                @if(!empty($tile['raw'])) {!! $tile['value'] !!} @else {{ $tile['value'] }} @endif
                            </h3>
                            <p style="margin:2px 0 0;font-weight:600;color:#0a1430;font-size:13px;">{{ $tile['label'] }}</p>
                            <small style="color:#64748b;font-size:11px;display:block;margin-top:4px;">{{ $tile['help'] }}</small>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Transactions table --}}
        <div class="card m-b-30" style="border-radius:14px;border:0;box-shadow:0 1px 3px rgba(15,23,42,.06);">
            <div class="card-header" style="background:#fff;border-bottom:1px solid #f1f5f9;border-radius:14px 14px 0 0;">
                <h5 class="box-title" style="margin:0;font-weight:700;"><i class="feather icon-list text-primary mr-2"></i>{{ __('Wallet Transaction History') }}</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="wallet_logs_table" class="w-100 table table-hover">
                        <thead style="background:#f8fafc;">
                            <tr>
                                <th>#</th>
                                <th>{{ __('TXN ID') }}</th>
                                <th>{{ __('Note') }}</th>
                                <th>{{ __('Type') }}</th>
                                <th>{{ __('Amount') }}</th>
                                <th>{{ __('Balance') }}</th>
                                <th>{{ __('Date') }}</th>
                                <th>{{ __('Time') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('custom-script')
<script>
$(function(){
    "use strict";
    var table = $('#wallet_logs_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("admin.wallet.settings") }}',
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex', searchable: false},
            {data: 'wallet_txn_id', name: 'wallet_txn_id'},
            {data: 'note', name: 'note'},
            {data: 'type', name: 'type'},
            {data: 'amount', name: 'amount'},
            {data: 'balance', name: 'balance'},
            {data: 'txndate', name: 'txndate'},
            {data: 'txntime', name: 'txntime'}
        ],
        dom: '<"row align-items-center mb-2"<"col-sm-12 col-md-3"l><"col-sm-12 col-md-5"f><"col-sm-12 col-md-4 d-flex justify-content-end"B>>rtip',
        buttons: ['csv','excel','pdf','print'],
        order: [[0,'DESC']]
    });
});

$('.wallet_enable').on('change', function () {
    var $card = $('.wallet-dashboard');
    var status = $(this).is(':checked') ? 1 : 0;
    if (status) $card.removeClass('d-none'); else $card.addClass('d-none');

    $.ajax({
        type: 'GET',
        url: '{{ route("admin.update.wallet.settings") }}',
        data: { wallet_enable: status },
        success: function (data) {
            if (data.code == 200) {
                swal({ title: 'Success', text: data.msg, icon: 'success' });
            } else {
                swal({ title: 'Error', text: data.msg, icon: 'error' });
            }
        },
        error: function (xhr) { console.log(xhr); }
    });
});
</script>
@endsection