@extends('frontend.layouts.main-profile')

@section('title', $seo['title'] ?? '' )
@section('keywords', $seo['keywords']??'')
@section('description', $seo['description']??'')
@section('abstract', $seo['abstract']??'')
@section('image', $seo['image']??'')
@section('css')
<link rel="stylesheet" type="text/css" href="{{ asset('frontend/css/profile/order-history.css') }}?v={{ time() }}">
@endsection

@section('content')
<link rel="stylesheet" type="text/css" href="{{ asset('frontend/css/profile/order-history.css') }}?v={{ time() }}">
<style>
    .li-do span {
        color: #FF0000;
    }

    .btn-success {
        background: rgb(66, 184, 2);
        color: #fff;
    }
</style>
<div class="content-wrapper">
    <div class="main">
        <div class="wrap-content-main">
            @if(session("alert"))
            <div class="alert alert-success">
                {{session("alert")}}
            </div>
            @elseif(session('error'))
            <div class="alert alert-warning">
                {{session("error")}}
            </div>
            @endif

            @if (!empty($data) && $data->isNotEmpty())
            <div class="card card-outline card-primary">
                <div class="card-body table-responsive">
                    <div class="prod_buy_label">
                        {{ __('common.Tour bạn đã mua trong thời gian qua') }}
                    </div>
                    <div class="history_order">
                        @if(isset($data) && $data)
                        @foreach($data as $transaction)
                        @foreach($transaction->orders as $key => $value)
                        @if($key ==0 )
                        <div class="item">
                            <div class="box">
                                <div class="image">
                                    <img src="{{ asset($value->avatar_path) }}" alt="">
                                </div>
                                <div class="box_info">
                                    <div class="box_info_top">
                                        <div class="group_title3">
                                            <!-- @if($value->product)
                                            <div class="sub_title">
                                                {{$value->product->category->name}}
                                            </div>
                                            @endif -->
                                            <div class="" style="font-size: 16px; margin-bottom: 10px;">
                                               <strong>Mã đơn hàng: </strong> {{$transaction->code ?? ''}}
                                            </div>
                                            @if ($transaction->httt)
                                            <span>
                                                {{ $transaction->httt }} ({{$transaction->thanhtoan == 1 ? 'Đã thanh toán' : 'Chưa thanh toán' }})
                                            </span>

                                            @endif

                                        </div>
                                        <div class="group_status">
                                            <div class="time">
                                                {{$value->created_at->format('d/m/Y')}}
                                            </div>
                                            @foreach ($listStatus as $status)
                                            @if ($status['status']==$transaction->status)
                                            <span
                                                class="badge badge-@if ($transaction->status<=0)danger @else{{ $transaction->status }}@endif">
                                                {{$status['name'] }}
                                            </span>
                                            @endif
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="box_info_bottom">
                                            <div class="qty">
                                               <strong>Số lượng:</strong> {{$transaction->quantity}}
                                            </div>
                                            <div class="price">
                                               Tổng tiền: {{number_format($transaction->total, 0, ',','.')}}
                                                <span class="donvi">đ</span>
                                            </div>
                                        </div>

                                        <div>
                                            <a class="btn btn-info" id="btn-load-transaction-detail"
                                                data-url="{{ route('profile.transaction.detail', ['id' => $transaction->id]) }}">{{
                                                    __('common.Chi tiết') }}</a>

                                            @if ($transaction->status == 1 )
                                            <a href="javascript:void(0);"
                                                data-url="{{ route('profile.transaction.cancel', ['id' => $transaction->id]) }}"
                                                class="btn btn-sm btn btn-danger js-huydon">{{ __('common.Hủy đơn')
                                                    }}</a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                        @endforeach
                        @endforeach
                        @endif
                        {{$data->appends(request()->all())->links()}}
                    </div>
                </div>
            </div>

            @else

            <p class="text-center" style="margin-bottom: 0; padding: 10px 0;">Chưa có đơn hàng nào!</p>

            @endif


        </div>

    </div>
</div>

<div class="modal fade in" id="transactionDetail">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">{{ __('common.Chi tiết đơn hàng') }}</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <div class="content" id="loadTransactionDetail">

                </div>
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger close2" data-dismiss="modal">{{ __('common.Đóng') }}</button>
            </div>
        </div>
    </div>
</div>


@endsection
@section('js')
<script>
    $(function() {
        $('.close').click(function() {
            $('#transactionDetail').modal('hide');
        });
        $('.close2').click(function() {
            $('#transactionDetail').modal('hide');
        });
    });
    $(document).on("click", ".js-huydon", function() {
        let urlRequest = $(this).data("url");
        const _this = $(this);
        _this.addClass('disabled');

        Swal.fire({
            title: "{{ __('common.Bạn có chắc chắn muốn hủy đơn này')}}",
            text: "{{ __('common.Bạn sẽ không thể khôi phục điều này')}}",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: "{{ __('common.Đồng ý') }}!",
            cancelButtonText: "{{ __('common.Hủy bỏ') }}!",
            allowOutsideClick: false,
            allowEscapeKey: false,
            didOpen: () => {
                Swal.getConfirmButton().disabled = false;
                Swal.getCancelButton().disabled = false;
            }
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.getConfirmButton().disabled = true;
                Swal.getCancelButton().disabled = true;

                $.ajax({
                    type: "GET",
                    url: urlRequest,
                    success: function(data) {
                        if (data.code == 200) {
                            location.reload();
                        } else {
                            Swal.getConfirmButton().disabled = false;
                            Swal.getCancelButton().disabled = false;
                        }
                    },
                    error: function() {
                        Swal.getConfirmButton().disabled = false;
                        Swal.getCancelButton().disabled = false;

                        Swal.fire("{{ __('common.Lỗi') }}", "{{ __('common.Không thể hủy đơn. Vui lòng thử lại sau') }}.", 'error');

                        setTimeout(() => {
                            _this.removeClass('disabled');
                        }, 1000);
                    },
                    always: function() {
                        setTimeout(() => {
                            _this.removeClass('disabled');
                        }, 1000);
                    }
                });
            } else {
                setTimeout(() => {
                    _this.removeClass('disabled');
                }, 1000);
            }
        });
    });

    $(function() {
        $(document).on("click", "#btn-load-transaction-detail", function() {
            let contentWrap = $('#loadTransactionDetail');

            let urlRequest = $(this).data("url");
            $.ajax({
                type: "GET",
                url: urlRequest,
                success: function(data) {
                    if (data.code == 200) {
                        let html = data.html;
                        contentWrap.html(html);
                        $('#transactionDetail').modal('show');
                    }
                }
            });
        });
    })
</script>
@endsection