{% extends 'base/base.html' %}
{% block title %} Patinet Billing{% endblock %}
{% block stylesheets %}
{% endblock stylesheets %}
{% block content %}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<div class="overlay"></div>

<div id="wrapper">

    <div id="main-content">
        
            <br>
           
      

        <div class="container-fluid">


              {% if messages %}
{% for message in messages %}
        <div class="alert {% if message.tags == 'error' %}alert-danger{% else %}alert-success{% endif %} alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <i class="fa fa-check-circle"></i> {{ message }}
        </div>
        {% endfor %}
        {% endif %}
            
            
        <div class="col-lg-12">
            <form method="POST" action="{% url 'send_travel_messages' %}">
  {% csrf_token %}
            <div class="card">
                <div class="card-header" style="background-color: white;">
                   
                        
                            <div class="text-center">
                                <h5><strong>Send Messages to Patients</strong></h5>
                            </div>
                          
                     
                    </div>

                        
                </div>

                


                 <div class="row">

    <!-- Travel Patients Card -->
     
    <div class="col-md-6 mb-4">
      <div class="card">
        <div class="card-header bg-info text-white">
         <h5 class="text-center"><strong>Send Message to Travel Patients </strong></h5>
        </div>
        <div class="card-body">
          <div class="mb-3">

             <label class="form-label">Travel Patients</label>
                   <select name="travelPatients" class="form-control select2"  id="travelPatients" multiple="multiple">
                        {% for item in travel_patients %}
                            <option value="{{ item.id }}">{{ item.name }} - [{{item.cnic}}]</option>
                        {% endfor %}
                    </select>
          </div>


          <div class="mb-4">

            <label class="form-label">Select Message Type</label>

            <div class="col-md-4 d-flex align-items-center">
              <input type="radio" name="travelMessage" class="form-check-input me-2" id="travel1" value="greeting" required >
              <label for="travel1" class="form-check-label">Greeting Message</label>
            </div>
            <div class="col-md-4 d-flex align-items-center">
              <input type="radio" name="travelMessage" class="form-check-input me-2" id="travel2" value="sample">
              <label for="travel2" class="form-check-label">Sample Collection</label>
            </div>
            <div class="col-md-4 d-flex align-items-center">
              <input type="radio" name="travelMessage" class="form-check-input me-2" id="travel3" value="report">
              <label for="travel3" class="form-check-label">Test Complete</label>
            </div>
          </div>


        </div>

        <div class="card-footer text-right bg-white">
          <button type="submit" class="btn btn-info">Send</button>
        </div>
      </div>
    </div>
    </form>

    <!-- General Patients Card -->
    <div class="col-md-6 mb-4">
          <form method="POST" action="{% url 'send_general_messages' %}">
  {% csrf_token %}
      <div class="card">
        <div class="card-header bg-info text-white">
          <h5 class="text-center"><strong>Send Message to General Patients </strong></h5>
        </div>
        <div class="card-body">
          <div class="mb-3">
            <label class="form-label">General Patients</label>
                   <select name="generalPatients" class="form-control select2"  id="generalPatients" multiple="multiple">
                        {% for item in general_patients %}
                            <option value="{{ item.id }}">{{ item.patientName }} - [{{item.patientCNIC}}]</option>
                        {% endfor %}
                    </select>
          </div>


          
           <div class="mb-4">

            <label class="form-label">Select Message Type</label>

            <div class="col-md-4 d-flex align-items-center">
              <input type="radio" name="generalMessage" class="form-check-input me-2" id="general1" value="greetingG" required>
              <label for="general1" class="form-check-label">Greeting Message</label>
            </div>
            <div class="col-md-4 d-flex align-items-center">
              <input type="radio" name="generalMessage" class="form-check-input me-2" id="general2" value="sampleG">
              <label for="general2" class="form-check-label">Sample Collection</label>
            </div>
            <div class="col-md-4 d-flex align-items-center">
              <input type="radio" name="generalMessage" class="form-check-input me-2" id="general3" value="reportG">
              <label for="general3" class="form-check-label">Test Complete</label>
            </div>
          </div>


      
        </div>
        <div class="card-footer text-right bg-white">
          <button type="submit" class="btn btn-info">Send</button>
        </div>
      </div>
    </div>
</form>

  </div>



                     
                    </div>



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


{% block javascripts %}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<script>
    // Initialize select2 with multi-select and search functionality
    $('.select2').select2({
        width: '100%',  // Optional: Ensures the select box takes full width
        placeholder: "Select Patients", // Optional: Adds a placeholder
        allowClear: true, // Optional: Allows clearing of selected options
    });
</script>

{% endblock javascripts %}
{% endblock content %}