@extends('root')
@section('title', 'Buat Saldo Adjustment')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Buat Saldo Adjustment',
        'links' => [
            ['url' => route('dashboard'), 'label' => 'Dashboard'],
            ['url' => route('admin.balance-adjustments.index'), 'label' => 'Saldo Adjustment'],
        ],
        'current' => 'Buat Adjustment'
    ])

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header bg-warning">
                    <h5 class="mb-0 text-dark">
                        <i class="ti ti-adjustments-horizontal me-2"></i>Form Saldo Adjustment
                    </h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-warning">
                        <i class="ti ti-alert-triangle me-2"></i>
                        <strong>Perhatian!</strong> Adjustment saldo bersifat permanen dan tidak dapat dibatalkan. Pastikan data yang diinput sudah benar.
                    </div>

                    <form id="adjustment-form">
                        @csrf
                        
                        {{-- Client Selection --}}
                        <div class="mb-4">
                            <label class="form-label fw-bold">Client <span class="text-danger">*</span></label>
                            <select name="client_id" id="client_id" class="form-select" required>
                                <option value="">-- Pilih Client --</option>
                                @foreach($clients as $client)
                                    <option value="{{ $client->id }}" 
                                            data-balance="{{ $client->balance }}"
                                            data-account="{{ $client->account_name }}">
                                        {{ $client->name }} ({{ $client->account_name }})
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Current Balance Display --}}
                        <div class="mb-4" id="balance-display" style="display: none;">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <small class="text-muted">Saldo Saat Ini</small>
                                            <h4 class="mb-0" id="current-balance">Rp 0</h4>
                                        </div>
                                        <div class="col-md-6">
                                            <small class="text-muted">Saldo Setelah Adjustment</small>
                                            <h4 class="mb-0" id="new-balance">-</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Adjustment Type --}}
                        <div class="mb-4">
                            <label class="form-label fw-bold">Tipe Adjustment <span class="text-danger">*</span></label>
                            <div class="d-flex gap-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="adjustment_type" id="type-credit" value="credit" required>
                                    <label class="form-check-label" for="type-credit">
                                        <span class="badge bg-success fs-6 px-3 py-2">
                                            <i class="ti ti-arrow-up me-1"></i> CREDIT (Tambah Saldo)
                                        </span>
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="adjustment_type" id="type-debit" value="debit">
                                    <label class="form-check-label" for="type-debit">
                                        <span class="badge bg-danger fs-6 px-3 py-2">
                                            <i class="ti ti-arrow-down me-1"></i> DEBIT (Kurang Saldo)
                                        </span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        {{-- Amount --}}
                        <div class="mb-4">
                            <label class="form-label fw-bold">Nominal <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text">Rp</span>
                                <input type="number" name="amount" id="amount" class="form-control form-control-lg" 
                                       placeholder="Masukkan nominal" min="1" required>
                            </div>
                            <small class="text-muted">Masukkan nominal dalam Rupiah (tanpa titik atau koma)</small>
                        </div>

                        {{-- Title/Reason --}}
                        <div class="mb-4">
                            <label class="form-label fw-bold">Alasan Adjustment <span class="text-danger">*</span></label>
                            <input type="text" name="title" id="title" class="form-control" 
                                   placeholder="Contoh: Saldo topup belum masuk, Koreksi kesalahan sistem" required maxlength="255">
                        </div>

                        {{-- Notes --}}
                        <div class="mb-4">
                            <label class="form-label fw-bold">Catatan Tambahan (Opsional)</label>
                            <textarea name="notes" id="notes" class="form-control" rows="3" 
                                      placeholder="Detail teknis atau referensi tambahan..." maxlength="1000"></textarea>
                        </div>

                        {{-- Confirmation --}}
                        <div class="mb-4">
                            <div class="card border-danger">
                                <div class="card-body">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="confirmation" id="confirmation" required>
                                        <label class="form-check-label fw-bold text-danger" for="confirmation">
                                            Saya konfirmasi bahwa data adjustment di atas sudah BENAR dan saya memahami bahwa adjustment ini TIDAK DAPAT DIBATALKAN.
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Buttons --}}
                        <div class="d-flex gap-2">
                            <a href="{{ route('admin.balance-adjustments.index') }}" class="btn btn-outline-secondary">
                                <i class="ti ti-arrow-left me-1"></i> Batal
                            </a>
                            <button type="submit" class="btn btn-warning btn-lg flex-grow-1" id="btn-submit" disabled>
                                <i class="ti ti-check me-1"></i> Proses Adjustment
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {
    var currentBalance = 0;

    // Client selection change
    $('#client_id').on('change', function() {
        var selected = $(this).find('option:selected');
        if (selected.val()) {
            currentBalance = parseFloat(selected.data('balance')) || 0;
            $('#current-balance').text('Rp ' + currentBalance.toLocaleString('id-ID'));
            $('#balance-display').slideDown();
            calculateNewBalance();
        } else {
            currentBalance = 0;
            $('#balance-display').slideUp();
        }
    });

    // Type or amount change
    $('input[name="adjustment_type"], #amount').on('change keyup', function() {
        calculateNewBalance();
    });

    // Calculate new balance preview
    function calculateNewBalance() {
        var type = $('input[name="adjustment_type"]:checked').val();
        var amount = parseFloat($('#amount').val()) || 0;
        var newBalance = currentBalance;

        if (type === 'credit') {
            newBalance = currentBalance + amount;
            $('#new-balance').removeClass('text-danger').addClass('text-success');
        } else if (type === 'debit') {
            newBalance = currentBalance - amount;
            if (newBalance < 0) {
                $('#new-balance').removeClass('text-success').addClass('text-danger');
            } else {
                $('#new-balance').removeClass('text-danger').addClass('text-success');
            }
        }

        if (type && amount > 0) {
            var prefix = type === 'credit' ? '+' : '-';
            $('#new-balance').html(
                'Rp ' + newBalance.toLocaleString('id-ID') + 
                ' <small>(' + prefix + 'Rp ' + amount.toLocaleString('id-ID') + ')</small>'
            );
        } else {
            $('#new-balance').text('-');
        }
    }

    // Confirmation checkbox
    $('#confirmation').on('change', function() {
        $('#btn-submit').prop('disabled', !$(this).is(':checked'));
    });

    // Form submit
    $('#adjustment-form').on('submit', function(e) {
        e.preventDefault();

        var type = $('input[name="adjustment_type"]:checked').val();
        var amount = parseFloat($('#amount').val()) || 0;
        var typeLabel = type === 'credit' ? 'CREDIT (Tambah)' : 'DEBIT (Kurang)';

        if (!confirm('Anda yakin ingin melakukan ' + typeLabel + ' sebesar Rp ' + amount.toLocaleString('id-ID') + '?\n\nAksi ini TIDAK DAPAT DIBATALKAN!')) {
            return;
        }

        $('#btn-submit').prop('disabled', true).html('<i class="spinner-border spinner-border-sm me-1"></i> Memproses...');

        $.ajax({
            url: '{{ route('admin.balance-adjustments.store') }}',
            method: 'POST',
            data: $(this).serialize(),
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    alert('Adjustment berhasil!\n\nSaldo sebelum: ' + response.data.balance_before + '\nSaldo sesudah: ' + response.data.balance_after);
                    window.location.href = '{{ route('admin.balance-adjustments.index') }}';
                } else {
                    alert('Error: ' + response.message);
                    $('#btn-submit').prop('disabled', false).html('<i class="ti ti-check me-1"></i> Proses Adjustment');
                }
            },
            error: function(xhr) {
                var message = 'Terjadi kesalahan';
                if (xhr.responseJSON) {
                    if (xhr.responseJSON.message) {
                        message = xhr.responseJSON.message;
                    } else if (xhr.responseJSON.errors) {
                        message = Object.values(xhr.responseJSON.errors).flat().join('\n');
                    }
                }
                alert('Error: ' + message);
                $('#btn-submit').prop('disabled', false).html('<i class="ti ti-check me-1"></i> Proses Adjustment');
            }
        });
    });
});
</script>
@endpush