@extends('layouts.app')

@push('head')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.12/build/css/intlTelInput.css">
    <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.10.12/build/js/intlTelInput.min.js"></script>

    {{-- SiteManager 통합 보안 시스템 --}}
    @include('sitemanager::security.form-security', [
        'action' => 'agent_registration',
        'tokenField' => 'recaptcha_token',
        'formId' => 'agent-registration-form'
    ])

    {!! resource('css/contact-us.css') !!}
    {!! resource('css/form.css') !!}
    {!! resource('js/agent-registration.js') !!}
    {!! setResources(['select2', 'flatpickr']) !!}
    <style>
        .required {
            color: #dc3545;
        }
        .checkbox-group {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1rem;
            margin-top: 0.5rem;
        }
        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .agreement-section {
            background: #e9ecef;
            border-radius: 8px;
            padding: 1.5rem;
            margin: 2rem 0;
        }
        
        /* Loading Button Styles */
        .btn-loading {
            display: inline-flex;
            align-items: center;
        }
        
        .btn.loading .btn-text,
        .btn-loading .btn-text {
            display: none;
        }
        
        .btn.loading .btn-loading,
        .btn-loading .btn-loading {
            display: inline-flex;
        }
    </style>
@endpush

@section('content')
<main>
    <div class="container main-container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <h1>Agent Registration</h1>

                <h6 class="description">"Thank you for visiting the edm Korean Global Campus."<br>"If you kindly provide the information below, we will promptly reach out to you to discuss further steps."</h6>

                {{-- Validation Errors --}}
                @if($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="bi bi-exclamation-triangle"></i> <strong>Please correct the following errors:</strong>
                        <ul class="mb-0 mt-2">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <form id="agent-registration-form" action="{{ route('partners.agent-registration.submit') }}" 
                      method="POST" enctype="multipart/form-data" class="form"
                      data-recaptcha="true" data-recaptcha-action="agent_registration">
                    @csrf
                    
                    {{-- Honeypot 필드들 (봇 차단용) --}}
                    <div style="position: absolute; left: -9999px; opacity: 0;" aria-hidden="true">
                        <input type="text" name="website" tabindex="-1" autocomplete="off">
                        <input type="text" name="url" tabindex="-1" autocomplete="off">
                        <input type="text" name="homepage" tabindex="-1" autocomplete="off">
                        <input type="text" name="phone_number" tabindex="-1" autocomplete="off">
                        <input type="text" name="company_phone" tabindex="-1" autocomplete="off">
                    </div>
                    
                    {{-- Company Information --}}
                    <div class="form-section form-wrap">
                        <div class="form-wrap-header">
                            <i class="bi bi-building"></i> Company Information
                        </div>

                        <div class="form-wrap-body">
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <label for="agent_name" class="form-label">Company Name <span class="required">*</span></label>
                                    <input type="text" class="form-control" id="agent_name" name="agent_name" value="{{ old('agent_name') }}" required>
                                </div>
                                
                                <div class="col-md-12 mb-3">
                                    <label for="website_url" class="form-label">Website Domain</label>
                                    <input type="text" class="form-control" id="website_url" name="website_url" value="{{ old('website_url') }}" placeholder="www.example.com">
                                    <div class="form-text">Enter your website domain without protocol (http:// or https://)</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Head Office Information --}}
                    <div class="form-section form-wrap">
                        <div class="form-wrap-header">
                            <i class="bi bi-geo-alt"></i> Head Office Information
                        </div>
                        
                        <div class="form-wrap-body">
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <label for="address" class="form-label">Address <span class="required">*</span></label>
                                    <input type="text" class="form-control" id="address" name="address" value="{{ old('address') }}" required>
                                </div>
                                
                                <div class="col-md-3">
                                    <label for="city" class="form-label">City <span class="required">*</span></label>
                                    <input type="text" class="form-control" id="city" name="city" value="{{ old('city') }}" required>
                                </div>
                                
                                <div class="col-md-3">
                                    <label for="country" class="form-label">Country <span class="required">*</span></label>
                                    <select class="form-select" id="country" name="country" required>
                                        <option value="">Select Country</option>
                                        @foreach(getCountries() as $code => $info)
                                            <option value="{{ $code }}" {{ old('country') == $code ? 'selected' : '' }}>
                                                {{ $info['name'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label for="main_phone" class="form-label">Phone Number <span class="required">*</span></label>
                                    <input type="tel" class="form-control" id="main_phone" name="main_phone" value="{{ old('main_phone') }}" required>
                                    <input type="hidden" name="main_country_code" id="main_country_code" value="{{ old('main_country_code') }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Contact Person Information --}}
                    <div class="form-section form-wrap">
                        <div class="form-wrap-header">
                            <i class="bi bi-person"></i> Contact Person Information
                        </div>
                        
                        <div class="form-wrap-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="contact_first_name" class="form-label">First Name <span class="required">*</span></label>
                                    <input type="text" class="form-control" id="contact_first_name" name="contact_first_name" value="{{ old('contact_first_name') }}" required>
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label for="contact_last_name" class="form-label">Last Name <span class="required">*</span></label>
                                    <input type="text" class="form-control" id="contact_last_name" name="contact_last_name" value="{{ old('contact_last_name') }}" required>
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label for="contact_department" class="form-label">Department</label>
                                    <input type="text" class="form-control" id="contact_department" name="contact_department" value="{{ old('contact_department') }}" placeholder="e.g., Sales Department">
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label for="contact_position" class="form-label">Position</label>
                                    <input type="text" class="form-control" id="contact_position" name="contact_position" value="{{ old('contact_position') }}" placeholder="e.g., Director, Manager">
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label for="contact_email" class="form-label">Email <span class="required">*</span></label>
                                    <input type="email" class="form-control" id="contact_email" name="contact_email" value="{{ old('contact_email') }}" required>
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label for="contact_phone" class="form-label">Phone Number</label>
                                    <input type="tel" class="form-control" id="contact_phone" name="contact_phone" value="{{ old('contact_phone') }}">
                                    <input type="hidden" name="contact_country_code" id="contact_country_code" value="{{ old('contact_country_code') }}">
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label for="contact_city" class="form-label">City</label>
                                    <input type="text" class="form-control" id="contact_city" name="contact_city">
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label for="contact_country" class="form-label">Country</label>
                                    <select class="form-select" id="contact_country" name="contact_country">
                                        <option value="">Select Country</option>
                                        @foreach(getCountries() as $code => $info)
                                            <option value="{{ $code }}" {{ old('contact_country') == $code ? 'selected' : '' }}>
                                                {{ $info['name'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Sales Categories --}}
                    <div class="form-section form-wrap">
                        <div class="form-wrap-header">
                            <i class="bi bi-tags"></i> Sales Categories
                        </div>

                        <div class="form-wrap-body">
                            <p class="text-muted mb-3">Please select the categories you are interested in promoting:</p>
                            
                            <div class="checkbox-group">
                                <div class="checkbox-item">
                                    <input type="checkbox" class="form-check-input" id="sales_adult" name="sales_categories[]" value="adult">
                                    <label class="form-check-label" for="sales_adult">Adult Courses</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" class="form-check-input" id="sales_junior_camp" name="sales_categories[]" value="junior_camp">
                                    <label class="form-check-label" for="sales_junior_camp">Junior Camp</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" class="form-check-input" id="sales_group" name="sales_categories[]" value="group">
                                    <label class="form-check-label" for="sales_group">Group Programs</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Messages --}}
                    <div class="form-section form-wrap">
                        <div class="form-wrap-header">
                            <i class="bi bi-chat-text"></i> Message
                        </div>
                        
                        <div class="form-wrap-body">
                            <textarea class="form-control" id="agent_memo" name="agent_memo" rows="5" 
                                placeholder="Please share any additional information about your company, experience with Korean language programs, target markets, or specific requirements...">{{ old('agent_memo') }}</textarea>
                        </div>
                    </div>

                    {{-- Agreements --}}
                    <div class="form-section form-wrap">
                        <div class="form-wrap-header">
                            Terms and Agreements
                        </div>
                        
                        <div class="form-wrap-body">
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="checkbox" id="agree_newsletter" name="agree_newsletter" value="1" {{ old('agree_newsletter') ? 'checked' : '' }}>
                                <label class="form-check-label" for="agree_newsletter">
                                    I agree to receive newsletters and promotional materials from EDM Korean Global Campus
                                </label>
                            </div>
                            
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="checkbox" id="agree_terms" name="agree_terms" value="1" {{ old('agree_terms') ? 'checked' : '' }} required>
                                <label class="form-check-label" for="agree_terms">
                                    I agree to the <a href="{{ route('legal.terms-and-conditions') }}" target="_blank">Terms and Conditions</a> <span class="required">*</span>
                                </label>
                            </div>
                            
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="agree_privacy" name="agree_privacy" value="1" {{ old('agree_privacy') ? 'checked' : '' }} required>
                                <label class="form-check-label" for="agree_privacy">
                                    I agree to the <a href="{{ route('legal.privacy-policy') }}" target="_blank">Privacy Policy</a> <span class="required">*</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    {{-- SiteManager 통합 보안 시스템에서 자동 처리 --}}
                    @error('recaptcha_token')
                        <div class="form-group text-center mb-4">
                            <div class="text-danger mt-2">{{ $message }}</div>
                        </div>
                    @enderror

                    {{-- Submit Button --}}
                    <div class="text-center">
                        <button type="submit" class="btn btn-lg btn-dark btn-submit">
                            <span class="btn-text">
                                <i class="bi bi-send"></i> Submit Registration
                            </span>
                            <span class="btn-loading d-none">
                                <div class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></div>
                                Sending...
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</main>
@endsection