@extends('layouts.public')

@section('content')
<div class="bg-gray-100 min-h-screen py-12 md:py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        @if(session('success'))
        <div class="mb-8 p-6 bg-green-50 border-l-4 border-green-500 rounded-xl shadow-sm animate-fade-in-down">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-bold text-green-800">Success!</h3>
                    <p class="text-green-700">{{ session('success') }}</p>
                </div>
            </div>
        </div>
        @endif

        <div class="flex flex-col lg:flex-row shadow-2xl rounded-3xl overflow-hidden bg-white">
            <!-- Left Column: Contact Info -->
            <div class="lg:w-5/12 bg-[#0076B6] p-8 md:p-12 text-white">
                <h2 class="text-3xl font-bold mb-12">Let's get in touch</h2>

                <div class="space-y-10">
                    <!-- Head Office -->
                    <div class="flex items-start">
                        <div class="bg-white/20 p-3 rounded-full mr-5">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                        </div>
                        <div>
                            <h4 class="font-bold text-lg">Head Office:</h4>
                            <p class="text-blue-50 mt-1">2255 St. Laurent Blvd, Unit# 125, Ottawa, ON K1G 4K3</p>
                        </div>
                    </div>

                    <!-- Brampton Office -->
                    <div class="flex items-start">
                        <div class="bg-white/20 p-3 rounded-full mr-5">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                        </div>
                        <div>
                            <h4 class="font-bold text-lg">Brampton Office:</h4>
                            <p class="text-blue-50 mt-1">341 Main Street North, Suite 200, Brampton, Ontario L6X 1N5</p>
                        </div>
                    </div>

                    <!-- Calgary Office -->
                    <div class="flex items-start">
                        <div class="bg-white/20 p-3 rounded-full mr-5">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                        </div>
                        <div>
                            <h4 class="font-bold text-lg">Calgary Office:</h4>
                            <p class="text-blue-50 mt-1">500 4th Avenue SW, Altius Centre, Suite 2500, Calgary, Alberta T2P 2V6</p>
                            <p class="text-blue-50 mt-1">Phone: +1 587 330 9305</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 pt-6">
                        <div class="flex items-center">
                            <div class="bg-white/20 p-3 rounded-full mr-4">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                                </svg>
                            </div>
                            <div>
                                <p class="text-xs text-blue-200 uppercase tracking-widest font-bold">Phone</p>
                                <p class="font-bold">+1 905-330-5515</p>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <div class="bg-white/20 p-3 rounded-full mr-4">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                </svg>
                            </div>
                            <div>
                                <p class="text-xs text-blue-200 uppercase tracking-widest font-bold">Email</p>
                                <p class="font-bold">info@shiftmatrix.com</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column: Form -->
            <div class="lg:w-7/12 bg-[#0C0C0C] p-8 md:p-12 text-white">
                <h2 class="text-3xl font-bold mb-8">Delete My Account</h2>
                
                <form action="{{ route('delete-account.store') }}" method="POST" class="space-y-6">
                    @csrf
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Full Name -->
                        <div>
                            <input type="text" name="full_name" value="{{ old('full_name') }}" placeholder="Full Name *" 
                                class="w-full bg-white text-gray-900 px-5 py-4 rounded-lg focus:ring-4 focus:ring-blue-500/30 outline-none transition-all border-none placeholder-gray-500 @error('full_name') ring-2 ring-red-500 @enderror">
                            @error('full_name')
                                <p class="text-red-400 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <!-- Email Address -->
                        <div>
                            <input type="email" name="email" value="{{ old('email') }}" placeholder="Email Address *" 
                                class="w-full bg-white text-gray-900 px-5 py-4 rounded-lg focus:ring-4 focus:ring-blue-500/30 outline-none transition-all border-none placeholder-gray-500 @error('email') ring-2 ring-red-500 @enderror">
                            @error('email')
                                <p class="text-red-400 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Phone Number -->
                        <div>
                            <input type="text" name="phone" value="{{ old('phone') }}" placeholder="Phone Number *" 
                                class="w-full bg-white text-gray-900 px-5 py-4 rounded-lg focus:ring-4 focus:ring-blue-500/30 outline-none transition-all border-none placeholder-gray-500 @error('phone') ring-2 ring-red-500 @enderror">
                            @error('phone')
                                <p class="text-red-400 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <!-- Company Name -->
                        <div>
                            <input type="text" name="company_name" value="{{ old('company_name') }}" placeholder="Company Name *" 
                                class="w-full bg-white text-gray-900 px-5 py-4 rounded-lg focus:ring-4 focus:ring-blue-500/30 outline-none transition-all border-none placeholder-gray-500 @error('company_name') ring-2 ring-red-500 @enderror">
                            @error('company_name')
                                <p class="text-red-400 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Message -->
                    <div>
                        <textarea name="message" rows="6" placeholder="Write Message *" 
                            class="w-full bg-white text-gray-900 px-5 py-4 rounded-lg focus:ring-4 focus:ring-blue-500/30 outline-none transition-all border-none placeholder-gray-500 resize-none @error('message') ring-2 ring-red-500 @enderror">{{ old('message') }}</textarea>
                        @error('message')
                            <p class="text-red-400 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Submit Button -->
                    <div>
                        <button type="submit" 
                            class="bg-white text-gray-900 px-10 py-4 rounded-xl font-bold hover:bg-gray-200 transition-colors transform hover:-translate-y-0.5 active:scale-95">
                            Submit Message
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection