@extends('layouts.app')

@section('page_title', 'System Parameters')

@section('content')
    <div class="card-header border-0 bg-transparent py-2">
        <h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">System Parameters</h5>
    </div>
    <div class="row justify-content-center">
        <div class="card-body p-3">
            <form id="systemParametersForm">
                <!-- Company Logo -->
                <h4 class="fw-bold mb-3 mt-4">Company Logo</h4>
                <div class="mb-3">
                    <label for="companyLogo" class="form-label">Upload Logo</label>
                    <input type="file" class="form-control" id="companyLogo" accept=".jpg,.jpeg,.png">
                </div>

                <!-- GPS Radius -->
                <h4 class="fw-bold mb-3 mt-4">GPS Radius</h4>
                <div class="mb-3">
                    <label for="gpsRadius" class="form-label">GPS Radius (in meters)</label>
                    <input type="number" class="form-control" id="gpsRadius" min="0" placeholder="Enter radius" required>
                </div>

                <!-- Customer Service Details -->
                <h4 class="fw-bold mb-3 mt-4">Customer Service Details</h4>
                <div class="mb-3">
                    <label for="contactEmail" class="form-label">Contact Email Address</label>
                    <input type="email" class="form-control" id="contactEmail" placeholder="Enter email" required>
                </div>
                <div class="mb-3">
                    <label for="contactNumber" class="form-label">Contact Number</label>
                    <input type="tel" class="form-control" id="contactNumber" placeholder="Enter number" required>
                </div>

                <!-- System Administrator Details -->
                <h4 class="fw-bold mb-3 mt-4">System Administrator Details</h4>
                <div class="mb-3">
                    <label for="adminContact" class="form-label">Contact Details</label>
                    <textarea class="form-control" id="adminContact" rows="4" placeholder="Enter details" required></textarea>
                </div>

                <!-- Information Guide Details -->
                <h4 class="fw-bold mb-3 mt-4">Information Guide Details</h4>
                <div class="mb-3">
                    <label for="infoGuideDetails" class="form-label">Details</label>
                    <textarea class="form-control" id="infoGuideDetails" rows="4" placeholder="Enter details" required></textarea>
                </div>

                <!-- Android Version Update -->
                <h4 class="fw-bold mb-3 mt-4">Android Version Update</h4>
                <div class="mb-3">
                    <label for="androidVersion" class="form-label">Android Version</label>
                    <input type="text" class="form-control" id="androidVersion" placeholder="e.g., 1.0.0" required>
                </div>
                <div class="mb-3">
                    <label for="androidVersionMessage" class="form-label">Version Update Message</label>
                    <textarea class="form-control" id="androidVersionMessage" rows="4" placeholder="Enter message" required></textarea>
                </div>
                <div class="mb-3">
                    <label for="androidVersionAction" class="form-label">Version Action</label>
                    <select class="form-select" id="androidVersionAction" required>
                        <option value="" disabled selected>Select action</option>
                        <option value="Force Update">Force Update</option>
                        <option value="Optional Update">Optional Update</option>
                    </select>
                </div>

                <!-- iOS Version Update -->
                <h4 class="fw-bold mb-3 mt-4">iOS Version Update</h4>
                <div class="mb-3">
                    <label for="iosVersion" class="form-label">iOS Version</label>
                    <input type="text" class="form-control" id="iosVersion" placeholder="e.g., 1.0.0" required>
                </div>
                <div class="mb-3">
                    <label for="iosVersionMessage" class="form-label">Version Update Message</label>
                    <textarea class="form-control" id="iosVersionMessage" rows="4" placeholder="Enter message" required></textarea>
                </div>
                <div class="mb-3">
                    <label for="iosVersionAction" class="form-label">Version Action</label>
                    <select class="form-select" id="iosVersionAction" required>
                        <option value="" disabled selected>Select action</option>
                        <option value="Force Update">Force Update</option>
                        <option value="Optional Update">Optional Update</option>
                    </select>
                </div>

                <!-- Update Details -->
                <h4 class="fw-bold mb-3 mt-4">Update Details</h4>
                <div class="mb-3">
                    <button type="button" class="btn btn-primary" id="syncData">Sync Data</button>
                </div>

                <!-- Submit -->
                <div class="d-flex justify-content-end mt-4">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>

    <style>
        .card {
            border-radius: 5px;
            border: 1px solid #dee2e6;
        }
        .form-label {
            font-size: 0.95rem;
        }
        .form-control,
        .form-select,
        textarea.form-control {
            font-size: 0.9rem;
            width: 100%;
        }
        h4 {
            color: #343a40;
        }
    </style>

    <script>
        document.getElementById('systemParametersForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const fields = {
                companyLogo: document.getElementById('companyLogo').files[0]?.name || '',
                gpsRadius: document.getElementById('gpsRadius').value,
                contactEmail: document.getElementById('contactEmail').value,
                contactNumber: document.getElementById('contactNumber').value,
                adminContact: document.getElementById('adminContact').value,
                infoGuideDetails: document.getElementById('infoGuideDetails').value,
                androidVersion: document.getElementById('androidVersion').value,
                androidVersionMessage: document.getElementById('androidVersionMessage').value,
                androidVersionAction: document.getElementById('androidVersionAction').value,
                iosVersion: document.getElementById('iosVersion').value,
                iosVersionMessage: document.getElementById('iosVersionMessage').value,
                iosVersionAction: document.getElementById('iosVersionAction').value
            };

            // Validate required fields (exclude companyLogo)
            for (const [key, value] of Object.entries(fields)) {
                if (key !== 'companyLogo' && !value) {
                    alert('Please fill out all required fields.');
                    return;
                }
            }

            // Validate email format
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailPattern.test(fields.contactEmail)) {
                alert('Please enter a valid email address.');
                return;
            }

            sessionStorage.setItem('systemParameters', JSON.stringify(fields));
            alert('Settings saved successfully!');
        });

        document.getElementById('syncData').addEventListener('click', function() {
            alert('Data synced!');
        });

        document.querySelector('.btn-outline-secondary').addEventListener('click', function() {
            window.location.href = '/';
        });

        // Load saved data
        const savedData = JSON.parse(sessionStorage.getItem('systemParameters') || '{}');
        if (savedData) {
            document.getElementById('gpsRadius').value = savedData.gpsRadius || '';
            document.getElementById('contactEmail').value = savedData.contactEmail || '';
            document.getElementById('contactNumber').value = savedData.contactNumber || '';
            document.getElementById('adminContact').value = savedData.adminContact || '';
            document.getElementById('infoGuideDetails').value = savedData.infoGuideDetails || '';
            document.getElementById('androidVersion').value = savedData.androidVersion || '';
            document.getElementById('androidVersionMessage').value = savedData.androidVersionMessage || '';
            document.getElementById('androidVersionAction').value = savedData.androidVersionAction || '';
            document.getElementById('iosVersion').value = savedData.iosVersion || '';
            document.getElementById('iosVersionMessage').value = savedData.iosVersionMessage || '';
            document.getElementById('iosVersionAction').value = savedData.iosVersionAction || '';
        }
    </script>
@endsection