@extends('layouts.apex')

@section('title', 'Manajemen Customer')

@section('content')
<div class="page-header">
    <div class="page-header-content">
        <div>
            <h1 class="page-header-title">Manajemen Customer</h1>
            <p class="page-header-subtitle">Kelola data customer pembeli udang</p>
        </div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#customerModal">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.5rem;">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Tambah Customer
        </button>
        <button type="button" class="btn btn-success ms-2" onclick="autoGeneratePiutang()">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.5rem;">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
            </svg>
            Auto-Generate Piutang
        </button>
    </div>
</div>

<div class="page-body">
    <!-- Summary Cards -->
    <div class="stat-grid">
        <div class="stat-card">
            <div class="stat-icon primary">
                <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                </svg>
            </div>
            <div class="stat-label">Total Customer</div>
            <div class="stat-value">{{ $customers->count() }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon success">
                <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                </svg>
            </div>
            <div class="stat-label">Customer Aktif</div>
            <div class="stat-value">{{ $customers->where('is_active', true)->count() }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon danger">
                <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.657 0 3 .895 3 2s-1.343 2-3 2-3-.895-3-2 1.343-2 3-2m0-6c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2z"/>
                </svg>
            </div>
            <div class="stat-label">Total Piutang</div>
            <div class="stat-value">Rp {{ number_format($customers->sum(function($c) { try { return $c->current_piutang; } catch (\Exception $e) { return 0; } }), 0, ',', '.') }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon warning">
                <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                </svg>
            </div>
            <div class="stat-label">Over Limit</div>
            <div class="stat-value">{{ $customers->filter(function($c) { try { return $c->isOverLimit(); } catch (\Exception $e) { return false; } })->count() }}</div>
        </div>
    </div>

    <!-- Table -->
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Daftar Customer</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="customerTable" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Kode</th>
                            <th>Nama</th>
                            <th>Kontak</th>
                            <th>Limit Piutang</th>
                            <th>Piutang Aktif</th>
                            <th>Tenor</th>
                            <th>Status</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Customer Modal -->
<div id="customerModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="customerForm" action="{{ route('customer.store') }}" method="POST">
                @csrf
                <input type="hidden" name="_method" value="POST" id="customerMethod">
                <input type="hidden" name="customer_id" id="customer_id">
                <div class="modal-header">
                    <h5 class="modal-title" id="customerModalTitle">Tambah Customer Baru</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Kode Customer *</label>
                                <input type="text" name="kode" id="customerKode" class="form-control" placeholder="Contoh: C00001" required maxlength="20" style="text-transform: uppercase;">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Nama Customer *</label>
                                <input type="text" name="nama" class="form-control" placeholder="Contoh: PT. Seafood" required maxlength="60">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Alamat</label>
                        <textarea name="alamat" class="form-control" rows="2" maxlength="100"></textarea>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Telepon</label>
                                <input type="text" name="telepon" class="form-control" placeholder="Contoh: 08123456789" maxlength="100">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Email</label>
                                <input type="email" name="email" class="form-control" placeholder="Contoh: customer@email.com" maxlength="100">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Kontak Person</label>
                        <input type="text" name="kontak_person" class="form-control" placeholder="Nama kontak person" maxlength="100">
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">NPWP</label>
                                <input type="text" name="npwp" class="form-control" placeholder="Nomor NPWP" maxlength="50">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Nama Bank</label>
                                <select name="nama_bank" class="select2 form-control" style="width: 100%;">
                                    <option value="">Pilih Bank</option>
                                    <option value="BCA">BCA</option>
                                    <option value="Mandiri">Mandiri</option>
                                    <option value="BRI">BRI</option>
                                    <option value="BNI">BNI</option>
                                    <option value="CIMB Niaga">CIMB Niaga</option>
                                    <option value="Danamon">Danamon</option>
                                    <option value="Permata">Permata</option>
                                    <option value="Muamalat">Muamalat</option>
                                    <option value="Lainnya">Lainnya</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Nomor Rekening</label>
                                <input type="text" name="nomor_rekening" class="form-control" placeholder="Nomor Rekening" maxlength="50">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Atas Nama</label>
                                <input type="text" name="atas_nama" class="form-control" placeholder="Atas Nama Rekening" maxlength="100">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Limit Piutang (Rp)</label>
                                <input type="text" name="limit_piutang" class="form-control format-rupiah" placeholder="Contoh: 1.000.000" value="">
                                <input type="hidden" name="limit_piutang_value" id="limit_piutang_value" value="0">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Tenor (Hari)</label>
                                <input type="number" name="tenor" class="form-control" placeholder="0" min="0" value="0">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group" style="padding-top: 2rem;">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="is_active" value="1" checked>
                                        Customer Aktif
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Global functions
let customerTable;

// Format Rupiah function
function formatRupiah(value) {
    return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}

function editCustomer(id) {
    console.log('editCustomer called with id:', id);

    $.ajax({
        url: '/customer/' + id,
        method: 'GET',
        success: function(data) {
            console.log('Customer data received:', data);

            // Update form
            $('#customerModalTitle').text('Edit Customer');
            $('#customerMethod').val('PUT');
            $('#customer_id').val(id);
            $('#customerForm').attr('action', '/customer/' + id);

            $('#customerKode').val(data.kode).prop('readonly', true);
            $('input[name="nama"]').val(data.nama);
            $('textarea[name="alamat"]').val(data.alamat || '');
            $('input[name="telepon"]').val(data.telepon || '');
            $('input[name="email"]').val(data.email || '');
            $('input[name="kontak_person"]').val(data.kontak_person || '');
            $('input[name="npwp"]').val(data.npwp || '');
            $('select[name="nama_bank"]').val(data.nama_bank || '').trigger('change');
            $('input[name="nomor_rekening"]').val(data.nomor_rekening || '');
            $('input[name="atas_nama"]').val(data.atas_nama || '');
            $('input[name="limit_piutang"]').val(formatRupiah(data.limit_piutang || 0));
            $('#limit_piutang_value').val(data.limit_piutang || 0);
            $('input[name="tenor"]').val(data.tenor || 0);
            $('input[name="is_active"]').prop('checked', data.is_active);

            console.log('About to show modal...');
            // Show modal using Bootstrap 5 API
            const modal = new bootstrap.Modal(document.getElementById('customerModal'));
            modal.show();
            console.log('Modal shown!');
        },
        error: function(xhr) {
            console.error('Error fetching customer:', xhr);
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: 'Gagal mengambil data customer!'
            });
        }
    });
}

function viewCustomer(id) {
    console.log('viewCustomer called with id:', id);
    $.ajax({
        url: '/customer/' + id,
        method: 'GET',
        success: function(data) {
            console.log('Customer data received:', data);
            var limitPiutang = data.limit_piutang ? data.limit_piutang.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") : '0';
            var telepon = data.telepon || '-';
            var email = data.email || '-';
            var alamat = data.alamat || '-';
            var kontakPerson = data.kontak_person || '-';
            var namaBank = data.nama_bank || '-';
            var nomorRekening = data.nomor_rekening || '-';
            var atasNama = data.atas_nama || '-';
            var tenor = data.tenor || 0;
            var statusBadge = data.is_active ? '<span class="badge badge-success">Aktif</span>' : '<span class="badge badge-warning">Non-Aktif</span>';

            var htmlContent =
                '<div style="text-align: left;">' +
                    '<p><strong>Kode:</strong> ' + data.kode + '</p>' +
                    '<p><strong>Telepon:</strong> ' + telepon + '</p>' +
                    '<p><strong>Email:</strong> ' + email + '</p>' +
                    '<p><strong>Alamat:</strong> ' + alamat + '</p>' +
                    '<p><strong>Kontak Person:</strong> ' + kontakPerson + '</p>' +
                    '<p><strong>NPWP:</strong> ' + (data.npwp || '-') + '</p>' +
                    '<p><strong>Nama Bank:</strong> ' + namaBank + '</p>' +
                    '<p><strong>Nomor Rekening:</strong> ' + nomorRekening + '</p>' +
                    '<p><strong>Atas Nama:</strong> ' + atasNama + '</p>' +
                    '<p><strong>Limit Piutang:</strong> Rp ' + limitPiutang + '</p>' +
                    '<p><strong>Tenor:</strong> ' + tenor + ' hari</p>' +
                    '<p><strong>Status:</strong> ' + statusBadge + '</p>' +
                '</div>';

            Swal.fire({
                title: data.nama,
                html: htmlContent,
                icon: 'info',
                confirmButtonText: 'Tutup',
                confirmButtonColor: '#435ebe'
            });
        },
        error: function() {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: 'Gagal mengambil data customer!'
            });
        }
    });
}

function deleteCustomer(id) {
    console.log('deleteCustomer called with id:', id);
    Swal.fire({
        title: 'Hapus Customer?',
        text: 'Apakah Anda yakin ingin menghapus customer ini?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Ya, hapus!',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: '/customer/' + id,
                method: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    $('#customerTable').DataTable().ajax.reload(null, false);
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: 'Customer berhasil dihapus!',
                        timer: 2000,
                        showConfirmButton: false
                    });
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: xhr.responseJSON?.message || 'Gagal menghapus customer!'
                    });
                }
            });
        }
    });
}

function resetCustomerForm() {
    $('#customerForm')[0].reset();
    $('#customerModalTitle').text('Tambah Customer Baru');
    $('#customerMethod').val('POST');
    $('#customer_id').val('');
    $('#customerForm').attr('action', '{{ route("customer.store") }}');
    $('#customerKode').prop('readonly', false);
    $('input[name="limit_piutang"]').val('');
    $('#limit_piutang_value').val('0');
    $('select[name="nama_bank"]').val(null).trigger('change');
}

function autoGeneratePiutang() {
    Swal.fire({
        title: 'Auto-Generate Piutang',
        text: 'Generate piutang untuk semua transaksi panen yang belum ada piutang?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#28a745',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Ya, Generate!',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: '{{ route("customer.auto-generate-piutang") }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    $('#customerTable').DataTable().ajax.reload(null, false);
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    });
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: xhr.responseJSON?.message || 'Gagal generate piutang!'
                    });
                }
            });
        }
    });
}

function parseRupiah(value) {
    return parseInt(value.replace(/\./g, '')) || 0;
}

$(document).ready(function() {
    // Initialize Select2
    $('.select2').select2({
        theme: 'bootstrap4',
        dropdownParent: $('#customerModal'),
        placeholder: 'Pilih Bank',
        allowClear: true
    });

    // Auto-format rupiah input
    $('.format-rupiah').on('input', function() {
        let value = $(this).val().replace(/\./g, '').replace(/[^0-9]/g, '');
        // Remove leading zeros
        value = value.replace(/^0+/, '');
        if (value === '') {
            value = '0';
        }
        if (value) {
            $(this).val(formatRupiah(value));
            $('#limit_piutang_value').val(value);
        }
    });

    customerTable = $('#customerTable').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 10,
        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
        responsive: true,
        dom: 'Bfrtip',
        buttons: [
            'copy',
            'csv',
            'excel',
            'pdf',
            'print'
        ],
        ajax: {
            url: '{{ route("customer.data") }}',
            type: 'GET',
            data: function(d) {
                d._token = '{{ csrf_token() }}';
            }
        },
        columns: [
            { data: 'kode', name: 'kode' },
            { data: 'nama', name: 'nama' },
            { data: 'telepon', name: 'telepon' },
            { data: 'limit_piutang_format', name: 'limit_piutang' },
            { data: 'current_piutang_format', orderable: false },
            { data: 'tenor', name: 'tenor' },
            { data: 'status_badge', name: 'is_active' },
            { data: 'action', orderable: false, searchable: false }
        ],
        order: [[0, 'asc']],
        language: {
            url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/id.json'
        }
    });

    // Auto uppercase kode customer
    $('input[name="kode"]').on('input', function() {
        this.value = this.value.toUpperCase();
    });

    $('#customerForm').on('submit', function(e) {
        e.preventDefault();
        const method = $('#customerMethod').val();
        const url = $(this).attr('action');

        // Get form data
        let formData = $(this).serializeArray();

        // Replace formatted limit_piutang with actual numeric value
        formData = formData.map(item => {
            if (item.name === 'limit_piutang') {
                return { name: 'limit_piutang', value: $('#limit_piutang_value').val() || '0' };
            }
            return item;
        });

        // Ensure is_active is included (checkbox handling)
        const hasIsActive = formData.some(item => item.name === 'is_active');
        if (!hasIsActive) {
            formData.push({ name: 'is_active', value: '0' });
        }

        $.ajax({
            url: url,
            method: method === 'PUT' ? 'PUT' : 'POST',
            data: $.param(formData),
            success: function(response) {
                // Hide modal using Bootstrap 5 API
                const modalEl = document.getElementById('customerModal');
                const modal = bootstrap.Modal.getInstance(modalEl);
                if (modal) {
                    modal.hide();
                }
                $('#customerTable').DataTable().ajax.reload(null, false);
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: method === 'PUT' ? 'Customer berhasil diperbarui!' : 'Customer berhasil ditambahkan!',
                    timer: 2000,
                    showConfirmButton: false
                });
                resetCustomerForm();
            },
            error: function(xhr) {
                console.error('Error:', xhr);
                const errorMsg = xhr.responseJSON?.message || (xhr.responseJSON?.errors ? Object.values(xhr.responseJSON.errors).join(', ') : 'Terjadi kesalahan!');
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: errorMsg
                });
            }
        });
    });

    // Reset form when modal is closed
    $('#customerModal').on('hidden.bs.modal', function() {
        resetCustomerForm();
    });
});
</script>
@endpush
@endsection