@extends('layouts.headkaryawan')
@section('title', 'Informasi Jadwal')
@section('content')
<div class="container-fluid ">
    <div class="card shadow mb-4">
        <div class="card-header d-flex 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">Update Tugas</h5>
        </div>

        <div class="card-body m-10">
            <div class="container mt-4">

                @if($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <ul>
                        @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                @endif

                <form action="{{ route('karyawan.jadwal.update', $jadwal->id_jadwal) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <!-- Kolom Progress -->
                    @if(isset($jadwal) && ($jadwal->jenis == 'pembayaran' || $jadwal->jenis == 'jadwal'))

                    {{-- Kolom Progress --}}
                    <div class="mb-3">
                        <label class="form-label fw-bold">Progress</label>
                        <select name="progress" class="form-control" id="progress" required>
                            <option value="belum dikerjakan" {{ $jadwal->progress == 'belum dikerjakan' ? 'selected' : '' }}>Belum Dikerjakan</option>
                            <option value="sedang dikerjakan" {{ $jadwal->progress == 'sedang dikerjakan' ? 'selected' : '' }}>Sedang Dikerjakan</option>
                            <option value="selesai" {{ $jadwal->progress == 'selesai' ? 'selected' : '' }}>Selesai</option>
                        </select>
                    </div>

                    {{-- Kolom Jumlah Bulan (hanya untuk jenis pembayaran) --}}
                    @if($jadwal->jenis == 'pembayaran')
                    <div class="mb-3">
                        <label for="jumlah_bulan" class="form-label fw-bold">Jumlah Bulan</label>
                        <input type="number" name="jumlah_bulan" class="form-control" id="jumlah_bulan" min="1" value="{{ old('jumlah_bulan', $jadwal->jumlah_bulan ?? 1) }}" required>
                    </div>
                    @endif
                    @endif
                    <!-- Kolom Masalah Lapangan (Hanya untuk jenis aduan pelanggan) -->
                    @if($jadwal->jenis == 'aduan pelanggan')
                    <div id="masalah-lapangan-container" class="mb-3">
                        <label class="form-label fw-bold">Masalah Lapangan</label>
                        <select name="masalah_lapangan" class="form-control">
                            <option value="router" {{ old('masalah_lapangan', $jadwal->masalah_lapangan) == 'router' ? 'selected' : '' }}>Router</option>
                            <option value="jalur putus" {{ old('masalah_lapangan', $jadwal->masalah_lapangan) == 'jalur putus' ? 'selected' : '' }}>Jalur Putus</option>
                            <option value="sambungan kabel" {{ old('masalah_lapangan', $jadwal->masalah_lapangan) == 'sambungan kabel' ? 'selected' : '' }}>Sambungan Kabel</option>
                        </select>
                    </div>
                    @endif
                    <!-- Kolom Bukti (Selalu muncul untuk jenis apapun) -->
                    <div class="mb-3">
                        <label class="form-label">Bukti</label>
                        <div class="custom-file">
                            <input type="file" name="bukti" id="bukti" class="form-control @error('bukti') is-invalid @enderror" accept=".jpg,.jpeg,.png">
                            <label class="custom-file-label" for="bukti">Pilih file...</label>
                            @error('bukti')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div id="preview-container" class="mt-3">
                            <img id="image-preview" src="{{ $jadwal->bukti ? asset('storage/' . $jadwal->bukti) : '' }}" alt="Preview" style="display: {{ $jadwal->bukti ? 'block' : 'none' }}; max-width: 200px; border-radius: 10px; margin-bottom: 10px;">
                            <p id="file-name" style="font-size: 14px; color: #555;">{{ $jadwal->bukti ? 'Nama File: ' . basename($jadwal->bukti) : '' }}</p>
                        </div>
                    </div>

                    

                    <button type="submit" class="btn btn-success"> Simpan Perubahan</button>

                </form>
            </div>
        </div>
    </div>
</div>



<script>
    document.addEventListener('DOMContentLoaded', function() {
        const progressSelect = document.getElementById('progress');
        const masalahLapanganContainer = document.getElementById('masalah-lapangan-container');



        // File preview
       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 && file.type.startsWith('image/')) {
                fileName.textContent = `Nama File: ${file.name}`;

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