@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 col-xs-12">
                        <div class="form-group">
                            <label class="col-lg-3 col-xs-12 control-label" for="key">Kata Kunci</label>
                            <div class="col-lg-9 col-xs-12">
                                <input type="text" name="key" id="key" value="{{ $input->key ?? '' }}"
                                    placeholder="Kata Kunci..." class="form-control" />
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 col-xs-12 text-right">
                        <button type="submit" class="btn btn-default btn-block-mobile">Cari</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="visible-xs text-right" style="margin-bottom: 15px;">
        <a href="{{ route('admin.report.daily.new.submit') }}"
            onclick="return showMe(this, 'Apakah anda ingin membuat report harian baru?');" class="btn bg-blue btn-labeled"
            style="margin-bottom: 10px;">
            <b><i class="icon-plus3"></i></b> Tambah Report Baru
        </a>
    </div>

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

        <div class="panel-body">
            <!-- Desktop Table View -->
            <div class="table-responsive hidden-xs">
                <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 class="text-right">Item</th>
                            <th class="text-right">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 class="text-right">{{ $report->works->count() }}</td>
                                <td class="text-right">{{ round($report->total_duration / 60, 2) }} jam</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>

            <!-- Mobile Card View -->
            <div class="visible-xs">
                @forelse($reports as $report)
                    <div class="panel panel-body border-left-xlg"
                        style="border-left-color: {{ $report->status()->color }}; margin-bottom: 15px;">
                        <div class="media-left">
                            <span class="label"
                                style="background-color: {{ $report->status()->color }}; font-size: 11px;">
                                {{ $report->status()->name }}
                            </span>
                        </div>

                        <div class="media-body" style="margin-top: 10px;">
                            <h6 class="media-heading text-semibold" style="margin-bottom: 8px;">
                                <a href="{{ route('admin.report.daily.detail', $report->id) }}">
                                    {{ $report->report_number }}
                                </a>
                            </h6>

                            <div class="text-muted" style="font-size: 12px; line-height: 1.6;">
                                <div style="margin-bottom: 5px;">
                                    <i class="icon-user position-left" style="font-size: 11px;"></i>
                                    <strong>{{ $report->employee->name }}</strong>
                                </div>
                                <div style="margin-bottom: 5px;">
                                    <i class="icon-calendar position-left" style="font-size: 11px;"></i>
                                    {{ \Carbon\Carbon::parse($report->created)->locale('id')->translatedFormat('d M Y') }}
                                </div>
                                <div style="margin-bottom: 5px;">
                                    <i class="icon-list position-left" style="font-size: 11px;"></i>
                                    {{ $report->works->count() }} item pekerjaan
                                </div>
                                <div>
                                    <i class="icon-clock position-left" style="font-size: 11px;"></i>
                                    {{ round($report->total_duration / 60, 2) }} jam
                                </div>
                            </div>
                        </div>

                        <div class="text-right" style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #ddd;">
                            <button onclick="return copyReportToClipboard({{ $report->id }});"
                                class="btn btn-xs btn-default">
                                <i class="icon-copy3"></i> Copy
                            </button>
                            <a href="{{ route('admin.report.daily.detail', $report->id) }}"
                                class="btn btn-xs btn-primary">
                                <i class="icon-eye"></i> Detail
                            </a>
                            @if ($report->status == 0)
                                <a href="{{ route('admin.report.daily.remove', $report->id) }}"
                                    onclick="return showMe(this, 'Apakah anda yakin akan menghapus report harian {{ $report->report_number }}?');"
                                    class="btn btn-xs btn-danger">
                                    <i class="icon-trash"></i> Hapus
                                </a>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="text-center text-muted" style="padding: 40px 20px;">
                        <i class="icon-file-empty"
                            style="font-size: 48px; display: block; margin-bottom: 10px; opacity: 0.3;"></i>
                        Belum ada data report harian.
                    </div>
                @endforelse
            </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>

    <style>
        /* Mobile-specific styles */
        @media (max-width: 767px) {
            .btn-block-mobile {
                width: 100%;
                margin-top: 10px;
            }

            .panel-heading .heading-elements {
                width: 100%;
                margin-top: 10px;
            }

            .form-horizontal .form-group {
                margin-bottom: 15px;
            }

            .form-horizontal .control-label {
                text-align: left;
                margin-bottom: 5px;
            }

            /* Make dropdowns easier to tap on mobile */
            .dropdown-menu>li>a {
                padding: 12px 20px;
                font-size: 14px;
            }

            /* Improve spacing for mobile cards */
            .media-body {
                padding-left: 0;
            }

            /* Responsive button groups */
            .btn-xs {
                padding: 5px 10px;
                font-size: 12px;
                margin: 2px;
            }
        }

        /* Tablet styles */
        @media (min-width: 768px) and (max-width: 991px) {
            .table-responsive {
                font-size: 13px;
            }

            .table-responsive th,
            .table-responsive td {
                padding: 8px 6px;
            }
        }
    </style>

    <script>
        function copyReportToClipboard(reportId) {
            // Show loading notification
            var loadingNotice = new PNotify({
                text: 'Memuat data report...',
                icon: 'icon-spinner spinner',
                hide: false,
                addclass: "bg-info"
            });

            // Fetch report data via AJAX
            $.ajax({
                url: '{{ route('admin.report.daily.copy-data') }}',
                type: 'GET',
                data: {
                    id: reportId
                },
                success: function(response) {
                    loadingNotice.remove();

                    if (response.status === 'success') {
                        var text = response.data.text;

                        // Copy to clipboard
                        if (navigator.clipboard && navigator.clipboard.writeText) {
                            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 {
                            fallbackCopyTextToClipboard(text);
                        }
                    } else {
                        new PNotify({
                            text: response.message || 'Data report tidak ditemukan',
                            delay: 3000,
                            addclass: "bg-danger"
                        });
                    }
                },
                error: function(xhr, status, error) {
                    loadingNotice.remove();
                    new PNotify({
                        text: 'Terjadi kesalahan saat memuat data',
                        delay: 3000,
                        addclass: "bg-danger"
                    });
                }
            });

            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