@extends('layouts.app')

@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')
    <h1 class="page-header">Customers Details</h1>
    <div class="row">
        <div class="col-md-3">
            @include('customer.menu')
        </div>
        <div class="col-md-9">
            <div class="card mb-3 border-0">
                @include('customer.tab')
                <div class="card-body border-bottom p-4">
                    <div class="row mb-4">
                        <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 ($customer->isCorporate())
                                    Corporate
                                @else
                                    Individual
                                @endif
                            </span>
                        </div>
                    </div>
                    <div class="row mb-4">
                        <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">{{ $customer->cardHolder?->account_no ?? '-' }}</span>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <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">{{ $customer->cardHolder?->status->label() }}</span>
                        </div>
                    </div>

                    <div class="row mb-0">
                        <label class="col-md-3 fw-semibold text-muted">Total Active (Total/Amount)</label>
                        <div class="col-md-9">
                            <span class="fw-bold fs-6 text-gray-800">
                                {{ $seasonCards->filter(fn($seasonCard) => $seasonCard->isActive())->count() }} /
                                RM{{ number_format($seasonCards->filter(fn($seasonCard) => $seasonCard->isActive())->sum('rate.rate'), 2) }}
                            </span>
                        </div>
                    </div>
                    {{-- <div class="row mb-0">
                    <label class="col-md-3 fw-semibold text-muted">Car Plate No.</label>
                    <div class="col-md-9">
                        @if ($customer->cardHolder)
                        <span class="fw-bold fs-6 text-gray-800">{{ $customer->cardHolder?->car_no_1 ? $customer->cardHolder?->car_no_1 : '-'  }}</span>
                        <span class="fw-bold fs-6 text-gray-800"> {!! $customer->cardHolder?->car_no_2 ? '<br> 2) '.$customer->cardHolder?->car_no_2 : ''  !!}</span>
                        @else
                            -
                        @endif

                    </div>
                </div> --}}
                </div>
                <div class="card-body p-4">
                    <h6 class="card-subtitle mb-3 text-muted">Card List</h6>
                    {{-- <div class="row mb-0">
                        <div class="" style="width: 320px;">
                            <form action="">
                                <div class="mb-1">
                                    <label for="" class="form-label">Assign Card</label>
                                    <select name="card" id="card" class="form-select">
                                        <option value="">- Select Card -</option>
                                    </select>
                                </div>
                                <button type="submit" class="btn btn-sm btn-primary">Assign</button>
                            </form>
                        </div>
                    @include('customer.card')
                </div> --}}

                    <table class="table border">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Card No.</th>
                                @if ($customer->isCorporate())
                                    <th>Car No 1</th>
                                    <th>Car No 2</th>
                                @endif
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody class="table-group-divider">
                            @forelse ($seasonCards as $seasonCard)
                                <tr>
                                    <td>{{ $loop->iteration + ($seasonCards->currentPage() - 1) * $seasonCards->perPage() }}
                                    </td>
                                    <td>
                                        <a href="{{ route('season.edit', $seasonCard->id) }}"
                                            class="text-decoration-none">{{ $seasonCard->card_no }}</a>
                                    </td>
                                    @if ($customer->isCorporate())
                                        <td>{{ data_get($seasonCard, 'car_no_1') }}</td>
                                        <td>{{ data_get($seasonCard, 'car_no_2') }}</td>
                                    @endif
                                    <td>
                                        <span class="badge bg-{{ $seasonCard->status->color() }}">
                                            {{ $seasonCard->status->label() }}
                                        </span>
                                    </td>
                                    {{-- <td><a href="" class="btn btn-white">Manage</a></td> --}}
                                </tr>
                            @empty
                                <tr>
                                    <td class="text-muted text-center" colspan="3">No card found</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                    <div>
                        {{ $seasonCards->links() }}
                    </div>
                </div>
                <div class="card-footer text-end">
                    <a href="{{ route('user.index') }}" class="btn btn-white">Back</a>
                </div>
            </div>
        </div>
    </div>
@endsection