{% extends "layout.html" %}

{% set title = 'Patient Profile' %}

{% block content %}

<section class="sec-pad-sm npt">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                {% include 'component/search.html' %}
            </div>
        </div>
    </div>
</section>

<section class="sec-pad npt">
    <div class="container">

        <button class="btn btn-black mbxxlg" data-toggle="modal" data-target="#cancel-order">Cancel Order</button>
        <button class="btn btn-black mlsmd mbxxlg" data-toggle="modal" data-target="#discount-code">Discount Code</button>
        <button class="btn btn-black mlsmd mbxxlg" data-toggle="modal" data-target="#review-order">Review Order</button>
        <button class="btn btn-black mlsmd mbxxlg" data-toggle="modal" data-target="#cancel-reservation">Cancel Reservation</button>

        <div class="li-head patient-head pbxxlg mblg">
            <div class="row">
                <div class="col-sm-6">
                    <div class="row">
                        <div class="col-sm-5">
                            <figure class="cover li-img" style="background-image: url('_assets/img/doctors/01.jpg')"></figure>
                        </div>
                        <div class="col-sm-7">
                            <div class="li-content ptxxlg">
                                <h3 class="no-margin text-bold mbsm">
                                    Mohamad Ahmad Ali
                                </h3>
                                <p>You have 3000 points</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="li-content patient-content">
                        <div class="row">
                            <div class="col-sm-5">
                                <div class="re-info mbsm">
                                    <span class="text-bold">Age: </span>
                                    <span>32</span>
                                </div>
                                <div class="re-info mbsm">
                                    <span class="text-bold">Gender: </span>
                                    <span>Male</span>
                                </div>
                            </div>
                            <div class="col-sm-5 col-sm-offset-2">
                                <div class="re-info mbsm">
                                    <span class="text-bold">Height: </span>
                                    <span>176 cm</span>
                                </div>
                                <div class="re-info mbsm">
                                    <span class="text-bold">Weight: </span>
                                    <span>80 kg</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="history">
            <ul class="history-head">
                <li class="d-inline active"><img src="_assets/img/icons/filter-icon.png" alt="" class="mrlg"><a href="#" class="capitalize">all</a></li>
                <li class="d-inline"><a href="#" class="capitalize">appointments</a></li>
                <li class="d-inline"><a href="#" class="capitalize">orders</a></li>
                <li class="d-inline mllg"><a href="#" class="capitalize reset">reset</a></li>
            </ul>
            <div class="history-content mtxxlg">
                <div class="history-item mbxxlg diagnose">
                    <div class="row">
                        <div class="col-sm-6">
                            <h3 class="no-margin mbxs text-bold">Diagnosed with flu</h3>
                            <span>12/6/2018</span>
                        </div>
                        <div class="col-sm-2 col-xs-12 pull-right">
                            <div class="user">
                                <div class="user-img cover" style="background-image: url('_assets/img/doctors/01.jpg')"></div>
                                <span class="text-center d-block mtxs">Maha</span>
                            </div>
                        </div>
                        <div class="col-sm-9">
                            <p class="no-margin mtmd">
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis sem.
                            </p>
                        </div>
                    </div>
                    <div class="history-footer mtmd">
                        <div class="pull-right">
                            <a href="#" class="mrlg"><img src="_assets/img/icons/edit-icon.png" alt=""></a>
                            <a href="#"><img src="_assets/img/icons/delete-icon.png" alt=""></a>
                        </div>
                    </div>
                </div>
                <div class="history-item mbxxlg appointments">
                    <div class="row">
                        <div class="col-sm-6">
                            <h3 class="no-margin mbxs text-bold">Dr. Tarek Lotfy</h3>
                            <span>12/6/2018</span>
                        </div>
                        <div class="col-sm-2 col-xs-12 pull-right">
                            <div class="user">
                                <div class="user-img cover" style="background-image: url('_assets/img/doctors/02.jpg')"></div>
                                <span class="text-center d-block mtxs">Ali</span>
                            </div>
                        </div>
                        <div class="col-sm-9">
                            <p class="no-margin mtmd">
                                Doctor appointment in Heliopolis clinic at 7:30 pm
                            </p>
                        </div>
                    </div>
                    <div class="history-footer mtmd">
                        <div class="pull-right">
                            <a href="#" class="mrlg"><img src="_assets/img/icons/edit-icon.png" alt=""></a>
                            <a href="#"><img src="_assets/img/icons/delete-icon.png" alt=""></a>
                        </div>
                    </div>
                </div>
                <div class="history-item mbxxlg diagnose">
                    <div class="row">
                        <div class="col-sm-6">
                            <h3 class="no-margin mbxs text-bold">Diagnosed with flu</h3>
                            <span>12/6/2018</span>
                        </div>
                        <div class="col-sm-2 col-xs-12 pull-right">
                            <div class="user">
                                <div class="user-img cover" style="background-image: url('_assets/img/doctors/03.jpg')"></div>
                                <span class="text-center d-block mtxs">Abdullah</span>
                            </div>
                        </div>
                        <div class="col-sm-9">
                            <p class="no-margin mtmd">
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis sem.
                            </p>
                        </div>
                    </div>
                    <div class="history-footer mtmd">
                        <div class="pull-right">
                            <a href="#" class="mrlg"><img src="_assets/img/icons/edit-icon.png" alt=""></a>
                            <a href="#"><img src="_assets/img/icons/delete-icon.png" alt=""></a>
                        </div>
                    </div>
                </div>
                <div class="history-item pharma">
                    <div class="row">
                        <div class="col-xs-6">
                            <h3 class="no-margin mbxs text-bold">Pharma Order</h3>
                            <span>12/6/2018</span>
                            <span class="order-status success text-bold d-block capitalize">fulfilled</span>
                        </div>
                        <div class="col-sm-2 col-xs-12 pull-right">
                            <div class="user">
                                <div class="user-img cover" style="background-image: url('_assets/img/doctors/01.jpg')"></div>
                                <span class="text-center d-block mtxs">Maha</span>
                            </div>
                        </div>
                        <div class="clearfix-m"></div>
                        <div class="col-xs-11">
                            <div class="order-details mtsm">
                                <div class="order">
                                    <span>Item Name</span>
                                    <span class="text-center">x1</span>
                                    <span class="text-right">150 EGP</span>
                                </div>
                                <div class="order">
                                    <span>Item Name</span>
                                    <span class="text-center">x2</span>
                                    <span class="text-right">200 EGP</span>
                                </div>
                                <div class="order">
                                    <span>Item Name</span>
                                    <span class="text-center">x1</span>
                                    <span class="text-right">120 EGP</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="history-footer bt ptmd mtxlg">
                        <div class="row">
                            <div class="col-xs-11">
                                <div class="total clearfix mbxxlg">
                                    <div class="text-bold pull-left">Total</div>
                                    <div class="text-bold pull-right">520</div>
                                </div>
                            </div>
                        </div>
                        <div class="pull-right">
                            <a href="#" class="btn btn-outline text-bold text-upper mrxxlg">reorder</a>
                            <a href="#"><img src="_assets/img/icons/delete-icon.png" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<div class="modal fade insurance cr-pop" id="cancel-order" tabindex="-1" role="dialog" aria-labelledby="cancel-order" aria-hidden="true">
    <div class="modal-dialog main-model" role="document">
        <div class="modal-content">
            <div class="modal-header text-upper text-bold">
                Cancel Order
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="order-info">
                    <div class="heading order-id text-bold text-upper">Order Name / ID</div>
                    <span class="order-date">21/09/2019</span>
                </div>
                <p class="mtxxlg">
                    Are you sure you want to cancel this order?</br>
                    This action cannot be undone!
                </p>
                <div class="cta-btns mtxxlg">
                    <a href="#" class="btn btn-outline d-inline mlxs mrxs">Skip</a>
                    <a href="#" class="btn btn-orange d-inline mlxs mrxs">Confirm</a>
                </div>

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

<div class="modal fade insurance cr-pop" id="discount-code" tabindex="-1" role="dialog" aria-labelledby="discount-code" aria-hidden="true">
    <div class="modal-dialog main-model" role="document">
        <div class="modal-content">
            <div class="modal-header text-upper text-bold">
                Discount Code
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="discount text-center text-bold">
                    ML11CBV
                </div>
                <p class="mtxxlg">
                    This is a one time use code</br>
                    Valid for 2 weeks from date of issuance
                </p>
                <a href="#" class="btn btn-outline d-block width100 mtxxlg">REDEEM</a>
            </div>
        </div>
    </div>
</div>

<div class="modal fade insurance cr-pop" id="review-order" tabindex="-1" role="dialog" aria-labelledby="review-order" aria-hidden="true">
    <div class="modal-dialog main-model" role="document">
        <div class="modal-content">
            <div class="modal-header text-upper text-bold">
                Review Order
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="order-info">
                    <div class="heading order-id text-bold text-upper">Order Name / ID</div>
                    <span class="order-date">21/09/2019</span>
                </div>
                <div class="heading text-bold text-upper mtxxlg">give us your opinion</div>
                <p class="mtmd">
                    Was the time it took the order to reach you as </br>expected?
                </p>
                <form action="">
                    <label class="heading text-bold text-upper" for="review">write something</label>
                    <textarea name="review" id="review" cols="30" rows="5"></textarea>
                </form>
                <div class="cta-btns mtxxlg">
                    <a href="#" class="btn btn-outline d-inline mlxs mrxs">Skip</a>
                    <a href="#" class="btn btn-orange d-inline mlxs mrxs">Submit</a>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade insurance cr-pop" id="cancel-reservation" tabindex="-1" role="dialog" aria-labelledby="cancel-reservation" aria-hidden="true">
    <div class="modal-dialog main-model" role="document">
        <div class="modal-content">
            <div class="modal-header text-upper text-bold">
                Cancel reservation
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <p class="note">please tell us why you're canceling the reservation..</p>
                <form action="" >
                    <div class="checkbox-custom radio-custom mtmd">
                        <div>
                            <input type="radio" name="timing" id="timing" class="form-radio">
                            <label class="mlxs" for="timing">Timing doesn't suit me</label>
                        </div>
                        <div class="mtsm">
                            <input type="radio" name="mind" id="mind" class="form-radio">
                            <label class="mlxs" for="mind">Change my mind about the appointment</label>
                        </div>
                        <div class="mtsm">
                            <input type="radio" name="negative" id="negative" class="form-radio">
                            <label class="mlxs" for="negative">Saw or heard negative feedback about the doctor or clinic.</label>
                        </div>
                        <div class="mtsm">
                            <input type="radio" name="mistake" id="mistake" class="form-radio">
                            <label class="mlxs" for="mistake">Reserved by mistake.</label>
                        </div>
                        <div class="mtsm mblg">
                            <input type="radio" name="other" id="other" class="form-radio">
                            <label class="mlxs" for="other">Other.</label>
                        </div>
                    </div>
                    <textarea name="feedback-other" id="feedback-other" cols="30" rows="5"></textarea>
                </form>
                <div class="cta-btns mtxxlg">
                    <a href="#" class="btn btn-outline d-inline mlxs mrxs">Skip</a>
                    <a href="#" class="btn btn-purple d-inline mlxs mrxs">Confirm</a>
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock content %}