@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@push('css')
<style>
    .fdbckc-status-badge {
        font-size: 0.7rem;
        padding: 0.35em 0.6em;
    }
    .fdbckc-doc-link {
        color: #00b7bd;
        text-decoration: none;
    }
    .fdbckc-doc-link:hover {
        text-decoration: underline;
    }
</style>
@endpush

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => 'Feedback Customer'])

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-md-12">
            <div class="row mx-1">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">List {{ $title_menu }}</h5>
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge bg-gradient-info text-dark">{{ count($feedback) }} Data</span>
                        </div>
                    </div>
                    <div class="row px-4 py-2">
                        <div class="col-lg">
                            <div class="d-flex align-items-center gap-2 flex-wrap">
                                @if ($authorize->add == '1')
                                    <button class="btn btn-primary mb-0" onclick="window.location='{{ url($url_menu . '/add') }}'">
                                        <i class="fas fa-plus me-1"></i>
                                        <span class="font-weight-bold">Tambah Feedback</span>
                                    </button>
                                @endif

                                @if ($authorize->delete == '1')
                                    <button type="button" class="btn btn-danger mb-0 btn-delete-bulk" id="btn-delete-bulk" disabled>
                                        <i class="fas fa-trash me-1"></i>
                                        <span class="font-weight-bold">Hapus Terpilih</span>
                                        <span id="selected-count" class="badge bg-white text-dark ms-2 d-none">0</span>
                                    </button>
                                @endif

                                <div class="ms-auto d-flex align-items-center gap-1">
                                    <label class="text-sm mb-0 me-1">Cari :</label>
                                    <input type="search" id="live-search" class="form-control form-control-sm" style="width:250px;" placeholder="ID PS / ID Sample / Salesman ...">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row px-4 py-2">
                        <div class="table-responsive">
                            <table class="table align-items-center mb-0" id="list_fdbckc">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder">
                                            <div class="form-check">
                                                <input class="form-check-input checkbox-select-all" type="checkbox" id="checkbox-select-all">
                                                <label class="form-check-label" for="checkbox-select-all"></label>
                                            </div>
                                        </th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder">No</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder">ID PS</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder">ID Sample</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder">Nama Salesman</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder">Note Feedback</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder">Status</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder">Document</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder">Created</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $statusColors = [
                                            'pending' => 'warning',
                                            'approve' => 'success',
                                            'rejected' => 'danger',
                                        ];
                                        $statusLabels = [
                                            'pending' => 'Pending',
                                            'approve' => 'Approved',
                                            'rejected' => 'Rejected',
                                        ];
                                    @endphp

                                    @forelse ($feedback as $i => $row)
                                        <tr>
                                            <td class="align-middle">
                                                <div class="form-check">
                                                    <input class="form-check-input checkbox-item" type="checkbox" value="{{ $row->id }}" name="selected_ids[]">
                                                    <label class="form-check-label" for="checkbox-item-{{ $row->id }}"></label>
                                                </div>
                                            </td>
                                            <td class="align-middle">
                                                <span class="text-sm text-dark font-weight-bold">{{ $i + 1 }}</span>
                                            </td>
                                            <td class="align-middle">
                                                <span class="text-sm text-dark">{{ $row->id_ps ?? '-' }}</span>
                                            </td>
                                            <td class="align-middle">
                                                <span class="text-sm text-dark">{{ $row->id_sample ?? '-' }}</span>
                                            </td>
                                            <td class="align-middle">
                                                <span class="text-sm text-dark font-weight-bold">{{ $row->nama_salesman ?? '-' }}</span>
                                            </td>
                                            <td class="align-middle">
                                                <span class="text-sm text-dark">{{ \Illuminate\Support\Str::limit($row->note_feedback ?? '-', 50) }}</span>
                                            </td>
                                            <td class="align-middle">
                                                @php
                                                    $status = $row->feedback_customer ?? 'pending';
                                                    $color = $statusColors[$status] ?? 'secondary';
                                                    $label = $statusLabels[$status] ?? ucfirst($status);
                                                @endphp
                                                <span class="badge bg-gradient-{{ $color }} fdbckc-status-badge">{{ $label }}</span>
                                            </td>
                                            <td class="align-middle">
                                                @if (!empty($row->path_document))
                                                    <a href="{{ url('storage/' . $row->path_document) }}" target="_blank" class="fdbckc-doc-link" title="Lihat Dokumen">
                                                        <i class="fas fa-file-pdf text-danger me-1"></i>
                                                        <span class="text-xs text-muted">Lihat</span>
                                                    </a>
                                                @else
                                                    <span class="text-muted small">—</span>
                                                @endif
                                            </td>
                                            <td class="align-middle">
                                                <span class="text-sm text-muted">{{ \Carbon\Carbon::parse($row->created_at)->format('Y-m-d') }}</span>
                                            </td>
                                            <td class="align-middle text-center">
                                                <div class="d-flex justify-content-center gap-1">
                                                    @if ($authorize->edit == '1')
                                                        <button type="button" class="btn btn-sm btn-warning mb-0" title="Edit"
                                                            onclick="window.location='{{ url($url_menu . '/' . $row->id . '/edit') }}'">
                                                            <i class="fas fa-edit"></i>
                                                        </button>
                                                    @endif
                                                    @if ($authorize->delete == '1')
                                                        <button type="button" class="btn btn-sm btn-danger mb-0 btn-delete-single"
                                                            title="Hapus" data-id="{{ $row->id }}">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="10" class="text-center py-4">
                                                <span class="text-muted">Tidak ada data feedback customer</span>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
$(document).ready(function () {
    // DataTables
    if (!$.fn.DataTable.isDataTable('#list_fdbckc')) {
        $('#list_fdbckc').DataTable({
            "language": {
                "search": "Cari :",
                "lengthMenu": "_MENU_",
                "info": "Data _START_ - _END_ dari _TOTAL_",
                "zeroRecords": "Tidak ada data ditemukan",
                "infoEmpty": "Tidak ada data tersedia",
                "infoFiltered": "(difilter dari _MAX_ data)"
            },
            "order": [[2, 'desc']],
            "columnDefs": [
                { "orderable": false, "targets": [0, 9] },
                { "searchable": false, "targets": [0, 1, 2, 8, 9] }
            ],
            responsive: true,
            dom: 'Bfrtip',
            buttons: [
                @if ($authorize->excel == '1')
                {
                    extend: 'excelHtml5',
                    className: 'btn btn-sm btn-success mb-0',
                    text: '<i class="fas fa-file-excel me-1"></i>Excel'
                },
                @endif
                @if ($authorize->pdf == '1')
                {
                    extend: 'pdfHtml5',
                    className: 'btn btn-sm btn-danger mb-0',
                    text: '<i class="fas fa-file-pdf me-1"></i>PDF'
                },
                @endif
                @if ($authorize->print == '1')
                {
                    extend: 'print',
                    className: 'btn btn-sm btn-info mb-0',
                    text: '<i class="fas fa-print me-1"></i>Print'
                }
                @endif
            ],
            language: {
                emptyTable: "Tidak ada data feedback customer."
            }
        });
    }

    // Select All Checkbox
    $('#checkbox-select-all').on('change', function () {
        $('.checkbox-item').prop('checked', this.checked);
        updateDeleteButton();
    });

    // Individual Checkbox
    $(document).on('change', '.checkbox-item', function () {
        if ($('.checkbox-item:checked').length === $('.checkbox-item').length) {
            $('#checkbox-select-all').prop('checked', true);
        } else {
            $('#checkbox-select-all').prop('checked', false);
        }
        updateDeleteButton();
    });

    function updateDeleteButton() {
        var count = $('.checkbox-item:checked').length;
        if (count > 0) {
            $('#btn-delete-bulk').prop('disabled', false);
            $('#selected-count').text(count).removeClass('d-none');
        } else {
            $('#btn-delete-bulk').prop('disabled', true);
            $('#selected-count').addClass('d-none');
        }
    }

    // Bulk Delete
    $('#btn-delete-bulk').on('click', function () {
        var selected = [];
        $('.checkbox-item:checked').each(function () {
            selected.push($(this).val());
        });

        if (selected.length === 0) return;

        Swal.fire({
            title: 'Konfirmasi Hapus?',
            text: "Anda akan menghapus " + selected.length + " data feedback customer ini. Tindakan ini tidak dapat dibatalkan!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d32f2f',
            cancelButtonColor: '#00b7bd',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then(function (result) {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ url($url_menu . "/delete-selected") }}',
                    method: 'POST',
                    data: {
                        ids: selected,
                        _token: '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    success: function (res) {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: res.message || 'Data berhasil dihapus.',
                            icon: 'success',
                            timer: 2000,
                            showConfirmButton: false
                        });
                        $('.checkbox-item:checked').closest('tr').remove();
                        $('#checkbox-select-all').prop('checked', false);
                        $('#selected-count').addClass('d-none');
                        $('#btn-delete-bulk').prop('disabled', true);
                    },
                    error: function (xhr) {
                        Swal.fire({
                            title: 'Gagal!',
                            text: 'Terjadi kesalahan saat menghapus data.',
                            icon: 'error'
                        });
                    }
                });
            }
        });
    });

    // Single Delete
    $(document).on('click', '.btn-delete-single', function () {
        var $row = $(this).closest('tr');
        var id = $(this).data('id');

        Swal.fire({
            title: 'Konfirmasi Hapus?',
            text: "Anda akan menghapus data feedback customer ini. Tindakan ini tidak dapat dibatalkan!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d32f2f',
            cancelButtonColor: '#00b7bd',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then(function (result) {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ url($url_menu . "/delete") }}',
                    method: 'POST',
                    data: {
                        id: id,
                        _token: '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    success: function (res) {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: res.message || 'Data berhasil dihapus.',
                            icon: 'success',
                            timer: 2000,
                            showConfirmButton: false
                        });
                        $row.remove();
                    },
                    error: function (xhr) {
                        Swal.fire({
                            title: 'Gagal!',
                            text: 'Terjadi kesalahan saat menghapus data.',
                            icon: 'error'
                        });
                    }
                });
            }
        });
    });

    // Live Search
    $('#live-search').on('keyup', function () {
        var value = $(this).val().toLowerCase();
        $('#list_fdbckc tbody tr').filter(function () {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
        });
    });
});
</script>
@endpush