@extends('layout.main')
@section('title', 'Detail Lembar Kerja')

@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> - <a href="{{ route('admin.report.daily') }}" class="text-default">
        <span class="text-semibold">Daftar Lembar Kerja</span>
    </a>
@endsection

@section('content')
    <div class="col-lg-12">
        <div class="panel panel-white">
            <div class="panel-body">
                <!-- Desktop View -->
                <div class="hidden-xs">
                    <div class="col-lg-6">
                        <div class="form-horizontal">
                            <div class="form-group no-margin">
                                <label class="col-lg-4 control-label">ID Lembar Kerja:</label>
                                <div class="col-lg-8">
                                    <div class="form-control-static">{{ $detail->report_number }}</div>
                                </div>
                            </div>
                            <div class="form-group no-margin">
                                <label class="col-lg-4 control-label">Nama:</label>
                                <div class="col-lg-8">
                                    <div class="form-control-static">{{ $detail->employee->name }}</div>
                                </div>
                            </div>
                            <div class="form-group no-margin">
                                <label class="col-lg-4 control-label">Hari Kerja:</label>
                                <div class="col-lg-8">
                                    <div class="form-control-static">{{ \Carbon\Carbon::parse($detail->created)->locale('id')->translatedFormat('l, d M Y') }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-horizontal">
                            <div class="form-group no-margin">
                                <label class="col-lg-4 control-label">Status:</label>
                                <div class="col-lg-8">
                                    <a class="editable-status" data-type="select" data-inputclass="form-control" data-pk="{{ $detail->id }}" data-value="{{ $detail->status }}" data-source="/status" data-title="Rubah Status"
                                        style="text-decoration: none;">
                                        <label class="label status-label-display" style="background-color:{{ $detail->status()->color }}; cursor: pointer;">
                                            {{ $detail->status()->name }}
                                        </label>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Mobile View -->
                <div class="visible-xs">
                    <div class="mobile-info-section">
                        <div class="mobile-info-item">
                            <div class="mobile-info-label">
                                <i class="icon-file-text2"></i> ID Lembar Kerja
                            </div>
                            <div class="mobile-info-value">{{ $detail->report_number }}</div>
                        </div>

                        <div class="mobile-info-item">
                            <div class="mobile-info-label">
                                <i class="icon-user"></i> Nama
                            </div>
                            <div class="mobile-info-value">{{ $detail->employee->name }}</div>
                        </div>

                        <div class="mobile-info-item">
                            <div class="mobile-info-label">
                                <i class="icon-calendar"></i> Hari Kerja
                            </div>
                            <div class="mobile-info-value">{{ \Carbon\Carbon::parse($detail->created)->locale('id')->translatedFormat('l, d M Y') }}</div>
                        </div>

                        <div class="mobile-info-item">
                            <div class="mobile-info-label">
                                <i class="icon-flag3"></i> Status
                            </div>
                            <div class="mobile-info-value">
                                <a class="editable-status" data-type="select" data-inputclass="form-control" data-pk="{{ $detail->id }}" data-value="{{ $detail->status }}" data-source="/status" data-title="Rubah Status"
                                    style="text-decoration: none;">
                                    <label class="label status-label-display" style="background-color:{{ $detail->status()->color }}; cursor: pointer; font-size: 13px; padding: 6px 12px;">
                                        {{ $detail->status()->name }}
                                    </label>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="visible-xs text-right" style="margin-bottom: 15px;">
        <a href="{{ route('admin.report.daily.work.new', $detail->id) }}" data-toggle="modal" data-target="#modal-remote">
            <button class="btn bg-blue btn-labeled heading-btn"><b><i class="icon-plus3"></i></b> Tambah Item Pekerjaan</button>
        </a>
    </div>

    <div class="col-lg-12 panel panel-flat">
        <div class="panel-heading">
            <h6 class="panel-title">Item Pekerjaan</h6>
            @if ($detail->status == 0)
                <div class="hidden-xs">
                    <div class="heading-elements">
                        <a href="{{ route('admin.report.daily.work.new', $detail->id) }}" data-toggle="modal" data-target="#modal-remote">
                            <button class="btn bg-blue btn-labeled heading-btn btn-block"><b><i class="icon-plus3"></i></b> Tambah Item Pekerjaan</button>
                        </a>
                    </div>
                </div>
            @endif
        </div>

        <div class="alert alert-primary no-border" style="margin-top: 5px;">
            Report harian yang dibuat dengan informatif akan memudahkan atasan menilai pekerjaan yang dilakukan dan kontribusi dalam operasional keseluruhan
        </div>

        <!-- Desktop Table View -->
        <div class="table-responsive hidden-xs">
            <table class="table table-hover table-xxs text-size-small">
                <thead>
                    <tr>
                        <th>Kategori</th>
                        <th>Detail Pekerjaan</th>
                        <th>Durasi</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($detail->works as $work)
                        <tr>
                            <td>{{ $work->category->name }}</td>
                            <td>{!! nl2br($work->description) !!}</td>
                            <td>{{ $work->duration->value }}</td>
                            <td>
                                @if ($detail->status == 0)
                                    <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="{{ route('admin.report.daily.work.update', $work->id) }}" data-toggle="modal" data-target="#modal-remote">Rubah</a></li>
                                                <li>
                                                    <a href="{{ route('admin.report.daily.work.remove', $work->id) }}" onclick="return showMe(this, 'Apakah anda yakin akan menghapus item pekerjaan ini?');">
                                                        Hapus
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted" style="padding: 20px;">Belum ada data Item Pekerjaan.</td>
                        </tr>
                    @endforelse
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="2" class="text-right">Total</th>
                        <th>{{ round($detail->total_duration / 60, 2) }} jam</th>
                        <th></th>
                    </tr>
                </tfoot>
            </table>
        </div>

        <!-- Mobile Card View -->
        <div class="visible-xs mobile-work-items">
            @forelse($detail->works as $work)
                <div class="mobile-work-card">
                    <div class="mobile-work-header">
                        <span class="mobile-work-category">
                            <i class="icon-folder"></i> {{ $work->category->name }}
                        </span>
                        <span class="mobile-work-duration">
                            <i class="icon-clock"></i> {{ $work->duration->value }}
                        </span>
                    </div>

                    <div class="mobile-work-description">
                        {!! nl2br($work->description) !!}
                    </div>

                    @if ($detail->status == 0)
                        <div class="mobile-work-actions">
                            <a href="{{ route('admin.report.daily.work.update', $work->id) }}" data-toggle="modal" data-target="#modal-remote" class="btn btn-xs btn-primary">
                                <i class="icon-pencil"></i> Rubah
                            </a>
                            <a href="{{ route('admin.report.daily.work.remove', $work->id) }}" onclick="return showMe(this, 'Apakah anda yakin akan menghapus item pekerjaan ini?');" class="btn btn-xs btn-danger">
                                <i class="icon-trash"></i> Hapus
                            </a>
                        </div>
                    @endif
                </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 Item Pekerjaan.
                </div>
            @endforelse

            @if ($detail->works->count() > 0)
                <div class="mobile-work-total">
                    <span class="mobile-work-total-label">Total Durasi</span>
                    <span class="mobile-work-total-value">
                        <i class="icon-clock"></i> {{ round($detail->total_duration / 60, 2) }} jam
                    </span>
                </div>
            @endif
        </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/forms/editable/editable.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/plugins/extensions/mockjax.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/plugins/media/fancybox.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/core/app.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/pages/gallery.js') }}"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.6/jquery.lazy.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.6/jquery.lazy.plugins.min.js"></script>

    <meta name="csrf-token" content="{{ csrf_token() }}" />

    <style>
        /* Mobile Info Section Styles */
        @media (max-width: 767px) {
            .mobile-info-section {
                padding: 0;
            }

            .mobile-info-item {
                padding: 12px 0;
                border-bottom: 1px solid #eee;
            }

            .mobile-info-item:last-child {
                border-bottom: none;
            }

            .mobile-info-label {
                font-size: 12px;
                color: #999;
                margin-bottom: 5px;
                font-weight: 500;
            }

            .mobile-info-label i {
                margin-right: 5px;
                font-size: 13px;
            }

            .mobile-info-value {
                font-size: 14px;
                color: #333;
                font-weight: 600;
            }

            /* Mobile Work Items */
            .mobile-work-items {
                padding: 15px;
            }

            .mobile-work-card {
                background: #fff;
                border: 1px solid #ddd;
                border-radius: 6px;
                padding: 15px;
                margin-bottom: 15px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            }

            .mobile-work-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 12px;
                padding-bottom: 10px;
                border-bottom: 1px solid #eee;
            }

            .mobile-work-category {
                font-size: 13px;
                font-weight: 600;
                color: #2196F3;
            }

            .mobile-work-category i {
                margin-right: 5px;
            }

            .mobile-work-duration {
                font-size: 12px;
                font-weight: 600;
                color: #666;
                background: #f5f5f5;
                padding: 4px 10px;
                border-radius: 12px;
            }

            .mobile-work-duration i {
                margin-right: 3px;
                font-size: 11px;
            }

            .mobile-work-description {
                font-size: 13px;
                line-height: 1.6;
                color: #555;
                margin-bottom: 12px;
                word-wrap: break-word;
            }

            .mobile-work-actions {
                display: flex;
                gap: 8px;
                padding-top: 10px;
                border-top: 1px solid #eee;
            }

            .mobile-work-actions .btn {
                flex: 1;
                padding: 8px 12px;
                font-size: 13px;
            }

            .mobile-work-total {
                background: #f9f9f9;
                border: 2px solid #2196F3;
                border-radius: 6px;
                padding: 15px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 10px;
            }

            .mobile-work-total-label {
                font-size: 14px;
                font-weight: 600;
                color: #333;
            }

            .mobile-work-total-value {
                font-size: 16px;
                font-weight: 700;
                color: #2196F3;
            }

            .mobile-work-total-value i {
                margin-right: 5px;
            }

            /* Button improvements */
            .btn-block-mobile {
                width: 100%;
                margin-top: 10px;
            }

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

            /* Improve editable status on mobile */
            .editable-status {
                display: block;
            }

            .status-label-display {
                display: inline-block;
                min-width: 100px;
                text-align: center;
            }
        }

        /* Tablet adjustments */
        @media (min-width: 768px) and (max-width: 991px) {
            .col-lg-6 {
                width: 100%;
                margin-bottom: 15px;
            }

            .form-horizontal .control-label {
                width: 30%;
            }

            .form-horizontal .col-lg-8 {
                width: 70%;
            }
        }
    </style>

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

        $.mockjax({
            url: '/status',
            status: 200,
            responseTime: 400,
            response: function(settings) {
                this.responseText = {!! $status_list !!};
            }
        });

        $.fn.editableform.template = '<form class="editableform">' +
            '<div class="control-group">' +
            '<div class="editable-input"></div> <div class="editable-buttons"></div>' +
            '<div class="editable-error-block"></div>' +
            '</div> ' +
            '</form>';
        $.fn.editableform.buttons =
            '<button type="submit" class="btn btn-primary btn-icon editable-submit"><i class="icon-check"></i></button>' +
            '<button type="button" class="btn btn-default btn-icon editable-cancel"><i class="icon-x"></i></button>';

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

        (function($) {
            $.Lazy('examplePlugin', function(element, response) {
                var img = $('#' + element.context.id).data('src');
                $('#' + element.context.id).attr('src', img);
                response(true);
            });
        })(window.jQuery || window.Zepto);
        $('.lazy').Lazy();

        $(".editable-status").editable({
            container: 'body',
            clear: false,
            mode: "popup",
            placement: function() {
                // Adjust placement based on screen size
                return $(window).width() < 768 ? "bottom" : "right";
            },
            send: "always",
            highlight: false,
            url: "{{ route('admin.report.daily.update.status') }}",
            display: function(value, sourceData) {},
            validate: function(value) {
                if ($.trim(value) == '' || $.trim(value) == "undefined") return "Status tidak boleh kosong";
            },
            error: function(response, newValue) {
                return "Terjadi kesalahan. Harap coba lagi nanti.";
            },
            success: function(response, newValue) {
                if (response.status === "success") {
                    $(this).find('.status-label-display').text(response.data.name);
                    $(this).find('.status-label-display').css('background-color', response.data.color);

                    new PNotify({
                        text: response.message,
                        delay: 3000,
                        addclass: "bg-success"
                    });

                    setTimeout(function() {
                        location.reload();
                    }, 500);
                } else {
                    new PNotify({
                        text: response.message,
                        delay: 3000,
                        addclass: "bg-danger"
                    });
                }
            },
        });

        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