@extends("backend.layouts.app")

@section("title")
    {{ __($module_action) }} {{ __($module_title) }}
@endsection

@section("breadcrumbs")
    <x-backend.breadcrumbs>
        <x-backend.breadcrumb-item route='{{-- route("backend.$module_name.index") --}}' icon="{{ $module_icon }}">
            {{ __($module_title) }}
        </x-backend.breadcrumb-item>

        <x-backend.breadcrumb-item type="active">{{ __($module_action) }}</x-backend.breadcrumb-item>
    </x-backend.breadcrumbs>
@endsection

@section("content")
    <x-backend.layouts.create>
        <x-backend.section-header>
            <i class="{{ $module_icon }}"></i>
            {{ __($module_title) }}
            <small class="text-muted">{{ __($module_action) }}</small>

            <x-slot name="toolbar">
                <x-backend.buttons.return-back :small="true" />
            </x-slot>
        </x-backend.section-header>

        <div class="row mt-4">
            {{ html()->form("POST", route("backend.$module_name.store"))->acceptsFiles()->open() }}
            <input type="hidden" name="role" value="broker">
                <div class="row mb-3">
                    <!-- Profile Image Section -->
                    <div class="col-4">
                        <label for="profileImage" class="form-label">Profile Image</label>
                        <div class="form-control text-center h-auto" style="border: 2px dashed #dc2330; padding: 20px; cursor: pointer;">
                            <input type="file" id="profileImage" name="avatar" class="form-control-file" style="display: none;" accept="image/*">
                            <label for="profileImage" style="cursor: pointer;">
                                <i class="fas fa-cloud-upload-alt fa-3x" style="color: #dc2330;"></i>
                                <div>
                                    <span class="d-block" style="color: #dc2330;">Click Here Or Drop Files To Upload</span>
                                </div>
                            </label>
                            <!-- Preview Image Container -->
                        </div>
                    </div>
                    <div id="imagePreviewContainer" class="col-4" style="margin-top: 15px;"></div>
                </div>
            
                <!-- Name and Designation Section -->
                @php $required="required"; @endphp
                <div class="row mb-3">
                    <div class="col-sm-4">
                        <label for="name" class="form-label">User Name</label>{!! field_required($required) !!}
                        <input class="form-control" type="text" id="name" name="name" value="{{ old('name') }}" required placeholder="Enter your user name">
                    </div>
                    <div class="col-sm-4">
                        <label for="email" class="form-label">Email</label>{!! field_required($required) !!}
                        <input class="form-control" type="email" id="email" name="email" value="{{ old('email') }}" required placeholder="Your email">
                    </div>
                    <div class="col-sm-4">
                        <label for="mobile" class="form-label">Mobile</label>
                        <input class="form-control" type="number" id="mobile" name="mobile" value="{{ old('mobile') }}" placeholder="Your mobile number">
                    </div>
                    <div class="col-sm-4">
                        <label for="password" class="form-label">Password</label>{!! field_required($required) !!}
                        <input class="form-control" type="password" id="password" name="password" required placeholder="enter password">
                    </div>
                    <div class="col-sm-4">
                        <label for="password_confirmation" class="form-label">Confirm Password</label>{!! field_required($required) !!}
                        <input class="form-control" type="password" id="password_confirmation" required name="password_confirmation" placeholder="enter password again">
                    </div>
                </div>
            
                <!-- Add Another Member Button -->
                <div class="col-6">
                    <x-backend.buttons.create>Create</x-backend.buttons.create>
                </div>
            {{ html()->form()->close() }}
        </div>
    </x-backend.layouts.create>
@endsection