@extends('layouts.app')

@section('page_title', 'Add Card Type')

@section('content')
    <div class="card-header border-0 bg-transparent py-2">
        <h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">Add Card Type</h5>
    </div>
    <div class="row justify-content-center">
        <div class="card-body p-3">
            <form id="addCardTypeForm">
                <div class="mb-3">
                    <label for="cardCode" class="form-label">Card Code</label>
                    <input type="text" class="form-control" id="cardCode" placeholder="Enter card code" required>
                </div>
                <div class="mb-3">
                    <label for="cardTypeDescription" class="form-label">Card Type Description</label>
                    <input type="text" class="form-control" id="cardTypeDescription" placeholder="Enter description" required>
                </div>
                <div class="mb-3">
                    <label for="cardTypeShortDescription" class="form-label">Card Type Short Description</label>
                    <input type="text" class="form-control" id="cardTypeShortDescription" placeholder="Enter short description" required>
                </div>
                <div class="mb-3">
                    <label for="cardTypeImage" class="form-label">Upload Card Type Image</label>
                    <input type="file" class="form-control" id="cardTypeImage" accept=".jpg,.jpeg,.png">
                </div>
                <div class="mb-3">
                    <label for="virtualCardFontColor" class="form-label">Virtual Card Font Color</label>
                    <select class="form-select" id="virtualCardFontColor" required>
                        <option value="" disabled selected>Select font color</option>
                        <option value="White">White</option>
                        <option value="Black">Black</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="cardTypeCoverImage" class="form-label">Upload Card Type Cover Image</label>
                    <input type="file" class="form-control" id="cardTypeCoverImage" accept=".jpg,.jpeg,.png">
                </div>
                <div class="mb-3">
                    <label for="idNumberRequired" class="form-label">ID Number Required?</label>
                    <select class="form-select" id="idNumberRequired" required>
                        <option value="" disabled selected>Select option</option>
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="idNumberDescription" class="form-label">ID Number Description</label>
                    <input type="text" class="form-control" id="idNumberDescription" placeholder="Enter ID description">
                </div>
                <div class="mb-3">
                    <label for="termsAndConditions" class="form-label">Terms and Conditions</label>
                    <textarea class="form-control" id="termsAndConditions" rows="4" placeholder="Enter terms and conditions" required></textarea>
                </div>
                <div class="mb-3">
                    <label for="faqs" class="form-label">FAQs</label>
                    <textarea class="form-control" id="faqs" rows="4" placeholder="Enter FAQs" required></textarea>
                </div>
                <div class="d-flex justify-content-end mt-3">
                    <button type="button" class="btn btn-outline-secondary me-2" style="margin-right:5px">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add Card Type</button>
                </div>
            </form>
        </div>
    </div>

    <style>
        .card {
            border-radius: 5px;
            border: 1px solid #dee2e6;
        }
        .form-label {
            font-size: 0.95rem;
        }
        .form-control,
        .form-select,
        textarea.form-control {
            font-size: 0.9rem;
            width: 100%;
        }
    </style>

    <script>
        document.getElementById('addCardTypeForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const cardCode = document.getElementById('cardCode').value;
            const cardTypeDescription = document.getElementById('cardTypeDescription').value;
            const cardTypeShortDescription = document.getElementById('cardTypeShortDescription').value;
            const cardTypeImage = document.getElementById('cardTypeImage').files[0]?.name || '';
            const virtualCardFontColor = document.getElementById('virtualCardFontColor').value;
            const cardTypeCoverImage = document.getElementById('cardTypeCoverImage').files[0]?.name || '';
            const idNumberRequired = document.getElementById('idNumberRequired').value;
            const idNumberDescription = document.getElementById('idNumberDescription').value;
            const termsAndConditions = document.getElementById('termsAndConditions').value;
            const faqs = document.getElementById('faqs').value;

            if (!cardCode || !cardTypeDescription || !cardTypeShortDescription || 
                !virtualCardFontColor || !idNumberRequired || !termsAndConditions || !faqs) {
                alert('Please fill out all required fields.');
                return;
            }

            const newCardType = {
                id: Date.now(),
                cardCode,
                cardTypeDescription,
                cardTypeShortDescription,
                cardTypeImage,
                virtualCardFontColor,
                cardTypeCoverImage,
                idNumberRequired,
                idNumberDescription,
                termsAndConditions,
                faqs
            };

            let cardTypes = JSON.parse(sessionStorage.getItem('cardTypes') || '[]');
            cardTypes.push(newCardType);
            sessionStorage.setItem('cardTypes', JSON.stringify(cardTypes));

            alert('Card Type added successfully!');
            window.location.href = '/card-types';
        });

        document.querySelector('.btn-outline-secondary').addEventListener('click', function() {
            window.location.href = '/card-types';
        });
    </script>
@endsection