@extends('layout.master')
@section('content')
    @php
        $userType = \App\Helpers\Helpers::getUserRole()->type_id ?? [];
    @endphp

    <div class="page-heading-block py-4">
        <!--TODO:need to change when there is a option to add staffs form estate view -->
        @if (!empty($menu) && $menu == 'estates' && (!empty($estate_id) && !empty($estate_name)))
            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    @if ($userType != 3 && $userType != 4)
                        <li class="breadcrumb-item"><a href="{{ route('estates.get') }}">Estates</a></li>
                    @endif
                    <li class="breadcrumb-item">
                        <a href="{{ route('estates.view', ['id' => $estate_id]) }}">
                            {{ $estate_name ?? '' }}
                        </a>
                    </li>
                    <li class="breadcrumb-item"><a
                            href="{{ route('estates.view', ['id' => $estate_id, 'tab' => 5]) }}">Staffs</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Add Staff</li>
                </ol>
            </nav>
        @else
            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('users.get') }}">Users</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Add</li>
                </ol>
            </nav>
        @endif
        {{-- <div class="page-title-block d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center justify-content-between">
                <a href="{{ route('users.get') }}" class="back-btn">
                    &#x276e; &nbsp;BACK
                </a>

                <h4 class="mx-5 mb-0 font-weight-bold">Add User</h4>
            </div>
        </div> --}}
    </div>

    <div class="page-main-content">
        <div class="add-estate-form-block p-5 rounded">
            <form action="{{ route('users.store') }}" method="POST" class="row" id="add-user-form"
                enctype="multipart/form-data">
                {{ csrf_field() }}
                <input type="hidden" name="menu" value="{{ $menu ?? '' }}">
                <div class="mb-3 col-4">
                    <label for="name" class="form-label">Name *</label>
                    <input type="text"
                        class="form-control rounded required {{ $errors->has('name') ? 'border-required' : '' }}"
                        name="name" id="name" value="{{ old('name') }}">
                    @if ($errors->has('name'))
                        <div class="text-danger required-label">{{ $errors->first('name') }}</div>
                    @endif
                </div>
                <div class="mb-3 col-4">
                    <label for="email" class="form-label">Email</label>
                    <input type="text"
                        class="form-control rounded required {{ $errors->has('email') ? 'border-required' : '' }}"
                        name="email" id="email" value="{{ old('email') }}">
                    @if ($errors->has('email'))
                        <div class="text-danger required-label">{{ $errors->first('email') }}</div>
                    @endif
                </div>

                <div class="mb-3 col-4 hide">
                    <label for="user_name" class="form-label">User Name *</label>
                    <input type="user_name"
                        class="form-control rounded required {{ $errors->has('user_name') ? 'border-required' : '' }}"
                        name="user_name" id="user_name" value="{{ old('user_name') }}" readonly
                        style="background: #e9ecef;">
                    @if ($errors->has('user_name'))
                        <div class="text-danger required-label">{{ $errors->first('user_name') }}</div>
                    @endif
                </div>

                <div class="mb-3 col-4">
                    <label for="contact-number" class="form-label">Contact Number</label>
                    <div class="input-group">
                        <select name="country_code" id="country_code" class="form-select-sm rounded-start border-0"
                            style="width: 105px; outline:none; -webkit-appearance: none;
                                    -moz-appearance: none;"
                            disabled>
                            @if (!empty($country_codes))
                                @foreach ($country_codes ?? [] as $country_code)
                                    <option value="{{ $country_code->code }}"
                                        {{ $country_code->shortName == 'SG' ? 'selected' : '' }}>
                                        {{ $country_code->shortName }}({{ $country_code->code }})
                                    </option>
                                @endforeach
                            @endif
                        </select>
                        <input type="text" class="form-control rounded-end" name="contact_number" id="contact-number"
                            value="{{ old('contact_number') ?? '' }}">
                    </div>
                    @if ($errors->has('contact_number'))
                        <p class="user_data text-danger my-2">{{ $errors->first('contact_number') }}</p>
                    @endif
                </div>

                <div class="mb-3 col-4">
                    <label for="password" class="form-label">Password *</label>
                    <div class="input-group">
                        <input type="text"
                            class="form-control rounded required password {{ $errors->has('password') ? 'border-required' : '' }}"
                            name="password" id="password" value="{{ old('password') ?? $password }}">

                        {{-- <span class="input_icon">
                            <svg id="Icons" enable-background="new 0 0 128 128" height="24" viewBox="0 0 128 128"
                                width="24" xmlns="http://www.w3.org/2000/svg">
                                <path id="Hide"
                                    d="m79.891 65.078 7.27-7.27c.529 1.979.839 4.048.839 6.192 0 13.234-10.766 24-24 24-2.144 0-4.213-.31-6.192-.839l7.27-7.27c7.949-.542 14.271-6.864 14.813-14.813zm47.605-3.021c-.492-.885-7.47-13.112-21.11-23.474l-5.821 5.821c9.946 7.313 16.248 15.842 18.729 19.602-4.741 7.219-23.339 31.994-55.294 31.994-4.792 0-9.248-.613-13.441-1.591l-6.573 6.573c6.043 1.853 12.685 3.018 20.014 3.018 41.873 0 62.633-36.504 63.496-38.057.672-1.209.672-2.677 0-3.886zm-16.668-39.229-88 88c-.781.781-1.805 1.172-2.828 1.172s-2.047-.391-2.828-1.172c-1.563-1.563-1.563-4.094 0-5.656l11.196-11.196c-18.1-10.927-27.297-27.012-27.864-28.033-.672-1.209-.672-2.678 0-3.887.863-1.552 21.623-38.056 63.496-38.056 10.827 0 20.205 2.47 28.222 6.122l12.95-12.95c1.563-1.563 4.094-1.563 5.656 0s1.563 4.094 0 5.656zm-76.495 65.183 10.127-10.127c-2.797-3.924-4.46-8.709-4.46-13.884 0-13.234 10.766-24 24-24 5.175 0 9.96 1.663 13.884 4.459l8.189-8.189c-6.47-2.591-13.822-4.27-22.073-4.27-31.955 0-50.553 24.775-55.293 31.994 3.01 4.562 11.662 16.11 25.626 24.017zm15.934-15.935 21.809-21.809c-2.379-1.405-5.118-2.267-8.076-2.267-8.822 0-16 7.178-16 16 0 2.958.862 5.697 2.267 8.076z" />
                            </svg>
                        </span> --}}
                    </div>
                    @if ($errors->has('password'))
                        <div class="text-danger required-label">{{ $errors->first('password') }}</div>
                    @endif
                </div>
                {{-- <div class="mb-3 col-4">
                    <label for="password_confirmation" class="form-label">Confirm Password *</label>
                    <div class="input-group">
                        <input type="password"
                            class="form-control rounded required password {{ $errors->has('password_confirmation') ? 'border-required' : '' }}"
                            name="password_confirmation" id="password_confirmation"
                            value="{{ old('password_confirmation') }}">

                        <span class="input_icon">
                            <svg id="Icons" enable-background="new 0 0 128 128" height="24" viewBox="0 0 128 128"
                                width="24" xmlns="http://www.w3.org/2000/svg">
                                <path id="Hide"
                                    d="m79.891 65.078 7.27-7.27c.529 1.979.839 4.048.839 6.192 0 13.234-10.766 24-24 24-2.144 0-4.213-.31-6.192-.839l7.27-7.27c7.949-.542 14.271-6.864 14.813-14.813zm47.605-3.021c-.492-.885-7.47-13.112-21.11-23.474l-5.821 5.821c9.946 7.313 16.248 15.842 18.729 19.602-4.741 7.219-23.339 31.994-55.294 31.994-4.792 0-9.248-.613-13.441-1.591l-6.573 6.573c6.043 1.853 12.685 3.018 20.014 3.018 41.873 0 62.633-36.504 63.496-38.057.672-1.209.672-2.677 0-3.886zm-16.668-39.229-88 88c-.781.781-1.805 1.172-2.828 1.172s-2.047-.391-2.828-1.172c-1.563-1.563-1.563-4.094 0-5.656l11.196-11.196c-18.1-10.927-27.297-27.012-27.864-28.033-.672-1.209-.672-2.678 0-3.887.863-1.552 21.623-38.056 63.496-38.056 10.827 0 20.205 2.47 28.222 6.122l12.95-12.95c1.563-1.563 4.094-1.563 5.656 0s1.563 4.094 0 5.656zm-76.495 65.183 10.127-10.127c-2.797-3.924-4.46-8.709-4.46-13.884 0-13.234 10.766-24 24-24 5.175 0 9.96 1.663 13.884 4.459l8.189-8.189c-6.47-2.591-13.822-4.27-22.073-4.27-31.955 0-50.553 24.775-55.293 31.994 3.01 4.562 11.662 16.11 25.626 24.017zm15.934-15.935 21.809-21.809c-2.379-1.405-5.118-2.267-8.076-2.267-8.822 0-16 7.178-16 16 0 2.958.862 5.697 2.267 8.076z" />
                            </svg>
                        </span>
                    </div>
                    @if ($errors->has('password_confirmation'))
                        <div class="text-danger required-label">{{ $errors->first('password_confirmation') }}</div>
                    @endif
                </div> --}}
                <div class="mb-3 col-4">
                    <label for="unit-no" class="form-label">User Role *</label>
                    <select name="user_role" id=""
                        class="form-control form-select user-type-select rounded required">
                        <option value="estate_manager" data-type="3"
                            {{ !empty(old('user_role')) && 'estate_manager' == old('user_role') ? 'selected' : '' }}>
                            Estate Manager
                        </option>
                        <option value="security_guard" data-type="4"
                            {{ !empty(old('user_role')) && 'security_guard' == old('user_role') ? 'selected' : '' }}>
                            Security Guard
                        </option>
                        @if (empty($estate_id))
                            <optgroup label="Staffs">
                                @foreach ($user_roles ?? [] as $user_role)
                                    <option value="{{ $user_role->value }}" data-type="{{ $user_role->type_id }}"
                                        {{ !empty(old('user_role')) && $user_role->value == old('user_role') ? 'selected' : '' }}>
                                        {{ $user_role->label }}
                                    </option>
                                @endforeach
                            </optgroup>
                        @endif
                    </select>
                </div>
                <div class="mb-3 col-4 user_type_block hide">
                    <label for="unit-no" class="form-label">Estate</label>
                    <select name="estate_id" id="" class="form-control form-select group-select rounded"
                        {{ !empty($estate_id) ? 'disabled' : '' }}>
                        @foreach ($estates ?? [] as $estate)
                            <option value="{{ $estate->value }}"
                                {{ !empty($estate_id) && $estate_id == $estate->value ? 'selected' : '' }}>
                                {{ $estate->label }}
                            </option>
                        @endforeach
                    </select>
                    @if (!empty($estate_id))
                        <input type="hidden" name="estate_id" value="{{ $estate_id }}">
                    @endif
                </div>

                <div class="mb-3 d-grid ">
                    <label class="form-label">Profile Image(PNG, JPEG)</label>
                    <input type="file" class="attachment-input" name="attachment" id="attachment"
                        accept="image/png, image/jpeg" />
                    <label for="attachment" class="attachment-label">
                        <div id="img-preview">
                            <img src="{{ asset('assets/images/add-attachment-icon.svg') }}" alt="">
                        </div>
                    </label>
                </div>
                <div class="d-flex justify-content-end ">
                    <a href="{{ route('users.get') }}" class="btn form-cancel-btn mx-3">Cancel</a>
                    <button type="submit" class="btn form-submit-btn">Save</button>
                </div>
            </form>
        </div>
    </div>

    @push('scripts')
        <script>
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': `{{ csrf_token() }}`
                }
            });
        </script>

        <script src="{{ asset('js/add-users-page.js') }}"></script>
    @endPush
@endsection