@extends('layouts.app', ['title' => __('Settings')])

@section('content')
<style>
    .card-action-btn {
        margin-right: 5px;
    }
</style>
<div class="header bg-gradient-primary pb-8 pt-5 pt-md-5"></div>
<div class="container-fluid mt--7">

    {{-- Card Form --}}
    <div class="card mb-4">
        <div class="card-header">
            <h3 class="mb-0" id="form-title">Add New Card</h3>
        </div>
        <div class="card-body">
            <form id="card-form" action="{{ route('storecard.details') }}" method="post">
                @csrf
                <input type="hidden" name="card_id" id="card_id">

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="account_holder">{{ __('Account Holder Name') }}</label>
                        <input class="form-control" type="text" id="account_holder" name="account_holder" required
                            placeholder="Enter Name on Card">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="card_number">{{ __('Card Number') }}</label>
                        <input class="form-control" type="text" id="card_number" name="card_number" required
                            placeholder="Enter Card Number" maxlength="19">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="cvc">{{ __('CVC') }}</label>
                        <input class="form-control" type="text" id="cvc" name="cvc" placeholder="Enter CVC" required
                            maxlength="3">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="expiry_date">{{ __('Expiry Date') }}</label>
                        <input class="form-control" type="date" id="expiry_date" name="expiry_date" required>
                    </div>
                </div>

                <div class="text-right">
                    <button type="submit" class="btn btn-sm btn-primary" id="submit-btn">Save</button>
                    <button type="button" class="btn btn-sm btn-primary" id="cancel-edit">Cancel</button>
                </div>
            </form>
        </div>
    </div>

    {{-- Card List --}}
    <div class="card">
        <div class="card-header">
            <h3 class="mb-0">My Cards</h3>
        </div>
        <div class="card-body">
            <table class="table table-bordered table-striped" id="cards-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Card Holder</th>
                        <th>Card Number</th>
                        <th>Expiry</th>
                        <th>Default</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($cards as $index => $card)
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>{{ $card->name }}</td>
                        <td>**** **** **** {{ substr($card->card_number, -4) }}</td>
                        <td>{{ $card->expiry_date }}</td>
                        <td>{{ $card->is_default ? 'Yes' : 'No' }}</td>
                        <td>
                            <button class="btn btn-sm btn-primary card-edit-btn card-action-btn"
                                data-card="{{ json_encode($card) }}">Edit</button>
                            <button class="btn btn-sm btn-danger card-delete-btn card-action-btn"
                                data-id="{{ $card->id }}">Delete</button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
 @include('layouts.footers.auth')
</div>

{{-- Scripts --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function formatCardNumber(value) {
        let digits = value.replace(/\D/g, '').substring(0,16);
        return digits.match(/.{1,4}/g)?.join('-') || '';
    }

    document.getElementById('card_number').addEventListener('input', function(e) {
        e.target.value = formatCardNumber(e.target.value);
    });

    document.getElementById('cvc').addEventListener('input', function(e){
        e.target.value = e.target.value.replace(/\D/g,'').substring(0,3);
    });

    // Edit button
    document.querySelectorAll('.card-edit-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            let card = JSON.parse(this.dataset.card);
            document.getElementById('card_id').value = card.id;
            document.getElementById('account_holder').value = card.name;
            document.getElementById('card_number').value = formatCardNumber(card.card_number);
            document.getElementById('cvc').value = card.cvc;
            document.getElementById('expiry_date').value = card.expiry_date;

            document.getElementById('form-title').innerText = 'Edit Card';
            document.getElementById('submit-btn').innerText = 'Update';
        });
    });

    // Cancel edit
    document.getElementById('cancel-edit').addEventListener('click', function(){
        document.getElementById('card-form').reset();
        document.getElementById('card_id').value = '';
        document.getElementById('form-title').innerText = 'Add New Card';
        document.getElementById('submit-btn').innerText = 'Save';
    });

    // Delete button
    document.querySelectorAll('.card-delete-btn').forEach(btn => {
        btn.addEventListener('click', function(){
            let id = this.dataset.id;
            Swal.fire({
                title: 'Are you sure?',
                text: "This will delete the card!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if(result.isConfirmed){
                    window.location.href = `/cards/delete/${id}`;
                }
            });
        });
    });
</script>
@endsection