@extends('layouts.headpelanggan')
@section('title', 'Tambah aduan Layanan')
@section('content')

<div class="container-fluid vh-100">
    <div class="card shadow mb-4">
        <div class="card-header d-flex justify-content-between py-3 ">
            <a href="#"
                onclick="window.history.length > 1 ? history.back() : window.location.href='{{ route('pelanggan.index') }}';"
                class="btn btn-secondary btn-icon-split"
                data-bs-toggle="tooltip"
                data-bs-placement="top">
                <span class="icon text-white-50">
                    <i class="fas fa-arrow-left"></i>
                </span>
            </a>
            <h5 class=" font-weight-bold d-flex justify-content-center align-items-center w-100">Detail aduan</h5>
        </div>
        <div class="card-body">

            <!-- <a href="{{ route('pelanggan.aduanpelanggan.index') }}" class="btn btn-secondary mb-3">Kembali</a> -->

            @if($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif

            <form action="{{ route('pelanggan.aduanpelanggan.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="mb-3">
                    <label class="form-label">Keterangan</label>
                    <textarea class="form-control" name="keterangan" required></textarea>
                </div>


                <button type="submit" class="btn btn-success">Simpan</button>
            </form>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const fileInput = document.getElementById('bukti');
            const imagePreview = document.getElementById('image-preview');
            const fileName = document.getElementById('file-name');

            fileInput.addEventListener('change', function() {
                const file = this.files[0];

                if (file) {
                    // Tampilkan nama file
                    fileName.textContent = `Nama File: ${file.name}`;

                    // Tampilkan preview gambar
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        imagePreview.src = e.target.result;
                        imagePreview.style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                } else {
                    // Kosongkan preview jika tidak ada file
                    fileName.textContent = '';
                    imagePreview.style.display = 'none';
                    imagePreview.src = '';
                }
            });
        });
    </script>
    @endsection