@extends('admin.layout')

@section('title', 'Layanan dan Biaya')
@section('page-title', 'Layanan dan Biaya')

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12 d-flex justify-content-between align-items-center">
            <div>
                <h1 class="h3 mb-1 text-primary fw-bold">
                    <i class="fas fa-concierge-bell me-2"></i>Layanan dan Biaya
                </h1>
                <p class="text-muted mb-0">Kelola layanan dan biaya tambahan</p>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-7">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-list"></i> Katalog Layanan
                    </h5>
                    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addCatalogModal">
                        <i class="fas fa-plus"></i> Tambah Layanan
                    </button>
                </div>
                <div class="card-body">
                    <div id="catalogList"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-5">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-bed"></i> Extra Bed
                    </h5>
                </div>
                <div class="card-body">
                    <form id="extraBedForm">
                        <div class="mb-3">
                            <label for="extraBedName" class="form-label">Nama Layanan</label>
                            <input type="text" class="form-control" id="extraBedName" name="name" value="{{ $settings['extra_bed_name'] ?? 'Extra Bed' }}" required>
                        </div>
                        <div class="mb-3">
                            <label for="extraBedPrice" class="form-label">Harga per malam</label>
                            <input type="number" class="form-control" id="extraBedPrice" name="price" min="0" value="{{ (int)($settings['extra_bed_price'] ?? 150000) }}" required>
                            <div class="form-text">Harga akan dikalikan jumlah malam secara otomatis saat ditambahkan.</div>
                        </div>
                        <hr>
                        <div class="mb-3">
                            <label for="lateCheckoutCharge" class="form-label">Charge Keterlambatan Checkout (>1 jam)</label>
                            <input type="number" class="form-control" id="lateCheckoutCharge" name="late_checkout_charge" min="0" value="{{ (int)($settings['late_checkout_charge'] ?? 100000) }}">
                            <div class="form-text">Dikenakan jika checkout lebih dari 1 jam setelah batas checkout.</div>
                        </div>
                        <div class="mb-3">
                            <label for="lateCheckoutExtendCutoff" class="form-label">Batas Extend Checkout (HH:MM)</label>
                            <input type="time" class="form-control" id="lateCheckoutExtendCutoff" name="late_checkout_extend_cutoff" value="{{ $settings['late_checkout_extend_cutoff'] ?? '15:00' }}">
                            <div class="form-text">Jika melewati jam ini pada hari checkout, dianggap extend 1 malam.</div>
                        </div>
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-save"></i> Simpan
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="addCatalogModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-plus"></i> Tambah Layanan Kamar</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="addCatalogForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="catalogName" class="form-label">Nama Layanan</label>
                        <input type="text" class="form-control" id="catalogName" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="catalogPrice" class="form-label">Harga</label>
                        <input type="number" class="form-control" id="catalogPrice" name="price" min="0" required>
                    </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"><i class="fas fa-save"></i> Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function showAlert(type, message) {
        const alertHtml = `
            <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
        const container = document.querySelector('.container-fluid');
        container.insertAdjacentHTML('afterbegin', alertHtml);
        setTimeout(() => {
            const alert = document.querySelector('.alert');
            if (alert) {
                const bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            }
        }, 4000);
    }

    function loadCatalog() {
        fetch('{{ url('/') }}/api/room-service-catalog')
            .then(r => r.json())
            .then(result => {
                const list = result.data || [];
                const container = document.getElementById('catalogList');
                if (list.length === 0) {
                    container.innerHTML = '<p class="text-muted mb-0">Belum ada layanan dalam katalog.</p>';
                    return;
                }
                let html = '';
                list.forEach(item => {
                    const price = parseFloat(item.price || 0);
                    html += `
                        <div class="d-flex justify-content-between align-items-center p-3 border rounded mb-2">
                            <div>
                                <h6 class="mb-1">${item.name}</h6>
                                <small class="text-muted">Harga: Rp ${price.toLocaleString('id-ID')}</small>
                            </div>
                            <div class="btn-group">
                                <button class="btn btn-sm btn-outline-danger" onclick="deleteCatalogItem('${encodeURIComponent(item.name)}')">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    `;
                });
                container.innerHTML = html;
            })
            .catch(() => showAlert('danger', 'Gagal memuat katalog layanan'));
    }

    function deleteCatalogItem(encodedName) {
        const name = decodeURIComponent(encodedName);
        if (!confirm(`Hapus layanan "${name}" dari katalog?`)) return;
        fetch(`{{ url('/') }}/api/room-service-catalog/${encodeURIComponent(name)}`, {
            method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content') }
        }).then(r => r.json())
         .then(result => {
            if (result.success) {
                showAlert('success', result.message || 'Layanan dihapus');
                loadCatalog();
            } else {
                showAlert('danger', result.message || 'Gagal menghapus layanan');
            }
         })
         .catch(() => showAlert('danger', 'Terjadi kesalahan saat menghapus layanan'));
    }

    document.getElementById('addCatalogForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const fd = new FormData(this);
        const payload = { name: fd.get('name'), price: parseFloat(fd.get('price') || '0') || 0 };
        if (!payload.name || payload.price <= 0) { showAlert('danger', 'Nama dan harga harus valid'); return; }
        fetch('{{ url('/') }}/api/room-service-catalog', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content') },
            body: JSON.stringify(payload)
        }).then(r => r.json())
         .then(result => {
            if (result.success) {
                showAlert('success', result.message || 'Layanan disimpan');
                bootstrap.Modal.getInstance(document.getElementById('addCatalogModal')).hide();
                this.reset();
                loadCatalog();
            } else {
                showAlert('danger', result.message || 'Gagal menyimpan layanan');
            }
         })
         .catch(() => showAlert('danger', 'Terjadi kesalahan saat menyimpan layanan'));
    });

    document.getElementById('extraBedForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const fd = new FormData(this);
        const payload = { 
            name: fd.get('name'), 
            price: parseFloat(fd.get('price') || '0') || 0,
            late_checkout_charge: parseFloat(fd.get('late_checkout_charge') || '0') || 0,
            late_checkout_extend_cutoff: fd.get('late_checkout_extend_cutoff') || null
        };
        if (!payload.name || payload.price <= 0) { showAlert('danger', 'Nama dan harga Extra Bed harus valid'); return; }
        fetch('{{ url('/') }}/api/room-service-extra-bed', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content') },
            body: JSON.stringify(payload)
        }).then(r => r.json())
         .then(result => {
            if (result.success) {
                showAlert('success', result.message || 'Pengaturan Extra Bed disimpan');
            } else {
                showAlert('danger', result.message || 'Gagal menyimpan Extra Bed');
            }
         })
         .catch(() => showAlert('danger', 'Terjadi kesalahan saat menyimpan Extra Bed'));
    });

    document.addEventListener('DOMContentLoaded', function() {
        loadCatalog();
        fetch('{{ url('/') }}/api/room-service-extra-bed')
            .then(r => r.json())
            .then(result => {
                const data = result.data || {};
                const nameEl = document.getElementById('extraBedName');
                const priceEl = document.getElementById('extraBedPrice');
                const lateChargeEl = document.getElementById('lateCheckoutCharge');
                const extendCutoffEl = document.getElementById('lateCheckoutExtendCutoff');
                if (data.name && nameEl) nameEl.value = data.name;
                if (data.price != null && priceEl) priceEl.value = parseInt(data.price);
                if (data.late_checkout_charge != null && lateChargeEl) lateChargeEl.value = parseInt(data.late_checkout_charge);
                if (data.late_checkout_extend_cutoff && extendCutoffEl) extendCutoffEl.value = data.late_checkout_extend_cutoff;
            })
            .catch(() => {});
    });
</script>
@endsection