@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">Account Number</label>
                                        <div class="col-md-9">
                                            <span class="fw-bold fs-6 text-gray-800">{{ $user->cardHolder->account_no ?? '--' }}</span>
                                        </div>
                                    </div>
                                    <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>
                                <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($user->seasonCards->sum('rate.rate')) }}
                                            </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>
                        </div>
                    </div>

                    @if($user->seasonCards->isNotEmpty())
                        <table class="table caption-top border mb-2">
                            <caption style="color: #6f7479">Active Cards</caption>
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Card No.</th>
                                <th>Season Type</th>
                                <th>Rate</th>
                                <th>Card Status</th>
                            </tr>
                            </thead>
                            <tbody class="table-group-divider">
                            @forelse ($user->seasonCards->filter(fn ($seasonCard) => $seasonCard->status->active()) as $index => $card)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $card->card_no ?? '-'  }}</td>
                                    <td>{{ $card->type->name ?? '-'  }}</td>
                                    <td>RM {{ number_format($card->effectiveRateAmount(), 2) }}</td>
                                    <td>{{ $card->statuses->name ?? '-'  }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td class="text-muted text-center" colspan="5">No card found</td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                        <a href="" class="btn btn-white btn-xs">Show All</a>
                    @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

                    @if($user->seasonCards->isNotEmpty())
                        <form action="{{ route('payment.advance') }}" method="POST">
                            @csrf
                            @method('POST')
                            <table class="table caption-top border mb-2">
                                <caption style="color: #6f7479">Season Rental</caption>
                                <thead>
                                <tr>
                                    <th>Monthly</th>
                                    <th>Card(s)</th>
                                    <th>Rate</th>
                                </tr>
                                </thead>
                                <tbody class="table-group-divider">
                                @foreach (collect($periods)->reverse() as $period)
                                    @php
                                        $paymentItem = $paymentItems->where('year', $period->format('Y'))->where('month', $period->format('m'))->first();
                                    @endphp
                                    <tr>
                                        <td>
                                            <div class="form-check">
                                                {{-- Get values by array from request name months[]--}}
                                                <input class="form-check-input monthly"
                                                       type="checkbox"
                                                       @checked($paymentItem)
                                                       @disabled($paymentItem?->payment->status == \App\Models\Traits\Enum\PaymentStatus::PAID)
                                                       name="months[]"
                                                       value="{{ $period->format('Y-m') }}"
                                                       id="months-{{ $period->format('Y-m') }}">
                                                <label class="form-check-label" for="months-{{ $period->format('Y-m') }}">
                                                    {{ $period->format('M Y')  }}
                                                    @if ($paymentItem)
                                                        <div class="badge bg-{{ $paymentItem->payment->status->color() }}" data-toggle="tooltip" title="{{ $paymentItem->payment->invoice_no }}">
                                                            {{ $paymentItem->payment->status->label() }}
                                                        </div>
                                                    @endif
                                                </label>
                                            </div>

                                        </td>
                                        <td>{{ $user->seasonCards->pluck('card_no')->implode(', ')  }}</td>
                                        <td>RM {{ $user->seasonCards->sum('rates.rate')  }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                            <div class="col-3">
                                <div class="input-group input-group-lg">
                                    <label for="amount" class="input-group-text">RM</label>
                                    <input type="text"
                                           class="form-control text-end"
                                           id="amount"
                                           name="amount"
                                           readonly
                                           aria-label="Amount (to the nearest Ringgit Malaysia)"
                                           value="{{ (float) $amount }}">
                                    <button type="submit" class="btn btn-lg btn-danger">Pay</button>
                                </div>
                                @error('amount')
                                <div class="alert alert-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </form>
                    @endif
                </div>
            </div>
        </div>
    </div>


@endsection

@push('js')
    <script>
        let rate = {{ $rate }};
        let total = 1;

        $('input:checkbox').change(function ()
        {
            $('input:checkbox:checked').each(function(){ // iterate through each checked element.
                total = rate* $('input:checkbox:checked').length;
            });

            $("#amount").val(total);
        });
    </script>
@endpush