@extends('layouts.app')

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

@section('content')
    <div class="container">
        <h2>Add Card Type</h2>
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <form method="POST" action="{{ route('card-types.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="mb-3">
                <label for="code" class="form-label">Card Code *</label>
                <input type="text" class="form-control @error('code') is-invalid @enderror" id="code" name="code" value="{{ old('code') }}" required maxlength="50">
                @error('code')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="type" class="form-label">Card Type *</label>
                <select class="form-select @error('type') is-invalid @enderror" id="type" name="type" required>
                    <option value="" disabled {{ old('type') ? '' : 'selected' }}>Select card type</option>
                    @foreach ($cardTypes as $type)
                        <option value="{{ $type }}" {{ old('type') == $type ? 'selected' : '' }}>{{ $type }}</option>
                    @endforeach
                </select>
                @error('type')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="description" class="form-label">Card Type Description *</label>
                <input type="text" class="form-control @error('description') is-invalid @enderror" id="description" name="description" value="{{ old('description') }}" required maxlength="255">
                @error('description')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="short_description" class="form-label">Card Type Short Description *</label>
                <input type="text" class="form-control @error('short_description') is-invalid @enderror" id="short_description" name="short_description" value="{{ old('short_description') }}" required maxlength="100">
                @error('short_description')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="image" class="form-label">Card Type Image</label>
                <input type="file" class="form-control @error('image') is-invalid @enderror" id="image" name="image" accept="image/*">
                @error('image')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="virtual_card_font_color" class="form-label">Virtual Card Font Color *</label>
                <select class="form-select @error('virtual_card_font_color') is-invalid @enderror" id="virtual_card_font_color" name="virtual_card_font_color" required>
                    <option value="" disabled {{ old('virtual_card_font_color') ? '' : 'selected' }}>Select color</option>
                    @foreach ($fontColors as $color)
                        <option value="{{ $color }}" {{ old('virtual_card_font_color') == $color ? 'selected' : '' }}>{{ $color }}</option>
                    @endforeach
                </select>
                @error('virtual_card_font_color')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="bg_image" class="form-label">Card Type Cover Image</label>
                <input type="file" class="form-control @error('bg_image') is-invalid @enderror" id="bg_image" name="bg_image" accept="image/*">
                @error('bg_image')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="id_number" class="form-label">ID Number Required? *</label>
                <select class="form-select @error('id_number') is-invalid @enderror" id="id_number" name="id_number" required>
                    <option value="" disabled {{ old('id_number') ? '' : 'selected' }}>Select option</option>
                    @foreach ($idNumberOptions as $option)
                        <option value="{{ $option }}" {{ old('id_number') == $option ? 'selected' : '' }}>{{ $option }}</option>
                    @endforeach
                </select>
                @error('id_number')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="id_number_description" class="form-label">ID Number Description</label>
                <input type="text" class="form-control @error('id_number_description') is-invalid @enderror" id="id_number_description" name="id_number_description" value="{{ old('id_number_description') }}" maxlength="255">
                @error('id_number_description')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="terms_and_conditions" class="form-label">Terms and Conditions *</label>
                <textarea class="form-control @error('terms_and_conditions') is-invalid @enderror" id="terms_and_conditions" name="terms_and_conditions" rows="5" required>{{ old('terms_and_conditions') }}</textarea>
                @error('terms_and_conditions')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="faqs" class="form-label">FAQs *</label>
                <textarea class="form-control @error('faqs') is-invalid @enderror" id="faqs" name="faqs" rows="5" required>{{ old('faqs') }}</textarea>
                @error('faqs')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <button type="submit" class="btn btn-primary">Save</button>
            <a href="{{ route('card-types') }}" class="btn btn-secondary">Cancel</a>
        </form>
    </div>
@endsection