@extends('layouts.app')

@section('content')

    <div class="modal fade" id="addAdjustment" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="addAdjustmentLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="addAdjustmentLabel">Add Credit Debit Adjustment</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('adjustment.store', $customer->cardHolder) }}" method="POST" enctype="multipart/form-data">
                    <div class="modal-body">
                        @csrf

                        <fieldset class="row mb-3">
                            <legend class="col-form-label col-sm-2 pt-0">Type</legend>
                            <div class="col-sm-10">
                                @foreach(\App\Models\Traits\Enum\TransactionType::cases() as $type)
                                    <div class="form-check form-check-inline">
                                        <input
                                            type="radio"
                                            name="type"
                                            id="type-{{ $type->value }}"
                                            value="{{ $type->value }}"
                                            @checked(old('type', $type == \App\Models\Traits\Enum\TransactionType::DEBIT))
                                            @class(['form-check-input', 'is-invalid' => $errors->has('type')])>

                                        <label class="form-check-label" for="type-{{ $type->value }}">{{ $type->name }}</label>
                                    </div>
                                @endforeach

                                @error('type')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                @enderror
                            </div>
                        </fieldset>

                        <div class="row mb-3">
                            <label for="description" class="col-form-label col-md-2">Reason</label>

                            <div class="col-md-10">
                                <textarea name="description" placeholder="Ex: Debit Note: Extra charge" id="description" @class(['form-control', 'is-invalid' => $errors->has('description')])>{{ old('description') }}</textarea>

                                @error('description')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="amount" class="col-form-label col-md-2">Amount</label>

                            <div class="col-md-auto">
                                <input type="number" step=".1" name="amount" value="{{ old('amount', '0.0') }}" id="amount" @class(['form-control col-4', 'is-invalid' => $errors->has('amount')])>

                                @error('amount')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="expires_at" class="col-form-label col-md-2">Expires</label>

                            <div class="col-md-auto">
                                <select name="expires_at" id="expires_at" class="form-select @error('expires_at') is-invalid @enderror text-capitalize">
                                    @foreach($dates as $date)
                                        <option value="{{ $date->format('Y-m-d') }}" @selected(old('expires_at') == $date->format('Y-m-d') || $date->month=== now()->addMonths(3)->month)>
                                            {{ $date->format('F Y') }}
                                        </option>
                                    @endforeach
                                </select>

                                @error('expires_at')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="alert alert-info">
                            <i class="fa fa-circle-info"></i> Credit and Debit Note adjustments will be applied to the current unpaid invoice and to future invoices, as long as they have not expired.
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <h1 class="page-header">Customers Payment List</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">
                    <table class="table border">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Invoice No.</th>
                                <th>Payment For</th>
                                <th>Invoice Month</th>
                                <th>Payment Date</th>
                                <th>Amount</th>
                                <th>Status</th>
                                <th>Category</th>
                            </tr>
                        </thead>
                        <tbody class="table-group-divider">
                            @forelse ($payments as $payment)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $payment->invoice_no ?? '' }}</td>
                                <td>{{ $payment->payment_for ?? '' }}</td>
                                <td>{{ $payment->invoiced_at ? $payment->invoiced_at->addMonth()->format('m/Y') : '-' }}</td>
                                <td>{{ $payment->received_time?->format('d/m/Y') ?? '-' }}</td>
                                <td>RM {{ $payment->amount ?? '-' }}</td>
                                <td>
                                    <span class="badge bg-{{ $payment->status->color() }}">
                                        {{ $payment->status->label() }}
                                    </span>
                                    @if ($payment->status == 'Success')
                                        <span class="badge bg-blue" style="display:inline-block; width:80px;">Success</span>
                                    @elseif ($payment->status == 'Fail')
                                        <span class="badge bg-red" style="display:inline-block; width:80px;">Fail</span>
                                    @else

                                    @endif
                                </td>
								<td>
								@foreach ($payment->creditDebitNoteItems as $item)
									@if ($item->creditDebitNote)
										<span class="badge bg-{{ $item->creditDebitNote->category->color() }}">
										{{ $item->creditDebitNote->category->label() }}
										</span>
									@endif
								@endforeach
								</td>
                                <td class="text-end">
                                    <form id="deleteForm" action="{{ route('payment.destroy', $payment) }}" method="POST">
                                        @method('DELETE')
                                        @csrf

                                        @if(! $payment->isPaid())
                                            <a href="{{ route('adjustment.cardholder.invoice.show', [$customer->cardHolder, $payment]) }}" class="btn btn-xs btn-white me-1" title="Debit Credit Adjustment">
                                                <i class="fa-solid fa-comments-dollar fa-fw"></i>
                                            </a>
                                        @endif

                                        <a href="{{ route('payment.invoice', $payment) }}" class="btn btn-xs btn-white me-1"><i class="fa-solid fa-money-check-dollar fa-fw"></i></a>

                                        <a href="{{ route('payment.show', $payment) }}" class="btn btn-xs btn-white me-1"><i class="fa-solid fa-eye fa-fw"></i></a>

                                        <a href="{{ route('customer.transaction.alter', [$customer, $payment]) }}" class="btn btn-xs btn-white me-1">
                                            <i class="fa-solid fa-pen-to-square fa-fw"></i>
                                        </a>

                                        <button type="submit" id="delete" value="Delete Site"  data-bs-toggle="tooltip" title="Padam" class="btn btn-xs btn-dark"><i class="fas fa-trash"></i></button>
                                    </form>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td class="text-center text-muted" colspan="7">No record found</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                    {{  $payments->links() }}
                </div>

            </div>
        </div>
    </div>
@endsection

@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

@push('js')
    <script>
        const addAdjustment = document.getElementById('addAdjustment')
        if (addAdjustment) {
            addAdjustment.addEventListener('show.bs.modal', event => {

                // Button that triggered the modal
                const button = event.relatedTarget
                // Extract info from data-payment attributes
                const payment = button.getAttribute('data-payment')

                $('<input>', {
                    type: 'hidden',
                    id: 'payment',
                    name: 'payment',
                    value: payment
                }).appendTo('form');

            })

            @if (count($errors) > 0)
            let addAAdjustmentModal = new bootstrap.Modal(document.getElementById('addAdjustment'), {});
            addAAdjustmentModal.show();

            @endif
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $('input[name="type"]').change(e => {
            const type = $(e.target).val();

            if (type === "DN") {
                $('#description').val("Debit Note");
            } else if (type === "CN") {
                $('#description').val("Credit Note");
            }
        });



        $(document).on('click', '#delete', function (e) {
            e.preventDefault();
            let 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