@extends('operations.layout.mainlayout')

@section('content')
    <link rel="stylesheet" type="text/css" href="/bower_components/admin-lte/plugins/datatables-select/css/select.bootstrap4.min.css">
    <style>
        .table {
            width: 100% !important;
            border-collapse: collapse;
            font-size: 14px;
            background: white;
        }

        .nav-tabs {
            border-bottom: none;
            background: #f8f9fa;
            padding: 10px 10px 0;
            border-radius: 8px;
        }

        .nav-tabs .nav-link {
            color: #6c757d;
            border: none;
            margin-right: 5px;
            padding: 12px 25px;
            font-weight: 500;
            transition: all 0.3s ease;
            position: relative;
            background: transparent;
            font-size: 15px;
        }

        .nav-tabs .nav-link:hover {
            color: var(--blazma-primary);
            background: rgba(var(--blazma-primary-rgb), 0.05);
        }

        .nav-tabs .nav-link.active {
            color: var(--blazma-primary) !important;
            background: white;
            border-radius: 8px 8px 0 0;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            font-weight: 600;
        }

        .nav-tabs .nav-link.active:after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 2px;
            background: white;
        }

        .nav-tabs .nav-item {
            margin-bottom: -1px;
        }

        .card {
            border: none;
            box-shadow: 0 0 20px rgba(0,0,0,0.05);
            border-radius: 12px;
        }

        .card-header {
            background: white;
            border-bottom: 1px solid #f0f0f0;
            padding: 1.5rem;
        }

        .btn-primary {
            background: linear-gradient(45deg, var(--blazma-primary), var(--blazma-light));
            border: none;
            box-shadow: 0 4px 15px rgba(var(--blazma-primary-rgb), 0.2);
        }

        .btn-primary:hover {
            background: linear-gradient(45deg, var(--blazma-primary), var(--blazma-light));
            box-shadow: 0 4px 20px rgba(var(--blazma-primary-rgb), 0.3);
        }

        .btn-success {
            background: linear-gradient(45deg, #28a745, #34ce57);
            border: none;
            box-shadow: 0 4px 15px rgba(40, 167, 69, 0.2);
        }

        .btn-success:hover {
            background: linear-gradient(45deg, #218838, #2bb44e);
        }

        .btn-danger {
            background: linear-gradient(45deg, #dc3545, #ff4d5b);
            border: none;
            box-shadow: 0 4px 15px rgba(220, 53, 69, 0.2);
        }

        .btn-danger:hover {
            background: linear-gradient(45deg, #c82333, #f23d4d);
        }

        .table thead th {
            background: #f8f9fa;
            color: #495057;
            font-weight: 600;
            border-top: none;
        }

        .table td {
            border-color: #f0f0f0;
        }

        .form-control {
            border-radius: 8px;
            padding: 8px 16px;
            border: 1px solid #e0e0e0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.02);
        }

        .form-control:focus {
            border-color: var(--blazma-primary);
            box-shadow: 0 0 0 0.2rem rgba(var(--blazma-primary-rgb), 0.15);
        }

        .dataTables_wrapper .dataTables_filter input {
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            padding: 8px 16px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.02);
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: var(--blazma-primary);
            color: white !important;
            border: none;
            border-radius: 6px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: #a33352;
            color: white !important;
            border: none;
        }

        .modal-content {
            border: none;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .btn {
            padding: 8px 20px;
            font-weight: 500;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(0,0,0,.02);
        }

        .status-active {
            color: #28a745;
            background: rgba(40, 167, 69, 0.1);
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 13px;
        }

        .status-inactive {
            color: #dc3545;
            background: rgba(220, 53, 69, 0.1);
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 13px;
        }

        .category-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 12px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 500;
            background: linear-gradient(135deg, var(--blazma-primary) 0%, #e44d85 100%);
            color: white;
            box-shadow: 0 2px 4px rgba(var(--blazma-primary-rgb), 0.2);
            transition: all 0.3s ease;
            white-space: nowrap;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .no-category-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 12px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 500;
            background: #f8f9fa;
            color: #6c757d;
            border: 1px solid #e9ecef;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .category-badge:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 6px rgba(var(--blazma-primary-rgb), 0.25);
        }

        .no-category-badge:hover {
            background: #f1f3f5;
            border-color: #dee2e6;
        }

        table.dataTable tbody>tr.selected,
        table.dataTable tbody>tr>.selected {
            background-color: #696464;
        }
    </style>
<div class="row container mx-auto">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Questionnaires Management</h4>
            </div>
            <div class="card-body">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="questionnaires-tab" data-toggle="tab" href="#questionnaires" role="tab">
                            Questionnaires
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="categories-tab" data-toggle="tab" href="#categories" role="tab">
                            Categories
                        </a>
                    </li>
                </ul>
                <div class="tab-content mt-3" id="myTabContent">
                    <div class="tab-pane fade show active" id="questionnaires" role="tabpanel">
                        <button type="button" class="btn btn-primary mb-3" id="add-questionnaire">Add New Questionnaire</button>
                        <table class="table table-bordered" id="questionnaires-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name (EN)</th>
                                    <th>Name (AR)</th>
                                    <th>Status</th>
                                    <th>Appears In</th>
                                    <th>Per Patient</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="tab-pane fade" id="categories" role="tabpanel">
                        <button type="button" class="btn btn-primary mb-3" id="add-category">Add New Category</button>
                        <table class="table table-bordered" id="categories-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name (EN)</th>
                                    <th>Name (AR)</th>
                                    <th>Questionnaire</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="questionnaire-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Questionnaire</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <form id="questionnaire-form">
                <div class="modal-body">
                    <input type="hidden" id="questionnaire-id">
                    <div class="form-group">
                        <label>Name (English)</label>
                        <input type="text" class="form-control" id="name-en" name="NAME_EN" required>
                    </div>
                    <div class="form-group">
                        <label>Name (Arabic)</label>
                        <input type="text" class="form-control" id="name-ar" name="NAME_AR" required>
                    </div>
                    <div class="form-group">
                        <label>Status</label>
                        <select class="form-control" id="status" name="STATUS">
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Appears In</label>
                        <select class="form-control" id="appears-in" name="APPEARS_IN">
                            <option value="both">Both</option>
                            <option value="outpatient">Out Patient</option>
                            <option value="contracts">Contracts</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="one-question-for-multi-test" name="ONE_QUESTION_FOR_MULTI_TEST">
                            <label class="form-check-label" for="one-question-for-multi-test">Per Patient</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="tests-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Manage Tests for Questionnaire</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>Available Tests</h6>
                        <table id="questionnaire-tests-table" class="table table-bordered">
                            <thead>
                                <tr>
                                    <th></th> <!-- Empty header for select checkbox column -->
                                    <th>Test Name</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h6>Added Tests</h6>
                        <table id="added-tests-table" class="table table-bordered">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Test Name</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="category-form-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Category</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <form id="category-form">
                <div class="modal-body">
                    <input type="hidden" id="category-id">
                    <input type="hidden" id="questionnaire-id-category">
                    <div class="form-group">
                        <label>Questionnaire</label>
                        <select class="form-control" id="questionnaire-select" required>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Name (English)</label>
                        <input type="text" class="form-control" id="category-name-en" name="NAME_EN" required>
                    </div>
                    <div class="form-group">
                        <label>Name (Arabic)</label>
                        <input type="text" class="form-control" id="category-name-ar" name="NAME_AR" required>
                    </div>
                    <div class="form-group">
                        <label>Status</label>
                        <select class="form-control" id="category-status" name="STATUS">
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="questions-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Category Questions</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Move to Category</label>
                    <select class="form-control" id="move-to-category"></select>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered" id="questions-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Question (EN)</th>
                                <th>Question (AR)</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="add-questions-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Questions</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <form id="questions-form">
                <div class="modal-body">
                    <input type="hidden" id="questions-questionnaire-id">
                    <input type="hidden" id="questions-category-id">
                    <div class="form-group">
                        <label>Category</label>
                        <select class="form-control" id="questions-category-select" required>
                            <option value="">Select Category</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Question (English)</label>
                        <input type="text" class="form-control" id="question-en" name="QUESTION_EN" required>
                    </div>
                    <div class="form-group">
                        <label>Question (Arabic)</label>
                        <input type="text" class="form-control" id="question-ar" name="QUESTION_AR" required>
                    </div>
                    <div class="form-group">
                        <label>Status</label>
                        <select class="form-control" id="question-status" name="STATUS">
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="manageQuestionsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Manage Questions</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>Available Questions</h6>
                        <table id="availableQuestionsTable" class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Name EN</th>
                                    <th>Name AR</th>
                                    <th>Category</th>
                                    <th>Type</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h6>Assigned Questions</h6>
                        <table id="assignedQuestionsTable" class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Name EN</th>
                                    <th>Name AR</th>
                                    <th>Type</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="delete-questionnaire-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete Permanently</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="delete-questionnaire-id">
                <p>Are you sure you want to permanently delete this questionnaire?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirm-delete-questionnaire">Confirm</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('footer-scripts')
    @include('operations.questionnaire.index-scripts')
@endsection