@extends('layouts.admin')

@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('admin.laporan_pekerjaan.laporan.store') }}" method="POST">
                        @csrf
                        {{-- id user teknisi --}}
                        <div class="form-group">
                            <label for="id_pekerjaan">pilih pekerjaan</label>
                            <select name="id_pekerjaan" id="id_pekerjaan" class="form-control" required>
                                <option value="" selected disabled>Pilih pekerjaan</option>
                                @foreach ($pekerjaans as $pekerjaan)
                                    <option value="{{ $pekerjaan->id }}">{{ $pekerjaan->nama_pekerjaan }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Jumlah user teknisi --}}
                        <div class="form-group">
                            <label for="jumlah_teknisi">Jumlah Teknisi</label>
                            <input type="text" id="jumlah_teknisi" name="jumlah_teknisi" 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 (admin) --}}
                        <div class="form-group">
                            <label for="created_by">Nama User admin</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 Pekerjaan</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<script>
        document.addEventListener('DOMContentLoaded', function () {
        const pekerjaanSelect = document.getElementById('id_pekerjaan');
        const jumlahTeknisiInput = document.getElementById('jumlah_teknisi');

        pekerjaanSelect.addEventListener('change', function () {
            const pekerjaanId = this.value;

            if (pekerjaanId) {
                fetch(`/admin/laporan_pekerjaan/jumlah_teknisi/${pekerjaanId}`)
                    .then(response => response.json())
                    .then(data => {
                        jumlahTeknisiInput.value = data.jumlah_teknisi || 0; // Ambil jumlah_teknisi dari API
                    })
                    .catch(error => {
                        console.error('Error fetching jumlah teknisi:', error);
                        jumlahTeknisiInput.value = 0;
                    });
            } else {
                jumlahTeknisiInput.value = 0;
            }
        });
    });

</script>