@extends('theme::backend.layouts.app')

@section('theme::backend-content')
    @include('theme::backend.layouts.navbar')

    <div class="container-fluid">
        <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">Create New Charging Code</h1>
        </div>
        
        <div class="row">
            <div class="col-12">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Add a New Charging Code</h6>
                    </div>
                    
                    <div class="card-body">
                        <div class="container">
                            @if (session('success'))
                                <div class="alert alert-success">{{ session('success') }}</div>
                            @endif

                            <form method="POST" action="{{ route('charging-store') }}" class="form">
                                @csrf
                                
                                <div class="form-group">
                                    <label for="code">Charging Code</label>
                                    <input type="text" class="form-control" id="code" name="code" 
                                           value="{{ $charging_code }}" readonly>
                                </div>

                                <div class="form-group">
                                    <label for="character_name">Character Name</label>
                                    <input type="text" class="form-control @error('character_name') is-invalid @enderror"
                                           id="character_name" name="character_name" value="{{ old('character_name') }}">
                                    @error('character_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="balance_type">Balance Type</label>
                                    <select class="form-control @error('balance_type') is-invalid @enderror"
                                            name="balance_type" id="balance_type">
                                        <option value="balance">Balance</option>
                                        <option value="gift_balance">Gift Balance</option>
                                    </select>
                                    @error('balance_type') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="form-group">
                                    <label for="amount">Amount</label>
                                    <input type="number" class="form-control @error('amount') is-invalid @enderror"
                                           id="amount" name="amount" value="{{ old('amount') }}">
                                    @error('amount') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                                <div class="form-group">
                                    <label for="reason">Reason</label>
                                    <textarea class="form-control @error('reason') is-invalid @enderror" 
                                              id="reason" name="reason" rows="3">{{ old('reason') }}</textarea>
                                    @error('reason') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>                                
                                <button type="submit" class="btn btn-primary">Save</button>
                                <a href="{{ route('charging-index-backend') }}" class="btn btn-secondary">Back</a>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection