@extends('layouts.headatmin')
@section('title', 'Tambah Jadwal')
@section('content')
<div class="container-fluid">
    <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="m-0 font-weight-bold ">Tambah tugas baru</h5>
        </div>
        <div class="card-body">
            <form action="{{ route('jadwal.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="form-group">
                    <label for="tanggal">Tanggal</label>
                    <input type="date" name="tanggal" id="tanggal" class="form-control" required value="{{ old('tanggal') }}">
                </div>

                <div class="form-group">
                    <label for="tugas">Tugas</label>
                    <select name="tugas" id="tugas" class="form-control" required>
                        <option value="" disabled selected>Pilih Tugas</option>
                        <option value="Splicing Kabel" {{ old('tugas') == 'Splicing Kabel' ? 'selected' : '' }}>Splicing Kabel</option>
                        <option value="Backbone" {{ old('tugas') == 'Backbone' ? 'selected' : '' }}>Backbone</option>
                        <option value="Pemanjat" {{ old('tugas') == 'Pemanjat' ? 'selected' : '' }}>Pemanjat</option>
                        <option value="Pelanggan" {{ old('tugas') == 'Pelanggan' ? 'selected' : '' }}>Pelanggan</option>
                        <option value="Routing" {{ old('tugas') == 'Routing' ? 'selected' : '' }}>Routing</option>
                        <option value="Marketing" {{ old('tugas') == 'Marketing' ? 'selected' : '' }}>Marketing</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="jenis">Jenis</label>
                    <select name="jenis" id="jenis" class="form-control">
                        <option value="jadwal" {{ old('jenis') == 'jadwal' ? 'selected' : '' }}>Jadwal</option>
                        <option value="pembayaran" {{ old('jenis') == 'pembayaran' ? 'selected' : '' }}>Pembayaran</option>
                        <option value="aduan pelanggan" {{ old('jenis') == 'aduan pelanggan' ? 'selected' : '' }}>Aduan Pelanggan</option>
                    </select>
                </div>



                <div class="form-group">
                    <label for="waktu">Waktu</label>
                    <input type="time" name="waktu" id="waktu" class="form-control" required value="{{ old('waktu') }}">
                </div>

                <div class="form-group">
                    <label for="catatan">Catatan</label>
                    <textarea name="catatan" id="catatan" class="form-control">{{ old('catatan') }}</textarea>
                </div>

                <div class="form-group">
                    <label for="progress">Progress</label>
                    <select name="progress" id="progress" class="form-control" required>
                        <option value="belum dikerjakan" {{ old('progress') == 'belum dikerjakan' ? 'selected' : '' }}>Belum Dikerjakan</option>
                        <option value="sedang dikerjakan" {{ old('progress') == 'sedang dikerjakan' ? 'selected' : '' }}>Sedang Dikerjakan</option>
                        <option value="selesai" {{ old('progress') == 'selesai' ? 'selected' : '' }}>Selesai</option>
                    </select>
                </div>


                <!-- <div class="form-group" id="form-group-pelanggan">
                    <label for="id_user_pelanggan">Pelanggan</label>
                    <select name="id_user_pelanggan" id="id_user_pelanggan" class="form-control">
                        <option value="">-- Pilih Pelanggan --</option>
                        @foreach($pelanggan as $p)
                        <option value="{{ $p->id_user }}">{{ $p->nama }}</option>
                        @endforeach
                    </select>
                </div> -->
                
                       <div class="form-group" id="form-group-pelanggan">
                            <label for="id_user_pelanggan">Pelanggan</label>
                            <select name="id_user_pelanggan" id="id_user_pelanggan" class="form-control">
                                <option value="">-- Pilih Pelanggan --</option>
                                @foreach($pelanggan as $p)
                                    <option value="{{ $p->id_user }}">{{ $p->nama }}</option>
                                @endforeach
                            </select>
                        </div>

                <div class="form-group">
                    <label for="estimasi_waktu">Estimasi Waktu (jam)</label>
                    <select name="estimasi_waktu" id="estimasi_waktu" class="form-control">
                        @for ($i = 1; $i <= 12; $i++)
                            <option value="{{ $i }}">{{ $i }} jam</option>
                            @endfor
                    </select>
                </div>
                <button type="submit" class="btn btn-primary">Simpan</button>
            </form>
        </div>
    </div>
</div>

<!-- JS jQuery (Select2 butuh jQuery) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- JS Select2 -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(document).ready(function() {
    $('#id_user_pelanggan').select2({
        placeholder: "-- Pilih Pelanggan --",
        allowClear: true
    });
});

    document.addEventListener('DOMContentLoaded', function() {
        const tugasSelect = document.getElementById('tugas');
        const pelangganGroup = document.getElementById('form-group-pelanggan');
        const pelangganSelect = document.getElementById('id_user_pelanggan');
        const adminId = '{{ auth()->user()->id_user }}'; // ambil ID admin login

        function updatePelangganVisibility() {
            if (tugasSelect.value === 'Backbone') {
                pelangganGroup.style.display = 'none';
                // Set value ke admin
                const option = document.createElement('option');
                option.value = adminId;
                option.text = 'Admin';
                option.selected = true;
                pelangganSelect.innerHTML = '';
                pelangganSelect.appendChild(option);
            } else {
                pelangganGroup.style.display = 'block';
                pelangganSelect.innerHTML = `
                    <option value="">-- Pilih Pelanggan --</option>
                    @foreach($pelanggan as $p)
                        <option value="{{ $p->id_user }}">{{ $p->nama }}</option>
                    @endforeach
                `;
            }
        }

        tugasSelect.addEventListener('change', updatePelangganVisibility);
        updatePelangganVisibility(); // panggil saat halaman pertama kali dimuat
    });
</script>
@endsection