@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; /* Warna Cream Khas Kas DKM */
        --border-color-input: #ffedb0;
        --primary-gold: #C79D3D; /* Warna Emas */
    }

    /* --- 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 (Style Cream) */
    .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; }

    /* Textarea */
    .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 */
    .currency { font-size: 16px; font-weight: 700; color: var(--primary-gold); }

    /* Upload Box */
    .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 List */
    .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 Kegiatan
    </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">
        <input type="hidden" id="jenis" name="jenis" value="PENGELUARAN">
        <input type="hidden" name="hapus_dok" value="0">
        <input type="hidden" name="file_seb" value="-">
        <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. Kegiatan --}}
        <div class="form-group">
            <label class="form-label">Kegiatan</label>
            <div class="input-box" onclick="openSearch('kode_keg')" style="cursor: pointer;">
                <i class="simple-icon-notebook input-icon"></i>
                <input type="text" class="form-control-custom" id="nama_kode_keg" placeholder="Pilih Kegiatan" readonly style="pointer-events: none;">
                <input type="hidden" id="kode_keg" name="kode_keg" required>
                <i class="simple-icon-magnifier btn-search-icon"></i>
            </div>
        </div>

        {{-- 4. Referensi --}}
        <div class="form-group">
            <label class="form-label">Referensi</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>

        {{-- 5. 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: Pembayaran Listrik..." required></textarea>
            </div>
        </div>

        {{-- 6. 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>

        {{-- 7. 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) {
        currentSearchType = type;
        targetId = type;
        
        // Mapping Target ID ke Input Name
        if(type == 'kode_keg') {
            targetName = 'nama_kode_keg';
        } else {
            targetName = 'nama_' + type;
        }
        
        var url = "";
        var title = "";
        var postData = {}; 

        if (type == 'akun_kb') {
            // Akun Kas Bank 
            url = "{{ url('kb-trans/kbinout-akun') }}";
            title = "Pilih Akun Kas";
            postData = { 
                jenis: 'PENGELUARAN', 
                modul: 'Operasional', 
                start: 0, 
                length: 1000, 
                search: { value: $('#searchInput').val() || '' }
            };
        } 
        else if (type == 'kode_keg') {
            // --- KEGIATAN ---
            url = "{{ url('mjd-master/kegiatan') }}";
            title = "Pilih Kegiatan";
            
            // Format Parameter standar DataTables Server-side
            postData = { 
                start: 0, 
                length: 1000, 
                search: { value: $('#searchInput').val() || '' } 
            };
        }
        else if (type == 'kode_ref') {
            url = "{{ url('kb-master/ref-trans-list') }}";
            title = "Pilih Referensi";
            postData = { 
                jenis: 'PENGELUARAN',
                modul: 'Operasional',
                start: 0,       
                length: 1000, // Ambil 1000 data langsung
                search: { value: '' }, // Struktur standar datatables
                columns: [
                    { data: 'kode_akun', searchable: true },
                    { data: 'nama', searchable: true }
                ] 
            };
        }
        
        $('#searchTitle').text(title);
        $('#searchList').html('<div style="text-align: center; margin-top: 50px;"><div class="loader"></div></div>');
        openModal('modalSearch');

        // Tentukan Method: POST untuk Akun, GET untuk Kegiatan (Master Data)
        var ajaxMethod = 'POST';
        if(type == 'kode_keg') {
            ajaxMethod = 'GET';
        }

        $.ajax({
            type: ajaxMethod, 
            url: url, 
            dataType: 'json',
            data: postData,
            success: function(res) {
                var html = '';
                var dataList = [];

                // Handle format response yang berbeda-beda
                if(res.data && Array.isArray(res.data)) {
                    dataList = res.data;
                } else if (Array.isArray(res)) {
                    dataList = res;
                } else if (res.daftar && Array.isArray(res.daftar)) {
                     dataList = res.daftar; 
                }

                if(dataList.length > 0) {
                    dataList.forEach(item => {
                        // Mapping Data
                        var code = item.kode_akun || item.kode_keg || item.kode_ref;
                        var name = item.nama;
                        
                        var safeName = name ? name.replace(/'/g, "\\'") : ""; 
                        
                        html += `
                        <div class="search-item" onclick="selectItem('${type}', '${code}', '${safeName}')">
                            <span class="item-code">${code}</span>
                            <span class="item-name">${name}</span>
                        </div>`;
                    });
                } else {
                    html = '<div style="text-align:center; padding:20px; color:#999;">Data tidak ditemukan</div>';
                }
                $('#searchList').html(html);
            },
            error: function(xhr) { 
                console.log(xhr.responseText);
                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; padding:10px;">${msg}</div>`); 
            }
        });
    }

    // Debounce untuk live search
    var searchTimeout;
    $('#searchInput').on('keyup', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(function() {
            if(typeof currentSearchType !== 'undefined') {
                openSearch(currentSearchType);
            }
        }, 500);
    });

    function selectItem(type, code, name) {
        $('#' + targetId).val(code);
        $('#' + targetName).val(code + ' - ' + name);
        
        if(type == 'kode_keg') { 
            $('#keterangan').val('Pengeluaran - ' + name); 
        }
        
        closeModal('modalSearch');
    }

    // --- SUBMIT ---
    $('#form-tambah').submit(function(e) {
        e.preventDefault();
        
        if($('#akun_kb').val() == '' || $('#kode_keg').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);
        // Format Tanggal
        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_keg').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.');
            }
        });
    });

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