@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) || !empty($input->hari_kerja) || (isset($input->status) && $input->status !== '') ? '' : '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-6 col-xs-12">
                        <div class="form-group">
                            <label class="col-lg-3 col-xs-12 control-label" for="hari_kerja">Hari Kerja</label>
                            <div class="col-lg-9 col-xs-12">
                                <input type="text" name="hari_kerja" id="hari_kerja" value="{{ $input->hari_kerja ?? '' }}" placeholder="Pilih Tanggal..." class="form-control datepicker" autocomplete="off" />
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-xs-12">
                        <div class="form-group">
                            <label class="col-lg-3 col-xs-12 control-label" for="status">Status</label>
                            <div class="col-lg-9 col-xs-12">
                                <select name="status" id="status" class="form-control select-search">
                                    <option value="">-- Semua Status --</option>
                                    @foreach ($status_list as $stat)
                                        <option value="{{ $stat->id }}" @if (isset($input->status) && $input->status == $stat->id) selected @endif>{{ $stat->name }}</option>
                                    @endforeach
                                </select>
                            </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="panel panel-flat">
        <div class="panel-heading">
            <h6 class="panel-title">Report Bulan Ini</h6>
        </div>
        <div class="panel-body">
            <div class="table-responsive">
                <table class="table table-bordered table-xxs text-size-small">
                    <thead>
                        <tr>
                            <th>Total Report</th>
                            <th>Draft</th>
                            <th>Submitted</th>
                            <th>Rata-Rata Durasi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{ $monthStats->total }}</td>
                            <td>{{ $monthStats->draft }}</td>
                            <td>{{ $monthStats->submitted }}</td>
                            <td>{{ is_null($monthStats->avg_hours) ? '-' : $monthStats->avg_hours . ' Jam' }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="visible-xs text-right" style="margin-bottom: 15px;">
        @if (!empty($accessRestricted))
            <button type="button" class="btn bg-blue btn-labeled" style="margin-bottom: 10px; opacity: .65; cursor: not-allowed;" disabled
                data-popup="tooltip" title="Akses sementara dibatasi. Code = Tiket Follow-Up">
                <b><i class="icon-plus3"></i></b> Tambah Report Baru
            </button>
        @else
            <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>
        @endif
    </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">
                    @if (!empty($accessRestricted))
                        <button class="btn bg-blue btn-labeled heading-btn btn-block-mobile" style="opacity: .65; cursor: not-allowed;" disabled
                            data-popup="tooltip" title="Akses sementara dibatasi. Code = Tiket Follow-Up">
                            <b><i class="icon-plus3"></i></b> Tambah Report
                        </button>
                    @else
                        <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>
                    @endif
                </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 style="display: flex; justify-content: space-between; align-items: center;">
                            <span class="label" style="background-color: {{ $report->status()->color }}; font-size: 11px;">
                                {{ $report->status()->name }}
                            </span>
                            <ul class="icons-list" style="margin: 0;">
                                <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 }});">
                                                <i class="icon-copy3 position-left"></i> 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 }}?');">
                                                    <i class="icon-trash position-left"></i> Hapus
                                                </a>
                                            </li>
                                        @endif
                                    </ul>
                                </li>
                            </ul>
                        </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>
                @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/plugins/pickers/datepicker.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/pages/form_select2.js') }}"></script>
    <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>
        @media (max-width: 767px) {
            .btn-block-mobile {
                width: 100%;
                margin-top: 10px;
            }
            .panel-heading .heading-elements {
                width: 100%;
                margin: 0px !important;
            }
            .form-horizontal .form-group {
                margin-bottom: 15px;
            }
            .form-horizontal .control-label {
                text-align: left;
                margin-bottom: 5px;
            }
            .dropdown-menu>li>a {
                padding: 12px 20px;
                font-size: 14px;
            }
            .media-body {
                padding-left: 0;
            }
            .btn-xs {
                padding: 5px 10px;
                font-size: 12px;
                margin: 2px;
            }
        }
        @media (min-width: 768px) and (max-width: 991px) {
            .table-responsive {
                font-size: 13px;
            }
            .table-responsive th,
            .table-responsive td {
                padding: 8px 6px;
            }
        }
    </style>

    <script>
        $('.datepicker').datepicker({
            format: 'yyyy-mm-dd',
            todayBtn: 'linked',
            todayHighlight: true
        });

        $('.select-search').select2();

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

            $.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;
                        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