<style>
body{
 font-family:'Inter', sans-serif;
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            
}
.container .panel .panel-body{

     width: 100%;
     border-style:none;
   
    
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.container .panel{
 border-style:none !important;
 border-width:0px !important;
 border-top-left-radius:12px;
 border-top-right-radius:12px;
 border-bottom-left-radius:12px;
 border-bottom-right-radius:12px;
}



.col-md-9 .dd ol{

    
   
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Light shadow for container */
    margin-bottom: 30px;
    overflow-x: auto; /* Enables horizontal scrolling on small devices */
}

  .col-md-9 .panel .add-modal-menu{
      width:100%;
           background: linear-gradient(145deg, #007bff, #0056b3); /* Light gradient */
    color: #ffffff;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, transform 0.2s ease;
}
  .col-md-9 .panel .add-modal-menu:hover {
            background: linear-gradient(145deg, #0056b3, #003c82);
    transform: translateY(-2px);
}
/* Input */
.panel-body form input[type=text]{
  display: flex;
    align-items: center;
    background-color: #e9ecef; /* Light input background */
    border-radius: 8px;
    padding: 12px;
    color: #333; /* Dark text color */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 50px;
}
/* Select */
.panel-body form select{
 text-transform:capitalize;
  display: flex;
    align-items: center;
    background-color: #e9ecef; /* Light input background */
    border-radius: 8px;
    padding: 12px;
    color: #333; /* Dark text color */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 50px;
}

/* Text Area */
.panel-body form textarea{
  display: flex;
    align-items: center;
    background-color: #e9ecef; /* Light input background */
    border-radius: 8px;
    padding: 12px;
    color: #333; /* Dark text color */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 50px;
}

/* Button */
.panel-body form .btn-primary{
 background: linear-gradient(145deg, #007bff, #0056b3); /* Light gradient */
    color: #ffffff;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, transform 0.2s ease;
}
.panel-body form .btn-primary:hover {
   background: linear-gradient(145deg, #0056b3, #003c82);
    transform: translateY(-2px);
}
/* Button */
.panel-body form a{
 
            background: linear-gradient(145deg, #c71f1f, #e04d4d); /* Gradient background for a professional look */
  color: #ffffff !important; /* Text color */
  padding: 14px 28px; /* Padding for consistency with primary button */
  font-size: 14px; /* Font size */
  font-weight: 500; /* Font weight */
  border: none; /* Remove default border */
  border-radius: 5px; /* Slightly rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
  transition: background 0.3s ease, transform 0.2s ease; /* Smooth transition for hover effects */
  }
  .panel-body form a:hover{
background: linear-gradient(145deg, #e04d4d, #f76c6c); /* Darker gradient on hover */
  transform: translateY(-2px); /* Slight lift effect */
}

/* Select */
.panel-body form select{
 border-style:none !important;
}

/* Text Area */
.panel-body form textarea{
 border-style:none !important;
}
.ui-sortable .dd-item a{
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
}

</style>
<?php if( !route(4) ): ?>

<div class="col-md-9">

                      <?php if( $success ): ?>
          <div class="alert alert-success "><?php echo $successText; ?></div>
        <?php endif; ?>
           <?php if( $error ): ?>
          <div class="alert alert-danger "><?php echo $errorText; ?></div>
        <?php endif; ?>
            <div class="panel panel-default">
                <div class="panel-body">
                    
                            
                        
                            <div class="dd">
                                <ol class="dd-list ui-sortable">
                                       <?php foreach($subjectList as $subject): ?>
                                        <li class="dd-item ui-sortable-handle">
                                            <div class="dd-handle"><?php echo $subject["subject"]?></div>
                                            <div class="settings-menu__action">
                                                <?php if($subject["auto_reply"] == 1):
                                                echo'<i class="fas fa-magic"></i> ';
                                                endif; ?>
                                                <a href="<?php echo site_url('admin/settings/subject/edit/'.$subject["subject_id"].'') ?>" class="btn btn-default btn-xs edit-modal-menu">Edit</a>
                                            </div>
                                        </li>
                                        <?php endforeach; ?>
                                                                           
                                                                    </ol>
                            </div>
                            <a href="javascript:;" onclick="showMe('gizlebeni');" class="btn btn-default m-b add-modal-menu">Create New Title</a>
                        </div>
                    </div>

                </div>
            </div>
      
        
         <div class="panel panel-default" id="gizlebeni" style="display: none;">
    <div class="panel-body">

         <form action="<?php echo site_url('admin/settings/subject') ?>" method="post" enctype="multipart/form-data">
             
                     <div class="form-group relative">
         
          <label for="" class="control-label">Support Title</label>
          <input type="text" class="form-control" name="subject">
        </div>
        
<div class="form-group">
               <label class="control-label">Auto Answer</label>
<select class="form-control" name="auto_reply">
    <option value="0" selected>Closed</option>
    <option value="1">Active</option>
</select>            </div>	          

            <div class="form-group">
               <label class="control-label">Message to Auto Reply</label>
               <textarea class="form-control" rows="5" name="content"></textarea>
            </div>	  
           <p>Automatic reply when a new support request is created under this topic.</p> 
            <hr>

            <button type="submit" class="btn btn-primary">Create</button>
         </form>

</div> </div>



</div>

<script type="text/javascript">
function showMe(blockId) {
     if ( document.getElementById(blockId).style.display == 'none' ) {
          document.getElementById(blockId).style.display = ''; }
else if ( document.getElementById(blockId).style.display == '' ) {
          document.getElementById(blockId).style.display = 'none'; }
}
</script>


<?php elseif( route(3) == "edit" ): ?>
<div class="col-md-9">
    <a href="/admin/settings/subject" class="details_backButton btn btn-link"><span>‹</span> Back</a>

            <?php if( $success ): ?>
          <div class="alert alert-success "><?php echo $successText; ?></div>
        <?php endif; ?>
           <?php if( $error ): ?>
          <div class="alert alert-danger "><?php echo $errorText; ?></div>
        <?php endif; ?>

                 
         <div class="panel panel-default">
    <div class="panel-body">

         <form action="<?php echo site_url('admin/settings/subject/edit/'.route(4)) ?>" method="post" enctype="multipart/form-data">
             
                     <div class="form-group relative">
         
          <label for="" class="control-label">Support Title</label>
          <input type="text" class="form-control" name="subject" value="<?=$post["subject"]?>">
        </div>
        
<div class="form-group">
               <label class="control-label">Auto Answer</label>
<select class="form-control" name="auto_reply">
    <option value="0" <?php if($post["auto_reply"] == 0){echo'selected';}
    elseif($post["auto_reply"] == 1){echo'selected'; }?>>Closed</option>
    <option value="1" <?php if($post["auto_reply"] == 1){echo'selected';}
    elseif($post["auto_reply"] == 1){echo'selected'; }?>>Active</option>
</select>            </div>	          

            <div class="form-group">
               <label class="control-label">Message to Auto Reply</label>
               <textarea class="form-control" rows="5" name="content"><?=$post["content"]?></textarea>
            </div>	  
           <p>Automatic reply when a new support request is created under this topic.</p> 
            <hr>

            <button type="submit" class="btn btn-primary">Update</button>

            <a href="<?php echo site_url('admin/settings/subject/delete/'.$post["subject_id"]) ?>" class="btn btn-link pull-right deactivate-integration-btn">
                                Delete
                            </a>

         </form>

</div> </div>


</div> </div> </div> 


<?php endif; ?>
 