@extends('webview.saku.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>
        :root {
            --text-color-black: #000;
            --text-color-white: #ffffff;
            --background-color-input: #eef2fa;
            --border-color-input: #d0def7;
            --primary-blue: #004B87;
        }

        /* =========================================
                   1. RESET & LAYOUT UTAMA
                   ========================================= */
        body {
            background-color: #f4f6f9;
            font-family: 'Inter', sans-serif;
            margin: 0;
        }

        .app-container {
            background-color: #ffffff;
            min-height: 100vh;
            max-width: 480px;
            margin: 0 auto;
            position: relative;
            overflow-x: hidden;
        }

        /* =========================================
                   2. HEADER BIRU MODERN
                   ========================================= */
        .header-blue-bg {
            background-color: #1976d2;
            background-image:
                url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgba(255, 255, 255, 0.12)' d='M0,160L80,144C160,128,320,96,480,112C640,128,800,192,960,192C1120,192,1280,128,1360,96L1440,64L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z'/%3E%3Cpath fill='rgba(255, 255, 255, 0.05)' d='M0,256L80,240C160,224,320,192,480,186.7C640,181,800,203,960,208C1120,213,1280,203,1360,197.3L1440,192L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z'/%3E%3C/svg%3E"),
                linear-gradient(140deg, #42a5f5 0%, #1976d2 100%);
            background-size: cover, cover;
            background-position: center top, center;
            background-repeat: no-repeat, no-repeat;
            padding: 40px 20px 70px 20px;
            position: relative;
            z-index: 1;
        }

        .header-top {
            display: flex;
            align-items: center;
        }

        .header-top a {
            color: #fff;
            text-decoration: none;
            display: flex;
            align-items: center;
            font-weight: 600;
            font-size: 18px;
            gap: 10px;
        }

        /* =========================================
                   3. BODY OVERLAP MELENGKUNG
                   ========================================= */
        .content-body {
            background-color: #ffffff;
            border-radius: 24px 24px 0 0;
            margin-top: -30px;
            padding: 30px 16px 150px 16px;
            min-height: 100vh;
            position: relative;
            z-index: 10;
        }

        /* =========================================
                   4. STRUKTUR FORM MOCKUP 2
                   ========================================= */
        .page-title {
            font-size: 18px;
            font-weight: 700;
            color: #1F2937;
            margin-bottom: 20px;
            margin-top: 0;
            padding-left: 4px;
        }

        .form-group {
            margin-bottom: 16px;
            position: relative;
        }

        .input-box {
            background-color: var(--background-color-input);
            border-radius: 12px;
            border: 1px solid transparent;
            padding: 10px 48px 10px 16px;
            min-height: 52px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            cursor: pointer;
            transition: 0.2s;
        }

        .input-box:focus-within {
            border-color: var(--primary-blue);
            background-color: #fff;
            box-shadow: 0 0 0 3px rgba(0, 75, 135, 0.1);
        }

        .input-label-inner {
            font-size: 10px;
            color: var(--primary-blue);
            font-weight: 700;
            margin-bottom: 2px;
        }

        .form-control-custom {
            width: 100%;
            background: transparent;
            border: none;
            outline: none;
            color: #1F2937;
            font-weight: 600;
            font-size: 14px;
            font-family: 'Inter', sans-serif;
        }

        .form-control-custom::placeholder {
            color: #9CA3AF;
            font-weight: 500;
        }

        input[type="date"]::-webkit-calendar-picker-indicator {
            display: none;
            -webkit-appearance: none;
        }

        .icon-right {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4B5563;
            pointer-events: none;
        }

        .input-box.textarea {
            padding: 16px;
            height: auto;
            min-height: 100px;
            justify-content: flex-start;
        }

        .form-control-custom.area {
            min-height: 80px;
            resize: none;
            line-height: 1.5;
        }

        .currency {
            font-weight: 700;
            color: var(--primary-blue);
        }

        /* Area Daftar Bukti Transaksi */
        .preview-section {
            margin-top: 30px;
            display: none;
            padding-left: 4px;
        }

        .preview-title {
            font-size: 15px;
            font-weight: 700;
            color: #1F2937;
            margin-bottom: 12px;
        }

        .preview-grid {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }

        .preview-card {
            width: 80px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .preview-thumb {
            width: 100%;
            height: 100px;
            border-radius: 8px;
            border: 1px solid var(--border-color-input);
            object-fit: cover;
            background-color: var(--background-color-input);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .preview-pdf-icon {
            background: #ef4444;
            color: white;
            font-weight: bold;
            font-size: 11px;
            padding: 6px 10px;
            border-radius: 6px;
        }

        .preview-name {
            font-size: 11px;
            color: #1F2937;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.2;
        }

        .preview-size {
            font-size: 10px;
            color: #9CA3AF;
        }

        .footer-action {
            margin-top: 40px;
            width: 100%;
            z-index: 1;
        }

        .btn-save {
            width: 100%;
            background-color: var(--primary-blue);
            color: white;
            border: none;
            border-radius: 12px;
            padding: 16px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            text-transform: uppercase;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 12px rgba(0, 75, 135, 0.2);
            transition: 0.2s;
        }

        .btn-save:active {
            transform: translateY(2px);
            box-shadow: none;
        }

        /* --- 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: 16px;
            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: 15px;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .search-title {
            font-weight: 700;
            font-size: 16px;
        }

        .search-list {
            overflow-y: auto;
            flex: 1;
        }

        .search-item {
            padding: 16px 10px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .search-item:last-child {
            border-bottom: none;
        }

        .search-item:active {
            background-color: var(--background-color-input);
            border-radius: 8px;
        }

        .item-code {
            font-size: 11px;
            font-weight: 700;
            color: #fff;
            background-color: var(--primary-blue);
            padding: 4px 8px;
            border-radius: 4px;
            display: inline-block;
            align-self: flex-start;
        }

        .item-name {
            font-size: 13px;
            color: #333;
            font-weight: 500;
            line-height: 1.4;
        }

        .loader {
            border: 3px solid #f3f3f3;
            border-top: 3px solid var(--primary-blue);
            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: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
            font-size: 30px;
        }

        .icon-success {
            background: #e8f5e9;
            color: #2e7d32;
        }

        .icon-error {
            background: #ffebee;
            color: #c62828;
        }

        .alert-title {
            text-align: center;
            font-weight: 700;
            margin-bottom: 8px;
            font-size: 18px;
        }

        .alert-msg {
            text-align: center;
            font-size: 14px;
            color: #666;
            margin-bottom: 20px;
            line-height: 1.5;
        }

        .alert-btn {
            background: #f0f0f0;
            color: #333;
            border: none;
            padding: 14px;
            width: 100%;
            border-radius: 12px;
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
            transition: 0.2s;
        }
    </style>
@endpush

@section('content')
    <div class="app-container">

        <div class="header-blue-bg">
            <div class="header-top">
                <a href="{{ route('saku-mobile.page.home') }}">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M19 12H5M12 19l-7-7 7-7" />
                    </svg>
                    Pengeluaran Bantuan
                </a>
            </div>
        </div>

        <div class="content-body">
            <h3 class="page-title">Tambah Transaksi Keluar (Bantuan)</h3>

            <form id="form-tambah" enctype="multipart/form-data">
                <input type="hidden" name="kode_pp" id="kode_pp" value="{{ Session::get('kodePP') }}">
                <input type="hidden" name="hapus_dok" value="0">
                <input type="hidden" name="file_seb" value="-">
                <input type="hidden" name="kode_rek" id="kode_rek" value=""> {{-- 1. Tanggal (Inner Label + Icon Kanan) --}}
                <div class="form-group">
                    <div class="input-box" onclick="document.getElementById('tanggal').showPicker();">
                        <div class="input-label-inner">Tanggal</div>
                        <input type="date" class="form-control-custom" id="tanggal" name="tanggal"
                            value="{{ date('Y-m-d') }}" required>
                        <div class="icon-right">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                                <line x1="16" y1="2" x2="16" y2="6"></line>
                                <line x1="8" y1="2" x2="8" y2="6"></line>
                                <line x1="3" y1="10" x2="21" y2="10"></line>
                            </svg>
                        </div>
                    </div>
                </div>

                {{-- 2. Referensi (Placeholder + Icon Search Kanan) --}}
                <div class="form-group">
                    <div class="input-box" onclick="openSearch('kode_ref')">
                        <input type="text" class="form-control-custom" id="nama_kode_ref"
                            placeholder="Referensi Transaksi" readonly style="pointer-events: none;">
                        <input type="hidden" id="kode_ref" name="kode_ref" required>
                        <div class="icon-right">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="11" cy="11" r="8"></circle>
                                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                            </svg>
                        </div>
                    </div>
                </div>

                {{-- 3. Uraian --}}
                <div class="form-group">
                    <div class="input-box textarea">
                        <textarea class="form-control-custom area" id="keterangan" name="keterangan" placeholder="Uraian" required></textarea>
                    </div>
                </div>

                {{-- 4. Nilai (Placeholder + Money Icon Kanan) --}}
                <div class="form-group">
                    <div class="input-box">
                        <input type="text" class="form-control-custom currency" id="nilai" name="nilai"
                            placeholder="Nilai" required inputmode="numeric">
                        <div class="icon-right">
                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="2" y="6" width="20" height="12" rx="2"></rect>
                                <circle cx="12" cy="12" r="2"></circle>
                                <path d="M6 12h.01M18 12h.01"></path>
                            </svg>
                        </div>
                    </div>
                </div>

                {{-- 5. Upload Bukti (Fake Input + Upload Icon Kanan) --}}
                <div class="form-group">
                    <div class="input-box" onclick="$('#file').click()">
                        <input type="text" class="form-control-custom" placeholder="Bukti Transaksi" readonly
                            style="pointer-events: none;">
                        <div class="icon-right">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                <polyline points="17 8 12 3 7 8"></polyline>
                                <line x1="12" y1="3" x2="12" y2="15"></line>
                            </svg>
                        </div>
                    </div>
                    <input type="file" id="file" name="file" style="display: none;"
                        accept="image/*,application/pdf">
                </div>

                {{-- AREA DAFTAR BUKTI TRANSAKSI (PREVIEW) --}}
                <div id="preview-section" class="preview-section">
                    <div class="preview-title">Daftar Bukti Transaksi</div>
                    <div id="preview-container" class="preview-grid"></div>
                </div>

                <div class="footer-action">
                    <button type="submit" class="btn-save">SIMPAN TRANSAKSI</button>
                </div>
            </form>
        </div>

    </div>

    {{-- MODALS TETAP SAMA --}}
    <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: 20px; cursor: pointer; color: #999;"
                    onclick="closeModal('modalSearch')"></i>
            </div>
            <input type="text" id="searchInput" class="form-control-custom" placeholder="Ketik nama untuk mencari..."
                style="border: 1px solid #e5e7eb; padding: 12px 16px; border-radius: 10px; margin-bottom: 12px; background: #f9fafb; font-size: 14px;">
            <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: 300px; padding: 30px 24px;">
            <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: 20px 30px; flex-direction: row; align-items: center; gap: 16px; border-radius: 50px;">
            <div class="loader" style="width: 24px; height: 24px; border-width: 3px;"></div>
            <span style="font-weight: 700; color: #333; font-size: 15px;">Memproses Data...</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() }}"
            }
        });

        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');
        }

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

        // --- LOGIKA UPLOAD & PREVIEW FILE ---
        $('#file').change(function() {
            var file = this.files[0];
            if (file) {
                $('#preview-section').fadeIn();
                $(this).siblings('.input-box').find('.form-control-custom').val(file.name);

                let fileName = file.name;
                let fileSize = (file.size / 1024).toFixed(0) + 'kb';
                if ((file.size / 1024) > 1000) {
                    fileSize = (file.size / (1024 * 1024)).toFixed(1) + 'Mb';
                }

                let reader = new FileReader();
                reader.onload = function(e) {
                    let fileType = file.type;
                    let previewContent = '';

                    if (fileType.startsWith('image/')) {
                        previewContent = `<img src="${e.target.result}" class="preview-thumb">`;
                    } else if (fileType === 'application/pdf') {
                        previewContent =
                            `<div class="preview-thumb"><div class="preview-pdf-icon">PDF</div></div>`;
                    } else {
                        previewContent =
                            `<div class="preview-thumb"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg></div>`;
                    }

                    let cardHtml = `
                        <div class="preview-card">
                            ${previewContent}
                            <div class="preview-name" title="${fileName}">${fileName}</div>
                            <div class="preview-size">${fileSize}</div>
                        </div>
                    `;

                    $('#preview-container').html(cardHtml);
                }
                reader.readAsDataURL(file);
            } else {
                $('#preview-section').fadeOut();
                $('#preview-container').empty();
                $(this).siblings('.input-box').find('.form-control-custom').val('');
            }
        });

        // --- SEARCH LOGIC (Disesuaikan untuk API Pengeluaran Bantuan) ---
        function openSearch(type) {
            $('#searchTitle').text("Daftar Referensi Bantuan");
            $('#searchInput').val('');
            $('#searchList').html('<div style="text-align: center; margin-top: 50px;"><div class="loader"></div></div>');
            openModal('modalSearch');

            $.ajax({
                type: 'GET',
                url: "{{ url('kb-trans/sekolah/kbout-ref-new-rek') }}", // Menggunakan endpoint web PENGELUARAN Bantuan
                dataType: 'json',
                data: {
                    kode_pp: $('#kode_pp').val(),
                    modul: 'BANK',
                    jenis: 'PENGELUARAN'
                },
                success: function(res) {
                    var html = '';
                    if (res.status && res.data && res.data.length > 0) {
                        res.data.forEach(item => {
                            var code = item.kode_ref;
                            var name = item.nama;
                            var kode_rek = item.kode_rek || '';
                            var safeName = name ? name.replace(/'/g, "\\'") : "";

                            html += `<div class="search-item" onclick="selectItem('${code}', '${safeName}', '${kode_rek}')">
                                        <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; color: #d1d5db;"></i><span style="font-size: 14px; font-weight: 500;">Tidak ada data referensi</span></div>`;
                    }
                    $('#searchList').html(html);
                },
                error: function(xhr) {
                    $('#searchList').html(
                        `<div style="text-align: center; color: #EF4444; margin-top: 20px; font-size:13px; padding:10px; font-weight: 600;">Gagal mengambil data referensi</div>`
                    );
                }
            });
        }

        function selectItem(code, name, kode_rek) {
            $('#kode_ref').val(code);
            $('#nama_kode_ref').val(code + ' - ' + name);
            $('#keterangan').val(name);
            $('#kode_rek').val(kode_rek); // Menyimpan kode_rek wajib untuk simpan Bantuan
            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 (Menggunakan Endpoint Web Pengeluaran Bantuan) ---
        $('#form-tambah').submit(function(e) {
            e.preventDefault();
            if ($('#kode_ref').val() == '' || $('#nilai').val() == '' || $('#nilai').val() == '0') {
                showAlert('error', 'Data Belum Lengkap', 'Harap lengkapi Referensi dan Nilai transaksi.');
                return;
            }
            openModal('modalLoading');
            var formData = new FormData(this);

            $.ajax({
                type: 'POST',
                url: "{{ url('kb-trans/sekolah/kbout-rek') }}", // Menggunakan endpoint save Web PENGELUARAN
                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;

                    if (status) {
                        showAlert('success', 'Berhasil Disimpan', message);
                        $('#form-tambah')[0].reset();
                        $('#nama_kode_ref').val('');
                        $('#kode_rek').val('');

                        // Bersihkan preview & placeholder file
                        $('#preview-section').hide();
                        $('#preview-container').empty();
                        $('#file').siblings('.input-box').find('.form-control-custom').val('');

                        $('#tanggal').val("{{ date('Y-m-d') }}");
                    } else {
                        showAlert('error', 'Gagal Menyimpan', message);
                    }
                },
                error: function(xhr) {
                    closeModal('modalLoading');
                    var msg = 'Terjadi kesalahan saat menghubungi server.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        msg = xhr.responseJSON.message;
                    }
                    showAlert('error', 'Server Error', msg);
                }
            });
        });

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