@extends('layouts.supervisor')

@section('content')
<div class="content-body">
    <div class="container-fluid">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Buat Laporan</h4>
                </div>
                <div class="card-body">
                    <!-- Menampilkan error atau success message -->
                    @if(session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif
                    
                    <form action="{{ route('supervisor.laporan_teknisi.laporan.store') }}" method="POST">
                        @csrf
                        {{-- id user teknisi --}}
                        <div class="form-group">
                            <label for="id_user">Nama User Teknisi</label>
                            <select name="id_user" id="id_user" class="form-control" required>
                                <option value="" selected disabled>Pilih User Teknisi</option>
                                @foreach ($users as $user)
                                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- jumlah pekerjaan --}}
                        <div class="form-group">
                            <label for="jumlah_tugas">Jumlah Tugas</label>
                            <input type="text" id="jumlah_tugas" name="jumlah_tugas" class="form-control" readonly>
                        </div>
                        
                        {{-- status pilihan nya pending, in-progress, completed. --}}
                        <div class="form-group">
                            <label for="status">Status</label>
                            <select name="status" id="status" class="form-control" required>
                                <option value="pending">Pending</option>
                                <option value="in-progress">In Progress</option>
                                <option value="completed">Completed</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="tanggal_laporan">Tanggal Laporan</label>
                            <input type="date" class="form-control @error('tanggal_laporan') is-invalid @enderror" 
                                   name="tanggal_laporan" id="tanggal_laporan" 
                                   value="{{ old('tanggal_laporan') }}">
                            @error('tanggal_laporan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>                        

                        {{-- created by (supervisor) --}}
                        <div class="form-group">
                            <label for="created_by">Nama User supervisor</label>
                            <input type="text" name="created_by" id="created_by" class="form-control" value="{{ Auth::user()->name }}" disabled>
                        </div>
                        
                        <br>
                        <button type="submit" class="btn btn-primary">Simpan Laporan Per Teknisi</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const teknisiSelect = document.getElementById('id_user');
        const jumlahTugasInput = document.getElementById('jumlah_tugas');

        teknisiSelect.addEventListener('change', function () {
            const teknisiId = this.value;

            if (teknisiId) {
                fetch(`/supervisor/laporan_teknisi/jumlah_pekerjaan/${teknisiId}`)
                    .then(response => response.json())
                    .then(data => {
                        jumlahTugasInput.value = data.jumlah_tugas || 0;
                    })
                    .catch(error => {
                        console.error('Error fetching jumlah tugas:', error);
                        jumlahTugasInput.value = 0;
                    });
            } else {
                jumlahTugasInput.value = 0;
            }
        });
    });
</script>