@extends('panel.layouts.master')
@section('title', 'فاکتور پرداخت')
@section('content')
    @php
        $header = 'false';
        $footer = 'false';
        $sidebar = 'false';
    @endphp
    <style>
        .fact-razavi {
            width: 50%;
            margin: 1.5em auto;
        }

        @media (max-width: 767px) {
            .fact-razavi {
                width: 100%;
                margin: 1.5em auto;
            }
        }

        .circle-badge {
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid lightgray;
        }
    </style>
    @php
        $status = $payment->status;
        $color = 'primary';
        if ($status == 'paid') {
            $status = 'موفق';
            $color = 'success';
        } elseif ($status == 'pending') {
            $status = 'معلق';
            $color = 'primary';
        } else {
            $status = 'ناموفق';
            $color = 'danger';
        }
    @endphp
    <div class="container">
        <div class="card shadow fact-razavi mx-auto">
            <div class="card-title">
                <h4 class="text-center">وضعیت پرداخت</h4>
                <hr>
            </div>
            <div class="card-body">
                @if (isset($message))
                    <div>
                        <p>{{ $message }}</p>
                    </div>
                @endif
                {{-- <div class="row shadow p-2 rounded my-3 d-flex justify-content-center">
                <p class="m-0 text-center w-100" style="font-size: large">
                    بعد از 3 ثانیه منتقل خواهید شد...
                </p>
                <div class="spinner-grow text-success" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div> --}}
                <div class="row shadow p-2 rounded">
                    <div class="col-6">
                        <h6 class="m-0">نام و نام خانوادگی</h6>
                    </div>
                    <div class="col-6">
                        <h6 class="float-right m-0">{{ $payment->user->name }}</h6>
                    </div>
                </div>
                <div class="row shadow p-2 rounded my-3">
                    <div class="col-6">
                        <h6 class="m-0">کد ارجاع</h6>
                    </div>
                    <div class="col-6">
                        <h6 class="float-right m-0">{{ $payment->reference_code }}</h6>
                    </div>
                </div>
                {{-- <div class="row shadow p-2 rounded my-3">
                <div class="col-6">
                    <h6 class="m-0">کد پستی</h6>
                </div>
                <div class="col-6">
                    <h6 class="float-right m-0">{{ $payment->post_code }}</h6>
                </div>
            </div> --}}
                <div class="row shadow p-2 rounded my-3">
                    <div class="col-6">
                        <h6 class="m-0">شماره تماس</h6>
                    </div>
                    <div class="col-6">
                        <h6 class="float-right m-0">{{ $payment->user->phone }}</h6>
                    </div>
                </div>
                <div class="row shadow p-2 rounded my-3">
                    <div class="col-6">
                        <h6 class="m-0">آدرس</h6>
                    </div>
                    <div class="col-6">
                        <h6 class="float-right m-0">{{ $payment->address }}</h6>
                    </div>
                </div>

                @if (!$payment->items->isEmpty())
                    <div class="row shadow p-2 rounded my-3">
                        <div class="col-12">
                            <h6 style="text-align: right;margin: 0.5em;">محصولات</h6>
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">نام محصول</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($payment->items as $key => $item)
                                            <tr>
                                                <th scope="row">{{ ++$key }}</th>
                                                <td>{{ $item->course->name }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="row shadow p-2 rounded my-3">
                    <div class="col-6">
                        <h6 class="m-0">مبلغ</h6>
                    </div>
                    <div class="col-6">
                        <h6 class="float-right m-0">{{ number_format($payment->amount) }} ریال </h6>
                    </div>
                </div>
                <div class="row shadow p-2 rounded my-3 bg-{{ $color }}">
                    <div class="col-6">
                        <h6 class="m-0">وضعیت</h6>
                    </div>
                    <div class="col-6">
                        <h6 class="float-right m-0">{{ $status }}</h6>
                    </div>
                </div>
                <div class="row my-3">
                    <div class="col-12 text-center">
                        <a href="{{ route('dashboard.index') }}" class="btn btn-outline-success">برگشت به صفحه اصلی</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    {{--    <script> --}}
    {{--        setTimeout(function () { --}}
    {{--            window.location.href = '/panel' --}}
    {{--        },3000) --}}
    {{--    </script> --}}
@endsection