@extends('backend.representative.layouts.representative-app')

@section('title', 'Create Manager')

@push('style')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<style>
    .select2-container {
        width: 100% !important;
        display: block;
    }
    .select2-container .select2-selection--single {
        height: 38px !important;
        padding: 5px;
    }
    .source-option {
        cursor: pointer;
        padding: 0.6rem 1rem;
        border: 2px solid #e2e8f4;
        border-radius: 0.75rem;
        transition: all 0.15s ease;
        text-align: center;
        flex: 1;
        font-weight: 500;
        font-size: 0.85rem;
    }
    .source-option:hover {
        border-color: #335bff;
    }
    .source-option.active {
        border-color: #335bff;
        background: #eef4ff;
        color: #335bff;
    }
    .source-option input {
        display: none;
    }
    .password-method-card {
        border: 1px solid #e2e8f4;
        border-radius: 0.75rem;
        padding: 0.9rem 1rem;
        cursor: pointer;
        transition: all 0.15s ease;
        flex: 1;
    }
    .password-method-card:hover {
        border-color: #335bff;
    }
    .password-method-card.active {
        border-color: #335bff;
        background: #eef4ff;
    }
    .password-method-card input {
        display: none;
    }
    .password-method-card .method-label {
        font-weight: 600;
        font-size: 0.85rem;
        color: #0b1220;
    }
    .password-method-card .method-desc {
        font-size: 0.75rem;
        color: #5b6b83;
        margin-top: 0.15rem;
    }
    .password-toggle {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        border: none;
        background: none;
        cursor: pointer;
        color: #7a8ab0;
        padding: 4px;
        line-height: 1;
    }
    .password-toggle:hover {
        color: #0b1220;
    }
    .password-wrapper {
        position: relative;
    }
</style>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Create Manager</h1>
    </div>
    <div class="ms-auto pageheader-btn">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('portal-representative.managers.index') }}">Managers</a></li>
            <li class="breadcrumb-item active" aria-current="page">Create</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-lg-8 mx-auto">
        <form action="{{ route('portal-representative.managers.store') }}" method="POST">
            @csrf

            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h3 class="card-title mb-0"><i class="fe fe-user-plus me-2"></i>New Manager</h3>
                </div>
                <div class="card-body">
                    {{-- Source toggle --}}
                    <div class="mb-4">
                        <label class="form-label font-weight-semibold">Manager Source</label>
                        <div class="d-flex gap-2">
                            <label class="source-option active" id="source-existing">
                                <input type="radio" name="source_type" value="existing" checked>
                                <i class="fe fe-users me-1"></i> Select Existing
                            </label>
                            <label class="source-option" id="source-new">
                                <input type="radio" name="source_type" value="new">
                                <i class="fe fe-user-plus me-1"></i> Create New
                            </label>
                        </div>
                    </div>

                    {{-- Existing manager selector --}}
                    <div class="mb-3" id="existing-manager-group">
                        <label for="existing_manager" class="form-label font-weight-semibold">Choose Manager</label>
                        <select id="existing_manager" class="form-select select2" data-placeholder="Select a manager to pre-fill">
                            <option value=""></option>
                            @foreach ($managers as $manager)
                                <option value="{{ $manager->id }}" data-name="{{ $manager->name }}" data-email="{{ $manager->email }}">
                                    {{ $manager->name }} ({{ $manager->email }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Name --}}
                    <div class="mb-3">
                        <label for="name" class="form-label font-weight-semibold">Full Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" placeholder="e.g. John Doe" required>
                        @error('name') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    {{-- Email --}}
                    <div class="mb-3">
                        <label for="email" class="form-label font-weight-semibold">Email Address <span class="text-danger">*</span></label>
                        <input type="email" name="email" id="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" placeholder="e.g. john@example.com" required>
                        @error('email') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    {{-- Store --}}
                    <div class="mb-4">
                        <label for="store_id" class="form-label font-weight-semibold">Assign to Store <span class="text-danger">*</span></label>
                        <select name="store_id" id="store_id" class="form-select select2 @error('store_id') is-invalid @enderror" data-placeholder="Select a store" required>
                            <option value=""></option>
                            @foreach ($stores as $store)
                                <option value="{{ $store->id }}" {{ old('store_id') == $store->id ? 'selected' : '' }}>
                                    {{ $store->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('store_id') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    <hr class="my-4">

                    {{-- Password method --}}
                    <div class="mb-3" id="password-method-group">
                        <label class="form-label font-weight-semibold">Password Method</label>
                        <div class="d-flex gap-2 flex-wrap">
                            <label class="password-method-card active" data-method="email">
                                <input type="radio" name="password_method" value="email" checked>
                                <div class="method-label"><i class="fe fe-mail me-1"></i> Send Email</div>
                                <div class="method-desc">Send a password setup link</div>
                            </label>
                            <label class="password-method-card" data-method="manual" id="card-manual">
                                <input type="radio" name="password_method" value="manual">
                                <div class="method-label"><i class="fe fe-lock me-1"></i> Set Password</div>
                                <div class="method-desc">Enter a password manually</div>
                            </label>
                            <label class="password-method-card" data-method="default" id="card-default">
                                <input type="radio" name="password_method" value="default">
                                <div class="method-label"><i class="fe fe-check-circle me-1"></i> Default</div>
                                <div class="method-desc">Use password 12345678</div>
                            </label>
                        </div>
                    </div>

                    {{-- Manual password input --}}
                    <div class="mb-3 d-none" id="manual-password-group">
                        <label for="password" class="form-label font-weight-semibold">Password <span class="text-danger">*</span></label>
                        <div class="password-wrapper">
                            <input type="password" name="password" id="password"
                                   class="form-control @error('password') is-invalid @enderror"
                                   placeholder="Min. 8 characters" autocomplete="off">
                            <button type="button" class="password-toggle" id="togglePassword" tabindex="-1" title="Toggle visibility">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" id="eye-icon">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                </svg>
                            </button>
                        </div>
                        @error('password') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    {{-- Alerts per method --}}
                    <div id="password-alert-email" class="alert alert-info py-2" role="alert">
                        <i class="fe fe-info me-1"></i> A password creation link will be sent to the manager's email address. The account will be <strong>inactive</strong> until they set their password.
                    </div>
                    <div id="password-alert-default" class="alert alert-warning py-2 d-none" role="alert">
                        <i class="fe fe-info me-1"></i> The manager will be created with the default password <strong>12345678</strong> and will be <strong>active</strong> immediately.
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-primary px-5"><i class="fe fe-check me-2"></i>Create Manager</button>
                    <a href="{{ route('portal-representative.managers.index') }}" class="btn btn-secondary px-4">Cancel</a>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function () {
        $('#store_id').select2({ width: '100%', allowClear: true, placeholder: 'Select a store' });
        $('#existing_manager').select2({ width: '100%', allowClear: true, placeholder: 'Select a manager to pre-fill' });

        // Source toggle — existing vs new
        $('.source-option').on('click', function () {
            $('.source-option').removeClass('active');
            $(this).addClass('active');
            var isExisting = $('#source-existing').hasClass('active');

            $('#existing-manager-group').toggleClass('d-none', !isExisting);

            // Show/hide manual and default password cards
            $('#card-manual, #card-default').toggleClass('d-none', isExisting);

            if (isExisting) {
                // Switch to email-only, reset any manual/default state
                $('#existing_manager').val('').trigger('change');
                $('.password-method-card').removeClass('active');
                $('.password-method-card[data-method="email"]').addClass('active');
                $('.password-method-card[data-method="email"] input').prop('checked', true);
                $('#manual-password-group').addClass('d-none');
                $('#password-alert-email').removeClass('d-none');
                $('#password-alert-default').addClass('d-none');
            } else {
                $('#name, #email').val('');
            }
        });

        // Pre-fill from existing manager
        $('#existing_manager').on('change', function () {
            var selected = $(this).find(':selected');
            if (selected.val()) {
                $('#name').val(selected.data('name'));
                $('#email').val(selected.data('email'));
            } else {
                $('#name, #email').val('');
            }
        });

        // Password method cards
        $('.password-method-card').on('click', function () {
            $('.password-method-card').removeClass('active');
            $(this).addClass('active');
            var method = $(this).data('method');

            $('#manual-password-group').toggleClass('d-none', method !== 'manual');
            $('#password-alert-email').toggleClass('d-none', method !== 'email');
            $('#password-alert-default').toggleClass('d-none', method !== 'default');
        });

        // Password visibility toggle
        $('#togglePassword').on('click', function () {
            var input = $('#password');
            var type = input.attr('type') === 'password' ? 'text' : 'password';
            input.attr('type', type);
            $('#eye-icon').html(type === 'password'
                ? '<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>'
                : '<path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"/>');
        });
    });
</script>
@endpush