@extends('frontend.layouts.app')
@section('title')
    {{ $title ?? 'Page header' }}
@endsection

@section('meta')
    <meta property="og:title" content="{{ $og_title }}" />
    <meta property="og:description" content="{{ $og_description }}" />
    <meta property="og:image" content="{{ asset($og_image) }}" />
@endsection

@push('style')
    @if ($setting->recaptcha == 1)
        <script src="https://www.google.com/recaptcha/api.js?render=6LdndJ0rAAAAAG3Dho_aINusyuvkpbg2AKqFAq-z"></script>

    @endif
   <style>
.google-btn {
    background-color: #fff;
    color: #444;
    border: 1px solid #ddd;
    padding: 10px 15px;
    border-radius: 4px;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.google-btn:hover {
    background-color: #f7f7f7;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-decoration: none;
}

.google-btn img {
    display: inline-block;
}
</style>
@endpush

@section('content')

    <div class="login-section pt-2 pb-5">
        <div class="container">
            <div class="login_form bg-light shadow-sm rounded">
                <div class="px-3 py-5 p-lg-5">
                    <h5 class="mb-4">{{ $title }}</h5>

                    <!-- Tabs -->
                    <div class="seller-type-tabs mb-4">
                        <div class="seller-type-tab active" data-tab="individual">I am Individual</div>
                        <div class="seller-type-tab" data-tab="shop">I am Shop Owner</div>
                    </div>

                    <!-- Form -->
                    <form action="{{ route('register') }}" method="post" autocomplete="off">
                        @csrf

                        @error('captcha')
                            <div class="alert alert-danger mb-3">{{ $message }}</div>
                        @enderror

                        <!-- Individual -->
                        <div class="seller-type-content active" id="individual-content">
                            <div class="mb-4">
                                <label class="form-label">Full Name (as appears on Ghana Card) <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="individual_name" value="{{ old('individual_name') }}"
                                    class="form-control shadow-none @error('individual_name') border-danger @enderror"
                                    placeholder="Your full name" autocomplete="off">
                                @error('individual_name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="mb-4">
                                <label class="form-label">Mobile Number <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">+233</span>
                                    <input type="tel" name="individual_mobile" value="{{ old('individual_mobile') }}"
                                        class="form-control shadow-none phone @error('individual_mobile') border-danger @enderror"
                                        placeholder="Mobile number" autocomplete="off">
                                </div>
                                @error('individual_mobile')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                        </div>

                        <!-- Shop -->
                        <div class="seller-type-content" id="shop-content">
                            <div class="mb-4">
                                <label class="form-label">Business Name (as appears on Registration Certificate) <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="business_name" value="{{ old('business_name') }}"
                                    class="form-control shadow-none @error('business_name') border-danger @enderror"
                                    placeholder="Business name" autocomplete="off">
                                @error('business_name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="mb-4">
                                <label class="form-label">Mobile Number <span class="text-danger">*</span></label>
                                <div class="input-group">

                                    <span class="input-group-text">+233</span>
                                    <input type="tel" name="business_mobile" value="{{ old('business_mobile') }}"
                                        class="form-control shadow-none phone @error('business_mobile') border-danger @enderror"
                                        placeholder="Mobile number" autocomplete="off">
                                </div>
                                {{-- <label class="form-label">Mobile Number <span class="text-danger">*</span></label>
                                <input type="tel" name="business_mobile" value="{{ old('business_mobile') }}"
                                    class="form-control shadow-none @error('business_mobile') border-danger @enderror"
                                    placeholder="Business mobile number" autocomplete="off"> --}}
                                @error('business_mobile')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <!-- Common Fields -->
                        <div class="mb-4">
                            <label class="form-label">Email <span class="text-danger">*</span></label>
                            <input type="email" name="email" value="{{ old('email') }}"
                                class="form-control shadow-none @error('email') border-danger @enderror" placeholder="Email"
                                autocomplete="off" required>
                            @error('email')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="mb-4">
                            <label class="form-label d-block w-100">Password <span class="text-danger">*</span></label>
                            <div class="input-group input-group-flat">
                                <input type="password" name="password" id="password-field"
                                    class="form-control shadow-none @error('password') border-danger @enderror"
                                    placeholder="Password (at least 8 characters)" autocomplete="off" required>
                                <span class="input-group-text bg-transparent">
                                    <a href="javascript:void(0)"
                                        class="link-secondary fa fa-fw fa-eye field-icon toggle-password"
                                        toggle="#password-field"></a>
                                </span>
                            </div>
                            @error('password')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="mb-4">
                            <label class="form-label d-block w-100">Confirm Password <span
                                    class="text-danger">*</span></label>
                            <div class="input-group input-group-flat">
                                <input type="password" name="password_confirmation" id="confirm-toggle-password"
                                    class="form-control shadow-none @error('password_confirmation') border-danger @enderror"
                                    placeholder="Confirm password" autocomplete="off" required>
                                <span class="input-group-text bg-transparent">
                                    <a href="javascript:void(0)"
                                        class="link-secondary fa fa-fw fa-eye field-icon toggle-password"
                                        toggle="#confirm-toggle-password"></a>
                                </span>
                            </div>
                            @error('password_confirmation')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <input type="hidden" name="seller_type" id="seller_type" value="individual">
                        <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

                        <div class="form-footer mt-4">
                            <button type="submit" class="btn btn-primary w-100 text-uppercase mb-3">{{ $title }}</button>
     <a id="gindi" href="{{ route('login.google' ,['type' => 'individual']) }}" class="google-btn w-100 d-flex align-items-center justify-content-center text-decoration-none">
        <img src="{{ asset('assets/images/google.png') }}" alt="Google Logo" width="20" class="me-2">
        <span class="fw-bold">Register with Google as Individual</span>
    </a>
       <a id="gshop" href="{{ route('login.google' ,['type' => 'shop']) }}" class="google-btn w-100 d-flex align-items-center justify-content-center text-decoration-none d-none">
        <img src="{{ asset('assets/images/google.png') }}" alt="Google Logo" width="20" class="me-2">
        <span class="fw-bold">Register with Google as Business</span>
    </a>
                        </div>
                    </form>

                    <div class="text-center mt-4 send_back">
                        <p class="m-0">Already have an account? <a href="{{ route('login') }}">Login</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.querySelectorAll('.phone').forEach(input => {
            input.addEventListener('input', () => {
                input.value = input.value.replace(/\D/g, ''); // remove non-numeric
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {

            const tabs = document.querySelectorAll('.seller-type-tab');
            const contents = document.querySelectorAll('.seller-type-content');
            const sellerTypeInput = document.getElementById('seller_type');
                const gindi = document.getElementById('gindi');
    const gshop = document.getElementById('gshop');

            const toggleRequired = () => {
                const type = sellerTypeInput.value;

                document.querySelector('input[name="individual_name"]').required = type === 'individual';
                document.querySelector('input[name="individual_mobile"]').required = type === 'individual';

                document.querySelector('input[name="business_name"]').required = type === 'shop';
                document.querySelector('input[name="business_mobile"]').required = type === 'shop';
                if(type === 'individual'){
                    gindi.classList.remove('d-none');
                    gshop.classList.add('d-none');
                } else if(type === 'shop'){
                    gindi.classList.add('d-none');
                    gshop.classList.remove('d-none');
                }
            };
            

            tabs.forEach(tab => {
                tab.addEventListener('click', function () {
                    // Update tabs
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');

                    // Show relevant content
                    const type = this.dataset.tab;
                    sellerTypeInput.value = type;
                    contents.forEach(c => c.classList.remove('active'));
                    document.getElementById(`${type}-content`).classList.add('active');

                    toggleRequired();
                });
            });

            // Initial toggle
            toggleRequired();
        });

    </script>
    @if ($setting->recaptcha == 1)
        <script>
            grecaptcha.ready(function () {
                grecaptcha.execute('6LdndJ0rAAAAAG3Dho_aINusyuvkpbg2AKqFAq-z', { action: 'register' }).then(function (token) {
                    document.getElementById('g-recaptcha-response').value = token;
                });
            });

        </script>
    @endif

@endpush