@extends('organizations.layouts.default')
@section('content')
    {!! htmlScriptTagJsApi() !!}
    <main>
        <div class="max-w-screen-2xl mx-auto p-2 md:p-2 2xl:p-4">
            <div class="text-title-xsm">
                <div class="flex justify-between m-0 p-0">
                    @include('organizations.layouts.partials.breadcrumb')
                </div>
                <hr class="text-white my-3">
                <div class="my-3">
                </div>
                <div class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
                    <div class="p-6.5">
                        {{ html()->modelForm($model, getMethod($model), getMethod($model) == 'POST' ? route('organization.' . $route . '.store') : route('organization.' . $route . '.update', $model->id))->id('form-validator')->acceptsFiles()->open() }}

                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-10">

                            {{ ym_input([
                                'label' => __('form.Name'),
                                'type' => 'text',
                                'name' => 'name',
                                'required' => true,
                                'value' => $model->name,
                            ]) }}


                            {{ ym_input([
                                'label' => __('form.Phone'),
                                'type' => 'text',
                                'name' => 'phone',
                                'required' => true,
                                'value' => $model->phone,
                            ]) }}
                            {{ ym_input([
                                'label' => __('form.Designation'),
                                'type' => 'text',
                                'name' => 'designation',
                                'required' => true,
                                'value' => $model->designation,
                            ]) }}

                            {{ ym_input([
                                'label' => __('form.Email'),
                                'type' => 'email',
                                'name' => 'email',
                                'required' => true,
                                'value' => $model->email,
                            ]) }}


                            @if (!$model->exists)
                                {{ ym_input([
                                    'label' => __('form.password'),
                                    'type' => 'password',
                                    'name' => 'password',
                                    'required' => true,
                                    'placeholder' => 'xxxxxxxxx',
                                ]) }}

                                {{ ym_input([
                                    'label' => __('form.confirm_password'),
                                    'type' => 'password',
                                    'name' => 'password_confirmation',
                                    'required' => true,
                                    'placeholder' => 'xxxxxxxxx',
                                ]) }}
                            @endif

                            {{-- {{ ym_input([
                                'label' => __('form.Date of Birth'),
                                'type' => 'date',
                                'name' => 'dob',
                                'required' => true,
                                'value' => $model->dob,
                            ]) }} --}}


                            {{ ym_select([
                                'label' => __('form.Gender'),
                                'name' => 'gender',
                                'required' => true,
                                'value' => $model->gender,
                                'options' => config('dropdown.gender'),
                                'placeholder' => 'Select',
                            ]) }}
                        </div>
                        <div class="col-10 mb-5 border border-stroke rounded-md p-4">
                            <div class="text-xl text-center font-semibold">
                                Select permissions for this user
                            </div>
                            <hr class="text-stroke">
                            <div class="grid grid-cols-4">
                                @foreach (config('dropdown.org_user_permissions') as $key => $permission)
                                    @php
                                        $per = $model->userPermissions->where('permission_id', $key)->first();
                                    @endphp

                                    <label class="relative inline-flex items-center cursor-pointer my-3">
                                        <input type="checkbox" value="{{ $key }}" class="sr-only peer"
                                            name="org_user_permissions[]" {{ $per ? 'checked' : '' }}>
                                        <div
                                            class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600">
                                        </div>
                                        <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
                                            {{ $permission }}
                                        </span>
                                    </label>
                                @endforeach
                            </div>
                            @error('org_user_permissions')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        {{-- <div class="flex items-center space-x-6">
                            <div class="shrink-0">
                                <img id='preview_img' class="h-16 w-16 object-cover rounded-full"
                                    src="{{ $model->medias ? asset($model->medias) : asset('images/task/task-01.jpg') }}"
                                    alt="Current file" />
                            </div>
                            <label class="block">
                                <span class="sr-only">Choose File</span>
                                <input type="file" name="medias" onchange="loadFile(event)"
                                    class="block w-full text-sm text-slate-500
                                file:mr-4 file:py-2 file:px-4
                                file:rounded-full file:border-0
                                file:text-sm file:font-semibold
                                file:bg-violet-50 file:text-violet-700
                                hover:file:bg-violet-100
                              " />
                            </label>
                        </div> --}}
                        <div class="flex gap-3 mt-8">
                            <button type="submit" name="submit" value="SUBMIT"
                                class="text-white bg-brandBlue hover:bg-brandBlue focus:outline-none focus:ring-4 focus:ring-blue-800 font-medium rounded-full text-md px-5 py-2.5 text-center me-2 mb-2 dark:bg-brandBlue dark:hover:bg-brandBlue dark:focus:ring-blue-800">
                                {{ __('form.Save') }}
                            </button>
                            <a type="button"
                                class="text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 font-medium rounded-full text-md px-5 py-2.5 text-center me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
                                href="{{ route('organization.organization-users.index') }}">{{ __('form.Cancel') }}</a>
                        </div>
                        {{ html()->closeModelForm() }}
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script>
        // input photo js
        var loadFile = function(event) {
            var input = event.target;
            var file = input.files[0];
            var type = file.type;

            var output = document.getElementById("preview_img");

            output.src = URL.createObjectURL(event.target.files[0]);
            output.onload = function() {
                URL.revokeObjectURL(output.src);
            };
        };
    </script>
@endsection