<?php 
include 'includes/header.php';
if (isset($_GET['id'])) {
    require_permission('branches_edit');
} else {
    require_permission('branches_add');
}
include '../includes/db.php'; 

// Initialize variables
$branch = [
    'id' => '',
    'name' => '',
    'address' => '',
    'phone' => '',
    'lat' => '30.0444', // Default to Cairo
    'lng' => '31.2357'
];
$page_title = "إضافة فرع جديد";

// Check if this is an edit request
if (isset($_GET['id'])) {
    $branch_id = $_GET['id'];
    $stmt = $conn->prepare("SELECT * FROM branches WHERE id = ?");
    $stmt->bind_param("i", $branch_id);
    $stmt->execute();
    $result = $stmt->get_result();
    if ($result->num_rows === 1) {
        $branch = $result->fetch_assoc();
        $page_title = "تعديل بيانات الفرع";
    } else {
        header("Location: branches.php?error=Branch not found");
        exit();
    }
    $stmt->close();
}
?>
<style>
    #map {
        height: 400px;
        border-radius: 10px;
        margin-bottom: 1rem;
    }
</style>

<h3 class="fs-4 mb-3"><?= $page_title ?></h3>

<div class="row">
    <div class="col">
        <div class="glass-card p-4">
            <form action="branch_process.php" method="POST">
                <input type="hidden" name="id" value="<?= htmlspecialchars($branch['id']) ?>">

                <div class="mb-3">
                    <label for="name" class="form-label">اسم الفرع</label>
                    <input type="text" class="form-control" id="name" name="name" value="<?= htmlspecialchars($branch['name']) ?>" required>
                </div>

                <div class="mb-3">
                    <label for="address" class="form-label">العنوان</label>
                    <input type="text" class="form-control" id="address" name="address" value="<?= htmlspecialchars($branch['address']) ?>">
                </div>

                <div class="mb-3">
                    <label for="phone" class="form-label">رقم الهاتف</label>
                    <input type="text" class="form-control" id="phone" name="phone" value="<?= htmlspecialchars($branch['phone']) ?>">
                </div>

                <!-- Map -->
                <div class="mb-3">
                    <label class="form-label">حدد الموقع على الخريطة</label>
                    <div id="map"></div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="lat" class="form-label">Latitude</label>
                        <input type="text" class="form-control" id="lat" name="lat" value="<?= htmlspecialchars($branch['lat']) ?>" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="lng" class="form-label">Longitude</label>
                        <input type="text" class="form-control" id="lng" name="lng" value="<?= htmlspecialchars($branch['lng']) ?>" required>
                    </div>
                </div>

                <button type="submit" class="btn btn-success mt-3">حفظ البيانات</button>
                <a href="branches.php" class="btn btn-secondary mt-3">إلغاء</a>
            </form>
        </div>
    </div>
</div>

<?php include 'includes/footer.php'; ?>

<script>
    const latInput = document.getElementById('lat');
    const lngInput = document.getElementById('lng');

    // Initialize map
    const map = L.map('map').setView([latInput.value, lngInput.value], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

    // Add a draggable marker
    let marker = L.marker([latInput.value, lngInput.value], { draggable: true }).addTo(map);

    // Update inputs when marker is dragged
    marker.on('dragend', function(e) {
        const latlng = e.target.getLatLng();
        latInput.value = latlng.lat.toFixed(6);
        lngInput.value = latlng.lng.toFixed(6);
    });

    // Update marker when map is clicked
    map.on('click', function(e) {
        const latlng = e.latlng;
        marker.setLatLng(latlng);
        latInput.value = latlng.lat.toFixed(6);
        lngInput.value = latlng.lng.toFixed(6);
    });

    // Listen for changes in input fields to move the marker
    latInput.addEventListener('change', updateMarkerPosition);
    lngInput.addEventListener('change', updateMarkerPosition);

    function updateMarkerPosition() {
        const lat = parseFloat(latInput.value);
        const lng = parseFloat(lngInput.value);
        if (!isNaN(lat) && !isNaN(lng)) {
            marker.setLatLng([lat, lng]);
            map.panTo([lat, lng]);
        }
    }
</script>