@extends('layouts.adminlte')

@section('title', 'MASTER PERKALIAN JAM')
@section('page_title', 'MASTER PERKALIAN JAM')

@push('styles')
<link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
@endpush

@section('content')
<div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="card-title m-0">Master Rule Perkalian Jam</h3>
        <button class="btn btn-primary btn-sm" id="btnAdd"><i class="fas fa-plus me-1"></i>Tambah</button>
    </div>
    <div class="card-body">
        <div class="alert alert-info py-2 mb-3">
            <strong>Cara Baca Rule:</strong><br>
            1) <strong>Jenis Hari</strong> = rule dipakai untuk hari kerja / weekend / hari libur.<br>
            2) <strong>Range Jam Lembur</strong> = jam lembur ke-berapa yang terkena rule (contoh: jam ke-1 s/d 7).<br>
            3) <strong>Faktor</strong> = pengali tarif per jam (contoh 2.00x = tarif sejam dikali 2).<br>
            4) <strong>Holiday Special</strong> = tanggal premium dari master kalender, biasanya full-day x4.<br>
            Rumus nominal: <code>Jam Lembur x Faktor x Tarif Dasar/Jam</code>.
        </div>
        <table id="table" class="table table-striped table-hover w-100">
            <thead>
                <tr>
                    <th>No.</th>
                    <th>Kode</th>
                    <th>Nama</th>
                    <th>Jenis Hari</th>
                    <th>Range Jam Lembur</th>
                    <th>Faktor</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<div class="card">
    <div class="card-header"><h3 class="card-title m-0">Simulasi Perkalian Jam</h3></div>
    <div class="card-body">
        <form id="simulateForm" class="row g-2 align-items-end">
            <div class="col-md-3"><label class="form-label">Rule</label><select id="simulateRuleId" class="form-select" required></select></div>
            <div class="col-md-2"><label class="form-label">Jam</label><input id="simulateHours" type="number" step="0.01" class="form-control" required /></div>
            <div class="col-md-3"><label class="form-label">Tarif Dasar/Jam</label><input id="simulateRate" type="number" step="0.01" class="form-control" required /></div>
            <div class="col-md-2"><button class="btn btn-outline-primary w-100" type="submit">Hitung</button></div>
            <div class="col-md-2"><label class="form-label">Hasil</label><input id="simulateResult" class="form-control" readonly /></div>
        </form>
    </div>
</div>

<div class="modal fade" id="modalForm" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title" id="modalTitle">Tambah Rule Perkalian Jam</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
      <form id="form">
        <div class="modal-body">
            <input type="hidden" id="rowId" />
            <div class="mb-2"><label class="form-label">Kode</label><input id="code" class="form-control" required /></div>
            <div class="mb-2"><label class="form-label">Nama Rule</label><input id="name" class="form-control" required /></div>
            <div class="row g-2">
                <div class="col-md-4"><label class="form-label">Jenis Hari</label>
                    <select id="day_type" class="form-select">
                        <option value="workday">Workday</option>
                        <option value="weekend">Weekend</option>
                        <option value="holiday">Holiday</option>
                        <option value="holiday_special">Holiday Special</option>
                    </select>
                </div>
                <div class="col-md-4"><label class="form-label">Jam Mulai (jam ke-)</label><input id="hour_start" type="number" step="0.01" min="0" max="24" class="form-control" value="1" required /></div>
                <div class="col-md-4"><label class="form-label">Jam Selesai (jam ke-)</label><input id="hour_end" type="number" step="0.01" min="0" max="24" class="form-control" value="1" required /></div>
            </div>
            <div class="mt-2"><label class="form-label">Faktor Perkalian</label><input id="multiplier" type="number" step="0.01" min="0" class="form-control" value="1" required /><small class="text-muted">Contoh: 1.50 = 1,5x tarif dasar per jam.</small></div>
            <div class="mt-2"><label class="form-label">Deskripsi</label><textarea id="description" rows="2" class="form-control"></textarea></div>
            <div class="form-check form-switch mt-2"><input id="is_active" class="form-check-input" type="checkbox" checked /><label class="form-check-label">Active</label></div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Close</button>
            <button class="btn btn-primary" type="submit">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
<script>
$(function(){
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

    const modal = new bootstrap.Modal(document.getElementById('modalForm'));
    let rows = [];
    const dayTypeLabel = (v) => {
        const key = (v || '').toString().toLowerCase();
        if (key === 'workday') return 'Hari Kerja';
        if (key === 'weekend') return 'Weekend';
        if (key === 'holiday') return 'Hari Libur';
        if (key === 'holiday_special') return 'Holiday Special';
        return v || '-';
    };
    const fmtJam = (n) => {
        const x = Number(n || 0);
        return Number.isInteger(x) ? `${x}` : x.toFixed(2);
    };

    const table = $('#table').DataTable({
        data: [],
        columns: [
            {data:null, render:(d,t,r,m)=>m.row+1, orderable:false, searchable:false},
            {data:'code'},
            {data:'name'},
            {data:'day_type', render:(v)=>dayTypeLabel(v)},
            {data:null, render:r=>`Jam ke-${fmtJam(r.hour_start)} s/d ${fmtJam(r.hour_end)}`},
            {data:'multiplier', render:v=>`${Number(v||0).toFixed(2)}x`},
            {data:null, orderable:false, render:(d,t,r)=>`
                <button class="btn btn-sm btn-outline-primary btn-edit" data-id="${r.id}">Edit</button>
                <button class="btn btn-sm btn-outline-danger btn-delete" data-id="${r.id}">Delete</button>
            `}
        ]
    });

    function loadData(){
        $.getJSON('{{ route('master_perkalian_jam.data') }}').done(resp=>{
            rows = resp.data || [];
            table.clear().rows.add(rows).draw();
            $('#simulateRuleId').html(rows.map(r=>`<option value="${r.id}">${r.code} - ${r.name}</option>`).join(''));
        }).fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Failed load data', 'error'));
    }

    $('#btnAdd').on('click', function(){
        $('#modalTitle').text('Tambah Rule Perkalian Jam');
        $('#rowId').val('');
        $('#code').val('');
        $('#name').val('');
        $('#day_type').val('workday');
        $('#hour_start').val('1');
        $('#hour_end').val('1');
        $('#multiplier').val('1');
        $('#description').val('');
        $('#is_active').prop('checked', true);
        modal.show();
    });

    $('#table').on('click', '.btn-edit', function(){
        const id = Number($(this).data('id'));
        const row = rows.find(x=>Number(x.id)===id); if(!row) return;
        $('#modalTitle').text('Edit Rule Perkalian Jam');
        $('#rowId').val(row.id);
        $('#code').val(row.code||'');
        $('#name').val(row.name||'');
        $('#day_type').val(row.day_type||'workday');
        $('#hour_start').val(row.hour_start||'1');
        $('#hour_end').val(row.hour_end||'1');
        $('#multiplier').val(row.multiplier||'1');
        $('#description').val(row.description||'');
        $('#is_active').prop('checked', !!row.is_active);
        modal.show();
    });

    $('#form').on('submit', function(e){
        e.preventDefault();
        const id = $('#rowId').val();
        const payload = {
            code: ($('#code').val()||'').trim(),
            name: ($('#name').val()||'').trim(),
            day_type: $('#day_type').val(),
            hour_start: $('#hour_start').val(),
            hour_end: $('#hour_end').val(),
            multiplier: $('#multiplier').val(),
            description: $('#description').val(),
            is_active: $('#is_active').is(':checked') ? 1 : 0,
        };

        $.ajax({
            url: id ? `{{ url('/master-perkalian-jam') }}/${id}` : '{{ route('master_perkalian_jam.store') }}',
            type: id ? 'PUT' : 'POST',
            data: payload,
        }).done(resp=>{ modal.hide(); loadData(); Swal.fire('Success', resp.message || 'Saved', 'success'); })
        .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
    });

    $('#table').on('click', '.btn-delete', function(){
        const id = Number($(this).data('id'));
        $.ajax({ url:`{{ url('/master-perkalian-jam') }}/${id}`, type:'DELETE' })
            .done(resp=>{ loadData(); Swal.fire('Success', resp.message || 'Deleted', 'success'); })
            .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error'));
    });

    $('#simulateForm').on('submit', function(e){
        e.preventDefault();
        const payload = {
            rule_id: $('#simulateRuleId').val(),
            hours: $('#simulateHours').val(),
            base_rate: $('#simulateRate').val(),
        };
        $.post('{{ route('master_perkalian_jam.simulate') }}', payload)
            .done(resp=> $('#simulateResult').val(resp?.data?.formatted_amount || '0'))
            .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Simulasi gagal', 'error'));
    });

    loadData();
});
</script>
@endpush