309 lines
19 KiB
Text
309 lines
19 KiB
Text
@model QuestionnaireViewModel
|
|
|
|
@{
|
|
ViewData["Title"] = "Delete Questionnaire";
|
|
var totalAnswers = Model.Questions?.Sum(q => q.Answers?.Count ?? 0) ?? 0;
|
|
var otherCount = Model.Questions?.Count(q => q.Answers != null && q.Answers.Any(a => a.IsOtherOption)) ?? 0;
|
|
var qCount = Model.Questions?.Count ?? 0;
|
|
}
|
|
|
|
<style>
|
|
@@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
|
:root {
|
|
--bg:#0f1923;--bg-card:#1a2332;--bg-elevated:#1f2b3d;--bg-input:#16202e;
|
|
--text-primary:#e8edf2;--text-secondary:#9ba8b9;--text-muted:#5e6e82;--text-faint:#3d4e63;
|
|
--teal:#33b3ae;--teal-soft:rgba(51,179,174,0.1);
|
|
--red:#ef4444;--red-soft:rgba(239,68,68,0.08);--red-medium:rgba(239,68,68,0.15);--red-border:rgba(239,68,68,0.3);--red-dark:#dc2626;
|
|
--amber:#f59e0b;--amber-soft:rgba(245,158,11,0.08);--amber-border:rgba(245,158,11,0.3);
|
|
--info:#06b6d4;--info-soft:rgba(6,182,212,0.1);--info-border:rgba(6,182,212,0.3);
|
|
--green:#10b981;--green-soft:rgba(16,185,129,0.1);--green-border:rgba(16,185,129,0.3);
|
|
--border:rgba(255,255,255,0.06);--border-light:rgba(255,255,255,0.04);
|
|
--shadow-sm:0 2px 8px rgba(0,0,0,0.25);--shadow-md:0 4px 16px rgba(0,0,0,0.3);--shadow-lg:0 8px 32px rgba(0,0,0,0.35);
|
|
--radius-sm:8px;--radius-md:12px;--radius-lg:16px;
|
|
--transition:all 0.2s cubic-bezier(0.4,0,0.2,1);
|
|
}
|
|
@@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
|
|
@@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}
|
|
@@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-4px)}20%,40%,60%,80%{transform:translateX(4px)}}
|
|
*{box-sizing:border-box}
|
|
|
|
.delete-page{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);min-height:100vh;padding:32px 40px 80px;-webkit-font-smoothing:antialiased;color:var(--text-primary)}
|
|
|
|
/* ===== PAGE HEADER ===== */
|
|
.page-top{max-width:900px;margin:0 auto 28px;animation:slideUp .5s ease both}
|
|
.page-breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);margin-bottom:16px}
|
|
.page-breadcrumb a{color:var(--text-muted);text-decoration:none;transition:var(--transition)}
|
|
.page-breadcrumb a:hover{color:var(--teal)}
|
|
.page-breadcrumb .sep{color:var(--text-faint)}
|
|
.page-title-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
|
|
.page-title{font-size:28px;font-weight:700;color:var(--text-primary);letter-spacing:-0.5px;margin:0;display:flex;align-items:center;gap:14px}
|
|
.page-title-icon{width:44px;height:44px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--red),var(--red-dark));display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;box-shadow:0 4px 20px rgba(239,68,68,0.3)}
|
|
.btn-back{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;background:var(--bg-card);color:var(--text-secondary);border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;transition:var(--transition);text-decoration:none}
|
|
.btn-back:hover{background:var(--bg-elevated);border-color:rgba(255,255,255,0.1);color:var(--text-primary);text-decoration:none}
|
|
|
|
/* ===== DANGER BANNER ===== */
|
|
.danger-banner{max-width:900px;margin:0 auto 24px;background:linear-gradient(135deg,rgba(239,68,68,0.08),rgba(220,38,38,0.04));border:1.5px solid var(--red-border);border-radius:var(--radius-lg);padding:24px 28px;animation:slideUp .5s ease .06s both;position:relative;overflow:hidden}
|
|
.danger-banner::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),var(--red-dark),var(--red))}
|
|
.danger-banner-inner{display:flex;align-items:flex-start;gap:16px}
|
|
.danger-banner-icon{width:44px;height:44px;border-radius:var(--radius-md);background:var(--red-medium);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--red);flex-shrink:0}
|
|
.danger-banner-content h3{font-size:16px;font-weight:700;color:var(--red);margin:0 0 10px}
|
|
.danger-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
|
|
.danger-list li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);font-weight:500}
|
|
.danger-list li i{color:var(--red);font-size:12px;flex-shrink:0}
|
|
|
|
/* ===== INFO CARD ===== */
|
|
.info-card{max-width:900px;margin:0 auto 24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);animation:slideUp .5s ease .12s both;transition:var(--transition)}
|
|
.info-card:hover{box-shadow:var(--shadow-md);border-color:rgba(255,255,255,0.08)}
|
|
.info-card-header{display:flex;align-items:center;gap:12px;padding:22px 28px;border-bottom:1px solid var(--border-light)}
|
|
.info-card-icon{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff}
|
|
.info-card-icon.info-blue{background:var(--info)}
|
|
.info-card-title{font-size:16px;font-weight:700;color:var(--text-primary);margin:0}
|
|
.info-card-body{padding:24px 28px}
|
|
|
|
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
|
|
.detail-item{padding:16px 20px;background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:var(--radius-sm);transition:var(--transition)}
|
|
.detail-item:hover{border-color:rgba(255,255,255,0.08)}
|
|
.detail-item.full{grid-column:1/-1}
|
|
.detail-label{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:8px;display:flex;align-items:center;gap:6px}
|
|
.detail-label i{font-size:12px;color:var(--teal)}
|
|
.detail-value{font-size:15px;font-weight:600;color:var(--text-primary);line-height:1.4;word-break:break-word}
|
|
.detail-value.id-val{color:var(--teal);font-family:'JetBrains Mono',monospace}
|
|
.detail-value.desc-val{font-size:14px;font-weight:400;color:var(--text-secondary);line-height:1.7}
|
|
.empty-desc{color:var(--text-faint);font-style:italic}
|
|
|
|
/* ===== STATS BAR ===== */
|
|
.stats-bar{max-width:900px;margin:0 auto 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;animation:slideUp .5s ease .18s both}
|
|
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px 24px;text-align:center;transition:var(--transition);position:relative;overflow:hidden}
|
|
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:3px 3px 0 0}
|
|
.stat-card:nth-child(1)::before{background:var(--red)}
|
|
.stat-card:nth-child(2)::before{background:var(--amber)}
|
|
.stat-card:nth-child(3)::before{background:var(--info)}
|
|
.stat-card:hover{box-shadow:var(--shadow-sm);border-color:rgba(255,255,255,0.1);transform:translateY(-2px)}
|
|
.stat-number{font-size:32px;font-weight:800;line-height:1;margin-bottom:6px}
|
|
.stat-card:nth-child(1) .stat-number{color:var(--red)}
|
|
.stat-card:nth-child(2) .stat-number{color:var(--amber)}
|
|
.stat-card:nth-child(3) .stat-number{color:var(--info)}
|
|
.stat-label{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.6px}
|
|
|
|
/* ===== ACTION ROW ===== */
|
|
.action-row{max-width:900px;margin:0 auto;animation:slideUp .5s ease .24s both}
|
|
.action-card{background:var(--bg-card);border:1.5px solid var(--red-border);border-radius:var(--radius-lg);padding:28px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
|
|
.action-info{display:flex;align-items:center;gap:14px}
|
|
.action-icon{width:48px;height:48px;border-radius:var(--radius-md);background:var(--red-medium);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--red);flex-shrink:0;animation:pulse 2s ease infinite}
|
|
.action-text h3{font-size:16px;font-weight:700;color:var(--text-primary);margin:0 0 4px}
|
|
.action-text p{font-size:13px;color:var(--text-muted);margin:0}
|
|
.action-btns{display:flex;gap:12px}
|
|
|
|
.btn-delete{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:var(--transition);box-shadow:0 4px 20px rgba(239,68,68,0.25);text-decoration:none}
|
|
.btn-delete:hover{background:linear-gradient(135deg,var(--red-dark),#b91c1c);transform:translateY(-2px);box-shadow:0 8px 28px rgba(239,68,68,0.35);color:#fff;text-decoration:none}
|
|
.btn-delete.loading{opacity:0.7;pointer-events:none}
|
|
.btn-delete.loading::after{content:'';width:16px;height:16px;margin-left:8px;border:2px solid transparent;border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
|
|
@@keyframes spin{to{transform:rotate(360deg)}}
|
|
|
|
.btn-cancel{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:var(--bg-elevated);color:var(--text-secondary);border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:var(--transition);text-decoration:none}
|
|
.btn-cancel:hover{background:var(--bg-hover);border-color:rgba(255,255,255,0.1);color:var(--text-primary);text-decoration:none}
|
|
|
|
/* ===== MODAL ===== */
|
|
.modal-content{background:var(--bg-card) !important;border:1px solid var(--border) !important;border-radius:var(--radius-lg) !important;box-shadow:0 25px 60px rgba(0,0,0,0.5) !important;overflow:hidden}
|
|
.modal-backdrop.show{backdrop-filter:blur(4px)}
|
|
|
|
.m-header{background:linear-gradient(135deg,var(--red),var(--red-dark));padding:24px 28px;border:none;display:flex;align-items:center;gap:12px}
|
|
.m-header-icon{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff}
|
|
.m-header h5{font-size:18px;font-weight:700;color:#fff;margin:0}
|
|
|
|
.m-body{padding:28px;text-align:center}
|
|
.m-body p.m-msg{font-size:16px;color:var(--text-primary);margin-bottom:20px;line-height:1.6;font-weight:500}
|
|
.m-warning{background:var(--amber-soft);border:1px solid var(--amber-border);border-radius:var(--radius-sm);padding:16px;margin-bottom:0;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--amber);font-weight:600}
|
|
.m-warning i{font-size:18px;flex-shrink:0}
|
|
|
|
.m-footer{padding:20px 28px;border-top:1px solid var(--border);display:flex;gap:12px;justify-content:flex-end}
|
|
|
|
.m-success{display:flex;align-items:center;justify-content:center;gap:10px;font-size:18px;font-weight:700;color:var(--green)}
|
|
|
|
/* ===== RESPONSIVE ===== */
|
|
@@media(max-width:768px){
|
|
.delete-page{padding:16px}
|
|
.detail-grid{grid-template-columns:1fr}
|
|
.stats-bar{grid-template-columns:1fr}
|
|
.danger-list{grid-template-columns:1fr}
|
|
.action-card{flex-direction:column;text-align:center}
|
|
.action-info{flex-direction:column}
|
|
.action-btns{flex-direction:column;width:100%}
|
|
.action-btns .btn-delete,.action-btns .btn-cancel{width:100%;justify-content:center}
|
|
.page-title-row{flex-direction:column;align-items:flex-start}
|
|
}
|
|
</style>
|
|
|
|
<div class="delete-page">
|
|
|
|
<!-- Page Header -->
|
|
<div class="page-top">
|
|
<div class="page-breadcrumb">
|
|
<a href="@Url.Action("Index", "Questionnaire")">Questionnaires</a>
|
|
<span class="sep">/</span>
|
|
<span>Delete</span>
|
|
</div>
|
|
<div class="page-title-row">
|
|
<h1 class="page-title">
|
|
<span class="page-title-icon"><i class="bi bi-trash3-fill"></i></span>
|
|
Delete Questionnaire
|
|
</h1>
|
|
<a href="@Url.Action("Index", "Questionnaire")" class="btn-back"><i class="bi bi-arrow-left"></i> Back to List</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Danger Banner -->
|
|
<div class="danger-banner">
|
|
<div class="danger-banner-inner">
|
|
<div class="danger-banner-icon"><i class="bi bi-exclamation-triangle-fill"></i></div>
|
|
<div class="danger-banner-content">
|
|
<h3>This action is permanent and cannot be undone</h3>
|
|
<ul class="danger-list">
|
|
<li><i class="bi bi-x-circle-fill"></i> All questions will be permanently deleted</li>
|
|
<li><i class="bi bi-x-circle-fill"></i> All answers will be removed</li>
|
|
<li><i class="bi bi-x-circle-fill"></i> Survey responses will be lost forever</li>
|
|
<li><i class="bi bi-x-circle-fill"></i> Associated analytics will be erased</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Questionnaire Info -->
|
|
<div class="info-card">
|
|
<div class="info-card-header">
|
|
<div class="info-card-icon info-blue"><i class="bi bi-file-text-fill"></i></div>
|
|
<h2 class="info-card-title">Questionnaire Details</h2>
|
|
</div>
|
|
<div class="info-card-body">
|
|
<div class="detail-grid">
|
|
<div class="detail-item">
|
|
<div class="detail-label"><i class="bi bi-hash"></i> ID</div>
|
|
<div class="detail-value id-val">#@Model.Id</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label"><i class="bi bi-card-heading"></i> Title</div>
|
|
<div class="detail-value">@Model.Title</div>
|
|
</div>
|
|
<div class="detail-item full">
|
|
<div class="detail-label"><i class="bi bi-card-text"></i> Description</div>
|
|
@if (!string.IsNullOrEmpty(Model.Description))
|
|
{
|
|
<div class="detail-value desc-val">@Html.Raw(Model.Description)</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="detail-value empty-desc">No description provided</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats -->
|
|
<div class="stats-bar">
|
|
<div class="stat-card">
|
|
<div class="stat-number">@qCount</div>
|
|
<div class="stat-label">Questions</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">@totalAnswers</div>
|
|
<div class="stat-label">Total Answers</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">@otherCount</div>
|
|
<div class="stat-label">Other Options</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Row -->
|
|
<div class="action-row">
|
|
<div class="action-card">
|
|
<div class="action-info">
|
|
<div class="action-icon"><i class="bi bi-trash3"></i></div>
|
|
<div class="action-text">
|
|
<h3>Ready to delete this questionnaire?</h3>
|
|
<p>This will permanently remove all @qCount questions and @totalAnswers answers</p>
|
|
</div>
|
|
</div>
|
|
<div class="action-btns">
|
|
<a href="@Url.Action("Index", "Questionnaire")" class="btn-cancel"><i class="bi bi-arrow-left"></i> Cancel</a>
|
|
<button type="button" class="btn-delete" data-bs-toggle="modal" data-bs-target="#deleteModal">
|
|
<i class="bi bi-trash3-fill"></i> Delete Questionnaire
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Delete Confirmation Modal -->
|
|
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="m-header">
|
|
<div class="m-header-icon"><i class="bi bi-exclamation-triangle-fill"></i></div>
|
|
<h5 id="deleteModalLabel">Confirm Deletion</h5>
|
|
</div>
|
|
<div class="m-body">
|
|
<p class="m-msg" id="deleteMessage">Are you absolutely sure you want to delete this questionnaire?</p>
|
|
<div class="m-warning" id="modalWarning">
|
|
<i class="bi bi-shield-exclamation"></i>
|
|
<span>This action is irreversible. All data will be permanently lost.</span>
|
|
</div>
|
|
</div>
|
|
<div class="m-footer" id="modalFooter">
|
|
<button type="button" class="btn-cancel" data-bs-dismiss="modal"><i class="bi bi-x"></i> Cancel</button>
|
|
<button type="button" class="btn-delete" id="deleteButton"><i class="bi bi-trash3-fill"></i> Yes, Delete Forever</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<script>
|
|
$(document).ready(function () {
|
|
var itemId = @Model.Id;
|
|
|
|
$('#deleteButton').on('click', function () {
|
|
var $btn = $(this);
|
|
$btn.addClass('loading').prop('disabled', true);
|
|
|
|
$.ajax({
|
|
url: '/admin/Questionnaire/Delete/' + itemId,
|
|
type: 'POST',
|
|
success: function (result) {
|
|
// Success state
|
|
$('.m-header').css('background', 'linear-gradient(135deg, #10b981, #059669)');
|
|
$('.m-header h5').text('Deleted Successfully');
|
|
$('.m-header-icon i').removeClass('bi-exclamation-triangle-fill').addClass('bi-check-circle-fill');
|
|
$('#deleteMessage').html('<div class="m-success"><i class="bi bi-check-circle-fill"></i> Questionnaire deleted successfully!</div>');
|
|
$('#modalWarning').hide();
|
|
$('#modalFooter').hide();
|
|
|
|
setTimeout(function () {
|
|
$('#deleteModal').modal('hide');
|
|
window.location.href = '/admin/Questionnaire/Index';
|
|
}, 2000);
|
|
},
|
|
error: function () {
|
|
$btn.removeClass('loading').prop('disabled', false);
|
|
$('#deleteMessage').html('<span style="color:var(--red)"><i class="bi bi-exclamation-triangle-fill"></i> Failed to delete. Please try again.</span>');
|
|
setTimeout(function () {
|
|
$('#deleteModal').modal('hide');
|
|
}, 3000);
|
|
}
|
|
});
|
|
});
|
|
|
|
$('#deleteModal').on('hidden.bs.modal', function () {
|
|
$('#deleteButton').removeClass('loading').prop('disabled', false);
|
|
$('.m-header').css('background', 'linear-gradient(135deg, #ef4444, #dc2626)');
|
|
$('.m-header h5').text('Confirm Deletion');
|
|
$('.m-header-icon i').removeClass('bi-check-circle-fill').addClass('bi-exclamation-triangle-fill');
|
|
$('#deleteMessage').text('Are you absolutely sure you want to delete this questionnaire?');
|
|
$('#modalWarning').show();
|
|
$('#modalFooter').show();
|
|
});
|
|
});
|
|
</script>
|
|
}
|