@extends('layout.main')
@section('title', 'Report Harian')

@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')
    @php
        $panel_collapse = !empty($input->key) ? '' : 'panel-collapsed';
    @endphp
    <div class="panel panel-flat {{ $panel_collapse }}">
        <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.report.daily') }}" method="GET" class="form-horizontal">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="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="{{ $input->key ?? '' }}" placeholder="Kata Kunci..." class="form-control" />
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 text-right">
                        <button type="submit" class="btn btn-default">Cari</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="panel panel-flat">
        <div class="panel-heading">
            <h6 class="panel-title">Daftar Report</h6>
            <div class="heading-elements">
                <a href="{{ route('admin.report.daily.new.submit') }}" onclick="return showMe(this, 'Apakah anda ingin membuat report harian baru?');">
                    <button class="btn bg-blue btn-labeled heading-btn"><b><i class="icon-plus3"></i></b> Tambah Report</button>
                </a>
            </div>
        </div>

        <div class="panel-body">
            <div class="table-responsive">
                <table class="table table-hover table-xxs text-size-small">
                    <thead>
                        <tr>
                            <th style="width: 150px;">Report ID</th>
                            <th>Nama</th>
                            <th>Hari Kerja</th>
                            <th>Item</th>
                            <th>Durasi</th>
                            <th>Status</th>
                            <th>&nbsp;</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($reports as $report)
                            <tr>
                                <td>
                                    <a href="{{ route('admin.report.daily.detail', $report->id) }}" class="text-semibold">
                                        {{ $report->report_number }}
                                    </a>
                                </td>
                                <td>{{ $report->employee->name }}</td>
                                <td>{{ \Carbon\Carbon::parse($report->created)->locale('id')->translatedFormat('l, d M Y') }}</td>
                                <td>{{ $report->works->count() }}</td>
                                <td>{{ $report->total_duration }} menit</td>
                                <td>
                                    <span class="label" style="background-color: {{ $report->status()->color }}">
                                        {{ $report->status()->name }}
                                    </span>
                                </td>
                                <td class="text-right">
                                    <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">
                                                <li>
                                                    <a href="#" onclick="return copyReportToClipboard({{ $report->id }});">
                                                        Copy
                                                    </a>
                                                </li>
                                                @if ($report->status == 0)
                                                    <li>
                                                        <a href="{{ route('admin.report.daily.remove', $report->id) }}" onclick="return showMe(this, 'Apakah anda yakin akan menghapus report harian {{ $report->report_number }}?');">
                                                            Hapus
                                                        </a>
                                                    </li>
                                                @endif
                                            </ul>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center text-muted" style="padding: 20px;">Belum ada data report harian.</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/media/fancybox.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/pages/gallery.js') }}"></script>
    <script>
        // Store report data for clipboard
        var reportsData = {
            @foreach($reports as $report)
                {{ $report->id }}: {
                    report_number: "{{ $report->report_number }}",
                    employee_name: "{{ $report->employee->name }}",
                    created: "{{ \Carbon\Carbon::parse($report->created)->locale('id')->translatedFormat('d M Y') }}",
                    total_duration: {{ $report->total_duration }},
                    works: [
                        @foreach($report->works as $work)
                            {
                                description: "{{ addslashes($work->description) }}",
                                duration: "{{ $work->duration->value ?? '' }}"
                            },
                        @endforeach
                    ]
                },
            @endforeach
        };

        function copyReportToClipboard(reportId) {
            var report = reportsData[reportId];
            
            if (!report) {
                new PNotify({
                    text: 'Data report tidak ditemukan',
                    delay: 3000,
                    addclass: "bg-danger"
                });
                return false;
            }

            // Build the text to copy
            var text = '*ID Report ' + report.report_number + ' - ' + report.employee_name + '*\n';
            text += 'Tanggal ' + report.created + '\n';
            
            // Add works
            if (report.works && report.works.length > 0) {
                report.works.forEach(function(work) {
                    text += '* ' + work.description + ' (' + work.duration + ')\n';
                });
            }
            
            // Add total duration in hours
            var totalHours = (report.total_duration / 60).toFixed(2);
            text += 'Total = ' + totalHours + ' jam';

            // Copy to clipboard
            if (navigator.clipboard && navigator.clipboard.writeText) {
                // Modern approach
                navigator.clipboard.writeText(text).then(function() {
                    new PNotify({
                        text: 'Report berhasil disalin ke clipboard',
                        delay: 3000,
                        addclass: "bg-success"
                    });
                }).catch(function(err) {
                    fallbackCopyTextToClipboard(text);
                });
            } else {
                // Fallback for older browsers
                fallbackCopyTextToClipboard(text);
            }

            return false;
        }

        function fallbackCopyTextToClipboard(text) {
            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: 'Report berhasil disalin ke clipboard',
                        delay: 3000,
                        addclass: "bg-success"
                    });
                } else {
                    new PNotify({
                        text: 'Gagal menyalin report 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);
        }

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

        function showMe(element, message) {
            var ele = $(element);
            swal({
                title: 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>
@endsection