@extends('layouts.admin.app')

@section('page-title')
    {{ __('subscribers') }}
@endSection

@section('page-nav-title')
    <div class="app-title">
        <div>
            <h1>{{ __('subscribers') }}</h1>
            <p style="margin-left: 25px;">{{ __('Create') }}</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">{{ __('Dashboard') }}</a></li>
            <li class="breadcrumb-item"><a href="#">{{ __('subscribers') }}</a></li>
            <li class="breadcrumb-item"><a href="#">{{ __('Create') }}</a></li>
        </ul>
    </div>
@endsection
@section('content')
    <div class="row">
        <div class="col-lg-10 m-auto">
            <div class="tile">
                <h3 class="tile-title">{{ __('create-new-subscribers') }}</h3>
                <div class="tile-body">
                    <form method="post" action="{{ route('admin.admins.store') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{ __('Full name') }}</label>
                                    <input class="form-control @if ($errors->has('full_name')) is-invalid @endif"
                                        type="text" name="full_name" placeholder="{{ __('Enter Full Name') }}"
                                        value="{{ inputValue('full_name') }}">
                                </div>
                                @error('full_name')
                                    <div class="input-error">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{ __('Username') }}</label>
                                    <input class="form-control @if ($errors->has('username')) is-invalid @endif"
                                        type="text" name="username" placeholder="{{ __('enter-username') }}"
                                        value="{{ inputValue('username') }}">
                                </div>
                                @error('username')
                                    <div class="input-error">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{ __('Phone') }}</label>
                                    <input class="form-control @if ($errors->has('phone')) is-invalid @endif"
                                        type="text" name="phone" placeholder="{{ __('Enter Phone Number') }}"
                                        value="{{ old('phone') }}">
                                </div>
                                @error('phone')
                                    <div class="input-error">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{ __('email') }}</label>
                                    <input class="form-control @if ($errors->has('email')) is-invalid @endif"
                                        type="text" name="email" placeholder="example@example.com"
                                        value="{{ old('email') }}" autocomplete="username">
                                </div>
                                @if ($errors->has('email'))
                                    <div class="input-error">{{ $errors->first('email') }}</div>
                                @endif
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{ __('Profile Photo') }}</label>
                                    <div>
                                        <button class="btn btn-primary form-control button-upload-file">
                                            <input class="input-file" type="file" name="profile_photo"
                                                id="profile_photo_input">
                                            <span class="upload-file-content">
                                                <i class="fas fa-upload fa-lg upload-file-content-icon left"></i>
                                                <span class="upload-file-content-text">{{ __('Upload Photo') }}</span>
                                            </span>
                                        </button>
                                    </div>
                                    <div class="mt-3">
                                        @error('profile_photo')
                                            <div class="input-error">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-lg-3 col-md-5 col-sm-6 mt-3 p-0">
                                        <div class="images">
                                            <div class="uploaded-images">
                                                <img src="" alt="" width="90px"
                                                    id="profile_photo_preview">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{ __('Password') }}</label>
                                    <input class="form-control @if ($errors->has('password')) is-invalid @endif"
                                        type="password" name="password" placeholder="****" autocomplete="new-password">
                                </div>
                                @error('password')
                                    <div class="input-error">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{ __('Confirm Password') }}</label>
                                    <input class="form-control @if ($errors->has('password')) is-invalid @endif"
                                        type="password" name="password_confirmation" placeholder="****"
                                        autocomplete="new-password">
                                </div>
                                @error('password_confirmation')
                                    <div class="input-error">{{ $message }}</div>
                                @enderror
                            </div>
                            <br>
                        </div>
                        <div class="row" style="display: flex">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="exampleSelect1">{{ __('Roles') }}</label>
                                    <select class="form-control @if ($errors->has('role')) is-invalid @endif"
                                        id="NavigateList" name="role">
                                        <option value="">{{ __('Roles') }}</option>
                                        @foreach ($roles as $role)
                                            @if ($role->id === 1 || $role->id === 11)
                                                <option value="{{ $role->id }}"
                                                    @if (old('role') == $role->id) selected @endif>{{ $role->name }}
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                                @error('role')
                                    <div class="input-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-6" id="anotherRoleInput" style="display: none;">
                                <div class="form-group">
                                    <label for="exampleSelect3">{{ __('subscriptions') }}</label>
                                    <select class="form-control" id="anotherRoleSelect" name="subscription">
                                        @foreach ($subscriptions as $subscription)
                                            <option value="{{ $subscription->id }}"
                                                @if (old('subscription') == $subscription->id) selected @endif>
                                                @if (app()->getLocale() == 'ar')
                                                    {{ $subscription->name_ar }}
                                                @else
                                                    {{ $subscription->name_en }}
                                                @endif
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="tile-footer">
                            <button class="btn btn-primary" type="submit"><i
                                    class="fa fa-fw fa-lg fa-check-circle"></i>{{ __('Create') }}</button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script type="text/javascript">
        $(document).ready(function() {
            $("#NavigateList, #newRoleSelect, #anotherRoleSelect").select2({
                width: "100%",
            });

            $("#NavigateList").on("change", function() {
                if ($(this).val() == 11) {
                    $("#newRoleInput, #anotherRoleInput").css("display", "block");
                } else {
                    $("#newRoleInput, #anotherRoleInput").css("display", "none");
                }
            });

            $('#profile_photo_input').on('change', function(e) {
                const fileInput = e.target;
                const previewImage = $('#profile_photo_preview');
                if (fileInput.files && fileInput.files[0]) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewImage.attr('src', e.target.result);
                    };
                    reader.readAsDataURL(fileInput.files[0]);
                }
            });
        });
    </script>
@endsection