@extends('admin.layouts.master')

@section('title', 'Add Memorial')

@section('content')
    @include('admin.partials.page-header', [
        'title' => 'Add Memorial',
        'crumbs' => [
            ['label' => 'Memorials', 'url' => route('admin.funeral.index')],
            ['label' => 'Add'],
        ],
    ])

    <div class="card mt-3">
        <div class="card-body">
            <form method="POST" action="{{ route('admin.funeral.store') }}" enctype="multipart/form-data" id="funeral-create-form">
                @csrf
                <input type="hidden" name="typ_price" id="typ_price" value="0">
                <div class="row">
                    @if ($role === 1)
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Funeral Home <span class="text-danger">*</span></label>
                            <select name="f_home" id="f_home" class="form-control select2" data-placeholder="Select funeral home">
                                <option value="">Select funeral home</option>
                                @foreach ($funeralHomes as $home)
                                    <option value="{{ $home->id }}" data-price="{{ $home->price }}" @selected(old('f_home') == $home->id)>
                                        {{ $home->funeral_home_name ?: $home->contact_person }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    @else
                        <input type="hidden" name="f_home" id="f_home" value="{{ session('admin.id') }}">
                    @endif
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Name <span class="text-danger">*</span></label>
                        <input type="text" name="f_name" class="form-control" value="{{ old('f_name') }}">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Born Date <span class="text-danger">*</span></label>
                        <input type="text" name="f_dob" class="form-control" data-provider="flatpickr" data-date-format="Y-m-d" placeholder="Select date" value="{{ old('f_dob') }}">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Funeral Date <span class="text-danger">*</span></label>
                        <input type="text" name="f_funeral_date" class="form-control" data-provider="flatpickr" data-date-format="Y-m-d" placeholder="Select date" value="{{ old('f_funeral_date') }}">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Contact Email <span class="text-danger">*</span></label>
                        <input type="email" name="c_email" class="form-control" value="{{ old('c_email') }}">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Photo <span class="text-danger">*</span></label>
                        <input type="file" name="f_image" id="f_image" class="form-control" accept=".jpg,.jpeg,.png,.gif,image/*">
                    </div>
                    <div class="col-12 mb-3">
                        <label class="form-label">Obituary <span class="text-danger">*</span></label>
                        <textarea name="f_biography" class="form-control" rows="5">{{ old('f_biography') }}</textarea>
                    </div>
                    <div class="col-12 mb-3" id="track-container"></div>
                    <div class="col-md-6 mb-3 price-box" style="display:none;">
                        <label class="form-label">Memorial Price (USD) <span class="text-danger">*</span></label>
                        <input type="text" name="f_funeral_price" id="f_funeral_price" class="form-control" readonly>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary" id="submit-free">Save</button>
                <button type="button" class="btn btn-primary" id="submit-paid" style="display:none;">Pay &amp; Save</button>
            </form>
        </div>
    </div>

    <div class="modal fade" id="paymentModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form method="POST" action="{{ route('admin.funeral.save-credit') }}" enctype="multipart/form-data" id="payment-form">
                    @csrf
                    <input type="hidden" name="f_hm" id="pay_f_hm">
                    <input type="hidden" name="f_nm" id="pay_f_nm">
                    <input type="hidden" name="f_borndt" id="pay_f_borndt">
                    <input type="hidden" name="f_dt" id="pay_f_dt">
                    <input type="hidden" name="f_biog" id="pay_f_biog">
                    <input type="hidden" name="f_trk" id="pay_f_trk">
                    <input type="hidden" name="f_c_em" id="pay_f_c_em">
                    <input type="hidden" name="f_price" id="pay_f_price">
                    <input type="hidden" name="name" value="{{ session('admin.name') ?: session('admin.user_name') }}">
                    <input type="hidden" name="stripeToken" id="stripeToken" value="">
                    <input type="hidden" name="card" id="pay_card" value="{{ !empty($cards) ? $cards[0]['card_id'] : 'New Card' }}">
                    <input type="file" name="f_file" id="f_file" accept="image/*" style="display:none;">
                    <div class="modal-header">
                        <h5 class="modal-title">Payment Confirmation</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p class="mb-3 small text-muted">Amount: $<span id="pay_amount_label">0.00</span></p>

                        <div id="saved-cards-list" class="mb-3" @if (empty($cards)) style="display:none;" @endif>
                            <label class="form-label fw-semibold">Saved cards</label>
                            <div id="saved-cards-items">
                                @foreach ($cards as $index => $savedCard)
                                    <div class="d-flex align-items-center justify-content-between border rounded px-2 py-2 mb-2 saved-card-row" data-card-id="{{ $savedCard['card_id'] }}">
                                        <div class="form-check mb-0 flex-grow-1">
                                            <input class="form-check-input pay-card-choice" type="radio" name="card_choice" id="card_{{ $savedCard['card_id'] }}" value="{{ $savedCard['card_id'] }}" @checked($index === 0)>
                                            <label class="form-check-label d-flex align-items-center gap-2" for="card_{{ $savedCard['card_id'] }}">
                                                <img src="{{ $savedCard['card_img'] }}" alt="" height="20">
                                                <span>
                                                    {{ ucfirst($savedCard['brand']) }} · XXXX {{ $savedCard['last4'] }}
                                                    <span class="text-muted small">({{ $savedCard['exp_month'] }}/{{ $savedCard['exp_year'] }})</span>
                                                </span>
                                            </label>
                                        </div>
                                        <button type="button" class="btn btn-sm btn-soft-danger delete-saved-card" data-card-id="{{ $savedCard['card_id'] }}" title="Delete card">
                                            <i class="ti ti-trash"></i>
                                        </button>
                                    </div>
                                @endforeach
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input pay-card-choice" type="radio" name="card_choice" id="card_new" value="New Card" @checked(empty($cards))>
                                <label class="form-check-label" for="card_new">Use a new card</label>
                            </div>
                        </div>

                        <div id="new-card-wrap" @if (!empty($cards)) style="display:none;" @endif>
                            <label class="form-label">Card details</label>
                            <div id="card-element" class="form-control p-3"></div>
                        </div>
                        <div id="card-errors" class="text-danger small mt-2"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="confirm-purchase">Pay now</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
@if (config('tom.stripe.pk_key'))
<script src="https://js.stripe.com/v3/"></script>
@endif
<script>
(function () {
    var homeId = $('#f_home').val();
    var paymentModalEl = document.getElementById('paymentModal');
    var paymentModal = paymentModalEl ? bootstrap.Modal.getOrCreateInstance(paymentModalEl) : null;
    var deleteCardUrl = @json(route('admin.funeral.delete-card'));
    var csrfToken = @json(csrf_token());

    function loadTracks(uid) {
        if (!uid) { $('#track-container').html(''); return; }
        $.post(@json(route('admin.funeral.get-track')), { u_id: uid, _token: csrfToken }, function (html) {
            $('#track-container').html(html);
        });
    }
    function loadPrice(uid) {
        if (!uid) return;
        $.post(@json(route('admin.funeral.get-price-track')), { u_id: uid, _token: csrfToken }, function (res) {
            var paid = res.typ_payment === '1' || parseFloat(res.price) > 0;
            $('#typ_price').val(paid ? '1' : '0');
            if (paid) {
                $('.price-box').show();
                $('#f_funeral_price, #pay_f_price').val(res.price);
                $('#pay_amount_label').text(parseFloat(res.price || 0).toFixed(2));
                $('#submit-free').hide();
                $('#submit-paid').show();
            } else {
                $('.price-box').hide();
                $('#submit-free').show();
                $('#submit-paid').hide();
            }
        }, 'json');
    }
    function refreshHome() {
        homeId = $('#f_home').val();
        loadTracks(homeId);
        loadPrice(homeId);
    }
    $('#f_home').on('change select2:select', refreshHome);
    refreshHome();

    $('#funeral-create-form').validate({
        ignore: ':hidden:not(select)',
        rules: {
            f_home: { required: true },
            f_name: { required: true },
            f_dob: { required: true },
            f_funeral_date: { required: true },
            c_email: { required: true, email: true },
            f_image: { required: true },
            f_biography: { required: true },
            f_funeral_price: {
                required: {
                    depends: function () { return $('#typ_price').val() === '1'; }
                }
            }
        }
    });

    function syncPaymentFields() {
        var tracks = [];
        $('select[name="f_track[]"]').each(function () {
            if ($(this).val()) tracks.push($(this).val());
        });
        $('#pay_f_hm').val($('#f_home').val());
        $('#pay_f_nm').val($('[name=f_name]').val());
        $('#pay_f_borndt').val($('[name=f_dob]').val());
        $('#pay_f_dt').val($('[name=f_funeral_date]').val());
        $('#pay_f_biog').val($('[name=f_biography]').val());
        $('#pay_f_trk').val(tracks.join(','));
        $('#pay_f_c_em').val($('[name=c_email]').val());
        $('#pay_f_price').val($('#f_funeral_price').val());
        $('#pay_amount_label').text(parseFloat($('#f_funeral_price').val() || 0).toFixed(2));

        var sourceInput = document.getElementById('f_image');
        var destInput = document.getElementById('f_file');
        if (sourceInput && destInput) {
            destInput.files = sourceInput.files;
        }
    }

    $('#submit-paid').on('click', function (e) {
        e.preventDefault();
        if (! $('#funeral-create-form').valid()) {
            return false;
        }
        if (! @json((bool) config('tom.stripe.pk_key'))) {
            alert('Stripe publishable key is missing. Set TOM_STRIPE_PK in .env.');
            return false;
        }
        syncPaymentFields();
        if (paymentModal) {
            paymentModal.show();
        }
    });

    function selectedCardValue() {
        var checked = $('input[name="card_choice"]:checked').val();
        return checked || 'New Card';
    }

    function toggleNewCard() {
        var isNew = selectedCardValue() === 'New Card';
        $('#pay_card').val(selectedCardValue());
        $('#new-card-wrap').toggle(isNew);
        $('#card-errors').text('');
    }
    $(document).on('change', '.pay-card-choice', toggleNewCard);
    toggleNewCard();

    $(document).on('click', '.delete-saved-card', function (e) {
        e.preventDefault();
        e.stopPropagation();
        var cardId = $(this).data('card-id');
        var $row = $(this).closest('.saved-card-row');
        if (!cardId) return;

        var doDelete = function () {
            $.ajax({
                url: deleteCardUrl,
                method: 'POST',
                data: { _token: csrfToken, card_id: cardId },
                success: function (res) {
                    if (!res.status) {
                        $('#card-errors').text(res.message || 'Could not delete card.');
                        return;
                    }
                    var wasSelected = $row.find('.pay-card-choice').is(':checked');
                    $row.remove();
                    if ($('#saved-cards-items .saved-card-row').length === 0) {
                        $('#saved-cards-list').hide();
                        $('#card_new').prop('checked', true);
                    } else if (wasSelected) {
                        $('#saved-cards-items .pay-card-choice').first().prop('checked', true);
                    }
                    toggleNewCard();
                },
                error: function (xhr) {
                    var msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Could not delete card.';
                    $('#card-errors').text(msg);
                }
            });
        };

        if (window.Swal) {
            Swal.fire({
                title: 'Delete card?',
                text: 'This saved card will be removed from your account.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete',
                cancelButtonText: 'Cancel'
            }).then(function (result) {
                if (result.isConfirmed) doDelete();
            });
        } else if (confirm('Delete this saved card?')) {
            doDelete();
        }
    });

    @if (config('tom.stripe.pk_key'))
    var stripe = Stripe(@json(config('tom.stripe.pk_key')));
    var elements = stripe.elements();
    var card = elements.create('card', { hidePostalCode: true });
    card.mount('#card-element');
    card.on('change', function (event) {
        $('#card-errors').text(event.error ? event.error.message : '');
    });

    $('#payment-form').on('submit', function (e) {
        e.preventDefault();
        syncPaymentFields();

        var form = this;
        var $btn = $('#confirm-purchase');
        var cardValue = selectedCardValue();
        $('#pay_card').val(cardValue);
        $('#stripeToken').val('');

        if (! $('#f_file')[0].files.length) {
            $('#card-errors').text('Memorial photo is required. Please choose a photo on the form.');
            return false;
        }

        $btn.prop('disabled', true).text('Processing…');

        function fail(msg) {
            $('#card-errors').text(msg || 'Payment failed.');
            $btn.prop('disabled', false).text('Pay now');
        }

        function nativeSubmit() {
            HTMLFormElement.prototype.submit.call(form);
        }

        if (cardValue !== 'New Card') {
            nativeSubmit();
            return;
        }

        stripe.createToken(card).then(function (result) {
            if (result.error) {
                fail(result.error.message);
                return;
            }
            $('#stripeToken').val(result.token.id);
            nativeSubmit();
        }).catch(function () {
            fail('Unable to reach Stripe. Please try again.');
        });
    });
    @endif
})();
</script>
@endpush