@extends('layouts.admin_main')

@section('title', $paymentHistory->order_number)

@push('styles')
    <style>
        .help-block {
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
            display: block;
        }

        .order_detail_section .order_header {
            padding: 1.5rem 1rem;
        }

        .order_detail_section .order_header .row {
            align-items: flex-end;
        }

        .order_detail_section .order_header p {
            margin: 0;
        }

        .order_detail_section .order_header h2 {
            margin-bottom: 0;
            color: #48465b;
            font-size: 1.6rem;
        }

        .order_detail_section .order_header h2 span {
            opacity: 0.5;
        }

        .order_detail_section .order_header h2 small {
            font-size: 14px;
        }

        .order_detail_section .order_header .order_date_time {
            font-size: 1rem;
            opacity: 0.5;
            font-weight: 500;
        }

        .order_detail_section .order_header .order_date {
            margin-left: 2rem;
        }

        .order_detail_section .order_header .order_date p {
            color: #959cb6;
            font-weight: 500;
            display: flex;
            align-items: center;
        }

        .order_detail_section .order_header .order_date span {
            margin: 0 0.5rem;
        }

        .order_detail_section .order_header .order_date i {
            font-size: 1.5rem;
        }

        .order_detail_section .order_header .order_status {
            margin-left: 2rem;
        }

        .order_detail_section .order_header .order_status .staus_panding {
            font-size: 1rem;
            font-weight: 500;
            padding: 0.35rem 1rem;
            border-radius: 4px;
            color: #5867dd;
            background-color: rgba(88, 103, 221, 0.1);
        }

        .order_detail_section .order_item_box {
            display: flex;
            flex-grow: 1;
            flex-direction: column;
            box-shadow: 0 0 13px 0 rgba(82, 63, 105, 0.05);
            background-color: #fff;
            margin-bottom: 20px;
            border-radius: 4px;
            padding: 20px;
        }

        .order_detail_section .order_item_box .row {
            margin: 0;
        }

        .order_detail_section .order_item_box .order_item .od_text {
            font-size: 1.1rem;
            margin-top: 0.5rem;
            font-weight: 600;
        }

        .order_detail_section .order_item_box .order_item .od_text span {
            font-size: 0.8rem;
            font-weight: 400;
            display: block;
            margin-bottom: 0.2rem;
        }

        .order_detail_section .order_item_box .order_item .od_img {
            width: 5rem;
            display: inline-block;
            height: 5rem;
            text-align: center;
        }

        .order_detail_section .order_item_box .order_item .od_img img {
            width: auto;
            max-width: 100%;
            max-height: 100%;
        }

        .order_detail_section .order_item_box .order_item .od_name {
            display: inline-block;
            margin-left: 1rem;
            vertical-align: top;
            width: 60%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            transition: all 0.3s ease-out;
        }

        .order_detail_section .order_item_box .order_item .od_name:hover {
            white-space: inherit;
        }

        .order_detail_section .payment_summery {
            padding: 0;
        }

        .order_detail_section .payment_summery h3 {
            color: #48465b;
            font-size: 1.3rem;
            padding: 30px 30px 15px;
        }

        .order_detail_section .payment_summery ul {
            margin: 0;
            padding: 0;
        }

        .order_detail_section .payment_summery li {
            padding: 5px 30px;
            list-style: none;
        }

        .order_detail_section .payment_summery li p {
            margin: 0;
        }

        .order_detail_section .payment_summery li p span {
            opacity: 0.7;
        }

        .order_detail_section .payment_summery li p:last-child {
            font-weight: 600;
        }

        .order_detail_section .payment_summery li.total_block {
            color: #48465b;
            font-size: 1.1rem;
            margin-top: 1rem;
            padding: 15px 30px;
            font-weight: 600;
            background-color: #f9fafc;
        }

        .order_detail_section .order_heade_right {
            display: flex;
            align-items: center;
        }

        .order_detail_section .order_heade_right .dropdown {
            margin-right: 3px;
        }

        .order_detail_section .order_heade_right .print a {
            background-color: #0abb87;
            color: #fff;
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            line-height: 1.5;
            border-radius: 0.2rem;
            font-weight: 600;
            display: flex;
            align-items: center;
        }

        .order_detail_section .order_heade_right .print a i {
            font-size: 1.3rem;
            margin-right: 0.5rem;
        }
        .order_detail_section .order_heade_right .download a {
            background-color: #fd397a;
            color: #fff;
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            line-height: 1.5;
            border-radius: 0.2rem;
            font-weight: 600;
            display: flex;
            align-items: center;
        }

        .order_detail_section .order_heade_right .download a i {
            font-size: 1.3rem;
            margin-right: 0.5rem;
        }

        .order_info_box .bd_bottom {
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        .order_info_box h4 {
            color: #48465b;
            font-size: 1rem;
            margin-bottom: 1rem;
        }

        .order_info_box .contact_info,
        .order_info_box .shiiping_detail,
        .order_info_box .billing_detail {
            padding-bottom: 0.8rem;
            margin-bottom: 1.2rem;
            padding: 0.2rem 0px;
        }

        .order_info_box .billing_detail {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .order_info_box p i {
            font-weight: 600;
            font-size: 1.3rem;
            vertical-align: middle;
            margin-right: 0.5rem;
        }

        .order_info_box p span {
            margin-right: 0.5rem;
        }

        .order_info_box p span .kt-svg-icon g [fill] {
            fill: #96a9c8;
        }

        .shipping-data .btn-remove {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 0.4rem;
        }

        .shipping-data .btn-remove i {
            padding-right: 0;
        }

        .return_product {
            display: flex;
            align-items: center;
        }

        .return_product .r_img_block {
            width: 4rem;
            height: 4rem;
            display: inline-block;
            text-align: center;
        }

        .return_product .r_img_block img {
            width: auto;
            max-width: 100%;
            max-height: 100%;
        }

        .return_product .re_pd_name {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            width: 14rem;
            margin-left: 0.3rem;
        }
    </style>
@endpush

@section('content')
    @breadcrumb([
    'home_url' => route('admin.dashboard.index'),
    'links' => [
    [
    'url' => route('admin.payment.index'),
    'title' => trans('admin_lang.payment'),
    ]
    ],
    'current_page_title' => 'Payment Details'
    ])
    @endbreadcrumb

    <section class="order_detail_section">
        <div class="order_body">
            <div class="row">
                <div class="col-md-8">
                    <div class="order_item_box payment_summery">
                        <h3>{{ trans('admin_lang.payment_summary') }}</h3>
                        <h3>
                            @php
                                if ($paymentHistory->status != 9)
                               {
                                   $status = '<a><span class="kt-badge kt-badge--inline status-active"> Success </span></a>';
                               }else{
                                   $status = '<a><span class="kt-badge kt-badge--inline status-inactive"> Failed </span></a>';
                               }
                            @endphp
                            {!! $status !!}

                        </h3>
                        <ul>
                            <li class="total_block">
                                <div class="row align-items-center justify-content-between">
                                    <p>{{ trans('admin_lang.order_number') }} <span></span></p>
                                    <p class="strong">{{ $paymentHistory->order_number   }}</p>
                                </div>
                            </li>
                            <li >
                                <div class="row align-items-center justify-content-between">
                                    <p>{{ trans('admin_lang.transaction_date') }} <span></span></p>
                                    <p class="strong">{{ changeDateFormatNew($paymentHistory->transaction_date)   }}</p>
                                </div>
                            </li>
                            <li >
                                <div class="row align-items-center justify-content-between">
                                    <p>{{ trans('admin_lang.transaction_id') }} <span></span></p>
                                    <p class="strong">{{ $paymentHistory->pay_id   }}</p>
                                </div>
                            </li>


                            <li>
                                <div class="row align-items-center justify-content-between">
                                    <p>{{ trans('frontend_lang.amount') }}</p>
                                    <p class="strong">{{ showAmount($paymentHistory->amount) }}</p>
                                </div>
                            </li>
                        </ul>
                    </div>

                </div>
                <div class="col-md-4">
                    <div class="order_item_box order_info_box">
                        <div class="contact_info ">
                            <h4>{{ trans('admin_lang.contact_info') }}</h4>
                            <p class="c_name">
                                <span>
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <polygon points="0 0 24 0 24 24 0 24"/>
                                            <path d="M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                            <path d="M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z" fill="#000000" fill-rule="nonzero"/>
                                        </g>
                                    </svg>
                                </span>
                                <a href="{{ route('admin.users.show', $paymentHistory->user_id) }}"> {{ $paymentHistory->user->getFullName()}} </a>
                            </p>
                            <p class="c_mail">
                                <span>
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <rect x="0" y="0" width="24" height="24"/>
                                            <path d="M21,12.0829584 C20.6747915,12.0283988 20.3407122,12 20,12 C16.6862915,12 14,14.6862915 14,18 C14,18.3407122 14.0283988,18.6747915 14.0829584,19 L5,19 C3.8954305,19 3,18.1045695 3,17 L3,8 C3,6.8954305 3.8954305,6 5,6 L19,6 C20.1045695,6 21,6.8954305 21,8 L21,12.0829584 Z M18.1444251,7.83964668 L12,11.1481833 L5.85557487,7.83964668 C5.4908718,7.6432681 5.03602525,7.77972206 4.83964668,8.14442513 C4.6432681,8.5091282 4.77972206,8.96397475 5.14442513,9.16035332 L11.6444251,12.6603533 C11.8664074,12.7798822 12.1335926,12.7798822 12.3555749,12.6603533 L18.8555749,9.16035332 C19.2202779,8.96397475 19.3567319,8.5091282 19.1603533,8.14442513 C18.9639747,7.77972206 18.5091282,7.6432681 18.1444251,7.83964668 Z" fill="#000000"/>
                                            <circle fill="#000000" opacity="0.3" cx="19.5" cy="17.5" r="2.5"/>
                                        </g>
                                    </svg>
                                </span>
                                <a href="mailto:{{ $paymentHistory->email }}">{{ $paymentHistory->email }}</a>
                            </p>
                            <p class="c_phone">
                                <span>
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <rect x="0" y="0" width="24" height="24"/>
                                            <path d="M11.914857,14.1427403 L14.1188827,11.9387145 C14.7276032,11.329994 14.8785122,10.4000511 14.4935235,9.63007378 L14.3686433,9.38031323 C13.9836546,8.61033591 14.1345636,7.680393 14.7432841,7.07167248 L17.4760882,4.33886839 C17.6713503,4.14360624 17.9879328,4.14360624 18.183195,4.33886839 C18.2211956,4.37686904 18.2528214,4.42074752 18.2768552,4.46881498 L19.3808309,6.67676638 C20.2253855,8.3658756 19.8943345,10.4059034 18.5589765,11.7412615 L12.560151,17.740087 C11.1066115,19.1936265 8.95659008,19.7011777 7.00646221,19.0511351 L4.5919826,18.2463085 C4.33001094,18.1589846 4.18843095,17.8758246 4.27575484,17.613853 C4.30030124,17.5402138 4.34165566,17.4733009 4.39654309,17.4184135 L7.04781491,14.7671417 C7.65653544,14.1584211 8.58647835,14.0075122 9.35645567,14.3925008 L9.60621621,14.5173811 C10.3761935,14.9023698 11.3061364,14.7514608 11.914857,14.1427403 Z" fill="#000000"/>
                                        </g>
                                    </svg>
                                </span>
                                <a href="tel:{{ $paymentHistory->phone }}">{{ $paymentHistory->user->phone }}</a>
                            </p>
                        </div>
                    </div>
                   {{-- <div class="order_item_box order_info_box">
                        <div class="contact_info bd_bottom">
                            <h4>{{ trans('admin_lang.order_notes') }}</h4>
                            <p class="c_name">
                                {{ $paymentHistory->notes }}
                            </p>
                        </div>
                    </div>--}}
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    {{--@if (!$paymentHistory->trails->isEmpty())--}}
                    {{--<div class="order_item_box payment_summery pb-5">--}}
                    {{--<h3>{{ trans('admin_lang.track_record') }}</h3>--}}
                    {{--<ul class="timeline timeline-2">--}}
                    {{--<div class="timeline-bar"></div>--}}
                    {{--@foreach ($paymentHistory->trails as $log)--}}
                    {{--<li class="timeline-item">--}}
                    {{--<div class="timeline-badge bg-success"></div>--}}
                    {{--<div class="timeline-content d-flex align-items-center justify-content-between">--}}
                    {{--<span class="mr-3">--}}
                    {{--{!! get_log_message($log->message, $log->old_data, $log->new_data, $log->user) !!}--}}
                    {{--</span>--}}
                    {{--<span class="text-muted text-right">{{ $log->updated_at->diffForHumans() }}</span>--}}
                    {{--</div>--}}
                    {{--</li>--}}
                    {{--@endforeach--}}
                    {{--</ul>--}}
                    {{--</div>--}}
                    {{--@endif--}}
                </div>
            </div>
        </div>
        <!--begin::Modal-->
        <div class="modal fade" id="kt_modal_5" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <form action="{{ route('admin.orders.updateOrder') }}" method="POST">
                        <input type="hidden" name="order_id" value="{{ $paymentHistory->id }}">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">@lang('admin_lang.update_order')</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="name" class="required">@lang('admin_lang.select_excel_file')</label>
                                <input type="file" name="file" id="file" required class="form-control" accept=".xls, .xlsx, .csv">
                                <span class="form-text text-muted">@lang('admin_lang.allowed_types_excel')</span>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">@lang('admin_lang.cancel')</button>
                            @button(['type' => 'submit'])@endbutton
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--end::Modal-->
    </section>
@endsection