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

@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('content')
    <div class="navbar navbar-default navbar-component navbar-xs marg-bot">
        <ul class="nav navbar-nav visible-xs-block">
            <li class="full-width text-center">
                <a data-toggle="collapse" data-target="#navbar-filter"><i class="icon-menu7"></i></a>
            </li>
        </ul>
        <div class="navbar-collapse collapse" id="navbar-filter">
            <ul class="nav navbar-nav">
                <li @if (!isset($input->status)) {!! 'style="background-color: #BBB !important;"' !!} @endif>
                    <a href="{{ route('admin.approval') }}">Semua</a>
                </li>
                @foreach ($status_list as $stat)
                    <li @if (isset($input->status) && $input->status == $stat->id) {!! 'style="background-color: #BBB !important;"' !!} @endif>
                        <a href="{{ route('admin.approval') }}?status={{ $stat->id }}">
                            <span data-popup="tooltip" title="{{ $stat->name }}" data-placement="bottom">
                                {{ $stat->name }} @if ($stat->count > 0)
                                    <span class="label" style="background-color: {{ $stat->count_bg }}">{{ $stat->count }}</span>
                                @endif
                            </span>
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>

    @php
        $panel_colapse = !empty($input->key) || !empty($input->category) ? '' : '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">
            <form action="{{ route('admin.approval') }}" method="GET" class="form-horizontal">
                @csrf
                <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>
                <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="hidden" name="status" value="@if (isset($input->status)) {{ $input->status }} @endif" />
                    <input type="submit" name="submit" class="btn btn-default" value="Cari" />
                </div>
            </form>
        </div>
    </div>

    <div class="panel panel-flat">
        <div class="panel-heading">
            <h6 class="panel-title">Daftar Pengajuan</h6>
            <div class="heading-elements">
                <a href="{{ route('admin.approval.new') }}">
                    <button class="btn bg-blue btn-labeled heading-btn"><b><i class="icon-calculator"></i></b> Tambah Pengajuan</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 Pengajuan</th>
                            <th data-hide="phone">Tanggal</th>
                            <th data-toggle="true">Kategori</th>
                            <th data-hide="phone">Deskripsi</th>
                            <th data-toggle="true">Nilai</th>
                            <th data-toggle="true">Tipe</th>
                            <th data-hide="phone">Diajukan Oleh</th>
                            <th data-toggle="true">Status</th>
                            <th data-hide="phone">&nbsp;</th>
                            <th data-hide="phone">&nbsp;</th>
                            <th data-toggle="true">&nbsp;</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($approvals as $approval)
                            <tr>
                                <td>
                                    <a href="{{ route('admin.approval.detail', $approval->id) }}">{{ $approval->number }}</a>
                                </td>
                                <td>{{ date_format(date_create($approval->created), 'd M Y H:i:s') }}</td>
                                <td>{{ $approval->category_name }}</td>
                                <td>
                                    @php
                                        $displayText = !empty($approval->title) ? $approval->title : $approval->description;
                                    @endphp
                                    @if (empty($displayText))
                                        {{ '-' }}
                                    @else
                                        @php
                                            $description = str_replace("\"", "\'\'", $displayText);
                                            $description = nl2br($description);
                                        @endphp
                                        <span class="myPopover" data-popup="popover" data-trigger="hover" data-placement="left" data-html="true" data-content="{!! $description !!}">
                                            {{ mb_strimwidth(strip_tags($displayText), 0, 30, '...') }}
                                        </span>
                                    @endif
                                </td>
                                <td class="text-right">Rp{{ number_format($approval->amount, 0, ',', '.') }}</td>
                                <td>
                                    <label class="label" style="background-color:{{ $approval->type_color }};">{{ $approval->type_name }}</label>
                                </td>
                                <td>{{ $approval->creator_name }}</td>
                                <td>
                                    <label class="label" style="background-color:{{ $approval->status_color }};">{{ $approval->status_name }}</label>
                                </td>
                                <td>
                                    @if (!empty($approval->file_1))
                                        <a href="{{ $approval->file_1 }}" data-popup="lightbox" rel="gallery"><i class="icon-file-eye" style="color:#3097d1;"></i></a>
                                    @endif
                                    @if (!empty($approval->file_2))
                                        <a href="{{ $approval->file_2 }}" data-popup="lightbox" rel="gallery"><i class="icon-file-eye" style="color:#3097d1;"></i></a>
                                    @endif
                                </td>
                                <td>
                                    @if ($approval->total_transaction > 0)
                                        {{ $approval->total_transaction . ' trns' }}
                                    @endif
                                </td>
                                <td class="text-right">
                                    @php
                                        $copyText = "ID: " . $approval->number . "\nUnit: " . $approval->unit_name . "\nKategori: " . $approval->category_name . "\n\n" . $approval->description . "\n\nDiajukan oleh: " . $approval->creator_name . "\nWaktu: " . date_format(date_create($approval->created), 'd M Y H:i:s');
                                    @endphp
                                    <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 ($approval->status == 0)
                                                    <li>
                                                        <a href="{{ route('admin.approval.update', $approval->id) }}" data-toggle="modal" data-target="#modal-remote-lg">
                                                            <i class="icon-pencil position-left"></i> Edit
                                                        </a>
                                                    </li>
                                                @else
                                                    <li class="disabled">
                                                        <a href="javascript:void(0);" onclick="return false;">
                                                            <i class="icon-pencil position-left"></i> Edit
                                                        </a>
                                                    </li>
                                                @endif
                                                <li>
                                                    <a href="#" onclick="return copyJudulLink(this);" data-title="{{ $approval->title }}" data-url="{{ route('admin.approval.detail', $approval->id) }}">
                                                        <i class="icon-copy3 position-left"></i> Copy Judul &amp; Link
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="return copyPengajuanText(this);" data-copy-text="{{ $copyText }}">
                                                        <i class="icon-copy position-left"></i> Copy Pengajuan
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </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/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
        });

        function copyJudulLink(el) {
            var title = $(el).data('title');
            var url = $(el).data('url');
            var text = '';
            if (title) text += '*' + title + '*\n';
            text += '• ' + url;
            copyTextToClipboard(text, 'Judul & Link berhasil disalin ke clipboard');
            return false;
        }

        function copyPengajuanText(el) {
            var text = $(el).data('copy-text');
            copyTextToClipboard(text, 'Pengajuan berhasil disalin ke clipboard');
            return false;
        }

        function copyTextToClipboard(text, successMessage) {
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(text).then(function() {
                    new PNotify({
                        text: successMessage,
                        delay: 3000,
                        addclass: "bg-success"
                    });
                }).catch(function() {
                    fallbackCopyTextToClipboard(text, successMessage);
                });
            } else {
                fallbackCopyTextToClipboard(text, successMessage);
            }
        }

        function fallbackCopyTextToClipboard(text, successMessage) {
            var textArea = document.createElement("textarea");
            textArea.value = text;
            textArea.style.position = "fixed";
            textArea.style.top = "-9999px";
            textArea.style.left = "-9999px";
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();

            try {
                var successful = document.execCommand('copy');
                if (successful) {
                    new PNotify({
                        text: successMessage,
                        delay: 3000,
                        addclass: "bg-success"
                    });
                } else {
                    new PNotify({
                        text: 'Gagal menyalin ke clipboard',
                        delay: 3000,
                        addclass: "bg-danger"
                    });
                }
            } catch (err) {
                new PNotify({
                    text: 'Browser tidak mendukung copy to clipboard',
                    delay: 3000,
                    addclass: "bg-danger"
                });
            }

            document.body.removeChild(textArea);
        }
    </script>
@endsection