{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}

<style>
    button.btn.btn-dark {
    border-radius: 10px;
    padding: 11px 30px;
}
#refundModal .modal-dialog {
    max-width: 40% !important;
}
</style>
<!-- html code -->
<title>Seer | Refund Details</title>
	    <div class="main-content pt-0">
	    	<div class="content-wrapper">
	    		<div class="row">
	    			<div class="col-12">
	    				<div class="d-flex align-items-center justify-content-between">
	    					<div>
		    					<h2 class="topHead">Refund Details</h2>
	    					</div>
	    				</div>
	    			</div>
	    		</div>
                <div class="card dashboard-card book-details text-center">
                    <div class="boking-details">
                        <div class="booking-details-content">
                            <ul class="book-listi">
                                
                                <li><strong>Appointment ID:</strong> <span> #{{ data_obj.appointment.appointment_id}}</span></li>
                                <li><strong>Appointment Date:</strong> <span> {{ data_obj.appointment.appointment_date}}</span></li>
                                <li><strong>Appointment Time:</strong> <span> {{ data_obj.appointment.appointment_time}}</span></li>
                                <li><strong>Fortuneteller:</strong> <span> {{ data_obj.appointment.fortune_teller.first_name}} {{ data_obj.booking.fortune_teller.last_name}}</span></li>
                                <li><strong>User:</strong> <span> {{ data_obj.appointment.seer_user.first_name}} {{ data_obj.booking.seer_user.last_name}}</span></li>
                                <li><strong>Service Name:</strong> <span>{{ data_obj.appointment.service.service_name }}</span></li>
                                <li><strong>Original Amount:</strong> <span> ${{ data_obj.appointment.price }}</span></li>
                                <li><strong>Refund Amount:</strong> <span> ${{data_obj.refund_amount}}</span></li>
                                <li><strong>Cancellation Charges:</strong> <span> {{data_obj.cancellation_charges}}%</span></li>
                                <li><strong>Date Requested:</strong> <span> {{ data_obj.created_at|date:"d M  Y"  }}</span></li>
                                <li><strong>Reason:</strong> <span> {{data_obj.appointment.cancellation_reason}}</span></li>
                                <li><strong>Cancelled By:</strong> <span> {{data_obj.appointment.cancelled_by}}</span></li>
                                <li><strong>Refund Status:</strong> <span> {{data_obj.status}}</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
                {% if data_obj.status == 'Completed' %}
                  <div class="text-center mt-5">
                    <p>Refund has already been initiated.</p>
                  </div>
                {% else %}
                  <div class="text-center mt-5">
                    <button class="search-btn m-auto" type="button" data-bs-toggle="modal" data-bs-target="#refundModal">Refund</button>
                  </div>
                {% endif %}
	    	</div>
	    </div>
<!-- Modal -->
<div class="modal fade" id="refundModal" tabindex="-1" aria-labelledby="refundModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form id="refundForm" method="post" action="{% url 'refund-money-details' data_obj.id %}">
        {% csrf_token %}
        <div class="modal-header">
          <h5 class="modal-title" id="refundModalLabel">Refund Money</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>Are you sure you want to refund money?</p>
        </div>
        <div class="modal-footer justify-content-center">
          <!-- <button type="submit" class="btn search-btn">Yes</button> -->
          <button type="submit" class="btn search-btn" name="refund_type" value="wallet">Refund to Wallet</button>
          <button type="submit" class="btn search-btn" name="refund_type" value="account">Refund to Account</button>
          <button type="button" class="btn btn-dark" data-bs-dismiss="modal">No</button>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- end of html code -->
{%endblock%}

{%block js%}
<!-- js code -->


<!-- end of js -->
{% endblock %}