<template>
  <div
    class="modal fade"
    id="showDescription"
    tabindex="-1"
    role="dialog"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"

  >
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">
            <i class="fas fa-clipboard-list"></i> توضیح کامل
          </h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <div class="subject-container">
            <textarea
              disabled
              class="subject-text"
              v-model="localDesc"
            ></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-secondary"
            data-bs-dismiss="modal"
          >
            بستن
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "vue3-toastify/dist/index.css";
import { watch, ref } from "vue";

export default {
  props: {
    desc: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const localDesc = ref();

    watch(
      () => props.desc,
      (newVal) => (localDesc.value = newVal)
    );
    return {
      localDesc,
    };
  },
};
</script>

<style scoped>
.modal-dialog {
  max-width: 600px; /* Larger size for better content visibility */
  margin-top: 10vh; /* Center vertically */
}

.modal-content {
  border-radius: 16px; /* More rounded corners */
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1); /* Larger shadow for more depth */
  background: linear-gradient(
    to bottom right,
    #f5f7fb,
    #e0e8ed
  ); /* Soft gradient background */
}

.modal-header {
  border-bottom: none; /* Remove default border */
}

.modal-title {
  color: #007bff;
  font-weight: 600;
  font-size: 1.75rem;
  display: flex;
  align-items: center;
}

.modal-title i {
  margin-right: 12px;
  font-size: 1.75rem;
}

.btn-close {
  background: none;
  border: none;
  font-size: 1.75rem;
  color: #007bff;
  transition: color 0.3s ease;
}

.btn-close:hover {
  color: #0056b3;
}

.modal-body {
  padding: 25px;
}

.subject-container {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 10px;
}

.subject-container i {
  color: #007bff;
  margin-right: 15px;
  font-size: 1.75rem;
}

.subject-text {
  color: #333;
  font-weight: 500;
  border: 2px solid #007bff;
  width: 100%;
  height: 180px;
  padding: 12px;
  border-radius: 10px;
  font-size: 1rem;
  background-color: #f9f9f9;
  box-sizing: border-box;
  resize: none;
  transition: border-color 0.3s;
}

.subject-text:focus {
  border-color: #0056b3; /* Highlight border on focus */
  outline: none;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.btn-secondary {
  background-color: #6c757d;
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  transition: background 0.3s;
  font-size: 1.1rem;
}

.btn-secondary:hover {
  background-color: #5a6268;
}
</style>
