<!DOCTYPE html>
<html lang="vi">

<head>
    <?php require_once('head.php');?>
    <title>Hệ Thống | Chỉnh Sửa Mẫu Web</title>
    <?php require_once('nav.php');?>
    
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        body {
            font-family: 'Inter', sans-serif !important;
            letter-spacing: -0.01em;
        }
        .content-wrapper {
            background: #f8fafc !important;
        }
        .premium-card {
            border: none !important;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04) !important;
            border-radius: 16px !important;
            background: #ffffff;
        }
        .premium-card .card-header {
            border-bottom: 1px solid #f1f5f9 !important;
        }
        .form-label-custom {
            font-weight: 600 !important;
            color: #475569 !important;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 8px;
        }
        .form-control {
            border: 1px solid #e2e8f0 !important;
            border-radius: 10px !important;
            padding: 10px 14px !important;
            font-size: 0.9rem !important;
            color: #334155 !important;
            transition: all 0.2s ease-in-out !important;
            height: auto !important;
        }
        .form-control:focus {
            border-color: #4f46e5 !important;
            box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1) !important;
            background-color: #fff !important;
        }
        .input-group-text {
            background-color: #f8fafc !important;
            border: 1px solid #e2e8f0 !important;
            border-radius: 10px 0 0 10px !important;
            color: #64748b;
        }
        .input-group .form-control {
            border-radius: 0 10px 10px 0 !important;
        }
        .btn-modern {
            border-radius: 10px !important;
            padding: 10px 24px;
            font-size: 0.9rem;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        .btn-modern-primary {
            background: #4f46e5;
            border: none;
            color: #fff !important;
        }
        .btn-modern-primary:hover {
            background: #4338ca;
            transform: translateY(-1px);
        }
        .btn-modern-secondary {
            background: #f1f5f9;
            border: none;
            color: #475569 !important;
        }
        .btn-modern-secondary:hover {
            background: #e2e8f0;
            color: #1e293b !important;
        }
    </style>
</head>

<?php
// Lấy dữ liệu an toàn bằng Prepared Statement
$toz_web = [];
if (isset($_GET['id'])) {
    $id = intval($_GET['id']);
    $stmt = $ketnoi->prepare("SELECT * FROM `list_mau_web` WHERE `id` = ?");
    $stmt->bind_param("i", $id);
    $stmt->execute();
    $result = $stmt->get_result();
    $toz_web = $result->fetch_assoc();
    $stmt->close();
}

// Xử lý cập nhật dữ liệu an toàn bằng Prepared Statement
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST["submit"])) {
    $title    = $_POST['title'];
    $mo_ta    = $_POST['mo_ta'];
    $img      = $_POST['img'];
    $list_img = $_POST['list_img'];
    $gia      = $_POST['gia'];
    $gia_han  = $_POST['gia_han'];
    $ns1      = $_POST['ns1'];
    $ns2      = $_POST['ns2'];
    $ip       = $_POST['ip'];
    $status   = $_POST['status'];

    $update_stmt = $ketnoi->prepare("UPDATE `list_mau_web` SET `title` = ?, `mo_ta` = ?, `img` = ?, `list_img` = ?, `gia` = ?, `gia_han` = ?, `ns1` = ?, `ns2` = ?, `ip` = ?, `status` = ? WHERE `id` = ?");
    $update_stmt->bind_param("ssssssssssi", $title, $mo_ta, $img, $list_img, $gia, $gia_han, $ns1, $ns2, $ip, $status, $id);

    if ($update_stmt->execute()) {
        echo '<script>
            document.addEventListener("DOMContentLoaded", function() {
                Swal.fire({
                    icon: "success",
                    title: "Cập Nhật Thành Công",
                    text: "Thông tin mẫu giao diện đã được lưu lại.",
                    timer: 1500,
                    showConfirmButton: false
                }).then(() => {
                    window.location.href = "dsmauweb.php";
                });
            });
        </script>';
    } else {
        echo '<script>
            document.addEventListener("DOMContentLoaded", function() {
                Swal.fire({
                    icon: "error",
                    title: "Có Lỗi Xảy Ra",
                    text: "Lỗi kết nối cơ sở dữ liệu, không thể cập nhật.",
                    confirmButtonText: "Đóng"
                });
            });
        </script>';
    }
    $update_stmt->close();
}
?>

<body class="hold-transition sidebar-mini layout-fixed">
    <div class="wrapper">
        <div class="content-wrapper">
            <div class="content-header">
                <div class="container-fluid">
                    <div class="row mb-3 align-items-center">
                        <div class="col-sm-6">
                            <h1 class="m-0 font-weight-bold text-dark" style="font-size: 1.5rem; letter-spacing: -0.02em;">Cấu Hình Giao Diện</h1>
                        </div>
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-right" style="background: transparent; font-size: 0.85rem;">
                                <li class="breadcrumb-item"><a href="#" class="text-muted">Tổng quan</a></li>
                                <li class="breadcrumb-item"><a href="dsmauweb.php" class="text-muted">Mẫu web</a></li>
                                <li class="breadcrumb-item active text-indigo" style="color: #4f46e5;">Chỉnh sửa</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            <section class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card premium-card">
                                <div class="card-header bg-white py-3">
                                    <h3 class="card-title font-weight-bold text-dark mb-0" style="font-size: 1.1rem;">
                                        <i class="fa-solid fa-pen-to-square text-indigo mr-2" style="color:#4f46e5;"></i> 
                                        Chỉnh sửa mẫu web: <span class="text-muted">#<?= $id; ?></span>
                                    </h3>
                                </div>
                                
                                <div class="card-body p-4">
                                    <?php if (empty($toz_web)): ?>
                                        <div class="alert alert-warning border-0" style="border-radius:10px;">Không tìm thấy dữ liệu mẫu web tương ứng với ID này.</div>
                                    <?php else: ?>
                                        <form role="form" action="" method="post">
                                            <div class="form-group mb-4">
                                                <label class="form-label-custom">Tên Giao Diện (Title)</label>
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text"><i class="fa-solid fa-heading"></i></span>
                                                    </div>
                                                    <input type="text" class="form-control" name="title" required value="<?= htmlspecialchars($toz_web['title'] ?? ''); ?>">
                                                </div>
                                            </div>

                                            <div class="form-group mb-4">
                                                <label class="form-label-custom">Đường dẫn ảnh đại diện (IMG URL)</label>
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text"><i class="fa-solid fa-image"></i></span>
                                                    </div>
                                                    <input type="text" class="form-control" name="img" required value="<?= htmlspecialchars($toz_web['img'] ?? ''); ?>">
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-4 form-group mb-4">
                                                    <label class="form-label-custom">Giá Mua Gốc</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text"><i class="fa-solid fa-money-bill-wave text-success"></i></span>
                                                        </div>
                                                        <input type="text" class="form-control" name="gia" value="<?= htmlspecialchars($toz_web['gia'] ?? ''); ?>">
                                                    </div>
                                                </div>
                                                <div class="col-md-4 form-group mb-4">
                                                    <label class="form-label-custom">Phí Gia Hạn</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text"><i class="fa-solid fa-arrows-rotate text-secondary"></i></span>
                                                        </div>
                                                        <input type="text" class="form-control" name="gia_han" value="<?= htmlspecialchars($toz_web['gia_han'] ?? ''); ?>">
                                                    </div>
                                                </div>
                                                <div class="col-md-4 form-group mb-4">
                                                    <label class="form-label-custom">Trạng Thái Hiển Thị</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text"><i class="fa-solid fa-toggle-on text-indigo"></i></span>
                                                        </div>
                                                        <select class="form-control" name="status">
                                                            <option value="ON" <?= ($toz_web['status'] == 'ON') ? 'selected' : ''; ?>>Bật hiển thị (ON)</option>
                                                            <option value="OFF" <?= ($toz_web['status'] == 'OFF') ? 'selected' : ''; ?>>Tạm ẩn (OFF)</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-4 form-group mb-4">
                                                    <label class="form-label-custom">Nameserver 1 (NS1)</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text"><i class="fa-solid fa-server"></i></span>
                                                        </div>
                                                        <input type="text" class="form-control" name="ns1" value="<?= htmlspecialchars($toz_web['ns1'] ?? ''); ?>">
                                                    </div>
                                                </div>
                                                <div class="col-md-4 form-group mb-4">
                                                    <label class="form-label-custom">Nameserver 2 (NS2)</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text"><i class="fa-solid fa-server"></i></span>
                                                        </div>
                                                        <input type="text" class="form-control" name="ns2" value="<?= htmlspecialchars($toz_web['ns2'] ?? ''); ?>">
                                                    </div>
                                                </div>
                                                <div class="col-md-4 form-group mb-4">
                                                    <label class="form-label-custom">Địa chỉ IP Máy Chủ</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text"><i class="fa-solid fa-network-wired"></i></span>
                                                        </div>
                                                        <input type="text" class="form-control" name="ip" value="<?= htmlspecialchars($toz_web['ip'] ?? ''); ?>">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-group mb-4">
                                                <label class="form-label-custom">Danh sách ảnh mô tả (Mỗi dòng một link ảnh)</label>
                                                <textarea class="form-control" name="list_img" placeholder="https://example.com/image1.png&#10;https://example.com/image2.png" rows="4"><?= htmlspecialchars($toz_web['list_img'] ?? ''); ?></textarea>
                                            </div>

                                            <div class="form-group mb-4">
                                                <label class="form-label-custom">Mô tả giới thiệu chi tiết mẫu web</label>
                                                <textarea class="form-control" name="mo_ta" placeholder="Nhập các đặc điểm nổi bật của mã nguồn..." rows="5"><?= htmlspecialchars($toz_web['mo_ta'] ?? ''); ?></textarea>
                                            </div>

                                            <div class="d-flex justify-content-between align-items-center pt-3 border-top" style="border-top-color: #f1f5f9 !important;">
                                                <a href="dsmauweb.php" class="btn btn-modern btn-modern-secondary">
                                                    <i class="fa-solid fa-arrow-left-long mr-2"></i> Quay lại danh sách
                                                </a>
                                                <button type="submit" name="submit" class="btn btn-modern btn-modern-primary px-4">
                                                    <i class="fa-solid fa-floppy-disk mr-2"></i> Lưu thay đổi
                                                </button>
                                            </div>
                                        </form>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <aside class="control-sidebar control-sidebar-dark"></aside>
    </div>

    <?php require_once('foot.php');?>
</body>

</html>