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

@push('css')
<style>
    .checklist-toggle {
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0;
    }

    .checklist-toggle .checklist-icon {
        color: #adb5bd;
        font-size: 1rem;
        transition: color .15s ease;
    }

    .checklist-toggle .checklist-icon.checked {
        color: #00b7bd;
    }
</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="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">

                        <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

                                    <button type="button" class="btn btn-primary mb-0 btn-send-email-bulk" id="btn-send-email-bulk" disabled>
                                        <i class="fas fa-envelope me-1"></i>
                                        <span class="font-weight-bold">Send Gmail</span>
                                        <span id="selected-count" class="badge bg-white text-dark ms-2 d-none">0</span>
                                    </button>

                                    <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:220px;" placeholder="ID PS / Customer ...">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}" data-skip-auto-dt="1">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th>No</th>
                                            <th>ID PS</th>
                                            <th>Tanggal PS</th>
                                            <th>Kode Material</th>
                                            <th>Customer</th>
                                            <th class="text-center">Status</th>
                                            <th>Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($records as $i => $row)
                                            <tr>
                                                <td class="text-sm">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <input class="row-select" type="checkbox" value="{{ $row->id_ps }}" style="width: 18px; height: 18px; cursor: pointer;">
                                                        <span>{{ $i + 1 }}</span>
                                                    </div>
                                                </td>
                                                <td class="text-sm"><span class="badge bg-gradient-info text-xs">{{ $row->id_ps }}</span></td>
                                                <td class="text-sm">{{ $row->ps_date ? \Carbon\Carbon::parse($row->ps_date)->format('d/m/Y') : '-' }}</td>
                                                <td class="text-sm">{!! str_replace(', ', '<br>', e($row->materials)) !!}</td>
                                                <td class="text-sm">{{ $row->customer ?? '-' }}</td>
                                                <td class="text-sm text-center">
                                                    @if ((string) ($row->status_feedback ?? '') === '1')
                                                        <span class="badge bg-gradient-success text-xxs">Accepted</span>
                                                    @elseif((string) ($row->status_feedback ?? '') === '0')
                                                        <span class="badge bg-gradient-danger text-xxs">Not Accepted</span>
                                                    @else
                                                        <span class="badge bg-gradient-secondary text-xxs">Belum</span>
                                                    @endif
                                                </td>
                                                <td class="text-sm text-center">
                                                    <div class="btn-group">
                                                        <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                            onclick="window.location='{{ url($url_menu . '/show/' . encrypt($row->id_ps)) }}'">
                                                            <i class="fas fa-eye"></i><span class="font-weight-bold"> View</span>
                                                        </button>
                                                        <button type="button" class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
                                                            <span class="visually-hidden">Toggle Dropdown</span>
                                                        </button>
                                                        <ul class="dropdown-menu">
                                                            <li>
                                                                <button type="button" class="btn btn-sm btn-warning mx-2 mb-0 w-90"
                                                                    onclick="window.location='{{ url($url_menu . '/edit/' . encrypt($row->id_ps)) }}'">
                                                                    <i class="fas fa-edit"></i><span class="font-weight-bold"> Edit</span>
                                                                </button>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@push('js')
<script>
$(document).ready(function () {
    var tableSelector = '#list_{{ $dmenu }}';
    if ($.fn.DataTable.isDataTable(tableSelector)) {
        $(tableSelector).DataTable().destroy();
    }

    var table = $(tableSelector).DataTable({
        dom: 'lrtip',
        order: [[2, 'desc']],
        pageLength: 25
    });

    $('#live-search').on('keyup', function () {
        table.search(this.value).draw();
    });

    function toggleBulkButtonState() {
        var checkedCount = $('.row-select:checked').length;
        console.log('Checked count:', checkedCount); // Debugging
        
        $('#btn-send-email-bulk').prop('disabled', checkedCount === 0);

        var countBadge = $('#selected-count');
        if (checkedCount > 0) {
            countBadge.text(checkedCount).removeClass('d-none');
        } else {
            countBadge.addClass('d-none').text('0');
        }
    }

    $(document).on('change', '.row-select', function () {
        console.log('Checkbox changed. Is checked:', $(this).is(':checked')); // Debugging
        toggleBulkButtonState();
    });

    $(document).on('click', '.btn-send-email-bulk', function () {
        var selectedIds = $('.row-select:checked').map(function () {
            return $(this).val();
        }).get();

        if (selectedIds.length === 0) {
            toggleBulkButtonState();
            return;
        }

        Swal.fire({
            title: 'Kirim email feedback terpilih?',
            html: 'Total terpilih: <strong>' + selectedIds.length + '</strong> baris.',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Ya, Kirim',
            cancelButtonText: 'Batal'
        }).then(function (result) {
            if (result.isConfirmed) {
                var form = $('<form method="POST" action="{{ url($url_menu) }}/bulkmail"></form>');
                form.append('<input type="hidden" name="_token" value="{{ csrf_token() }}">');
                form.append('<input type="hidden" name="_method" value="PUT">');
                form.append('<input type="hidden" name="mode" value="send_email_bulk">');
                selectedIds.forEach(function (idPs) {
                    form.append('<input type="hidden" name="selected_id_ps[]" value="' + idPs + '">');
                });
                $('body').append(form);
                form.submit();
            }
        });
    });

    toggleBulkButtonState();

    @if (Session::has('message'))
        @php
            $msg   = addslashes((string)Session::get('message'));
            $msg   = str_replace(["\r", "\n"], "", $msg);
            $cls   = Session::get('class', 'info');
            $icon  = $cls === 'success' ? 'success' : ($cls === 'danger' || $cls === 'error' ? 'error' : 'info');
        @endphp
        Swal.fire({ 
            icon: '{{ $icon }}', 
            title: '{{ $cls === "success" ? "Berhasil!" : "Info" }}', 
            text: '{{ $msg }}' 
        });
    @endif
});
</script>
@endpush

@endsection