@extends('layouts.admin.app')

@section('title', 'System Settings')

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

    <h1 class="h3 mb-3">System Settings</h1>

    <div class="card">
        <div class="card-body">

            <form id="settingsForm"
                  method="POST"
                  action="{{ route('admin.settings.update') }}"
                  enctype="multipart/form-data">
                @csrf

                <div class="row">
                    <!-- Site Info -->
                    <div class="col-md-6 mb-3">
                        <label>Site Name</label>
                        <input type="text" name="site_name" class="form-control"
                               value="{{ $settings['site_name'] ?? '' }}">
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Contact Email</label>
                        <input type="email" name="contact_email" class="form-control"
                               value="{{ $settings['contact_email'] ?? '' }}">
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Contact Phone</label>
                        <input type="text" name="contact_phone" class="form-control"
                               value="{{ $settings['contact_phone'] ?? '' }}">
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Opening Hours</label>
                        <input type="text" name="opening_hours" class="form-control"
                               value="{{ $settings['opening_hours'] ?? '' }}">
                    </div>

                    <div class="col-md-12 mb-3">
                        <label>Address</label>
                        <textarea name="address" class="form-control" rows="3">{{ $settings['address'] ?? '' }}</textarea>
                    </div>

                    <!-- Map -->
                    <div class="col-md-6 mb-3">
                        <label>Latitude</label>
                        <input type="text" name="latitude" class="form-control"
                               value="{{ $settings['latitude'] ?? '' }}">
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Longitude</label>
                        <input type="text" name="longitude" class="form-control"
                               value="{{ $settings['longitude'] ?? '' }}">
                    </div>

                    <!-- ================= SYSTEM FEE SETTINGS ================= -->
                    <div class="col-md-6 mb-3">
                        <label>Jenis Biaya Admin</label>
                        <select name="system_fee_type" class="form-control">
                            <option value="percent"
                                {{ ($settings['system_fee_type'] ?? 'percent') == 'percent' ? 'selected' : '' }}>
                                Persentase (%)
                            </option>
                            <option value="fixed"
                                {{ ($settings['system_fee_type'] ?? '') == 'fixed' ? 'selected' : '' }}>
                                Nominal Tetap (Rp)
                            </option>
                        </select>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Nilai Biaya Admin</label>
                        <input type="number" step="0.01"
                            name="system_fee_value"
                            class="form-control"
                            value="{{ $settings['system_fee_value'] ?? 2 }}">
                        <small class="text-muted">
                            Jika persen → isi angka persen (contoh: 2)  
                            Jika nominal → isi angka rupiah (contoh: 5000)
                        </small>
                    </div>
                    <!-- ====================================================== -->


                    <!-- Site Logo -->
                    <div class="col-md-6 mb-3">
                        <label>Site Logo</label>
                        <input type="file" name="site_logo" class="form-control">
                        @if(isset($settings['site_logo']))
                            <img src="{{ asset($settings['site_logo']) }}" height="50" class="mt-2">
                        @endif
                    </div>

                    <!-- Favicon -->
                    <div class="col-md-6 mb-3">
                        <label>Favicon</label>
                        <input type="file" name="site_favicon" class="form-control">
                        @if(isset($settings['site_favicon']))
                            <img src="{{ asset($settings['site_favicon']) }}" height="32" class="mt-2">
                        @endif
                    </div>

                    <!-- APK Upload -->
                    <div class="col-md-6 mb-3">
                        <label>Upload File APK (Aplikasi Android)</label>
                        <input type="file"
                            name="apk_file"
                            id="apkFile"
                            class="form-control"
                            accept=".apk">

                        @if(isset($settings['apk_file']) && $settings['apk_file'])
                            <small class="text-muted d-block mt-2">
                                File APK saat ini :
                                <a href="{{ asset($settings['apk_file']) }}" target="_blank">
                                    Download APK
                                </a>
                            </small>
                        @endif

                        <!-- Progress Bar -->
                        <div class="progress mt-3" style="height:18px; display:none;" id="uploadProgressBox">
                            <div id="uploadProgressBar"
                                 class="progress-bar progress-bar-striped progress-bar-animated"
                                 role="progressbar"
                                 style="width:0%">0%</div>
                        </div>
                    </div>

                </div>

                <button class="btn btn-primary" id="btnSubmit">
                    <i data-feather="save"></i> Simpan Pengaturan
                </button>
            </form>

        </div>
    </div>
</div>

{{-- ================= UPLOAD PROGRESS SCRIPT ================= --}}
<script>
document.getElementById('settingsForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const form = this;
    const formData = new FormData(form);
    const progressBox = document.getElementById('uploadProgressBox');
    const progressBar = document.getElementById('uploadProgressBar');
    const submitBtn = document.getElementById('btnSubmit');

    progressBox.style.display = 'block';
    submitBtn.disabled = true;
    submitBtn.innerText = 'Uploading...';

    const xhr = new XMLHttpRequest();
    xhr.open("POST", form.action, true);
    xhr.setRequestHeader("X-CSRF-TOKEN", "{{ csrf_token() }}");

    xhr.upload.addEventListener("progress", function(e) {
        if (e.lengthComputable) {
            let percent = Math.round((e.loaded / e.total) * 100);
            progressBar.style.width = percent + "%";
            progressBar.innerText = percent + "%";
        }
    });

    xhr.onload = function() {
        if (xhr.status === 200) {
            progressBar.classList.remove('progress-bar-animated');
            progressBar.classList.add('bg-success');
            progressBar.innerText = "Upload Selesai ✓";
            setTimeout(()=> location.reload(), 800);
        } else {
            alert("Upload gagal. Coba lagi.");
            submitBtn.disabled = false;
        }
    };

    xhr.send(formData);
});
</script>

@endsection