@extends('layouts.app')

@section('title', 'Credit Debit Note')

@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;
        }
    </style>
@endpush

@section('content')
    <!-- Modal -->
    <div class="modal fade" id="addCreditDebitNote" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="addCreditDebitNoteLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="addCreditDebitNoteLabel">Add Credit Debit Note</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                @php
                $formAction = $payment
                    ? route('adjustment.invoice.store', [$cardHolder, $payment])
                    : route('adjustment.store', $cardHolder);
                @endphp
                <form action="{{ $formAction }}" 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="category" class="col-form-label col-md-2">Category</label>

                            <div class="col-md-auto">
                                <select name="category" id="category" @class(['form-select', 'is-invalid' => $errors->has('category')])>
                                    <option value="">- Select category -</option>
                                    @foreach(\App\Models\Traits\Enum\CreditDebitNoteCategory::cases() as $category)
                                        <option value="{{ $category->value }}" @selected((int) old('category') === $category->value && old('category') !== null && old('category') !== '')>
                                            {{ $category->label() }}
                                        </option>
                                    @endforeach
                                </select>

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

                        @if ($payment)
                            <div class="alert alert-info mb-0">
                                <i class="fa fa-circle-info"></i>
                                This adjustment is applied to the invoice only after it is approved by Finance.
                            </div>
                        @endif

{{--                        <hr>--}}

{{--                        <div class="alert alert-info">--}}
{{--                            <i class="fa fa-circle-info"></i>--}}
{{--                            Credit or Debit Notes apply to the selected invoice only. To apply them to future invoices, set an expiry date.--}}
{{--                        </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">--}}
{{--                                    <option value="0">-- State expiry date --</option>--}}
{{--                                    @foreach($dates as $date)--}}
{{--                                        <option value="{{ $date->format('Y-m-d') }}" @selected(old('expires_at') == $date->format('Y-m-d'))>--}}
{{--                                            {{ $date->format('F Y') }}--}}
{{--                                        </option>--}}
{{--                                    @endforeach--}}
{{--                                </select>--}}

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

    <div class="d-flex justify-content-between align-items-center mb-3 d-print-none">
        <h1 class="page-header mb-0">Credit Debit Note</h1>
    </div>
    <div class="row">
        <div class="col-md-3">
            @include('payment.customerOverview')
        </div>
        <div class="col-md-9">

            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="fs-5 fw-bold">Credit Debit Note</span>
                        </div>
                        <div>
                            <a href="#" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addCreditDebitNote">
                                Add Credit Debit Note
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table border">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Type</th>
                                <th>Description</th>
                                <th>Amount</th>
                                <th>Started</th>
                                <th>Expires</th>
                                <th class="text-end">Action</th>
                            </tr>
                            </thead>
                            <tbody class="table-group-divider">
                            @forelse ($creditDebitNotes as $creditDebitNote)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $creditDebitNote->type->name ?? '' }}</td>
                                    <td>{{ $creditDebitNote->description ?? '' }}</td>
                                    <td>{{ $creditDebitNote->type->symbol() }} RM {{ $creditDebitNote->amount ?? '' }}</td>
                                    <td>{{ $creditDebitNote->started_at?->format('d/m/Y') ?? '-' }}</td>
                                    <td>{{ $creditDebitNote->expires_at?->format('d/m/Y') ?? '-' }}</td>

                                    <td class="text-end">
                                        <form id="deleteForm" action="{{ route('adjustment.destroy', $creditDebitNote) }}" method="POST">
                                            @method('DELETE')
                                            @csrf

                                            <a href="{{ route('adjustment.edit', $creditDebitNote) }}" 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 Adjustment"  data-bs-toggle="tooltip" title="Hapus" 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>
                    </div>
                </div>
                <div class="card-footer text-end">
                    <a href="{{ route('customer.transaction', $payer->user) }}" class="btn btn-white">Back</a>
                </div>
            </div>
        </div> <!--/.col-md-9 -->
    </div> <!--/.row -->

@endsection

@push('js')
    <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");
                }
            });

            @if (count($errors) > 0)
            $('#addCreditDebitNote').modal('show');
            @endif
        });

        $(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