@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 Tarif Stiker</h4>
        <button type="button" class="btn btn-primary" id="btnTambah">
            + Tambah Tarif Stiker
        </button>
    </div>

    <div class="table-responsive">
        <table class="table table-bordered table-hover align-middle" id="tabelTarifStiker">
            <thead class="table-light">
                <tr>
                    <th id="thTarifId" role="button" style="cursor:pointer; user-select:none; white-space:nowrap;">
                        Tarif ID <span id="sortIconTarifId">▼</span>
                    </th>
                    <th>ID Mobil</th>
                    <th>Jenis Langganan</th>
                    <th>Tarif</th>
                    <th>Jenis</th>
                    <th>Jenis Member</th>
                    <th>Langganan (Stasiun Kerja)</th>
                    <th>Online</th>
                    <th>Kode Akses</th>
                    <th style="width: 130px;">Aksi</th>
                </tr>
            </thead>
            <tbody id="tbodyTarifStiker">
                {{-- diisi lewat JS --}}
            </tbody>
        </table>
    </div>

</div>

{{-- ===================== MODAL FORM ===================== --}}
<div class="modal fade" id="modalTarifStiker" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="formTarifStiker">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTarifStikerTitle">Tambah Tarif Stiker</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="inputTarifIdOriginal" value="">

                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Tarif ID</label>
                            <input type="number" class="form-control" id="inputTarifId" placeholder="Kosongkan untuk auto">
                            <div class="form-text">Kosongkan saat tambah data baru, akan digenerate otomatis.</div>
                            <div class="invalid-feedback" data-error-for="tarif_id"></div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">ID Mobil <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="inputIdMobil" maxlength="10" required>
                            <div class="invalid-feedback" data-error-for="id_mobil"></div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Tarif <span class="text-danger">*</span></label>
                            <input type="number" step="0.01" class="form-control" id="inputTarif" required>
                            <div class="invalid-feedback" data-error-for="tarif"></div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Jenis Langganan <span class="text-danger">*</span></label>
                            <select class="form-select" id="inputJenisLangganan" required>
                                <option value="">-- Pilih Jenis Langganan --</option>
                                @foreach ($jenisLanggananList as $jl)
                                    <option value="{{ $jl->id }}">{{ $jl->nama }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback" data-error-for="jenis_langganan"></div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Langganan (Stasiun Kerja)</label>
                            <select class="form-select" id="inputLangganan">
                                <option value="">-- Tidak terikat stasiun kerja --</option>
                                @foreach ($stasiunKerjaList as $sk)
                                    <option value="{{ $sk->kode }}">{{ $sk->nama }} ({{ $sk->kode }})</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback" data-error-for="langganan"></div>
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Jenis</label>
                            <input type="text" class="form-control" id="inputJenis" maxlength="30">
                            <div class="invalid-feedback" data-error-for="jenis"></div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Jenis Member</label>
                            <input type="text" class="form-control" id="inputJenisMember" maxlength="50">
                            <div class="invalid-feedback" data-error-for="jenis_member"></div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Last Member</label>
                            <input type="text" class="form-control" id="inputLastMember" maxlength="5">
                            <div class="invalid-feedback" data-error-for="last_member"></div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Tgl Akhir</label>
                            <input type="text" class="form-control" id="inputTglAkhir" maxlength="2">
                            <div class="invalid-feedback" data-error-for="tgl_akhir"></div>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Hitung Awal Bulan</label>
                            <input type="number" class="form-control" id="inputHitungAwalBulan">
                            <div class="invalid-feedback" data-error-for="hitung_awal_bulan"></div>
                        </div>
                        <div class="col-md-4">
                            <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 d-flex align-items-end">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="inputAvailableOnline">
                                <label class="form-check-label" for="inputAvailableOnline">
                                    Tersedia Online
                                </label>
                            </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>
    window.TARIFSTIKER_ENDPOINT = "{{ url('/setup/master/tarif-stiker') }}";
</script>
<script src="{{ asset('js/setup/tarifstiker.js') }}"></script>
@endsection