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

@push('css')
<style>
    .status-badge {
        font-size: 0.8rem;
        padding: 0.25em 0.5em;
    }
    #selected-id-ps-tag {
        min-height: 32px;
    }
</style>
@endpush

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

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-md-12">
            <div class="card shadow-lg mb-3">
                <div class="card-body p-3">
                    <div class="row gx-4">
                        <div class="col-lg">
                            <div class="nav-wrapper d-flex gap-2">
                                <button class="btn btn-secondary mb-0" onclick="history.back()">
                                    <i class="fas fa-circle-left me-1"></i>
                                    <span class="font-weight-bold">Kembali</span>
                                </button>
                                <button class="btn btn-primary mb-0" id="btn-save-feedback" type="submit">
                                    <i class="fas fa-floppy-disk me-1"></i>
                                    <span class="font-weight-bold">Simpan Feedback</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header pb-0">
                    <h6 class="mb-0 font-weight-bold text-uppercase text-sm">
                        <i class="fas fa-file-invoice me-2 text-primary"></i>
                        Input Feedback Customer
                    </h6>
                </div>
                <div class="card-body">
                    <hr class="horizontal dark mt-0">
                    @include('components.alert')

                    <form method="POST" action="{{ url($url_menu) }}" id="form-fdbckc" enctype="multipart/form-data">
                        @csrf

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-control-label font-weight-bold">ID PS <span class="text-danger">*</span></label>
                                    <select class="form-select select2-multi" name="id_ps[]" id="id_ps" multiple="multiple" required>
                                        <option value="">-- Pilih ID PS --</option>
                                        @foreach($ps_list as $ps)
                                            <option value="{{ $ps['id_ps'] }}"
                                                data-customer="{{ $ps['nama_customer'] }}"
                                                data-salesman="{{ $ps['nama_salesman'] }}"
                                                data-samples="{{ implode('|', $ps['id_samples']) }}">
                                                {{ $ps['id_ps'] }} — {{ $ps['nama_customer'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-control-label font-weight-bold">ID Sample <small class="text-muted">(otomatis)</small></label>
                                    <div id="selected-id-sample-tag" class="form-control bg-light" readonly style="min-height: 38px; display: flex; flex-wrap: wrap; gap: 4px; align-content: center; padding: 4px 8px;">
                                        <span class="text-muted small">Belum ada ID PS yang dipilih</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-control-label font-weight-bold">Nama Salesman <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="nama_salesman" id="nama_salesman" value="{{ old('nama_salesman') }}" required>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-control-label font-weight-bold">Status <span class="text-danger">*</span></label>
                                    <select class="form-select" name="feedback_customer" id="feedback_customer" required>
                                        <option value="pending" {{ old('feedback_customer', 'pending') == 'pending' ? 'selected' : '' }}>Pending</option>
                                        <option value="approve" {{ old('feedback_customer') == 'approve' ? 'selected' : '' }}>Approve</option>
                                        <option value="rejected" {{ old('feedback_customer') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-control-label font-weight-bold">Note Feedback</label>
                            <textarea class="form-control" name="note_feedback" id="note_feedback" rows="4" placeholder="Masukkan catatan feedback customer...">{{ old('note_feedback') }}</textarea>
                            <small class="form-text text-muted">Berikan catatan atau komentar untuk feedback customer.</small>
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-control-label font-weight-bold">Dokumen Pendukung</label>
                            <input type="file" class="form-control" name="path_document" id="path_document" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png">
                            <small class="form-text text-muted">Unggah dokumen pendukung (PDF, DOC, JPG, PNG). Maksimal 5MB.</small>
                        </div>

                        <div class="d-flex justify-content-end mt-4">
                            <button type="reset" class="btn btn-light me-2">Reset</button>
                            <button type="submit" class="btn btn-primary">Simpan</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
$(document).ready(function () {
    var psData = @json($ps_list);

    $('#id_ps').select2({
        placeholder: '-- Pilih ID PS --',
        allowClear: true,
        width: '100%',
        multiple: true
    });

    $('#id_ps').on('change', function () {
        var selectedIds = $(this).val() || [];
        var sampleTag = $('#selected-id-sample-tag');

        sampleTag.empty();

        if (selectedIds.length === 0) {
            sampleTag.append('<span class="text-muted small">Belum ada ID PS yang dipilih</span>');
            $('#nama_salesman').val('');
            return;
        }

        var allSamples = [];
        var firstSalesman = '';

        $('#id_ps option:selected').each(function () {
            var samples = $(this).data('samples') || '';
            if (samples) {
                samples.split('|').forEach(function (s) {
                    if (s && allSamples.indexOf(s) === -1) {
                        allSamples.push(s);
                    }
                });
            }
            if (!firstSalesman && $(this).data('salesman')) {
                firstSalesman = $(this).data('salesman');
            }
        });

        if (allSamples.length > 0) {
            $.each(allSamples, function (_, sample) {
                sampleTag.append('<span class="badge bg-info text-dark text-xs">' + sample + '</span>');
            });
        } else {
            sampleTag.append('<span class="text-muted small">Tidak ada ID Sample ditemukan</span>');
        }

        $('#nama_salesman').val(firstSalesman);
    });

    @if(old('id_ps'))
        var oldSelected = @json(old('id_ps'));
        if (oldSelected && oldSelected.length > 0) {
            $('#id_ps').val(oldSelected).trigger('change');
        }
    @endif

    $('#form-fdbckc').on('submit', function (e) {
        var idPsList = $('#id_ps').val();
        var namaSalesman = $('#nama_salesman').val().trim();
        var statusFeedback = $('#feedback_customer').val();

        if (!idPsList || idPsList.length === 0) {
            e.preventDefault();
            Swal.fire({
                title: 'Peringatan',
                text: 'Silakan pilih ID PS terlebih dahulu.',
                icon: 'warning'
            });
            return false;
        }

        if (!namaSalesman) {
            e.preventDefault();
            Swal.fire({
                title: 'Peringatan',
                text: 'Nama Salesman wajib diisi.',
                icon: 'warning'
            });
            return false;
        }

        Swal.fire({
            title: 'Konfirmasi Simpan?',
            html: 'Anda akan menyimpan feedback customer baru.<br><br>' +
                  '<strong>ID PS:</strong> ' + idPsList.join(', ') + '<br>' +
                  '<strong>Nama Salesman:</strong> ' + (namaSalesman || '<span style="color:red">Wajib diisi</span>') + '<br>' +
                  '<strong>Status:</strong> ' + (statusFeedback || 'Pending'),
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Ya, Simpan',
            cancelButtonText: 'Batal'
        }).then(function (result) {
            if (!result.isConfirmed) {
                e.preventDefault();
                e.stopImmediatePropagation();
            }
        });

        return true;
    });
});
</script>
@endpush