@extends('layouts.master')

@section('css')
    <link href="{{ asset('panel/assets/iti/intlTelInput.css') }}" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/material-design-iconic-font@2.2.0/dist/css/material-design-iconic-font.min.css" rel="stylesheet">
@endsection

@section('content')
@php
    // dumper($result);
@endphp
<div class="main-content app-content mt-0">
    <div class="side-app">

        <!-- CONTAINER -->
        <div class="main-container container-fluid">

            <!-- PAGE-HEADER -->
            <div class="page-header">
                <h1 class="page-title">{{__('common.edit')}} {{__('common.profile')}}</h1>
                <div>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">{{__('common.tables')}}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{__('common.edit')}} {{__('common.profile')}}</li>
                    </ol>
                </div>
            </div>
            <!-- PAGE-HEADER END -->

            <!-- ROW-1 OPEN -->
            <div class="row">
                <div class="col-xl-4">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">{{__('common.edit')}} {{__('common.password')}}</div>
                        </div>
                        <div class="card-body">
                            <div class="text-center chat-image mb-5">
                                <div class="avatar avatar-xxl chat-profile mb-3 brround">
                                    <a class="" href="#!"><img alt="avatar" src="{{ image($result->image, USER_PATH) }}" class="brround"></a>
                                </div>
                                <div class="main-chat-msg-name">
                                    <a href="#!">
                                        <h5 class="mb-1 text-dark fw-semibold">{{ $result->first_name ?? ''}} {{ $result->last_name ?? ''}}</h5>
                                    </a>
                                    <p class="text-muted mt-0 mb-0 pt-0 fs-13">{{ $result->user_type }}</p>
                                </div>
                            </div>
                            {!! Form::open(['route' => 'password-update', 'method' => 'post', 'class' => 'ajax-submit']) !!}

                            <div class="form-group">
                                {!! Form::label('current_password', __('common.current') . ' ' . __('common.password'), ['class' => 'form-label']) !!}
                                <div class="wrap-input100 validate-input input-group" id="Password-toggle">
                                    <a href="javascript:void(0)" class="input-group-text bg-white text-muted">
                                        <i class="zmdi zmdi-eye text-muted" aria-hidden="true"></i>
                                    </a>
                                    {!! Form::password('current_password', ['class' => 'input100 form-control', 'placeholder' => __('common.current') . ' ' . __('common.password'), 'autocomplete' => 'current-password']) !!}
                                </div>
                            </div>
                            <div class="form-group">
                                {!! Form::label('new_password', __('common.new') . ' ' . __('common.password'), ['class' => 'form-label']) !!}
                                <div class="wrap-input100 validate-input input-group" id="Password-toggle1">
                                    <a href="javascript:void(0)" class="input-group-text bg-white text-muted">
                                        <i class="zmdi zmdi-eye text-muted" aria-hidden="true"></i>
                                    </a>
                                    {!! Form::password('new_password', ['class' => 'input100 form-control', 'placeholder' => __('common.new') . ' ' . __('common.password'), 'autocomplete' => 'new-password']) !!}
                                </div>
                            </div>
                            <div class="form-group">
                                {!! Form::label('confirm_password', __('common.confirm') . ' ' . __('common.password'), ['class' => 'form-label']) !!}
                                <div class="wrap-input100 validate-input input-group" id="Password-toggle2">
                                    <a href="javascript:void(0)" class="input-group-text bg-white text-muted">
                                        <i class="zmdi zmdi-eye text-muted" aria-hidden="true"></i>
                                    </a>
                                    {!! Form::password('confirm_password', ['class' => 'input100 form-control', 'placeholder' => __('common.confirm') . ' ' . __('common.password'), 'autocomplete' => 'new-password']) !!}
                                </div>
                            </div>
                        </div>
                        <div class="card-footer text-end">
                            <button type="submit" class="btn btn-primary">{{__('common.update')}}</button>
                            <a href="javascript:void(0)" class="btn btn-danger">{{__('common.cancel')}}</a>
                        </div>
                        {!! Form::close() !!}
                    </div>
                    <div class="card panel-theme">
                        <div class="card-header">
                            <div class="float-start">
                                <h3 class="card-title">{{__('common.contact')}}</h3>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="card-body no-padding">
                            <ul class="list-group no-margin">
                                <li class="list-group-item d-flex ps-3">
                                    <div class="social social-profile-buttons me-2">
                                        <a class="social-icon text-primary" href="javascript:void(0)"><i class="fe fe-mail"></i></a>
                                    </div>
                                    <a href="javascript:void(0)" class="my-auto">support@demo.com</a>
                                </li>
                                <li class="list-group-item d-flex ps-3">
                                    <div class="social social-profile-buttons me-2">
                                        <a class="social-icon text-primary" href="javascript:void(0)"><i class="fe fe-globe"></i></a>
                                    </div>
                                    <a href="javascript:void(0)" class="my-auto">www.abcd.com</a>
                                </li>
                                <li class="list-group-item d-flex ps-3">
                                    <div class="social social-profile-buttons me-2">
                                        <a class="social-icon text-primary" href="javascript:void(0)"><i class="fe fe-phone"></i></a>
                                    </div>
                                    <a href="javascript:void(0)" class="my-auto">+125 5826 3658</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xl-8">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">{{__('common.edit')}} {{__('common.profile')}}</h3>
                        </div>
                        <div class="card-body">
                            {!! Form::model($result, ['route' => ['users.update', $result->id], 'method' => 'patch', 'id' => 'ajax-submit']) !!}

                            <div class="row">

                                <div class="col-lg-6 col-md-12">
                                    <div class="form-group">
                                        {!! Form::label('name', __('common.name'), ['class' => 'form-label']) !!}
                                        {!! Form::text('name', null, ['class' => 'form-control', 'placeholder' => __('common.name')]) !!}
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-12">
                                    <div class="form-group">
                                        {!! Form::label('email', __('common.email'), ['class' => 'form-label']) !!}
                                        {!! Form::email('email', null, ['class' => 'form-control', 'placeholder' => __('common.email')]) !!}
                                    </div>
                                </div>
                            </div>
                                                       
                            <div class="row">
                                <div class="col-lg-6 col-md-12">
                                    <div class="form-group">
                                        {!! Form::label('phone_number', __('common.contact') . ' ' . __('common.number'), ['class' => 'form-label']) !!}
                                        {!! Form::text('phone_number',null, ['class' => 'form-control', 'id' => 'phone', 'placeholder' => __('common.contact') . ' ' . __('common.number')]) !!}
                                        <input type="hidden" id="dial_code" value="{{ $result->dial_code }}" name="dial_code">
                                        <input type="hidden" id="dial_code_iso" value="{{ $result->dial_code_iso }}" name="dial_code_iso">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-12">
                                    <div class="form-group">
                                        {!! Form::label('logo', __('common.logo'), ['class' => 'form-label']) !!}
                                        {!! Form::file('image',  ['class' => 'form-control', 'placeholder' => __('common.logo')]) !!}
                                    </div>

                                   
                                </div>
                            </div>
                            <div class="form-group">
                                {!! Form::label('bio', __('common.about_me'), ['class' => 'form-label']) !!}
                                {!! Form::textarea('bio', null, ['class' => 'form-control', 'rows' => 6]) !!}
                               
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-12">
                                    <div class="form-group">
                                        {!! Form::label('website', __('common.website'), ['class' => 'form-label']) !!}
                                        {!! Form::text('website', null, ['class' => 'form-control', 'placeholder' => 'http://example.com']) !!}
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-12">
                                    <div class="form-group">
                                        {!! Form::label('dob', __('common.date_of_birth'), ['class' => 'form-label']) !!}
                                        {!! Form::date('dob', '2023-10-01', ['class' => 'form-control', 'placeholder' => 'dd/mm/yyyy']) !!}
                                    </div>
                                </div>
                            </div>

                            {{-- <div class="form-group">
                                    <label class="custom-switch form-switch mb-0">
                                        <input type="checkbox" name="status" value="1" class="custom-switch-input" {{ $result->status == '1' ? 'checked' : '0' }}>                                        <span class="custom-switch-indicator custom-switch-indicator-lg"></span>
                                        <span class="custom-switch-description">{{__('common.account')}} {{__('common.status')}}</span>
                                    </label>
                            </div> --}}
                        </div>
                        <div class="card-footer text-end">
                            <button type="submit" class="btn btn-success my-1">{{__('common.save')}}</button>
                            <a href="javascript:void(0)" class="btn btn-danger my-1">{{__('common.cancel')}}</a>
                        </div>
                        {!! Form::close() !!}

                    </div>
                   
                   
                </div>
            </div>
            <!-- ROW-1 CLOSED -->

        </div>
        <!--CONTAINER CLOSED -->

    </div>
</div>
@endsection

@section('bottom_script')

<script type="text/javascript">
    window.addEventListener('DOMContentLoaded', (event) => {

        let input = document.getElementById("phone");
        let dialing_code = document.getElementById("dial_code");
        let dialing_code_iso = document.getElementById("dial_code_iso");
        let iti = window.intlTelInput(input, {
        initialCountry: "{{ $result->dial_code_iso }}",
        // utilsScript: "{{ asset('panel/assets/iti/utils.js') }}"
    });
        iti.setNumber('{{ $result->dial_code }}');
        iti.setNumber('{{ $result->dial_code_iso }}');
        iti.setNumber('{{ $result->phone_number }}');

        if(iti !== undefined) {
            dialing_code_iso.value = iti.getSelectedCountryData().iso2.toUpperCase();
		}

        input.addEventListener("countrychange", function() {
            console.log('working... contact');
            let number = iti.selectedCountryData.dialCode;
            dialing_code.value = '+' + number;
            dialing_code_iso.value = iti.selectedCountryData.iso2.toUpperCase();
        });
    });
</script>

<script src="{{ asset('panel/assets/iti/intlTelInput.js') }}"></script>
<script>
    document.querySelectorAll('[id^="Password-toggle"]').forEach(toggle => {
        toggle.querySelector('.zmdi-eye').addEventListener('click', function () {
            const input = toggle.querySelector('input');
            if (input.type === 'password') {
                input.type = 'text';
                this.classList.replace('zmdi-eye', 'zmdi-eye-off');
            } else {
                input.type = 'password';
                this.classList.replace('zmdi-eye-off', 'zmdi-eye');
            }
        });
    });
</script>
@endsection