CityCards_Partner_Flutter/lib/redemption/view/manual_entry_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../bloc/redemption_bloc.dart';
import '../viewmodel/redemption_view_model.dart';
import 'redemption_details_screen.dart';

class ManualEntryScreen extends StatelessWidget {
  const ManualEntryScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final controller = TextEditingController();
    final vm = RedemptionViewModel(context.read<RedemptionBloc>());

    return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.white,
      // appBar: AppBar(
      //   backgroundColor: Colors.white,
      //   elevation: 0,
      //   leading: IconButton(
      //     icon: const Icon(Icons.arrow_back, color: Colors.black),
      //     onPressed: () => Navigator.pop(context),
      //   ),
      //   title: const Text("Manual Entry",
      //       style: TextStyle(color: Colors.black, fontWeight: FontWeight.w600)),
      // ),
      body: GestureDetector(
        onTap: () => FocusScope.of(context).unfocus(),
        child: SafeArea(
          bottom: false,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _buildHeaderSection(context),
                const SizedBox(height: 68),
                const Text("Enter Ticket ID",
                    style: TextStyle(fontWeight: FontWeight.w600, fontSize: 18)),
                const SizedBox(height: 8),
                TextField(
                  controller: controller,
                  decoration: InputDecoration(
                    hintText: "eg: CT2144FAZFQWR",
                    filled: true,
                    fillColor: Color(0xffF0F1F5),
                    enabledBorder: OutlineInputBorder(
                      borderSide:   BorderSide(color: Colors.black.withOpacity(0.24), width: 1.0),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderSide:   BorderSide(color: Colors.black.withOpacity(0.24), width: 1.0),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    disabledBorder: OutlineInputBorder(
                      borderSide:    BorderSide(color: Colors.black.withOpacity(0.24), width: 1.0),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    border: OutlineInputBorder(
                      borderSide:    BorderSide(color: Colors.black.withOpacity(0.24), width: 1.0),
                      borderRadius: BorderRadius.circular(8),
                    ),
                  ),
                ),
                const SizedBox(height: 16),
                Container(
                  width: double.infinity,
                  padding: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    color: Colors.red[50],
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: const Text(
                    "Where to find your ticket ID?\n• On your printed ticket or receipt\n• In your booking confirmation email\n• On your mobile ticket in your email\n• Usually starts with CTK, TIX, or PASS",
                    style: TextStyle(fontSize: 13),
                  ),
                ),
                const SizedBox(height: 16),
                const Text("Recent Searches",
                    style: TextStyle(fontWeight: FontWeight.w600, fontSize: 16)),
                const SizedBox(height: 10),
                ...List.generate(
                  3,
                      (i) => Container(
                        width:double.infinity,
                    margin: const EdgeInsets.only(bottom: 8),
                    padding: const EdgeInsets.all(12),
                    decoration: BoxDecoration(
                      color: Colors.grey[100],
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: Text("CTK214125215$i"),
                  ),
                ),
                const Spacer(),
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Color(0xffF95F62),
                    foregroundColor: Colors.white,
                    minimumSize: const Size.fromHeight(50),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(12)),
                  ),
                  onPressed: () {
                    vm.searchTicket(controller.text);
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (_) => BlocProvider.value(
                          value: context.read<RedemptionBloc>(),
                          child: const RedemptionDetailsScreen(),
                        ),
                      ),
                    );
                  },
                  child: const Text("Search Ticket",
                      style: TextStyle(fontWeight: FontWeight.w600)),
                ),
                SizedBox(
                  height: 60,
                )
              ],
            ),
          ),
        ),
      ),
    );
  }


  Widget _buildHeaderSection( BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 2.0, vertical: 14.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              GestureDetector(

                child: Container(
                  width: 44,
                  height: 44,
                  decoration: const BoxDecoration(
                    color: Color(0xFFF95F62),
                    shape: BoxShape.circle,
                  ),
                  child: const Icon(Icons.arrow_back, color: Colors.white),
                ),
                onTap: (){
                  Navigator.pop(context);
                },
              ),
              Text(
                'Manual Entry',
                style: const TextStyle(
                  fontWeight: FontWeight.w700,
                  fontSize: 28,
                ),
              ),
              SizedBox(
                width: 40,
              )
            ],
          ),
        ),
        SizedBox(height: 8),
      ],
    );
  }
}