<?php include 'header.php';?>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">

  <style>
      /* ---------- Card Styling ---------- */
      .card {
        border-radius: 14px !important;
        border: none;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease-in-out;
      }

      /* No hover state for card */

      /* ---------- Input / Select Fields ---------- */
      .form-control,
      .form-select {
        border-radius: 10px !important;
        border: 1.8px solid #d3d9e5;
        padding: 10px 14px;
        transition: all 0.25s ease;
        background-color: #fff;
      }

      .form-control:focus,
      .form-select:focus {
        border-color: #5b76ff;
        box-shadow: 0 0 0 3px rgba(91, 118, 255, 0.25);
      }

      /* Removed hover effect completely */

      /* ---------- Labels ---------- */
      .form-label {
        font-weight: 600;
        color: #4a4a4a;
      }

      /* ---------- Save Button Styling ---------- */
      .btn-primary-600,
      .btn-primary {
        border-radius: 10px !important;
        padding: 10px 26px !important;
        font-size: 15px;
        font-weight: 600;
        background: linear-gradient(135deg, #4a63ff, #6b8aff);
        border: none;
        box-shadow: 0 4px 12px rgba(74, 99, 255, 0.35);
        transition: all 0.3s ease;
      }

      /* No hover state for buttons */

      /* ---------- Back Button ---------- */
      .btn.btn-primary li {
        border-radius: 10px !important;
      }

      /* ---------- Form Group Container ---------- */
      .dashboard-main-body {
        padding: 15px;
      }

      /* ---------- Select Dropdown Options ---------- */
      .form-select option {
        border-radius: 6px;
      }

      /* ---------- Header Title Styling ---------- */
      h6.fw-semibold {
        font-size: 20px;
        color: #29304d;
        letter-spacing: 0.5px;
      }

      .password-wrapper {
        position: relative;
      }

      .password-toggle {
        position: absolute;
        top: 50%;
        right: 14px;
        transform: translateY(-50%);
        cursor: pointer;
        font-size: 18px;
        color: #6c757d;
      }

      .password-toggle:hover {
        color: #4a63ff;
      }
     .role-dropdown {
        display: none;          /* hidden by default */
        position: absolute;     /* relative to parent */
        top: 100%;              /* below input */
        left: 17px;
        width: 92%;
        max-height: 200px;      /* set max height */
        overflow-y: auto;       /* scroll if content exceeds max-height */
        background: #fff;
        border: 1px solid #ccc;
        z-index: 1000;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .role-dropdown li {
        padding: 8px 12px;
        cursor: pointer;
    }
    
    .role-dropdown li:hover {
        background-color: #f0f0f0;
    }
    /* =====================================================
   INPUT ICON STYLE
===================================================== */

.input-icon-wrap{
    position:relative;
}

.input-icon-wrap i{
    position:absolute;
    top:50%;
    left:16px;
    transform:translateY(-50%);
    font-size:16px;
    z-index:5;
}

/* INPUT PADDING */

.input-icon-wrap .form-control,
.input-icon-wrap .form-select{
    padding-left:48px !important;
}

/* TEXTAREA */

.textarea-icon-wrap i{
    top:18px !important;
    transform:none !important;
}

.textarea-with-icon{
    padding-left:48px !important;
    padding-top:14px !important;
}

/* ICON COLORS */

.icon-purple{
    color:#6366f1;
}

.icon-blue{
    color:#3b82f6;
}

.icon-red{
    color:#ef4444;
}

.icon-cyan{
    color:#06b6d4;
}
    </style>
    
    <div class="dashboard-main-body">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
            <h6 class="fw-semibold mb-0">Add Ticket</h6>
        </div>
         <div class="d-flex flex-wrap align-items-center justify-content-end gap-3 mb-3">
            <a type="button" href="ticket.php" class="tooltip-button btn bg-primary-600 text-white border border-primary-600 radius-8 px-12 py-11 d-flex align-items-center" data-bs-toggle="tooltip" data-bs-placement="top"  data-bs-html="true" data-bs-custom-class="tooltip-primary" title="Listing">
                <iconify-icon icon="ic:baseline-arrow-back" class="icon text-xl line-height-1"></iconify-icon>
            </a>
        </div>

        <div class="row gy-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <h6 class="mb-4 text-xl">Add Ticket</h6> <br />
                        <form id="modelform" action="" method="post">
                            <div class="row gy-3">

    <!-- Ticket Title -->
    <div class="col-sm-4">

        <label class="form-label">
            Ticket Title <span class="text-danger">*</span>
        </label>

        <div class="input-icon-wrap">

            <i class="bi bi-ticket-detailed-fill icon-purple"></i>

            <input type="text"
                name="tickettitle"
                class="form-control"
                placeholder="Enter Ticket Title"
                required>

        </div>

    </div>

    <!-- Category -->
    <div class="col-sm-4 position-relative">

        <label class="form-label">
            Category <span class="text-danger">*</span>
        </label>

        <div class="input-icon-wrap">

            <i class="bi bi-grid-fill icon-blue"></i>

            <input type="text"
                class="form-control search-input"
                placeholder="Select Category">

        </div>

        <ul class="role-dropdown">
            <li>Technical</li>
            <li>Billing</li>
            <li>General</li>
        </ul>

    </div>

    <!-- Priority -->
    <div class="col-sm-4 position-relative">

        <label class="form-label">
            Priority <span class="text-danger">*</span>
        </label>

        <div class="input-icon-wrap">

            <i class="bi bi-lightning-charge-fill icon-orange"></i>

            <input type="text"
                class="form-control search-input"
                placeholder="Select Priority">

        </div>

        <ul class="role-dropdown">
            <li>Low</li>
            <li>Medium</li>
            <li>High</li>
        </ul>

    </div>

    <!-- Description -->
    <div class="col-12">

        <label class="form-label">
            Description <span class="text-danger">*</span>
        </label>

        <div class="input-icon-wrap textarea-icon-wrap">

            <i class="bi bi-chat-left-text-fill icon-cyan"></i>

            <textarea class="form-control textarea-with-icon"
                id="description"
                name="description"
                rows="5"
                placeholder="Enter Description"
                required></textarea>

        </div>

    </div>

</div>
                            <!-- Save Button -->
                            <div class="form-group text-end" style="margin-top: 10px;">
                                <button type="submit" class="btn btn-primary-600">
                                    <i class="bi bi-floppy"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


<script>
document.addEventListener('DOMContentLoaded', function () {

  const form = document.getElementById('modelform');

  form.addEventListener('submit', function (e) {
    e.preventDefault();

    const issue = document.querySelector('[name="issue"]').value.trim();
    const description = document.getElementById('description').value.trim();

    if (!issue || !description) {
      Swal.fire({
        icon: 'error',
        title: 'Error',
        text: 'Please fill all required fields',
        confirmButtonColor: '#dc3545'
      });
      return;
    }

    // Success
    Swal.fire({
      icon: 'success',
      title: 'Success!',
      text: 'Ticket added successfully',
      confirmButtonColor: '#4a63ff',
      timer: 2000,
      timerProgressBar: true
    }).then(() => {
      form.submit();
    });

  });

});
</script>

<!--Image Upload-->
<script>
document.getElementById('image').addEventListener('change', function (event) {
    const file = event.target.files[0];
    const preview = document.getElementById('previewImage');

    if (file) {
        const reader = new FileReader();

        reader.onload = function (e) {
            preview.src = e.target.result;
            preview.style.display = 'block';
        };

        reader.readAsDataURL(file);
    } else {
        preview.style.display = 'none';
        preview.src = '';
    }
});
</script>

<!--Searchbale dropdown-->
<script>
document.addEventListener('DOMContentLoaded', function () {

  const allDropdowns = document.querySelectorAll('.position-relative');

  allDropdowns.forEach(container => {

    const search = container.querySelector('.search-input');
    const dropdown = container.querySelector('.role-dropdown');
    const items = dropdown.querySelectorAll('li');

    function showDropdown() {
      dropdown.style.display = 'block';
    }

    function hideDropdown() {
      dropdown.style.display = 'none';
    }

    function filterDropdown() {
      const value = search.value.toLowerCase().trim();

      let visible = 0;

      items.forEach(item => {
        if (item.textContent.toLowerCase().includes(value)) {
          item.style.display = 'block';
          visible++;
        } else {
          item.style.display = 'none';
        }
      });

      dropdown.style.display = visible ? 'block' : 'none';
    }

    // Open
    search.addEventListener('focus', showDropdown);
    search.addEventListener('click', showDropdown);

    // Typing
    search.addEventListener('input', filterDropdown);

    // Select
    items.forEach(item => {
      item.addEventListener('click', () => {
        search.value = item.textContent;
        hideDropdown();
      });
    });

    // Outside click
    document.addEventListener('click', function (e) {
      if (!container.contains(e.target)) {
        hideDropdown();
      }
    });

  });

});
</script>

 <?php  include 'footer.php'; ?>