@extends('layouts.master') {{-- sesuaikan dengan layout master project kamu --}}

@section('content')
<div class="container-fluid py-4">

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">Data Stasiun Kerja</h4>
        <button type="button" class="btn btn-primary" id="btnTambah">
            + Tambah Stasiun Kerja
        </button>
    </div>

    <div class="table-responsive">
        <table class="table table-bordered table-hover align-middle" id="tabelStasiunKerja">
            <thead class="table-light">
                <tr>
                    <th>Kode</th>
                    <th>Nama</th>
                    <th>Margin</th>
                    <th>SPV</th>
                    <th>Target</th>
                    <th>Lokasi</th>
                    <th>Lantai</th>
                    <th>Status</th>
                    <th>Alamat</th>
                    <th>Bank</th>
                    <th>Telp</th>
                    <th>Kode Akses</th>
                    <th style="width: 130px;">Aksi</th>
                </tr>
            </thead>
            <tbody id="tbodyStasiunKerja">
                {{-- diisi lewat JS --}}
            </tbody>
        </table>
    </div>

</div>

{{-- ===================== MODAL FORM ===================== --}}
<div class="modal fade" id="modalStasiunKerja" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="formStasiunKerja">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalStasiunKerjaTitle">Tambah Stasiun Kerja</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <input type="hidden" id="inputMode" value="create">
                    <input type="hidden" id="inputKodeOriginal" value="">

                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Kode <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="inputKode" maxlength="50" required>
                            <div class="invalid-feedback" data-error-for="kode"></div>
                        </div>
                        <div class="col-md-8">
                            <label class="form-label">Nama <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="inputNama" maxlength="255" required>
                            <div class="invalid-feedback" data-error-for="nama"></div>
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Margin</label>
                            <input type="number" class="form-control" id="inputMargin">
                            <div class="invalid-feedback" data-error-for="margin"></div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Target</label>
                            <input type="number" class="form-control" id="inputTarget">
                            <div class="invalid-feedback" data-error-for="target"></div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Status</label>
                            <select class="form-select" id="inputStatus">
                                <option value="1">Aktif</option>
                                <option value="0">Nonaktif</option>
                            </select>
                            <div class="invalid-feedback" data-error-for="status"></div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Kode Akses</label>
                            <input type="text" class="form-control" id="inputKodeAkses" maxlength="5">
                            <div class="invalid-feedback" data-error-for="kode_akses"></div>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">SPV</label>
                            <input type="text" class="form-control" id="inputSpv" maxlength="20">
                            <div class="invalid-feedback" data-error-for="spv"></div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">ID Lokasi</label>
                            <input type="text" class="form-control" id="inputIdLokasi" maxlength="10">
                            <div class="invalid-feedback" data-error-for="id_lokasi"></div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Lantai</label>
                            <input type="text" class="form-control" id="inputLantai" maxlength="4">
                            <div class="invalid-feedback" data-error-for="lantai"></div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Bank</label>
                            <input type="text" class="form-control" id="inputBank" maxlength="64">
                            <div class="invalid-feedback" data-error-for="bank"></div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Telp</label>
                            <input type="text" class="form-control" id="inputTelp" maxlength="32">
                            <div class="invalid-feedback" data-error-for="telp"></div>
                        </div>

                        <div class="col-md-12">
                            <label class="form-label">Alamat</label>
                            <textarea class="form-control" id="inputAlamat" rows="2" maxlength="255"></textarea>
                            <div class="invalid-feedback" data-error-for="alamat"></div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary" id="btnSimpan">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('javascript')
<script>
    // Endpoint diambil dari Laravel route(), disuntik ke JS supaya
    // tidak hardcode URL (menghindari masalah beda host/port seperti sebelumnya).
    window.STASIUNKERJA_ENDPOINT = "{{ url('/setup/master/stasiunkerja') }}";
</script>
<script src="{{ asset('vendor/sweetalert2/dist/sweetalert2.min.js') }}"></script>
<script src="{{ asset('js/setup/stasiunkerja.js') }}"></script>
@endsection