@extends('layouts.admin.admin-app')
@section('title','Customer View')
@section('content')
<div class="main-content ">
    <div class="content_wrapper">
        <div class="content_header" id="content-header">
            <div class="page_title search_section">
                <h2 class="d-inline-block pr-3 mr-3 border-right">Cancelled Booking Detail</h2>
                <nav aria-label="breadcrumb" class="d-inline-block">
                    <ol class="breadcrumb p-0 mb-0">
                        <li class="breadcrumb-item"><a href="{{url('/admin/scheduled-booking')}}">Scheduled Booking</a>
                        </li>
                    </ol>
                </nav>
            </div>
        </div>
        <div class="content">
            <ul class="common_tabs nav nav-tabs flex-nowrap" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link" id="Details-tab" data-toggle="tab" href="#Details" role="tab" aria-controls="Details" aria-selected="false" onclick="showCancelDetails('cancelDetails')">View Details</a>
                </li>
                @if(!empty($cancelScheduleInfo->cancel_reason))
                <li class="nav-item">
                    <a class="nav-link" id="Reason-tab" data-toggle="tab" href="#Reason" role="tab" aria-controls="Reason" aria-selected="true" onclick="showCancelDetails('cancelReason')">View Reason</a>
                </li>
                @endif
            </ul>
            <div class="tab-content" id="myTabContent">
                @if(!empty($cancelScheduleInfo->cancel_reason))
                <div class="tab-pane fade show active" id="cancelReason" role="tabpanel" aria-labelledby="Reason-tab">
                    <div class="view_body">
                        <div class="box_wrapper" id="content-height">
                            <div class="txt">
                                {{$cancelScheduleInfo->cancel_reason}}
                            </div>
                        </div>
                    </div>
                </div>
                @endif
                <div class="tab-pane fade" id="cancelDetails" role="tabpanel" aria-labelledby="Details-tab">
                    <div class="view_body">
                        <div class="box_wrapper">
                            <div class="form-group info_row_flex d-sm-flex">
                                <label>Date:</label>
                                <span>{{getDateFormat($cancelScheduleInfo->cancel_date.' '.$cancelScheduleInfo->cancel_time, 'admin')}}</span>
                            </div>
                            <div class="form-group info_row_flex d-sm-flex">
                                <label>Time:</label>
                                <span>{{showTimeFormat($cancelScheduleInfo->cancel_time, 'admin')}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        showCancelDetails('cancelDetails');
    })

    function showCancelDetails(type) {
        $("#cancelReason").hide();
        $("#cancelDetails").hide();
        $(".tab-view").each(function () {
            $(this).removeClass('show active');
        });
        $(".nav-link").each(function () {
            $(this).removeClass('active');
        });
        if (type == 'cancelReason') {
            $("#cancelReason").show();
            $("#Reason-tab").addClass('show active');
            $("#cancelReason").addClass('show active');
        } else if (type == 'cancelDetails') {
            $("#cancelDetails").show();
            $("#cancelDetails").addClass('show active');
            $("#Details-tab").addClass('show active');
        } 
    }
</script>
@endsection