@extends('layouts.adminlte')
@section('title','Lokasi')

@section('content')

<button class="btn btn-primary mb-2" id="btnTambah">Tambah</button>

<a href="{{ route('lokasi.export') }}" class="btn btn-success mb-2">
    Export Excel
</a>
<a href="{{ route('lokasi.template') }}" class="btn btn-outline-secondary mb-2">
    Download Template
</a>

<form action="{{ route('lokasi.import') }}" method="POST"
      enctype="multipart/form-data" class="d-inline">
    @csrf
    <input type="file" name="file" required>
    <button class="btn btn-warning">Import</button>
</form>

<table class="table table-bordered" id="tableLokasi">
    <thead>
        <tr>
            <th>Nama Lokasi</th>
            <th>kode lokasi</th>
            <th>Ruangan</th>
            <th>Lantai</th>
            <th>User di Lokasi</th>
            <th width="120">Aksi</th>
        </tr>
    </thead>
</table>

<div class="modal fade" id="modalLokasiForm">
    <div class="modal-dialog">
        <form id="formLokasi">
            @csrf
            <input type="hidden" name="id" id="lokasi_id">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Form Lokasi</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control mb-2" name="nama_lokasi" id="nama_lokasi" placeholder="Nama Lokasi" required>
                    <input type="text" class="form-control mb-2" name="kd_lokasi" id="kd_lokasi" placeholder="Kode Lokasi">
                    <input type="text" class="form-control mb-2" name="ruangan" id="ruangan" placeholder="Ruangan">
                    <input type="text" class="form-control mb-2" name="lantai" id="lantai" placeholder="Lantai (contoh: 0,1,2,3,4,Mezzanine)" list="listLantai">
                    <datalist id="listLantai">
                        <option value="0"></option>
                        <option value="1"></option>
                        <option value="2"></option>
                        <option value="3"></option>
                        <option value="4"></option>
                    </datalist>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success" type="submit">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="modalLokasiUsers">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="lokasiUsersTitle">User di Lokasi</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-sm table-bordered mb-0">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>User</th>
                                <th>Jabatan</th>
                            </tr>
                        </thead>
                        <tbody id="lokasiUsersBody"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
$(function(){

let table = $('#tableLokasi').DataTable({
    processing:true,
    ajax:{
        url:"{{ route('lokasi.data') }}",
        dataSrc:'data'
    },
    columns:[
        {data:'nama_lokasi'},
        {data:'kd_lokasi'},
        {data:'ruangan'},
        {
            data:'lantai',
            render:function(v){
                let vv = (v === null || v === undefined || v === '') ? '0' : String(v);
                return `Lantai ${vv}`;
            }
        },
        {
            data:'users_count',
            render:function(data, type, row){
                let preview = row.users_preview ? `<div class="small text-muted">${row.users_preview}</div>` : '';
                return `<span class="badge badge-info">${data || 0}</span>${preview}`;
            }
        },
        {
            data:'id',
            render:function(id){
                return `
                    <button class="btn btn-primary btn-sm edit"
                        data-id="${id}">Edit</button>
                    <button class="btn btn-info btn-sm users"
                        data-id="${id}">Users</button>
                    <button class="btn btn-danger btn-sm delete"
                        data-id="${id}">Hapus</button>
                `;
            },
            orderable:false,
            searchable:false
        }
    ]
});

$('#btnTambah').on('click', function () {
    $('#formLokasi')[0].reset();
    $('#lokasi_id').val('');
    $('#lantai').val('0');
    $('#modalLokasiForm').modal('show');
});

$(document).on('click', '.edit', function () {
    const id = $(this).data('id');
    $.get("{{ url('master/lokasi/edit') }}/" + id, function (res) {
        $('#lokasi_id').val(res.id || '');
        $('#nama_lokasi').val(res.nama_lokasi || '');
        $('#kd_lokasi').val(res.kd_lokasi || '');
        $('#ruangan').val(res.ruangan || '');
        $('#lantai').val(String(res.lantai ?? 0));
        $('#modalLokasiForm').modal('show');
    });
});

$('#formLokasi').on('submit', function (e) {
    e.preventDefault();
    $.post("{{ route('lokasi.store') }}", $(this).serialize(), function () {
        $('#modalLokasiForm').modal('hide');
        table.ajax.reload(null, false);
    });
});

$(document).on('click', '.users', function () {
    const id = $(this).data('id');
    $.get("{{ url('master/lokasi/users') }}/" + id, function (res) {
        $('#lokasiUsersTitle').text(`User di Lokasi: ${res.lokasi?.nama_lokasi || '-'}${res.lokasi?.ruangan ? ' | ' + res.lokasi.ruangan : ''}`);
        let rows = (res.users || []).map(function (u, i) {
            return `<tr><td>${i + 1}</td><td>${u.label || '-'}</td><td>${u.jabatan || '-'}</td></tr>`;
        }).join('');
        if (!rows) rows = '<tr><td colspan="3" class="text-center text-muted">Belum ada user aktif di lokasi ini.</td></tr>';
        $('#lokasiUsersBody').html(rows);
        $('#modalLokasiUsers').modal('show');
    });
});

/* DELETE */
$(document).on('click','.delete',function(){
    if(!confirm('Hapus data?')) return;

    $.ajax({
        url:"{{ url('master/lokasi/delete') }}/"+$(this).data('id'),
        type:'DELETE',
        data:{_token:"{{ csrf_token() }}"},
        success:function(){
            table.ajax.reload(null,false);
        }
    });
});

/* INLINE EDIT */
$('#tableLokasi tbody').on('dblclick','td',function(){

    let cell = table.cell(this);
    let row = table.row(this).data();
    let col = cell.index().column;

    // kolom aksi jangan diedit
    if(col >= 4) return;

    let oldValue = cell.data();

    if($(this).find('input,select').length) return;

    if (col === 3) {
        let current = String((row.lantai ?? 0));
        $(this).html(`
            <input class="form-control form-control-sm edit-lantai" list="listLantai" value="${current}">
        `);
        let input = $(this).find('input');
        input.focus().select();

        function saveLantai(){
            let newVal = input.val();
            cell.data(`Lantai ${newVal}`).draw(false);
            $.post("{{ route('lokasi.store') }}",{
                _token:"{{ csrf_token() }}",
                id: row.id,
                lantai: newVal
            });
        }

        input.on('change', saveLantai);
        input.on('keydown', function(e){
            if (e.key === 'Enter') {
                e.preventDefault();
                saveLantai();
            }
        });
        input.on('blur', saveLantai);
        return;
    }

    $(this).html(`
        <input class="form-control form-control-sm edit"
               value="${oldValue}">
    `);

    let input = $(this).find('input');
    input.focus().select();

    function save(){
        let newVal = input.val();
        cell.data(newVal).draw(false);

        let field = ['nama_lokasi','kd_lokasi','ruangan'][col];

        $.post("{{ route('lokasi.store') }}",{
            _token:"{{ csrf_token() }}",
            id: row.id,
            [field]: newVal
        });
    }

    input.on('blur',save);

    input.on('keydown',function(e){
        if(e.key==='Enter'){
            e.preventDefault();
            save();
        }
    });

});

});
</script>
@endpush