@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 Per Lokasi</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_lokasi.laporan.store') }}" method="POST">
                        @csrf
                        
                        <!-- Pilih Lokasi -->
                        <div class="form-group">
                            <label for="id_lokasi">Pilih Lokasi</label>
                            <select name="id_lokasi" id="id_lokasi" class="form-control" required>
                                <option value="" selected disabled>Pilih Lokasi</option>
                                @foreach ($lokasis as $lokasi)
                                    <option value="{{ $lokasi->id }}">{{ $lokasi->nama_lokasi }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Jumlah Teknisi -->
                        <div class="form-group">
                            <label for="jumlah_user">Jumlah User Teknisi</label>
                            <input type="number" id="jumlah_user" name="jumlah_user" class="form-control">
                        </div>

                        {{-- jumlah tugas --}}
                        <div class="form-group">
                            <label for="jumlah_tugas">Jumlah Tugas</label>
                            <input type="number" id="jumlah_tugas" name="jumlah_tugas" class="form-control">
                        </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>
                        
                        <!-- Tanggal Laporan -->
                        <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>                        

                        <!-- Nama User 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 Lokasi</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


<script>
   document.addEventListener('DOMContentLoaded', function () {
    const LokasiSelect = document.getElementById('id_lokasi');
    // const jumlahTeknisiInput = document.getElementById('jumlah_user');
    const jumlahTugasInput = document.getElementById('jumlah_tugas');

    LokasiSelect.addEventListener('change', function () {
        const lokasiId = this.value;

        if (lokasiId) {
            fetch(`/supervisor/laporan_lokasi/data/${lokasiId}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('Data fetched:', data);
                    // jumlahTeknisiInput.value = data.jumlah_user || 0;
                    jumlahTugasInput.value = data.jumlah_tugas || 0;
                })
                .catch(error => {
                    console.error('Error fetching jumlah tugas:', error);
                    jumlahTugasInput.value = 0;
                    jumlahTeknisiInput.value = 0;
                });
        } else {
            jumlahTugasInput.value = 0;
            jumlahTeknisiInput.value = 0;
        }
    });
});



</script>