{% extends "header.html.twig" %}


{% block body_content %}
<div class="box">
    <div class="box-header">
        <h3 class="box-title">Service Details</h3>
    </div>

    <!-- /.box-header -->
    <div class="box-body">
        <table id="usertable" class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>User Name</th>
                <td>{{service.name}}</td>
            </tr>
            <tr>
                <th>User Email</th>
                <td>{{service.email}}</td>
            </tr>
            <tr>
                <th>User Phone Number</th>
                <td>
                    {% if service.phone_number == '' %}
                        -
                    {% else %}
                        {{service.phone_number}}
                    {% endif %}
                </td>
            </tr>
            <tr>
                <th>User City</th>
                <td>
                    {{service.city}}
                </td>
            </tr>
            <tr>
                <th>User State</th>
                <td>
                    {{service.state}}
                </td>
            </tr>
            <tr>
                <th>User Zipcode</th>
                <td>
                    {{service.zipcode}}
                </td>
            </tr>
            <tr>
                <th>User Address</th>
                <td>
                    {{service.address1}}<br/>
                    {{service.address2}}
                </td>
            </tr>
            <tr>
                <th>Sitter Name</th>
                <td>{{service.assigned_user_name}}</td>
            </tr>
            <tr>
                <th>Sitter Email</th>
                <td>{{service.assigned_email}}</td>
            </tr>
            <tr>
                <th>Sitter Zipcode</th>
                <td>{{service.assigned_zipcode}}</td>
            </tr>
            <tr>
                <th>Sitter City</th>
                <td>{{service.assigned_city}}</td>
            </tr>
            <tr>
                <th>Sitter Phone Number</th>
                <td>
                    {% if service.assigned_username == '' %}
                        -
                    {% else %}
                        {{service.assigned_username}}
                    {% endif %}
                </td>
            </tr>



            <tr>
                <th>Booked?</th>
                {% if service.status == 1 %}
                    <td>Y</td>
                {% else %}
                    <td>N</td>
                {% endif %}

            </tr>

            <tr>
                <th>Service Type 1</th>
                {% if service.serviceType == '1' %}
                    <td>Dog Boarding</td>
                {% elseif service.serviceType == '2' %}
                    <td>Dog Sitting</td>
                {% elseif service.serviceType == '3' %}
                    <td>Day Care</td>
                {% elseif service.serviceType == '4' %}
                    <td>Dog Walking</td>
                {% else %}
                    <td></td>
                {% endif %}
            </tr>
            <tr>
                <th>Service Type 2</th>
                <td>
                    {% if service.walkingType == '0' %}
                        Single
                    {% elseif service.walkingType == '1' %}
                        Weekly
                    {% endif %}
                </td>
            </tr>
            <tr>
                <th>Requested Date</th>
                <td>{{service.requested_date}}</td>
            </tr>

            <tr>
                <th>Service Start Date</th>
                <td>{{service.fromDate}}</td>
            </tr>
            <tr>
                <th>Service Start Time</th>
                <td>{{service.fromTime}}</td>
            </tr>

            <tr>
                <th>Service End Date</th>
                <td>{{service.toDate}}</td>
            </tr>
            <tr>
                <th>Service End Time</th>
                <td>{{service.toTime}}</td>
            </tr>
            {% set k = 1 %}
            {% for service_date in service.service_date_array %}

                <tr>
                    <th>{{ k }}.Start Date Time</th>
                    <td>{{service_date.start_date}} {{service_date.start_time}}</td>
                </tr>
                <tr>
                    <th>{{ k }}.End Date Time</th>
                    <td>{{service_date.end_date}} {{service_date.end_time}}</td>
                </tr>
                {% set k = k+ 1 %}
            {% endfor %}
            <tr>
                <th>Service Address</th>
                <td>
                    {{service.address}}<br/><br/>
                    <a href='https://www.google.com/maps/search/?api=1&query={{ service.latitude }},{{ service.longitude }}'
                       class="btn btn-sm btn-info" target="_blank">View in Map</a>
                </td>
            </tr>
            <tr>
                <th>Access Instruction</th>
                <td>
                    {{service.access_instruction}}
                </td>
            </tr>
            <tr>
                <th>Access Note</th>
                <td>
                    {{service.access_note}}
                </td>
            </tr>
            <tr>
                <th>Lockbox Number</th>
                <td>
                    {{service.lockbox_number}}
                </td>
            </tr>
            <tr>
                <th>Transaction IDs</th>
                <td>{{service.transaction_id}}</td>
            </tr>

            <tr>
                <th>Referral User</th>
                <td>{{service.referral_user}}</td>
            </tr>

            {% set i = 1 %}
            {% for refund in service.refund_details %}

                <tr>
                    <th colspan=2 style="text-align:center">
                        {% if i != 1 %}
                            Modified
                        {% endif %}
                        Transaction {{i}}</th>
                </tr>
                {% set i = i+ 1 %}
                <tr>
                    <th>Service Amount</th>
                    <td>{{refund.service_amount}}</td>
                </tr>

                <tr>
                    <th>Service Charge</th>
                    <td>+{{refund.service_charge}}</td>
                </tr>
                <tr>
                    <th>Other Fee</th>
                    <td>+{{refund.other_fee}}</td>
                </tr>
                <tr>
                    <th>Pickup DropOff Fee</th>
                    <td>+{{refund.pickup_dropoff}}</td>
                </tr>
                <tr>
                    <th>Grooming Fee</th>
                    <td>+{{refund.grooming}}</td>
                </tr>
                <tr>
                    <th>Discount Amount</th>
                    <td>-{{refund.discount_amount}}</td>
                </tr>
                <tr>
                    <th>Card Amount</th>
                    <td>{{refund.card_amount}}</td>
                </tr>

                <tr>
                    <th>Coin Amount</th>
                    <td>{{refund.coin_amount}}</td>
                </tr>

                <tr>
                    <th>Coupon Code Amount</th>
                    <td>{{refund.coupon_code_amount}}</td>
                </tr>

                <tr>
                    <th>Referral Amount</th>
                    <td>{{refund.referral_amount}}</td>
                </tr>

                <tr>
                    <th>Tip </th>
                    <td>{{refund.tip_amount}}</td>
                </tr>

                <tr>
                    <th>Sitter Amount</th>
                    <td>{{refund.sitter_amount}}</td>
                </tr>

                <tr>
                    <th>Cuddlytails Amount</th>
                    <td>{{refund.cuddlytails_amount}}</td>
                </tr>

                {% if refund.is_refunded == 1 %}
                    <tr>
                        <th>Is Refunded?</th>
                        <td>Y</td>
                    </tr>
                    <tr>
                        <th>Refunded Amount</th>
                        <td>{{refund.refunded_amount |number_format(2)}}</td>
                    </tr>
                    <tr>
                        <th>Refunded Date</th>
                        <td>{{refund.refunded_date}}</td>
                    </tr>
                {% endif %}

            {% endfor %}
            {% if service.refunded != 1 %}
                <tr>
                    <th>Refund Fee?</th>
                    <td>
                        <button data-toggle="modal" data-target="#modal-default" data-id="{{service.id}}" class="btn btn-success refund-button">Refund</button>
                    </td>
                </tr>
            {% endif %}

            </thead>
        </table>
    </div>
    <!-- /.box-body -->
</div>

<div class="modal fade" id="modal-default">
    <div class="modal-dialog" style="width:330px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
                <p>Are you sure you would like to refund amount of the service?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <a class="model-id" href="javascript:void(0);"><button type="button" class="btn btn-primary refund-success">Confirm</button></a>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<div>
    <div class="modal fade" id="modal-default1">
        <div class="modal-dialog" style="width:330px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <p></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default close-button" data-dismiss="modal">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
    </div>

    <div class="modal fade" id="modal-default2">
        <div class="modal-dialog" style="width:330px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <p></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default close-button1" data-dismiss="modal">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
    </div>
    {% endblock body_content %}

    {% block script_content %}
        <script>
          var getId = 0;
          $(".refund-button").click(function() {
            getId = $(this).attr("data-id");
          });

          $(".close-button").click(function() {
            $("#modal-default1").modal('hide');
          });

          $(".close-button1").click(function() {
            location.reload();
          });

          $(".refund-success").click(function() {
            $.ajax({
              url:'{{url('refundService',{id:service.id})}}',
              type: "POST",
              dataType: "json",
              data: {
                "id": getId
              },
              async: true,
              success: function (data)
              {
                if(data.error) {
                  $("#modal-default").modal('hide');
                  $("#modal-default1 p").html(data.error);
                  $("#modal-default1").modal('show');
                }
                if(data.success) {
                  $("#modal-default").modal('hide');
                  $("#modal-default2 p").html(data.success);
                  $("#modal-default2").modal('show');
                }

              }
            });
            return false;
          });
        </script>
    {% endblock script_content %}