@extends('layouts.customer')

@section('title', 'Welcome')

@push('css')
    <style>
        .profile-userpic img {
            float: none;
            margin: 0 auto;
            width: 50%;
            height: 50%;
            -webkit-border-radius: 50% !important;
            -moz-border-radius: 50% !important;
            border-radius: 50% !important;
        }

        .p-card{
            width: 320px;
            height: 190px;
            -webkit-perspective: 600px;
            -moz-perspective: 600px;
            perspective:600px;
        }

        .card__part{
            box-shadow: 1px 1px #aaa3a3;
            top: 0;
            position: absolute;
            z-index: 1000;
            left: 0;
            display: inline-block;
            width: 320px;
            height: 190px;
            background-image: linear-gradient(to right bottom, #fd696b, #fa616e, #f65871, #f15075, #ec4879); /*linear-gradient(to right bottom, #fd8369, #fc7870, #f96e78, #f56581, #ee5d8a)*/
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            border-radius: 8px;

            /* -webkit-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            -moz-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            -ms-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            -o-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden; */
        }

        .card__front{
            padding: 18px;
            /* -webkit-transform: rotateY(0);
            -moz-transform: rotateY(0); */
        }

        .card__back {
            padding: 18px 0;
            -webkit-transform: rotateY(-180deg);
            -moz-transform: rotateY(-180deg);
        }

        .card__black-line {
            margin-top: 5px;
            height: 38px;
            background-color: #303030;
        }

        .card__logo {
            height: 16px;
        }

        .card__front-logo{
            position: absolute;
            top: 18px;
            right: 18px;
        }
        .card__square {
            border-radius: 5px;
            height: 30px;
        }

        .card_numer {
            display: block;
            width: 100%;
            word-spacing: 4px;
            font-size: 20px;
            letter-spacing: 2px;
            color: #fff;
            text-align: end;
            margin-bottom: 20px;
            margin-top: 20px;
        }

        .card__space-75 {
            width: 75%;
            float: left;
        }

        .card__space-25 {
            width: 25%;
            float: left;
        }

        .card__label {
            font-size: 10px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.8);
            letter-spacing: 1px;
        }

        .card__info {
            margin-bottom: 0;
            margin-top: 5px;
            font-size: 16px;
            line-height: 18px;
            color: #fff;
        letter-spacing: 1px;
        text-transform: uppercase;
        }

        .card__back-content {
            padding: 15px 15px 0;
        }
        .card__secret--last {
            color: #303030;
            text-align: right;
            margin: 0;
            font-size: 14px;
        }

        .card__secret {
            padding: 5px 12px;
            background-color: #fff;
            position:relative;
        }

        .card__secret:before{
        content:'';
        position: absolute;
        top: -3px;
        left: -3px;
        height: calc(100% + 6px);
        width: calc(100% - 42px);
        border-radius: 4px;
        background: repeating-linear-gradient(45deg, #ededed, #ededed 5px, #f9f9f9 5px, #f9f9f9 10px);
        }

        .card__back-logo {
            position: absolute;
            bottom: 15px;
            right: 15px;
        }

        .card__back-square {
            position: absolute;
            bottom: 15px;
            left: 15px;
        }

        /* .card:hover .card__front {
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);

        }

        .card:hover .card__back {
            -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
        } */
    </style>
@endpush

@section('content')
<div class="d-flex align-items-center mb-3">
    {{-- <div>
        <ol class="breadcrumb mb-2">
            <li class="breadcrumb-item active">Home</li>
        </ol> --}}
        <h1 class="page-header mb-0">Home</h1>
    {{-- </div> --}}
    {{-- <div class="ms-auto">
        <a href="#" class="btn btn-primary btn-rounded px-4 rounded-pill"><i class="fa fa-plus fa-lg me-2 ms-n2 text-white"></i> Apply New Season Card</a>
    </div> --}}
</div>
<div class="row justify-content-center">
    <div class="col-md-3">
        @include('profile.menu')
    </div>
    <div class="col-md-9">
        <div class="card border-0 mb-4">
            <div class="card-header bg-none p-3 fw-bolder h6 m-0 d-flex align-items-center">
                My Account
                {{-- <a href="#" class="ms-auto text-decoration-none text-gray-500">Edit</a> --}}
            </div>
            <div class="card-body">

                <div class="d-flex justify-content-between">
                    <div class="flex-fill">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="row mb-3">
                                    <label class="col-md-3 fw-semibold text-muted">User Type</label>
                                    <div class="col-md-9">
                                        <span class="fw-bold fs-6 text-gray-800">
                                            @if ($user->user_type == 2)
                                                Corporate
                                            @else
                                                Individual
                                            @endif
                                        </span>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label class="col-md-3 fw-semibold text-muted">Status</label>
                                    <div class="col-md-9">
                                        <span class="fw-bold fs-6 text-gray-800 text-capitalize">
                                            {{ $user->cardHolder?->status?->label() }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row mb-3">
                                    <label class="col-md-3 fw-semibold text-muted">Total Amount</label>
                                    <div class="col-md-9">
                                        <span class="fw-bold fs-6 text-gray-800">RM {{ Number::format($seasonCards->sum('rate.rate')) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

                @if($seasonCards->isNotEmpty())
                    <table class="table caption-top border mb-2">
                        <caption style="color: #6f7479">Active Cards</caption>
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Account No.</th>
                                <th>Card No.</th>
                                <th>Season Type</th>
                                <th>Rate</th>
                                <th>Card Status</th>
                            </tr>
                        </thead>
                        <tbody class="table-group-divider">
                            @forelse ($seasonCards as $index => $card)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $card->account_no ?? '-'  }}</td>
                                <td>{{ $card->card_no ?? '-'  }}</td>
                                <td>{{ $card->type?->name ?? '-'  }}</td>
                                <td>RM {{ number_format($card->effectiveRateAmount(), 2) }}</td>
                                <td>
                                    <span class="badge bg-{{ $card->status->color() }}">
                                        {{ $card->status->label() ?? '-'  }}
                                    </span>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td class="text-muted text-center" colspan="5">No card found</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                    {{  $seasonCards->links() }}
                @else
                <div class="border-muted text-center p-4" style="border-radius: 8px; border-style:dashed; border-width:1px;">
                    <div class="text-muted text-center">
                        No card found
                    </div>
                </div>
                @endif
            </div>
        </div>

        <div class="card border-0 mb-4">
            <div class="card-header bg-none p-3 fw-bolder h6 m-0 d-flex justify-content-between align-items-center">
                List of Open Requests
            </div>
            <div class="card-body">
                <div class="text-end mb-3">
                    <div class="dropdown">
                        <a class="btn btn-sm btn-green dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-plus"></i> New request
                        </a>

                        <ul class="dropdown-menu">
                            <li>
                                <a class="dropdown-item" href="{{ route('issue.apply') }}">
                                    New Season Parking Card
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ route('issue.replacement') }}">
                                    Season Parking Card Replacement
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ route('issue.change') }}">
                                    Season Parking Card Upgrade/Downgrade Space
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ route('issue.suspension') }}">
                                    Season Parking Card Suspension
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ route('issue.termination') }}">
                                    Season Parking Card Termination
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                @if ($seasonRequests->isNotEmpty())
                <table class="table border mb-2">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Request for</th>
                            <th>Request date</th>
                            <th>Site</th>
                            <th>Space</th>
                            <th>Document</th>
                            <th>Card</th>
                            <th>Status</th>
                            <th>Approval</th>
                            <th class="text-end"></th>
                        </tr>
                    </thead>
                    <tbody class="table-group-divider">
                        @forelse ($seasonRequests as $index => $request )
                            <tr>
                                <td>{{ $seasonRequests->firstItem() + $index }}</td>
                                <td>{{ $request->action ?? '--' }}</td>
                                <td>{{ $request->request_time?->format('Y-m-d') ?? '-' }}</td>
                                <td>{{ $request->site?->name }}</td>
                                <td>{{ $request->seasonType?->name }}</td>
                                <td>
                                    @if ($request->hasMedia($request->action->media()))
                                        @foreach($request->getMedia($request->action->media()) as $media)
                                            <a href="{{ route('media.download', $media)  }}">
                                                {{ $media?->file_name ?? '--' }}
                                            </a>
                                            <br>
                                        @endforeach
                                    @else
                                        --
                                    @endif
                                </td>
                                <td>
                                    {{ $request->total_cards ?? 0 }}
                                </td>
                                <td>
                                    <span class="badge bg-{{ $request->status->color() }}">
                                        {{ $request->status->label() }}
                                    </span>
                                </td>
                                <td>
                                    <span class="badge bg-{{ $request->approval->color() }}">
                                        {{ $request->approval->label() }}
                                    </span>
                                </td>
                                <td class="text-end">
                                    @if ($request->isApproved() && $request->invoices->where('status', '!=', \App\Models\Traits\Enum\PaymentStatus::PAID)->count())
                                        <a href="{{ route('issue.show', $request) }}" id="request-pay" class="btn btn-danger btn-xs">Pay</a>
{{--                                    @else--}}
{{--                                        <form id="deleteForm" action="{{ route('issue.destroy', $request) }}" method="POST">--}}
{{--                                            @method('DELETE')--}}
{{--                                            @csrf--}}

{{--                                            <button type="submit" id="delete" value="Delete Request"  data-bs-toggle="tooltip" title="Delete" class="btn btn-xs btn-dark"><i class="fas fa-trash"></i></button>--}}
{{--                                        </form>--}}
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td class="text-muted text-center" colspan="6">No open request found</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
                    {{ $seasonRequests->links() }}
                @else
                    <div class="border-muted text-center p-4" style="border-radius: 8px; border-style:dashed; border-width:1px;">
                        <div class="text-muted text-center mb-2">
                            No request found
                        </div>
                        <a href="{{ route('issue.apply') }}" class="btn btn-primary">Request new card</a>
                    </div>
                @endif
                <a href="{{ route('issue.index') }}" class="btn btn-white btn-xs">Show All</a>
            </div>
        </div>
        <div class="card border-0 mb-4">
            <div class="card-header bg-none p-3 fw-bolder h6 m-0 d-flex align-items-center">
                Invoice List
                {{-- <a href="#" class="ms-auto text-decoration-none text-gray-500">Edit</a> --}}
            </div>
            <div class="card-body">
                @if ($payments->isNotEmpty())
                    <table class="table border mb-2">
                        <thead>
                            <tr>
                                <th>Invoice No</th>
                                <th>Payment For</th>
                                <th>Received Date</th>
                                <th>Amount</th>
                                <th>Status</th>
                                <th class="text-end">Invoice</th>
                            </tr>
                        </thead>
                        <tbody class="table-group-divider">
                            @forelse ($payments->reject(fn($p) => (!$p->isPaid() && $p->invoiceable) ) as $payment)
                            <tr>
                                <td>{{ $payment->invoice_no ?? '--' }}</td>
                                <td>{{ $payment->payment_for ?? '--' }}</td>
                                <td>{{ $payment->received_time ?? '--' }}</td>
                                <td>RM {{ $payment->amount }}</td>
                                <td>
                                    <span class="badge bg-{{ $payment->status->color() }}">{{ $payment->status->label() }}</span>
                                </td>
                                <td class="text-end">
                                    @if($payment->status->label() == 'Pending' || $payment->status->label() == 'Fail')
                                    <a href="{{ route('invoice.show', $payment->id) }}" class="btn btn-danger btn-xs">Pay</a>
                                    @else
                                    <a href="{{ route('invoice.show', $payment->id) }}" class="btn btn-indigo btn-xs">Invoice</a>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            @endforelse
                        </tbody>
                    </table>
                    {{  $payments->links() }}
                @else
                    <div class="d-flex border-muted p-4" style="border-radius: 8px; border-style:dashed; border-width:1px;">
                        <div class="d-flex justify-content-center align-items-center flex-grow-1 flex-wrap flex-md-nowrap text-muted">
                                No Payment Found
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>


@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).on('click', '#delete', function (e) {
            e.preventDefault();
            var self = $(this);
            Swal.fire({
                title: "Are you sure?",
                text: "You will not be able to recover this record!",
                icon: "warning",
                confirmButtonColor: '#276baa',
                showCancelButton: true,
                dangerMode: true,
            })
                .then((result) => {
                    if (result.isConfirmed) {
                        self.parents("#deleteForm").submit();
                    }
                });
        });
    </script>
@endpush