@extends('layouts.app')

@section('content')
    <div class="page-title">
        <div class="row">
            <div class="col-12 col-md-6 order-md-1 order-last">
                <h3>Data Task</h3>
            </div>
            <div class="col-12 col-md-6 order-md-2 order-first">
                <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Task</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <section class="section" x-data="main" @reload-table.window="table.draw()">
        <div class="card">
            <div class="card-header">
                Data Task
                <div class="float-end">
                    <div class="d-flex gap-2">
                        <select class="form-select form-select-sm" x-model="selectedCabang" @change="filterData()" style="width: 200px;">
                            <option value="">Semua Cabang</option>
                            @foreach($cabang as $c)
                                <option value="{{ $c->id }}">{{ $c->nama }}</option>
                            @endforeach
                        </select>
                        <select class="form-select form-select-sm" x-model="selectedTypeUser" @change="filterData()" style="width: 150px;">
                            <option value="">Semua Type User</option>
                            <option value="1">AUDIT</option>
                            <option value="2">GA_IT</option>
                            <option value="3">PERALATAN</option>
                        </select>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="card-body">
                <div class="col-12 col-lg-12">
                    <table class="table table-striped table-bordered" id="datatables">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Aksi</th>
                                <th>Cabang</th>
                                <th>Ruang</th>
                                <th>Status</th>
                                <th>Point Audit</th>
                                <th>Manager Area</th>
                                <th>Tanggal</th>
                                <th>Type User</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('modals')
    @include('pages.master.task.form')
@endpush

@push('scripts')
    <script>
        function format(d) {
            // Check if item_components exists and is an array
            if (!Array.isArray(d.item_components)) {
                try {
                    // Try to parse if it's a JSON string
                    d.item_components = typeof d.item_components === 'string' ?
                        JSON.parse(d.item_components) : [];
                } catch (e) {
                    d.item_components = [];
                }
            }

            if (d.item_components.length === 0) {
                return '<div class="p-3">Tidak ada item komponen</div>';
            }

            let html = '<div class="p-3">';
            html += '<table class="table table-sm table-bordered">';
            html +=
                '<thead><tr><th>Item Komponen</th><th>Standar</th><th>Deskripsi</th><th>Tanggal Mulai</th><th>Tanggal Selesai</th><th>Deskripsi Perbaikan</th><th>Foto</th><th>Nilai</th><th>Foto Perbaikan</th><th>Status Perbaikan</th></tr></thead>';
            html += '<tbody>';

            d.item_components.forEach(item => {
                const standar = item.check_standar ?
                    '<span class="badge bg-success">Ya</span>' :
                    '<span class="badge bg-danger">Tidak</span>';

                const fix_status = item.fix_status === 0 ?
                    '<span class="badge bg-warning text-dark">Belum Dinilai</span>' :
                    item.fix_status === 1 ?
                    '<span class="badge bg-success">Approved</span>' :
                    '<span class="badge bg-danger">Rejected</span>';

                html +=
                    `<tr><td>${item.name}</td>
                        <td>${standar}</td><td>${item.check_desc}</td>
                        <td>${item.fixing_date_start ? new Date(item.fixing_date_start).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' }) : ''}</td>
                        <td>${item.fixing_date_end ? new Date(item.fixing_date_end).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' }) : ''}</td>
                        <td>${item.fixing_desc}</td>
                        <td>
                            ${
                                item.photos && item.photos.length > 0
                                ? item.photos.map(photo => `<img src="${photo}" class="img-thumbnail" style="max-height:80px; margin: 2px;">`).join('')
                                : 'Tidak ada foto'
                            }
                        </td>
                        <td>${item.check_value}</td>
                        <td>
                            ${
                                item.photos_fix && item.photos_fix.length > 0
                                ? item.photos_fix.map(photo => `<img src="${photo}" class="img-thumbnail" style="max-height:80px; margin: 2px;">`).join('')
                                : 'Tidak ada foto'
                            }
                        <td>${fix_status}</td>
                        </tr>`;
            });

            html += '</tbody></table></div>';
            return html;
        }

        document.addEventListener("alpine:init", () => {
            Alpine.data("main", () => ({
                table: null,
                selectedCabang: '',
                selectedTypeUser: '',
                init() {
                    const self = this;

                    this.table = $('#datatables').DataTable({
                        serverSide: true,
                        processing: true,
                        ajax: {
                            method: "POST",
                            url: "{{ url('master/task/data') }}",
                            data: (d) => {
                                d.id_cabang = this.selectedCabang;
                                d.type_user = this.selectedTypeUser;
                            },
                            dataSrc: function(json) {
                                // Ensure item_components is properly formatted
                                json.data.forEach(function(row) {
                                    if (row.item_components && typeof row
                                        .item_components === 'string') {
                                        try {
                                            row.item_components = JSON.parse(row
                                                .item_components);
                                        } catch (e) {
                                            row.item_components = [];
                                        }
                                    }
                                });
                                return json.data;
                            }
                        },
                        columns: [{
                                className: 'dt-control',
                                orderable: false,
                                data: null,
                                defaultContent: '',
                                width: '20px'
                            },
                            {
                                data: "aksi",
                                render: function(data, type, row) {
                                    var button = "";
                                    button +=
                                        `<li><a class="dropdown-item" href="#" @click="delData" data-id="${row.id}">DELETE</a></li>`;
                                    return `<div class="dropdown">
                                        <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                            AKSI
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton1">
                                            ${button}
                                        </ul>
                                    </div>`;
                                }
                            },
                            {
                                data: "cabang"
                            },
                            {
                                data: "ruang"
                            },
                            {
                                data: "x_supp_type",
                                render: function(data) {
                                    if (data === "pemeriksaan") {
                                        return '<span class="badge bg-primary">Pemeriksaan</span>';
                                    } else if (data === "penilaian") {
                                        return '<span class="badge bg-warning text-dark">Penilaian</span>';
                                    } else if (data === "perbaikan") {
                                        return '<span class="badge bg-danger">Perbaikan</span>';
                                    } else if (data === "persetujuan") {
                                        return '<span class="badge bg-success text-dark">Persetujuan</span>';
                                    } else {
                                        return '<span class="badge bg-secondary">Tidak Diketahui</span>';
                                    }
                                },
                            },
                            {
                                data: "point_audit"
                            },
                            {
                                data: "manager_area"
                            },
                            {
                                data: "check_date",
                                render: function(data) {
                                    return data ? new Date(data).toLocaleDateString() :
                                        '';
                                }
                            },
                            {
                                data: "type_user",
                                render: function(data) {
                                    if (data == 1) {
                                        return '<span class="badge bg-info">AUDIT</span>';
                                    } else if (data == 2) {
                                        return '<span class="badge bg-success">GA_IT</span>';
                                    } else if (data == 3) {
                                        return '<span class="badge bg-warning text-dark">PERALATAN</span>';
                                    } else {
                                        return '<span class="badge bg-secondary">Tidak Diketahui</span>';
                                    }
                                }
                            }
                        ],
                        order: [
                            [2, 'asc']
                        ]
                    });

                    // Add event listener for opening and closing details
                    $('#datatables tbody').on('click', 'td.dt-control', function() {
                        const tr = $(this).closest('tr');
                        const row = self.table.row(tr);

                        if (row.child.isShown()) {
                            // Collapse child row
                            row.child.hide();
                            tr.removeClass('shown');
                        } else {
                            // Expand child row only if not already rendered
                            if (!row.child.isShown()) {
                                const rowData = row.data();
                                row.child(format(rowData)).show();
                            }
                            tr.addClass('shown');
                        }
                    });
                },
                filterData() {
                    this.table.draw();
                },
                addData(e) {
                    const id = e.target.getAttribute('data-id');
                    this.$dispatch("open-form", {
                        id: id
                    });
                },
                delData(e) {
                    const id = e.target.getAttribute('data-id');
                    Notiflix.Confirm.show("KONFIRMASI", "Apakah yakin akan menghapus data ini?", "YA",
                        "TIDAK", () => {
                            $.post("{{ url('master/task/delete') }}", {
                                id: id
                            }).done(resp => {
                                if (resp.error == false) {
                                    Notiflix.Notify.success("Data Berhasil dihapus");
                                    this.table.draw();
                                } else {
                                    Notiflix.Notify.failure(resp.message);
                                }
                            }).fail(err => {
                                Notiflix.Notify.failure(err.responseText);
                            })
                        })
                }
            }));
        });
    </script>

    <style>
        td.dt-control {
            text-align: center;
            cursor: pointer;
        }

        td.dt-control:before {
            content: "⯈";
        }

        tr.shown td.dt-control:before {
            content: "⯆";
        }

        .bg-orange {
            background-color: orange !important;
            color: white !important;
        }

        tr.shown td.dt-control:before,
        td.dt-control:before {
            transition: none !important;
        }

        .dt-control {
            background: transparent !important;
        }
    </style>

    <!-- Add this modal structure at the bottom of your section, before the closing </section> tag -->
    <div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content bg-transparent border-0">
                <div class="modal-header border-0">
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="modalImage" src="" class="img-fluid" style="max-height: 80vh;">
                </div>
            </div>
        </div>
    </div>

    <script>
        // Add this to your existing script
        document.addEventListener('DOMContentLoaded', function() {
            const imageModal = new bootstrap.Modal(document.getElementById('imageModal'));

            // Handle click on thumbnails to show larger image
            document.addEventListener('click', function(e) {
                if (e.target.classList.contains('img-thumbnail')) {
                    const imgSrc = e.target.src;
                    document.getElementById('modalImage').src = imgSrc;
                    imageModal.show();
                }
            });
        });
    </script>

    <style>
        /* Add this to your existing styles */
        .img-thumbnail {
            cursor: pointer;
            transition: transform 0.2s;
        }

        .img-thumbnail:hover {
            transform: scale(1.05);
        }

        #imageModal .modal-content {
            background-color: rgba(0, 0, 0, 0.8);
        }

        #imageModal .modal-header {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 1;
        }

        #imageModal .btn-close {
            opacity: 1;
            width: 40px;
            height: 40px;
            background-size: 25px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }
    </style>
@endpush