@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.app') }} {{ __('common.user') }}</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.app') }} {{ __('common.user') }}</li>
                        </ol>
                    </div>
                </div>
                <!-- PAGE-HEADER END -->

                <!-- ROW-1 OPEN -->
                <div class="row">

                    <div class="col-xl-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">{{ __('common.edit') }} {{ __('common.app') }}
                                    {{ __('common.user') }}</h3>
                            </div>
                            <div class="card-body">
                                {!! Form::model($result, [
                                    'route' => ['app-user-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', 'Contact Number', ['class' => 'form-label']) !!}
                                            {!! Form::text('phone_number', null, [
                                                'class' => 'form-control',
                                                'id' => 'phone',
                                                'placeholder' => 'Contact 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', 'Logo', ['class' => 'form-label']) !!}
                                            {!! Form::file('image', ['class' => 'form-control', 'placeholder' => 'Company logo']) !!}
                                        </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 class="form-group">
                                    <label class="custom-switch form-switch mb-0">
                                        <!-- Hidden field ensures "0" is submitted if checkbox is unchecked -->
                                        <input type="hidden" name="status" value="0">

                                        <input type="checkbox" name="status" value="1" class="custom-switch-input"
                                            {{ $result->status == '1' ? 'checked' : '' }}>

                                        <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