@extends('layout.main')
@section('title', 'Daftar Transaksi')

@section('prev-page')
    <a href="{{ route('dashboard') }}" class="text-default">
        <i class="icon-arrow-left52 position-left"></i><span class="text-semibold">Home</span>
    </a>
@endsection

@section('other-styles')
    <style>
        .popover-content {
            word-wrap: break-word;
        }

        .account-cell {
            max-width: 160px;
        }

        .account-cell .account-name {
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-word;
        }

        .account-cell .category-name {
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            word-break: break-word;
            color: #999;
            font-size: 0.85em;
            margin-top: 2px;
        }
    </style>
@endsection

@section('content')
    @php
        $panel_colapse = !empty($input->key) || !empty($input->category) || !empty($input->account) || !empty($input->from) || !empty($input->to) ? '' : 'panel-collapsed';
    @endphp
    <div class="panel panel-flat {{ $panel_colapse }}">
        <div class="panel-heading">
            <h6 class="panel-title">Cari Berdasarkan</h6>
            <div class="heading-elements">
                <ul class="icons-list">
                    <li><a data-action="collapse"></a></li>
                </ul>
            </div>
        </div>
        <div class="panel-body">
            @php $searchQuery = '?submit=Cari'; @endphp
            <form action="{{ route('admin.transaction') }}" method="GET" class="form-horizontal">
                @csrf
                @php
                    if (!empty($input->key)) {
                        $searchQuery .= '&key=' . $input->key;
                    }
                @endphp
                <div class="col-lg-6 form-group">
                    <label class="col-lg-3 control-label" for="key">Kata Kunci</label>
                    <div class="col-lg-9">
                        <input type="text" name="key" id="key" value="@if (!empty($input->key)) {{ $input->key }} @endif" placeholder="Kata Kunci" class="form-control" />
                    </div>
                </div>
                @php
                    if (!empty($input->from)) {
                        $searchQuery .= '&from=' . $input->from;
                    }
                    if (!empty($input->to)) {
                        $searchQuery .= '&to=' . $input->to;
                    }
                @endphp
                <div class="col-lg-6 form-group">
                    <label class="col-lg-3 control-label">Tanggal</label>
                    <div class="col-lg-9">
                        <input type="hidden" name="from" class="from" value="@if (!empty($input->from)) {{ $input->from }} @endif" />
                        <input type="hidden" name="to" class="to" value="@if (!empty($input->to)) {{ $input->to }} @endif" />
                        <button type="button" class="btn btn-danger daterange-ranges">
                            <i class="icon-calendar22 position-right"></i> <span></span> <b class="caret"></b>
                        </button>
                    </div>
                </div>
                <div class="col-lg-6 form-group">
                    <label class="col-lg-3 control-label">Akun</label>
                    <div class="col-lg-9">
                        <select name="account" id="account" class="form-control select-search">
                            <option value="">-- Pilih Akun Transaksi --</option>
                            @php $defaultAccount = empty($input->account) ? null : $input->account; @endphp
                            @foreach ($accounts as $account)
                                <option value="{{ $account->id }}" @if ((!empty($input->account) && $input->account == $account->id) || (empty($input->account) && empty($input->submit) && $account->default == 1)) {{ 'selected' }} @endif>
                                    {{ $account->name }}
                                </option>
                                @php
                                    if (empty($defaultAccount) && $account->default == 1) {
                                        $defaultAccount = $account->id;
                                    }
                                @endphp
                            @endforeach
                        </select>
                    </div>
                </div>
                @php
                    if (!empty($defaultAccount)) {
                        $searchQuery .= '&account=' . $defaultAccount;
                    }
                @endphp
                <div class="col-lg-6 form-group">
                    <label class="col-lg-3 control-label">Kategori</label>
                    <div class="col-lg-9">
                        <select name="category" id="category" class="form-control select-search">
                            <option value="">-- Pilih Kategori Transaksi --</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}" @if (!empty($input->category) && $input->category == $category->id) {{ 'selected' }} @endif>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-lg-12 text-right">
                    <input type="submit" name="submit" class="btn btn-default" value="Cari" />
                </div>
            </form>
        </div>
    </div>

    @if (!empty($summary))
        <div class="panel panel-flat">
            <div class="panel-heading">
                <h6 class="panel-title">Kas Keuangan</h6>
                <div class="heading-elements">
                    <ul class="icons-list">
                        <li><a data-action="collapse"></a></li>
                    </ul>
                </div>
            </div>
            <div class="panel-body">
                <div class="col-lg-12 table-responsive">
                    <table class="table table-togglable table-hover table-xxs text-size-small">
                        <thead>
                            <tr>
                                <th data-toggle="true">PIC</th>
                                <th class="text-right" data-toggle="true">Kredit</th>
                                <th class="text-right" data-toggle="true">Debet</th>
                                <th class="text-right" data-toggle="true">Saldo</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{ $summary->name }}</td>
                                <td class="text-right">Rp{{ number_format($summary->kredit, 0, ',', '.') }}</td>
                                <td class="text-right">Rp{{ number_format($summary->debet, 0, ',', '.') }}</td>
                                <td class="text-right">Rp{{ number_format($summary->kredit - $summary->debet, 0, ',', '.') }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @endif

    <div class="panel panel-flat">
        <div class="panel-heading">
            <h6 class="panel-title">Daftar Transaksi</h6>
            <div class="heading-elements">
                @php
                    $newParam = [];
                    if (!empty($input->account)) {
                        $newParam['account'] = $input->account;
                    }
                @endphp
                <a href="{{ route('admin.transaction.new', $newParam) }}" data-toggle="modal" data-target="#modal-remote-lg">
                    <button class="btn bg-blue btn-labeled heading-btn"><b><i class="icon-calculator"></i></b> Tambah Transaksi</button>
                </a>
            </div>
        </div>
        <div class="panel-body">
            <div class="col-lg-12 table-responsive">
                <table id="userTable" class="table table-togglable table-hover table-xxs text-size-small">
                    <thead>
                        <tr>
                            <th data-toggle="true">ID Transaksi</th>
                            <th data-hide="phone">Waktu</th>
                            {{-- Kategori column removed; category info now shown under Akun --}}
                            <th data-toggle="true">Akun</th>
                            <th data-toggle="true">Kredit</th>
                            <th data-toggle="true">Debet</th>
                            <th data-toggle="true">Saldo</th>
                            <th data-hide="phone">Faktur</th>
                            <th data-hide="phone">Pengajuan</th>
                            <th data-hide="phone">Link</th>
                            <th data-hide="phone">Keterangan</th>
                            <th data-toggle="true">&nbsp;</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($transactions as $transaction)
                            <tr>
                                <td>
                                    <a href="{{ route('admin.transaction.detail', $transaction->id) }}">{{ $transaction->number }}</a>
                                </td>
                                <td>
                                    <span class="myPopover" data-popup="popover" data-content="Diberikan Kepada: {{ $transaction->recipient }}<br/>Kasir: {{ $transaction->creator_name }}" data-trigger="hover" data-placement="right"
                                        data-html="true">
                                        {{ date_format(date_create($transaction->created), 'd M Y H:i:s') }}
                                    </span>
                                </td>
                                {{-- Akun + Kategori (2 baris) --}}
                                <td class="account-cell">
                                    @php
                                        $thisSearchQuery = $searchQuery . '&category=' . $transaction->category_id;
                                    @endphp
                                    <div class="account-name">{{ $transaction->account_name }}</div>
                                    <div class="category-name">
                                        <a href="{{ route('admin.transaction') . $thisSearchQuery }}" style="color: inherit;">
                                            {{ $transaction->category_name }}
                                        </a>
                                        @if (!empty($transaction->approval_id))
                                            <i class="icon-file-check2 position-right" style="color: green;"></i>
                                        @endif
                                    </div>
                                </td>
                                <td class="text-right">
                                    @if ($transaction->type_id == 1)
                                        Rp{{ number_format($transaction->amount, 0, ',', '.') }}
                                    @else
                                        {{ '0' }}
                                    @endif
                                </td>
                                <td class="text-right">
                                    @if ($transaction->type_id == 2)
                                        Rp{{ number_format($transaction->amount, 0, ',', '.') }}
                                    @else
                                        {{ '0' }}
                                    @endif
                                </td>
                                <td class="text-right">Rp{{ number_format($transaction->deposit, 0, ',', '.') }}</td>
                                <td>
                                    <span class="myPopover" data-popup="popover" data-content="{{ $transaction->receipt_type_name }}" data-trigger="hover" data-placement="left" data-html="true"
                                        style="color: {{ $transaction->receipt_type_color }}">
                                        {!! $transaction->receipt_type_icon !!}
                                    </span>
                                </td>
                                {{-- Pengajuan column --}}
                                <td>
                                    @if (!empty($transaction->approval_id))
                                        <a href="{{ route('admin.approval.detail', $transaction->approval_id) }}">
                                            {{ $transaction->approval_number }}
                                        </a>
                                    @endif
                                </td>
                                {{-- Link column --}}
                                <td>
                                    @if ($transaction->link_count > 0)
                                        <a href="{{ route('admin.transaction.detail', $transaction->id) }}">
                                            {{ $transaction->link_count }} link
                                        </a>
                                    @endif
                                </td>
                                <td>
                                    @if (empty($transaction->description))
                                        {{ '-' }}
                                    @else
                                        @php
                                            $description = str_replace("\"", "\'\'", $transaction->description);
                                            $description = nl2br($description);
                                        @endphp
                                        <span class="myPopover" data-popup="popover" data-content="{!! $description !!}" data-trigger="hover click" data-placement="left" data-html="true">
                                            {{ mb_strimwidth(strip_tags($transaction->description), 0, 30, '...') }}
                                        </span>
                                    @endif
                                    @if (!empty($transaction->receipt_file))
                                        <a href="{{ $transaction->receipt_file }}" data-popup="lightbox" rel="gallery">
                                            <i class="icon-file-eye" style="color:#3097d1;"></i>
                                        </a>
                                    @endif
                                </td>
                                <td class="text-right">
                                    @if (strtotime($transaction->created) > strtotime('-6 hours'))
                                        <ul class="icons-list text-nowrap">
                                            <li class="dropdown">
                                                <a class="dropdown-toggle" data-toggle="dropdown"><i class="icon-menu9"></i></a>
                                                <ul class="dropdown-menu dropdown-menu-right">
                                                    @if (strtotime($transaction->created) > strtotime('-6 hours'))
                                                        <li>
                                                            <a href="{{ route('admin.transaction.update', $transaction->id) }}" data-toggle="modal" data-target="#modal-remote-lg">
                                                                Rubah
                                                            </a>
                                                        </li>
                                                    @endif
                                                    @if (!empty($latest[$transaction->account_id]) && $latest[$transaction->account_id] == $transaction->id && strtotime($transaction->created) > strtotime('-3 hours'))
                                                        <li>
                                                            <a href="{{ route('admin.transaction.remove', $transaction->id) }}" onclick="return showMe(this, '{{ $transaction->number }}');">
                                                                Hapus
                                                            </a>
                                                        </li>
                                                    @endif
                                                </ul>
                                            </li>
                                        </ul>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="11" class="text-center">Belum ada data.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if (!empty($metadata->links))
            <div class="panel-footer text-center">
                {!! $metadata->links !!}
            </div>
        @endif
    </div>
@endsection

@section('other-scripts')
    <script type="text/javascript" src="{{ asset('assets/js/plugins/ui/moment/moment.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/plugins/pickers/daterangepicker.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/core/app.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/plugins/tables/footable/footable.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/pages/table_responsive.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/pages/form_select2.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/plugins/media/fancybox.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/pages/gallery.js') }}"></script>

    <script>
        $('[data-popup="lightbox"]').fancybox({
            padding: 3
        });
    </script>

    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>

    <script>
        $("#account").on("change", function() {
            $("#category").find('option').remove().end().append('<option value="">-- Pilih Kategori Transaksi --</option>');
            $.post("{{ route('admin.transaction.category.get.account') }}", {
                account: this.value
            }, function(data, status) {
                if (data.status === "success") {
                    var categories = data.data;
                    for (var i = 0; i < categories.length; i++) {
                        $('#category').append($('<option>').prop('value', categories[i].id).text(categories[i].name));
                    }
                } else {
                    new PNotify({
                        text: data.message,
                        delay: 3000,
                        addclass: 'bg-danger'
                    });
                }
            });
        });

        function showMe(element, message) {
            var ele = $(element);
            swal({
                title: "Apakah anda yakin akan menghapus transaksi " + message + "?",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya!',
                cancelButtonText: 'Tidak',
                closeOnConfirm: true,
                closeOnCancel: true
            }, function(isConfirm) {
                if (isConfirm) location.href = ele.attr('href');
            });
            return false;
        };
    </script>

    <script>
        @if (!empty($input->from) && !empty($input->to))
            $('.daterange-ranges span').html("{{ date_format(date_create($input->from), 'M j, Y') }}" + ' &nbsp; - &nbsp; ' + "{{ date_format(date_create($input->to), 'M j, Y') }}");
        @else
            $('.daterange-ranges span').html('Pilih range tanggal');
        @endif

        $('.daterange-ranges').daterangepicker({
            startDate: @if (!empty($input->from))
                "{{ date_format(date_create($input->from), 'm/d/Y') }}"
            @else
                {!! "moment().startOf('month')" !!}
            @endif ,
            endDate: @if (!empty($input->to))
                "{{ date_format(date_create($input->to), 'm/d/Y') }}"
            @else
                {!! "moment().endOf('month')" !!}
            @endif ,
            minDate: '01/01/2018',
            maxDate: moment(),
            dateLimit: {
                days: 365
            },
            ranges: {
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
            },
            opens: 'right',
            applyClass: 'btn-small bg-slate-600',
            cancelClass: 'btn-small btn-default'
        }, function(start, end) {
            $('.daterange-ranges span').html(start.format('MMM DD, YYYY') + ' &nbsp; - &nbsp; ' + end.format('MMM DD, YYYY'));
            $('.from_date').val(start.format('YYYY-MM-DD'));
            $('.to_date').val(end.format('YYYY-MM-DD'));
        });
    </script>
@endsection