@extends('webview.masjid.main')

@push('style')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css">
<style>
    /* --- 1. GLOBAL STYLE & VARIABLES --- */
    :root {
        --text-color-black: #000;
        --text-color-white: #ffffff;
        --background-color-input: #FFF9E6; /* Cream */
        --border-color-input: #ffedb0;
        --primary-gold: #C79D3D; /* Gold */
    }

    /* --- 2. LAYOUT UTAMA --- */
    .header {
        display: flex;
        padding: 18px 15px 0;
        margin-bottom: 20px;
        align-items: center;
    }
    .header .btn-link {
        background: none;
        border: none;
        color: var(--text-color-black);
        cursor: pointer;
        padding: 0;
        font-size: 17px;
        font-family: inherit;
        text-decoration: none;
        display: flex;
        align-items: center;
        column-gap: 8px;
        font-weight: 400;
        letter-spacing: -0.43px;
    }

    .body {
        padding: 16px;
        padding-bottom: 150px; /* Space bawah agar tombol tidak tertutup navbar */
        background-color: #ffffff;
        min-height: calc(100vh - 80px);
        font-family: 'Inter', sans-serif;
        position: relative;
        box-sizing: border-box;
    }

    /* --- 3. FORM COMPONENTS --- */
    .form-group { margin-bottom: 16px; }

    .form-label {
        display: block;
        font-size: 12px;
        color: #9CA3AF;
        font-weight: 600;
        margin-bottom: 8px;
        text-transform: uppercase;
    }

    .input-box {
        position: relative;
        background-color: var(--background-color-input);
        border-radius: 10px;
        padding: 0 12px;
        display: flex;
        align-items: center;
        height: 48px;
    }
    .input-box:focus-within { border: 1px solid var(--primary-gold); }
    .input-icon { color: var(--primary-gold); font-size: 16px; margin-right: 10px; }

    .form-control-custom {
        width: 100%;
        background: transparent;
        border: none;
        outline: none;
        color: #1F2937;
        font-weight: 500;
        font-size: 13px;
        font-family: 'Inter', sans-serif;
    }
    .btn-search-icon { color: #C79D3D; font-size: 14px; opacity: 0.7; }

    .input-box.textarea { height: auto; padding: 12px; align-items: flex-start; }
    .form-control-custom.area { min-height: 80px; resize: none; line-height: 1.5; }
    .currency { font-size: 16px; font-weight: 700; color: var(--primary-gold); }

    .upload-box {
        border: 2px dashed var(--primary-gold);
        border-radius: 10px;
        background-color: #ffffff;
        padding: 20px;
        text-align: center;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .upload-box:active { background-color: var(--background-color-input); }

    /* --- 4. FOOTER BUTTON --- */
    .footer-action {
        margin-top: 40px;
        width: 100%;
        padding: 0;
        background: transparent;
        z-index: 1;
    }
    .btn-save {
        width: 100%;
        background-color: var(--primary-gold);
        color: white;
        border: none;
        border-radius: 10px;
        padding: 14px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        text-transform: uppercase;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        box-shadow: 0 4px 6px rgba(199, 157, 61, 0.2);
    }

    /* --- 5. MODAL STYLE --- */
    .custom-modal {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.6); z-index: 9999;
        display: none; justify-content: center; align-items: center;
        backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.3s;
    }
    .custom-modal.show { display: flex; opacity: 1; }
    
    .modal-box {
        background: white; width: 85%; max-width: 340px;
        border-radius: 15px; padding: 20px; display: flex; flex-direction: column;
        height: auto; max-height: 80vh; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        transform: scale(0.9); transition: transform 0.2s;
    }
    .custom-modal.show .modal-box { transform: scale(1); }

    .search-header { border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
    .search-title { font-weight: 700; font-size: 15px; }
    
    .search-list { overflow-y: auto; flex: 1; }
    .search-item { padding: 16px 10px; border-bottom: 1px solid #f0f0f0; cursor: pointer; gap: 6px;}
    .search-item:last-child { border-bottom: none; }
    .search-item:active {
        background-color: #FFF9E6; /* Warna cream saat dipencet */
        border-radius: 8px;
    }
    .item-code { font-size: 11px; font-weight: 700; color: var(--primary-gold); padding: 4px 8px;}
    .item-name { font-size: 13px; color: #333; }

    /* Alert & Loader */
    .loader { border: 3px solid #f3f3f3; border-top: 3px solid var(--primary-gold); border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 0 auto; }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    
    .alert-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-size: 24px; }
    .icon-success { background: #e8f5e9; color: #2e7d32; }
    .icon-error { background: #ffebee; color: #c62828; }
    .alert-title { text-align: center; font-weight: 700; margin-bottom: 5px; }
    .alert-msg { text-align: center; font-size: 13px; color: #666; margin-bottom: 15px; }
    .alert-btn { background: #f0f0f0; border: none; padding: 10px; width: 100%; border-radius: 8px; font-weight: 600; cursor: pointer; }

</style>
@endpush

@section('content')

{{-- HEADER --}}
<div class="header">
    <a href="javascript:void(0)" onclick="window.history.back()" class="btn-link">
        <img alt="angle-left" src="{{ asset('asset-webview/masjid/icons/arrow-left.png') }}" height="24" width="24">
        Pengeluaran Zakat
    </a>
</div>

{{-- BODY --}}
<div class="body">
    
    <form id="form-tambah" enctype="multipart/form-data">
        <input type="hidden" id="method" name="_method" value="post">
        <input type="hidden" id="id_edit" name="id_edit">
        
        {{-- JENIS: PENGELUARAN (PENTING) --}}
        <input type="hidden" id="jenis" name="jenis" value="PENGELUARAN">
        
        {{-- INPUT HIDDEN WAJIB --}}
        <input type="hidden" name="hapus_dok" value="0">
        <input type="hidden" name="file_seb" value="-">
        
        {{-- KODE PP --}}
        <input type="hidden" id="kode_pp" name="kode_pp" value="{{ Session::get('kodePP') }}">

        {{-- 1. Tanggal --}}
        <div class="form-group">
            <label class="form-label">Tanggal Transaksi</label>
            <div class="input-box">
                <i class="simple-icon-calendar input-icon"></i>
                <input type="date" class="form-control-custom" id="tanggal" name="tanggal" value="{{ date('Y-m-d') }}" required>
            </div>
        </div>

        {{-- 2. Akun Kas/Bank --}}
        <div class="form-group">
            <label class="form-label">Akun Kas/Bank</label>
            <div class="input-box" onclick="openSearch('akun_kb')" style="cursor: pointer;">
                <i class="simple-icon-wallet input-icon"></i>
                <input type="text" class="form-control-custom" id="nama_akun_kb" placeholder="Pilih Akun" readonly style="pointer-events: none;">
                <input type="hidden" id="akun_kb" name="akun_kb" required>
                <i class="simple-icon-magnifier btn-search-icon"></i>
            </div>
        </div>

        {{-- 3. Referensi --}}
        <div class="form-group">
            <label class="form-label">Referensi / Sumber Dana</label>
            <div class="input-box" onclick="openSearch('kode_ref')" style="cursor: pointer;">
                <i class="simple-icon-notebook input-icon"></i>
                <input type="text" class="form-control-custom" id="nama_kode_ref" placeholder="Pilih Referensi" readonly style="pointer-events: none;">
                <input type="hidden" id="kode_ref" name="kode_ref" required>
                <i class="simple-icon-magnifier btn-search-icon"></i>
            </div>
        </div>

        {{-- 4. Keterangan --}}
        <div class="form-group">
            <label class="form-label">Keterangan</label>
            <div class="input-box textarea">
                <i class="simple-icon-pencil input-icon" style="margin-top: 2px;"></i>
                <textarea class="form-control-custom area" id="keterangan" name="keterangan" placeholder="Contoh: Penyaluran Zakat Fitrah..." required></textarea>
            </div>
        </div>

        {{-- 5. Nilai --}}
        <div class="form-group">
            <label class="form-label">Nilai (Rp)</label>
            <div class="input-box">
                <span style="font-weight: 700; color: #C79D3D; margin-right: 10px;">Rp</span>
                <input type="text" class="form-control-custom currency" id="nilai" name="nilai" value="0" required inputmode="numeric">
            </div>
        </div>

        {{-- 6. Upload Bukti --}}
        <div class="form-group">
            <label class="form-label">Bukti Transaksi (Opsional)</label>
            
            <div class="upload-box" onclick="$('#file').click()">
                <i class="simple-icon-cloud-upload" style="font-size: 24px; color: #C79D3D; margin-bottom: 5px;"></i>
                <div id="file-label" style="font-size: 12px; color: #999;">Klik untuk upload foto/dokumen</div>
            </div>

            <input type="file" id="file" name="file" style="display: none;" accept="image/*,application/pdf">
        </div>

        {{-- Footer Action --}}
        <div class="footer-action">
            <button type="submit" class="btn-save">
                SIMPAN PENGELUARAN
            </button>
        </div>

    </form>
</div>

{{-- MODALS --}}
<div id="modalSearch" class="custom-modal">
    <div class="modal-box" style="height: 70vh;">
        <div class="search-header">
            <span class="search-title" id="searchTitle">Pilih Data</span>
            <i class="simple-icon-close" style="font-size: 18px; cursor: pointer;" onclick="closeModal('modalSearch')"></i>
        </div>
        <input type="text" id="searchInput" class="form-control-custom" placeholder="Cari disini..." style="border: 1px solid #eee; padding: 10px; border-radius: 8px; margin-bottom: 10px; background: #fff;">
        <div id="searchList" class="search-list">
            <div style="text-align: center; margin-top: 50px;"><div class="loader"></div></div>
        </div>
    </div>
</div>

<div id="modalAlert" class="custom-modal">
    <div class="modal-box" style="align-items: center; max-width: 280px;">
        <div id="alertIcon" class="alert-icon"></div>
        <div id="alertTitle" class="alert-title"></div>
        <div id="alertMsg" class="alert-msg"></div>
        <button class="alert-btn" onclick="closeModal('modalAlert')">Tutup</button>
    </div>
</div>

<div id="modalLoading" class="custom-modal">
    <div class="modal-box" style="width: auto; padding: 15px 25px; flex-direction: row; align-items: center; gap: 15px;">
        <div class="loader" style="width: 20px; height: 20px; border-width: 2px;"></div>
        <span style="font-weight: 600; color: #555; font-size: 13px;">Memproses...</span>
    </div>
</div>

@endsection

@push('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.8/jquery.inputmask.min.js"></script>
<script>
    $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': "{{ csrf_token() }}" } });

    // --- UTILS ---
    function openModal(id) {
        $('#'+id).css('display', 'flex');
        setTimeout(() => { $('#'+id).addClass('show'); }, 10);
    }
    function closeModal(id) {
        $('#'+id).removeClass('show');
        setTimeout(() => { $('#'+id).hide(); }, 300);
    }
    function showAlert(type, title, msg) {
        if(type == 'success') {
            $('#alertIcon').removeClass('icon-error').addClass('icon-success').html('<i class="simple-icon-check"></i>');
        } else {
            $('#alertIcon').removeClass('icon-success').addClass('icon-error').html('<i class="simple-icon-close"></i>');
        }
        $('#alertTitle').text(title);
        $('#alertMsg').text(msg);
        openModal('modalAlert');
    }

    // --- FORM INIT ---
    if ($('.currency').length > 0) {
        $('.currency').inputmask("numeric", {
            radixPoint: ",", groupSeparator: ".", digits: 0, autoGroup: true, rightAlign: false, removeMaskOnSubmit: true
        });
    }

    $('#file').change(function() {
        var file = this.files[0];
        if (file) {
            $('#file-label').html(`<span style="font-weight:700; color:#333;">${file.name}</span>`);
        }
    });

    // --- SEARCH LOGIC ---
    var targetId = '';
    var targetName = '';

    function openSearch(type) {
        targetId = type;
        targetName = 'nama_' + type;
        
        var url = (type == 'akun_kb') ? "{{ url('kb-trans/kbinout-akun') }}" : "{{ url('kb-master/ref-trans-list') }}";
        var title = (type == 'akun_kb') ? "Pilih Akun Kas" : "Pilih Referensi";
        
        $('#searchTitle').text(title);
        $('#searchInput').val('');
        $('#searchList').html('<div style="text-align: center; margin-top: 50px;"><div class="loader"></div></div>');
        
        openModal('modalSearch');

        // LOGIC KHUSUS PENGELUARAN ZAKAT:
        // - Jenis: PENGELUARAN (dari input hidden)
        // - Modul: 'Zakat' (agar referensi yang muncul adalah pos zakat)
        var modulValue = (type == 'kode_ref') ? 'Zakat' : 'Operasional';

        var postData = {
            jenis: $('#jenis').val(), // PENGELUARAN
            modul: modulValue,        // Zakat (jika kode_ref)
            start: 0,       
            length: 1000, 
            search: { value: '' },
            columns: [
                { data: 'kode_akun', searchable: true },
                { data: 'nama', searchable: true }
            ]
        };

        $.ajax({
            type: 'POST', 
            url: url, 
            dataType: 'json',
            data: postData,
            success: function(res) {
                var html = '';
                if( (res.status && res.data.length > 0) || (Array.isArray(res.data) && res.data.length > 0) ) {
                    res.data.forEach(item => {
                        var code = item.kode_akun || item.kode_ref; 
                        var name = item.nama;
                        var safeName = name ? name.replace(/'/g, "\\'") : ""; 
                        
                        // Menangani extra data (PP) untuk Referensi
                        var extraPP = item.pp ? item.pp : "";
                        var extraSafePP = extraPP ? extraPP.replace(/'/g, "\\'") : "";

                        html += `
                        <div class="search-item" onclick="selectItem('${code}', '${safeName}', '${type}', '${safeName}', '${extraSafePP}')">
                            <span class="item-code">${code}</span>
                            <span class="item-name">${name}</span>
                        </div>`;
                    });
                } else {
                    html = `
                    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 50px; color: #9CA3AF;">
                        <i class="simple-icon-ghost" style="font-size: 40px; margin-bottom: 10px;"></i>
                        <span style="font-size: 14px;">Data tidak ditemukan</span>
                    </div>`;
                }
                $('#searchList').html(html);
            },
            error: function(xhr, desc, err) { 
                var msg = "Gagal mengambil data";
                if(xhr.responseJSON && xhr.responseJSON.message) {
                    msg += ": " + xhr.responseJSON.message;
                }
                $('#searchList').html(`<div style="text-align: center; color: red; margin-top: 20px; font-size:12px; padding:10px;">${msg}</div>`); 
            }
        });
    }

    function selectItem(code, name, type, fullName, extraPP) {
        $('#' + targetId).val(code);
        $('#' + targetName).val(code + ' - ' + name);
        
        // Auto Fill Keterangan & Kode PP
        if(type == 'kode_ref') { 
            $('#keterangan').val(fullName); 
            if(extraPP) {
                var splitPP = extraPP.split(' | ');
                if(splitPP.length > 0) {
                    $('#kode_pp').val(splitPP[0]);
                }
            }
        }
        closeModal('modalSearch');
    }

    $('#searchInput').on('keyup', function() {
        var value = $(this).val().toLowerCase();
        $("#searchList .search-item").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });

    // --- SUBMIT ---
    $('#form-tambah').submit(function(e) {
        e.preventDefault();
        
        if($('#akun_kb').val() == '' || $('#kode_ref').val() == '' || $('#nilai').val() == '' || $('#nilai').val() == '0') {
            showAlert('error', 'Data Belum Lengkap', 'Harap lengkapi semua field yang bertanda wajib.');
            return;
        }

        openModal('modalLoading');
        
        var formData = new FormData(this);
        var tglRaw = $('#tanggal').val().split('-');
        var tglFix = tglRaw[2] + '/' + tglRaw[1] + '/' + tglRaw[0];
        formData.set('tanggal', tglFix);

        $.ajax({
            type: 'POST',
            url: "{{ url('kb-trans/kbinout') }}",
            data: formData, contentType: false, cache: false, processData: false,
            success: function(result) {
                closeModal('modalLoading');
                
                var status = result.data ? result.data.status : result.status;
                var message = result.data ? result.data.message : result.message;
                var no_bukti = result.data ? result.data.no_bukti : '';

                if(status) {
                    showAlert('success', 'Berhasil Disimpan', 'No Bukti: ' + no_bukti);
                    $('#form-tambah')[0].reset();
                    $('#nama_akun_kb').val('');
                    $('#nama_kode_ref').val('');
                    $('#file-label').text('Klik untuk upload foto/dokumen');
                } else {
                    showAlert('error', 'Gagal', message);
                }
            },
            error: function(xhr) {
                closeModal('modalLoading');
                showAlert('error', 'Error Server', 'Terjadi kesalahan saat menghubungi server.');
            }
        });
    });

    $('.custom-modal').on('click', function(e) {
        if (e.target === this) {
            closeModal($(this).attr('id'));
        }
    });
</script>
@endpush