@extends('layouts.layout')
@section('body_class', 'nav-md')

@section('body_content')
<div class="container body">
    <div class="main_container">
        @include('includes.sidebar')

        <div class="right_col" role="main">
            <div class="page-title">
                <div class="title_left">
                    <h3>Journal Bank Bca</h3>
                </div>
                <div class="clearfix"></div>
            </div>

            <div class="row">       
                <div class="col-md-6 col-xs-12">
                    <div class="x_panel">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-3 col-xs-12 control-label">Tanggal Transfer :</label>
                                <div class="col-sm-9 col-xs-12">
                                    <input class="form-control" id="date_start" type="date" name="date_start" 
                                        value="{{ request('date_start', \Carbon\Carbon::now()->subMonth()->format('Y-m-d')) }}" />
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 col-xs-12 control-label">End Date :</label>
                                <div class="col-sm-9 col-xs-12">
                                    <input class="form-control" id="date_end" type="date" name="date_end" 
                                        value="{{ request('date_end', \Carbon\Carbon::now()->format('Y-m-d')) }}" />
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 col-xs-12 control-label">Nomor Invoice :</label>
                                <div class="col-sm-9 col-xs-12">
                                    <select name="invoice" id="invoice" class="form-control">
                                        <option value="">-- Semua --</option>
                                        <option value="tidak_ada" {{ request('invoice') == 'tidak_ada' ? 'selected' : '' }}>-- Belum Ada --</option>
                                        <option value="ada" {{ request('invoice') == 'ada' ? 'selected' : '' }}>-- Sudah Ada --</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="col-sm-3 col-xs-12 control-label">Search :</label>
                                <div class="col-sm-9 col-xs-12">
                                    <input name="search" class="form-control" value="{{ request('search') }}">
                                </div>
                            </div> 

                            <div class="form-group">
                                <div class="col-sm-offset-3 col-sm-9">
                                    <div class="loading hidden">
                                        <i class="fa fa-spinner fa-pulse"></i>
                                    </div>
                                    <div class="submit">
                                        <button type="submit" class="btn btn-default">
                                            <i class="fa fa-search" aria-hidden="true"></i> Search
                                        </button>
                                        <button type="button" class="btn btn-warning" id="clearBtn">
                                            <i class="fa fa-eraser"></i> Clear
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-xs-12">
                <div class="x_panel">      
                    <table class="table table-bordered table-striped" style="zoom: 0.9;">
                        <thead>
                            <tr>
                                <td class="text-left" style="font-size: 12px;">No</td>
                                <td class="text-left" style="font-size: 12px;">Id</td>
                                <td class="text-left" style="font-size: 12px;">Tanggal</td>
                                <td class="text-left" style="font-size: 12px;">Keterangan</td>
                                <td class="text-left" style="font-size: 12px;">Type</td>
                                <td class="text-right" style="font-size: 12px;">Mutasi</td>
                                <td class="text-right" style="font-size: 12px;">Nomor Invoice</td>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $number = ($mutasi_bank->currentPage() - 1) * $mutasi_bank->perPage() + 1;
                            @endphp

                            @forelse ($mutasi_bank as $index => $data)
                                <tr>
                                    <td class="text-left" style="font-size: 12px;">{{ $number + $index }}</td>
                                    <td class="text-left" style="font-size: 12px;">{{ $data->id }}</td>
                                    <td class="text-left" style="font-size: 12px;">{{ $data->transaction_date }}</td>
                                    <td class="text-left" style="font-size: 12px;">{{ $data->trailer }}</td>
                                    <td class="text-left" style="font-size: 12px;">
                                        @if ($data->transaction_type == 'C')
                                            CR
                                        @elseif ($data->transaction_type == 'D')
                                            DB
                                        @endif
                                    </td>
                                    <td class="text-right" style="font-size: 12px;">{{ number_format($data->transaction_amount) }}</td>
                                    <td class="text-right" style="font-size: 12px;" id="invoice-cell-{{ $data->id }}">
                                        @if (!empty($data->nomor_invoice))
                                            <span class="invoice-text" id="invoice-text-{{ $data->id }}">{{ $data->nomor_invoice }}</span>
                                            <button class="btn btn-xs btn-warning btn-edit-invoice" 
                                                data-id="{{ $data->id }}" data-invoice="{{ $data->nomor_invoice }}"><i class="fa fa-pencil"></i></button>
                                        @else
                                            <button class="btn btn-xs btn-success btn-add-invoice" 
                                                data-id="{{ $data->id }}">+ Tambah Nomor Invoice</button>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center">No data</td>
                                </tr> 
                            @endforelse
                        </tbody>
                    </table>

                    {{ $mutasi_bank->links() }}
                </div>
            </div>
        </div>
    </div>

    @include('includes.footer')
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        attachAddListeners();
        attachEditListeners();

        document.getElementById('clearBtn')?.addEventListener('click', function () {
            document.getElementById('date_start').value = '';
            document.getElementById('date_end').value = '';
            document.getElementById('invoice').value = '';
            document.querySelector('input[name="search"]').value = '';
        });
    });

    function attachAddListeners() {
        document.querySelectorAll('.btn-add-invoice').forEach(function (btn) {
            btn.addEventListener('click', function () {
                const id = this.dataset.id;
                const cell = document.getElementById('invoice-cell-' + id);
                cell.dataset.originalContent = cell.innerHTML;

                cell.innerHTML = `
                    <input type="text" id="input-invoice-${id}" class="form-control input-sm" style="width: 120px; display: inline-block;" placeholder="Nomor Invoice">
                    <button class="btn btn-xs btn-primary" onclick="saveInvoice(${id})">Save</button>
                    <button class="btn btn-xs btn-default" onclick="cancelInvoice(${id})">Cancel</button>
                `;
            });
        });
    }

    function attachEditListeners() {
        document.querySelectorAll('.btn-edit-invoice').forEach(function (btn) {
            btn.addEventListener('click', function () {
                const id = this.dataset.id;
                const currentInvoice = this.dataset.invoice;
                const cell = document.getElementById('invoice-cell-' + id);
                cell.dataset.originalContent = cell.innerHTML;

                cell.innerHTML = `
                    <input type="text" id="input-invoice-${id}" class="form-control input-sm" value="${currentInvoice}" style="width: 120px; display: inline-block;">
                    <button class="btn btn-xs btn-primary" onclick="saveInvoice(${id})">Save</button>
                    <button class="btn btn-xs btn-default" onclick="cancelInvoice(${id})">Cancel</button>
                `;
            });
        });
    }

    function saveInvoice(id) {
        const input = document.getElementById('input-invoice-' + id);
        const nomor_invoice = input.value.trim();

        if (!nomor_invoice) {
            alert('Nomor invoice tidak boleh kosong');
            return;
        }

        if (!confirm('Apakah Anda yakin ingin menyimpan nomor invoice ini?')) {
            return;
        }

        fetch("{{ route('update_invoice') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            body: JSON.stringify({ id: id, nomor_invoice: nomor_invoice })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                const cell = document.getElementById('invoice-cell-' + id);
                cell.innerHTML = `${nomor_invoice} <button class="btn btn-xs btn-warning btn-edit-invoice" data-id="${id}" data-invoice="${nomor_invoice}"><i class="fa fa-pencil"></i>
                </button>`;
                attachEditListeners();
            } else {
                alert('Gagal menyimpan');
            }
        })
        .catch(err => {
            console.error(err);
            alert('Terjadi kesalahan');
        });
    }

    function cancelInvoice(id) {
        const cell = document.getElementById('invoice-cell-' + id);
        cell.innerHTML = cell.dataset.originalContent;
        attachEditListeners();
        attachAddListeners();
    }
</script>
@endsection