@push('css')
	<link href="{{ asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css') }}" rel="stylesheet" />
	<link href="{{ asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.css') }}" rel="stylesheet" />
	<link href="{{ asset('assets/plugins/ion-rangeslider/css/ion.rangeSlider.css') }}" rel="stylesheet" /> 
	<link href="{{ asset('assets/plugins/ion-rangeslider/css/ion.rangeSlider.skinNice.css') }}" rel="stylesheet" />
	<link href="{{ asset('assets/plugins/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css') }}" rel="stylesheet" />
	<link href="{{ asset('assets/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css') }}" rel="stylesheet" />
	<link href="{{ asset('assets/plugins/password-indicator/css/password-indicator.css') }}" rel="stylesheet" />
	<link href="{{ asset('assets/plugins/bootstrap-combobox/css/bootstrap-combobox.css') }}" rel="stylesheet" />
	<link href="{{ asset('assets/plugins/bootstrap-select/dist/css/bootstrap-select.min.css') }}" rel="stylesheet" />
	<link href="{{ asset('assets/plugins/bootstrap-tagsinput/dist/bootstrap-tagsinput.css') }}" rel="stylesheet" />
	<link href="{{ asset('assets/plugins/tag-it/css/jquery.tagit.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/bootstrap-daterangepicker/daterangepicker.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/select2/dist/css/select2.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/bootstrap-colorpalette/css/bootstrap-colorpalette.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/jquery-simplecolorpicker/jquery.simplecolorpicker.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/jquery-simplecolorpicker/jquery.simplecolorpicker-fontawesome.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/jquery-simplecolorpicker/jquery.simplecolorpicker-glyphicons.css') }}" rel="stylesheet" />
@endpush



	

<!-- begin row -->
<div class="row">
	<div class="col-lg-12">
		<div class="panel-body panel-form">
			<form method="post" id="PengajuanForm" action="{{ route('pengajuan.store') }}" class="form-horizontal form-bordered" enctype="multipart/form-data" data-parsley-validate="true">
				@csrf
				<input type="hidden" name="item_id" id="item_id">
				<input type="hidden" name="id_user" id="id_user" value="{{session('api_user')['pegawai_id']}}">

				<!-- Nomor Pengajuan -->
				<div class="form-group row">
					<label class="col-md-4 col-form-label">Nomor Pengajuan</label>
					<div class="col-md-8">
						<input type="text" name="nomor_pengajuan" id="nomor_pengajuan" class="form-control" placeholder="Auto Generate..." readonly>
					</div>
				</div>

				<!-- Nama Produk -->
				<div class="form-group row">
					<label class="col-md-4 col-form-label">Nama Produk</label>
					<div class="col-md-8 d-flex gap-2 align-items-center">
						<select class="live-search form-control" id="id_produk" name="id_produk" data-parsley-required="true"></select>
						<button type="button" class="btn btn-info btn-sm ml-2" id="btnPilihInventaris">
							<i class="fa fa-search"></i> Pilih dari Inventaris
						</button>
					</div>
				</div>

				<!-- Ruangan -->
				<div class="form-group row">
					<label class="col-md-4 col-form-label">Ruangan</label>
					<div class="col-md-8">
						<select class="select2 form-control" id="id_ruangan" name="id_ruangan" data-parsley-required="true">
							<option value="">-- Pilih Ruangan --</option>
							@foreach(\App\Models\RefRuangan::orderBy('lantai')->get()->groupBy('lantai') as $lantai => $list)
								<optgroup label="Lantai {{ $lantai }}">
									@foreach($list as $ruangan)
										<option value="{{ $ruangan->id_ruangan }}">{{ $ruangan->nama_ruangan }}</option>
									@endforeach
								</optgroup>
							@endforeach
						</select>
					</div>
				</div>

				<!-- Uraian Kerusakan -->
				<div class="form-group row">
					<label class="col-md-4 col-form-label">Uraian Kerusakan</label>
					<div class="col-md-8">
						<textarea name="uraian_kerusakan" id="uraian_kerusakan" rows="3" class="form-control" placeholder="Jelaskan kondisi kerusakan..." data-parsley-required="true"></textarea>
					</div>
				</div>

				<!-- Usulan Tindakan -->
				<div class="form-group row">
					<label class="col-md-4 col-form-label">Usulan Tindakan</label>
					<div class="col-md-8">
						<textarea name="usulan_tindakan" id="usulan_tindakan" rows="3" class="form-control" placeholder="Tuliskan saran perbaikan..." data-parsley-required="true"></textarea>
					</div>
				</div>

				<!-- Gambar Pendukung -->
				<div class="form-group row">
					<label class="col-md-4 col-form-label">Gambar Pendukung</label>
					<div class="col-md-8">
						<input type="file" name="gambar_pendukung" id="gambar_pendukung" class="form-control" accept="image/*" />
						<div id="gambar_pendukung-preview" class="mt-2"></div>
					</div>
				</div>

				<!-- Info Tambahan -->
				<div class="form-group row">
					<label class="col-md-4 col-form-label">Dibuat Pada</label>
					<div class="col-md-8">
						<small id="created_at_info" class="text-muted">-</small>
					</div>
				</div>


				<!-- Tombol Aksi -->
				<div class="modal-footer">
					<div class="btn-group">
						<button type="submit" id="btnSave" class="btn btn-success">
							<i class="fas fa-save fa-lg"></i> <span id="btnSave-title">Simpan</span>
						</button>
						<button class="btn btn-danger" data-dismiss="modal">
							<i class="fas fa-sign-out-alt fa-lg"></i> Keluar
						</button>
					</div>
				</div>
			</form>	
		</div>
	</div>
</div>

<!-- Modal Pilih Inventaris -->
<div class="modal fade" id="modal-pilih-inventaris">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Pilih Inventaris</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <table id="datatable-pilih-inventaris" class="table table-striped table-bordered w-100">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Produk</th>
                            <th>Ruangan</th>
                            <th>Penanggung Jawab</th>
                            <th>Status</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- end row -->


@push('scripts')
	<script src="{{ asset('assets/plugins/jquery-migrate/jquery-migrate.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js') }}"></script>
	<script src="{{ asset('assets/plugins/ion-rangeslider/js/ion.rangeSlider.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/jquery.maskedinput/src/jquery.maskedinput.js') }}"></script>
	<script src="{{ asset('assets/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/password-indicator/js/password-indicator.js') }}"></script>
	<script src="{{ asset('assets/plugins/bootstrap-combobox/js/bootstrap-combobox.js') }}"></script>
	<script src="{{ asset('assets/plugins/bootstrap-select/dist/js/bootstrap-select.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/tag-it/js/tag-it.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/moment/moment.js') }}"></script>
    <script src="{{ asset('assets/plugins/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
    <script src="{{ asset('assets/plugins/select2/dist/js/select2.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/bootstrap-show-password/bootstrap-show-password.js') }}"></script>
    <script src="{{ asset('assets/plugins/bootstrap-colorpalette/js/bootstrap-colorpalette.js') }}"></script>
    <script src="{{ asset('assets/plugins/jquery-simplecolorpicker/jquery.simplecolorpicker.js') }}"></script>
    <script src="{{ asset('assets/plugins/clipboard/dist/clipboard.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/parsleyjs/dist/parsley.js') }}"></script>
	<script src="{{ asset('assets/plugins/highlight/highlight.min.js') }}"></script>
	<script src="{{ asset('assets/js/demo/render.highlight.js') }}"></script>
	<script src="{{ asset('assets/js/demo/form-plugins.demo.js') }}"></script>
	<script>
	$(document).ready(function() {




		// Select2 Ruangan
		$('#id_ruangan').select2({
			placeholder: 'Pilih Ruangan',
			width: '100%',
			dropdownParent: $("#modal-form")
		});

		// Generate Nomor Pengajuan (auto)
		function loadNomorPengajuan() {
			fetch("{{ url('pengajuan/generate-nomor') }}")
				.then(res => res.json())
				.then(data => {
					if (data.data && data.data.nomor_pengajuan) {
						$('#nomor_pengajuan').val(data.data.nomor_pengajuan);
					} else {
						$('#nomor_pengajuan').val('PGJ-AUTO');
					}
				})
				.catch(err => {
					console.error("Gagal ambil nomor pengajuan:", err);
					$('#nomor_pengajuan').val('PGJ-AUTO');
				});
		}

		// ✅ Event: ketika modal form dibuka (khusus tombol tambah data)
		$('#modal-form').on('show.bs.modal', function (e) {
			const isNew = !$('#item_id').val();
			if (isNew) {
				loadNomorPengajuan(); // hanya generate untuk create baru
			}
		});

		// Tombol buka modal
		$('#btnPilihInventaris').on('click', function () {
			$('#modal-pilih-inventaris').modal('show');
			loadInventarisTable();
		});

		// Fungsi untuk load DataTable Inventaris
		function loadInventarisTable() {
			if ($.fn.DataTable.isDataTable('#datatable-pilih-inventaris')) {
				$('#datatable-pilih-inventaris').DataTable().ajax.reload();
				return;
			}

			$('#datatable-pilih-inventaris').DataTable({
				ajax: '{{ url('inventaris') }}',
				processing: true,
				serverSide: false,
				responsive: true,
				scrollX: true,
				columns: [
					{ data: 'id', name: 'id' },
					{ data: 'produk.nama_produk', name: 'produk.nama_produk', defaultContent: '-' },
					{ data: 'ruangan.nama_ruangan', name: 'ruangan.nama_ruangan', defaultContent: '-' },
					{ data: 'user.name', name: 'user.name', defaultContent: '-' },
					{
						data: 'status',
						render: function (data) {
							let badge = 'secondary';
							let text = 'Tidak Diketahui';
							if (data == 0) { badge = 'success'; text = 'Bagus'; }
							if (data == 1) { badge = 'warning'; text = 'Perlu Perawatan'; }
							if (data == 2) { badge = 'danger'; text = 'Rusak'; }
							return `<span class="badge badge-${badge}">${text}</span>`;
						}
					},
					{
						data: null,
						orderable: false,
						render: function (data, type, row) {
							return `<button class="btn btn-sm btn-primary pilih-inventaris" 
									data-id="${row.id}" 
									data-produk="${row.produk?.nama_produk || '-'}" 
									data-idproduk="${row.id_produk}" 
									data-idruangan="${row.id_lokasi}" 
									data-iduser="${row.id_user}">
									<i class="fa fa-check"></i> Pilih
								</button>`;
						}
					}
				]
			});
		}

		// Select2 Produk (Live Search)
		
		let searchTimeout = null; // untuk menampung timer debounce

		$('.live-search').select2({
			placeholder: 'Cari produk...',
			minimumInputLength: 2,
			ajax: {
				transport: function (params, success, failure) {
					// batalkan pencarian sebelumnya
					if (searchTimeout) clearTimeout(searchTimeout);

					// buat penundaan 400ms (bisa diubah ke 300–600)
					searchTimeout = setTimeout(function () {
						$.ajax({
							url: '{{ url('ProdukCari') }}',
							type: 'GET',
							data: params.data,
							dataType: 'json',
							success: success,
							error: failure
						});
					}, 400); // <- delay debounce
				},
				processResults: function (data) {
					return {
						results: data.map(function (item) {
							return { id: item.id, text: item.nama_produk };
						})
					};
				},
				cache: true
			},
			dropdownParent: $("#modal-form"),
			width: "100%",
		});

		// Saat klik tombol pilih di modal
		$(document).on('click', '.pilih-inventaris', function () {
			const id_produk = $(this).data('idproduk');
			const nama_produk = $(this).data('produk');
			const id_ruangan = $(this).data('idruangan');
			const id_user = $(this).data('iduser');

			// Isi ke form utama
			let option = new Option(nama_produk, id_produk, true, true);
			$('#id_produk').append(option).trigger('change');
			$('#id_ruangan').val(id_ruangan).trigger('change');
			

			  // 🔒 Readonly setelah dipilih
			$('#id_produk').attr('readonly', true);
			$('#id_ruangan').attr('readonly', true);

			// Reset validasi Parsley
			if ($('#id_produk').data('parsley')) {
				$('#id_produk').parsley().reset();
			}

			// Tutup modal
			$('#modal-pilih-inventaris').modal('hide');

			Swal.fire({
				icon: 'success',
				title: 'Inventaris Dipilih!',
				text: 'Data produk dan ruangan otomatis diisi.',
				timer: 1500,
				showConfirmButton: false
			});
		});

		
	});
	</script>
@endpush