@extends('storefront.layouts.main')

@section('title', 'Register')

@section('content')
<div class="container" style="padding-top: 40px; padding-bottom: 50px;">
    <div class="row">
        <div class="col-md-12">

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul style="margin-bottom: 0; padding-left: 20px;">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form method="POST" action="{{ route('register') }}">
                @csrf

                <!-- Personal Information -->
                <div class="portlet light">
                    <div class="portlet-title">
                        <div class="caption">
                            <span class="caption-subject theme-font bold uppercase">Personal Information</span>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">First Name <span class="text-danger">*</span></label>
                                    <input type="text" name="first_name" class="form-control" value="{{ old('first_name') }}" required autofocus>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Last Name <span class="text-danger">*</span></label>
                                    <input type="text" name="last_name" class="form-control" value="{{ old('last_name') }}" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="control-label">Email Address <span class="text-danger">*</span></label>
                                    <input type="email" name="email" class="form-control" value="{{ old('email') }}" required>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="control-label">Phone Country Code</label>
                                    <select id="phoneCode" class="form-control" disabled>
                                        @foreach($countries as $country)
                                            <option value="{{ $country->phone_code }}" data-country="{{ $country->code }}" {{ $country->code == 'BD' ? 'selected' : '' }}>{{ $country->phone_code }} ({{ $country->name }})</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-5">
                                <div class="form-group">
                                    <label class="control-label">Phone Number <span class="text-danger">*</span></label>
                                    <input type="text" name="phone" class="form-control" value="{{ old('phone') }}" placeholder="e.g. 1712345678" required>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Company Name <span class="font-grey-mint">(Optional)</span></label>
                            <input type="text" name="company" class="form-control" value="{{ old('company') }}">
                        </div>
                    </div>
                </div>

                <!-- Billing Address -->
                <div class="portlet light">
                    <div class="portlet-title">
                        <div class="caption">
                            <span class="caption-subject theme-font bold uppercase">Billing Address</span>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Address Line 1 <span class="text-danger">*</span></label>
                                    <input type="text" name="address_line_1" class="form-control" value="{{ old('address_line_1') }}" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Address Line 2 <span class="font-grey-mint">(Optional)</span></label>
                                    <input type="text" name="address_line_2" class="form-control" value="{{ old('address_line_2') }}">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">City <span class="text-danger">*</span></label>
                                    <input type="text" name="city" class="form-control" value="{{ old('city') }}" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">State / Region <span class="text-danger">*</span></label>
                                    <input type="text" name="state" id="stateInput" class="form-control" value="{{ old('state') }}" list="bdDivisions" required>
                                    <datalist id="bdDivisions">
                                        <option value="Barishal">
                                        <option value="Chattogram">
                                        <option value="Dhaka">
                                        <option value="Khulna">
                                        <option value="Mymensingh">
                                        <option value="Rajshahi">
                                        <option value="Rangpur">
                                        <option value="Sylhet">
                                    </datalist>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="control-label">Postal Code <span class="text-danger">*</span></label>
                                    <input type="text" name="postal_code" class="form-control" value="{{ old('postal_code') }}" required>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="form-group">
                                    <label class="control-label">Country <span class="text-danger">*</span></label>
                                    <select name="country_code" id="countrySelect" class="form-control" required>
                                        <option value="">-- Select Country --</option>
                                        @foreach($countries as $country)
                                            <option value="{{ $country->code }}" data-phone="{{ $country->phone_code }}" {{ old('country_code', 'BD') == $country->code ? 'selected' : '' }}>{{ $country->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Account Security -->
                <div class="portlet light">
                    <div class="portlet-title">
                        <div class="caption">
                            <span class="caption-subject theme-font bold uppercase">Account Security</span>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div class="form-group">
                            <label class="control-label">Password <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="password" name="password" id="reg_password" class="form-control" required>
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default" id="btnGeneratePassword" title="Generate Password"><i class="fa fa-key"></i> Generate</button>
                                </span>
                            </div>
                            <div class="password-rules" style="margin-top:8px; padding:10px 12px; background:#f8f9fb; border-radius:4px; border:1px solid #eee;">
                                <small style="display:block; font-weight:600; color:#555; margin-bottom:5px;">Password Requirements:</small>
                                <ul style="list-style:none; padding:0; margin:0; font-size:12px;">
                                    <li class="pw-rule" data-rule="length" style="padding:2px 0; color:#999;"><i class="fa fa-circle-o" style="width:16px;"></i> Minimum 8 characters</li>
                                    <li class="pw-rule" data-rule="upper" style="padding:2px 0; color:#999;"><i class="fa fa-circle-o" style="width:16px;"></i> At least one uppercase letter (A-Z)</li>
                                    <li class="pw-rule" data-rule="lower" style="padding:2px 0; color:#999;"><i class="fa fa-circle-o" style="width:16px;"></i> At least one lowercase letter (a-z)</li>
                                    <li class="pw-rule" data-rule="number" style="padding:2px 0; color:#999;"><i class="fa fa-circle-o" style="width:16px;"></i> At least one number (0-9)</li>
                                    <li class="pw-rule" data-rule="special" style="padding:2px 0; color:#999;"><i class="fa fa-circle-o" style="width:16px;"></i> At least one special character (!@#$...)</li>
                                </ul>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Confirm Password <span class="text-danger">*</span></label>
                            <input type="password" name="password_confirmation" class="form-control" required>
                        </div>
                    </div>
                </div>

                <!-- Terms & Submit -->
                <div class="portlet light">
                    <div class="portlet-body">
                        <div class="form-group">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="terms" value="1" {{ old('terms') ? 'checked' : '' }} required>
                                    I have read and agree to the <a href="{{ url('/page/terms-of-service') }}" target="_blank" style="font-weight:600;">Terms of Service</a>
                                </label>
                            </div>
                            @if ($errors->has('terms'))<span class="help-block text-danger">{{ $errors->first('terms') }}</span>@endif
                        </div>
                        <button type="submit" class="btn btn-primary btn-block btn-lg">Create Account</button>
                        <p class="text-center font-grey-mint" style="margin-top: 20px;">
                            Already have an account? <a href="{{ route('login') }}" style="font-weight: 600;">Sign In</a>
                        </p>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
@include('partials.password-rules-js', ['inputId' => 'reg_password'])
<script>
$(function() {
    // Toggle BD divisions datalist based on country
    function toggleBdDivisions() {
        var isBD = $('#countrySelect').val() === 'BD';
        $('#stateInput').attr('list', isBD ? 'bdDivisions' : '');
    }
    toggleBdDivisions();

    // Sync phone country code dropdown when country changes
    $('#countrySelect').on('change', function() {
        toggleBdDivisions();
        var phoneCode = $(this).find(':selected').data('phone');
        if (phoneCode) {
            $('#phoneCode').val(phoneCode);
            // Find and select the matching option
            $('#phoneCode option').each(function() {
                if ($(this).data('country') === $('#countrySelect').val()) {
                    $(this).prop('selected', true);
                    return false;
                }
            });
        }
    });

    // Generate Password
    $('#btnGeneratePassword').on('click', function() {
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*';
        var password = '';
        // Ensure at least one of each required type
        password += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'[Math.floor(Math.random() * 26)];
        password += 'abcdefghijklmnopqrstuvwxyz'[Math.floor(Math.random() * 26)];
        password += '0123456789'[Math.floor(Math.random() * 10)];
        password += '!@#$%^&*'[Math.floor(Math.random() * 8)];
        for (var i = 4; i < 12; i++) {
            password += chars[Math.floor(Math.random() * chars.length)];
        }
        // Shuffle
        password = password.split('').sort(function() { return 0.5 - Math.random(); }).join('');
        var $input = $('#reg_password');
        $input.attr('type', 'text').val(password).trigger('input');
        $('input[name="password_confirmation"]').val(password);
    });
});
</script>
@endpush