@extends('layouts.admin')

@section('content')
    <div class="page-links">
        <a href="{{ route('users.index') }}">Users</a>
        <span> > </span>
        <a href="javascript:void(0)">{{ $user->accountId }}</a>
        <span> > </span>
        <a href="javascript:void(0)">{{ $title }}</a>
    </div>

    <div class="row">
        <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
            @include('users.settings.leftbar')
        </div>
        <div class="col-xxl-9 col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12">
            <div class="card-main">
                <div class="customer-details-form form-fld">
                    <h2 class="iheading-man">
                        <div class="row">
                          <div class="col-6">{{ $title }} </div>
                        </div>
                    </h2>
                    <div>
                        @if (Session::has('message'))
                            <p class="alert {{ Session::get('alert-class', 'alert-info') }} flash-msg">
                                {{ Session::get('message') }}</p>
                        @endif
                        <p id="custom-alert" class="alert alert-info d-none"></p>
                    </div>

                    <form class="form-data" id="edit_form" method="POST" action="{{ route('users.update', [$user->id]) }}" enctype="multipart/form-data">
                        {{ method_field('PUT') }}
                        @csrf
                        <input type="hidden" name="page" value="info">
                        <div class="row">
                            <div class="col-md-6 col-12 mb-3">
                                <div class="row">
                                    <div class="col-md-6 col-12 mb-3">
                                        <label>Account ID <small class="red">* </small></label>
                                        <input type="text" id="accountId" name="accountId" value="{{ old('accountId', $user->accountId) }}"class="form-control @error('accountId') is-invalid @enderror" placeholder="Enter Account Id">

                                        @error('accountId')
                                            <span class="error">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 col-12 mb-3">
                                        <label>Customer Type <small class="red">* </small></label>
                                        <select id="customerType" name="customerType"
                                            class="form-control @error('customerType') is-invalid @enderror">
                                            <option value="">--- Not Selected ---</option>
                                            <option {{ $user->customerType == 'lead' ? 'selected' : '' }} value="lead">Lead</option>
                                            <option {{ $user->customerType == 'trial' ? 'selected' : '' }} value="trial">Trial</option>
                                            <option {{ $user->customerType == 'customer' ? 'selected' : '' }} value="customer">Customer</option>
                                        </select>

                                        @error('customerType')
                                            <span class="error">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 col-12 mb-3">
                                        <label>First Name <small class="red">* </small></label>
                                        <input type="text" id="firstName" name="firstName" value="{{ old('firstName', $user->firstName) }}" class="form-control @error('firstName') is-invalid @enderror" placeholder="Enter First Name">
                                        @error('firstName')
                                            <span class="error">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 col-12 mb-3">
                                        <label>Last Name <small class="red">* </small></label>
                                        <input type="text" id="lastName" name="lastName" value="{{ old('lastName', $user->lastName) }}" class="form-control @error('lastName') is-invalid @enderror" placeholder="Enter Last Name">

                                        @error('lastName')
                                            <span class="error">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 col-12 mb-3">
                                        <label>Phone <small class="red">* </small></label>
                                        <input type="text" id="phone" name="phone" value="{{ old('phone', $user->phone) }}" class="form-control @error('phone') is-invalid @enderror" placeholder="Enter Phone">

                                        @error('phone')
                                            <span class="error">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 col-12 mb-3">
                                        <label>Email <small class="red">* </small></label>
                                        <input type="email" id="email" name="email" value="{{ old('email', $user->email) }}" class="form-control @error('email') is-invalid @enderror" placeholder="Enter Email">

                                        @error('email')
                                            <span class="error">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 col-12 mb-3">
                                        @if(old('joined_date'))
                                            @php $joined_date = old('joined_date'); @endphp
                                        @elseif(isset($record->joined_date) && $record->joined_date != '')
                                            @php $joined_date = $record->joined_date; @endphp
                                        @else
                                            @php $joined_date =date('Y-m-d'); @endphp
                                        @endif

                                        <label>Joined Date <small class="red">* </small></label>
                                        <input type="date" id="joined_date" name="joined_date" value="{{ $joined_date }}" class="form-control @error('joined_date') is-invalid @enderror" placeholder="Enter Joined Date">

                                        @error('joined_date')
                                            <span class="error">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 col-12 mb-3">
                                        <label for="activeToggle" class="control-label"> Active</label>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" role="switch" name="active"  id="activeToggle" @checked(old('active', $user->active))>
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-12 mb-3">
                                        <label for="partialPayment" class="control-label"> Partial Payment</label>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" role="switch" name="partialPayment" id="partialPayment" @checked(old('partialPayment', $user->partialPayment))>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-12 mb-3">
                                <div class="row">
                                    <div class="col-md-12 col-12 mb-3">
                                        <label>Address <small class="red">* </small></label>
                                        <div id="address-loader" class="spinner-border spinner-border-sm text-primary d-none"
                                            role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>

                                        <input required id="address" name="address" type="text" class="form-control" placeholder="Start typing address..." value="{{ old('address', $user->address->address) }}">
                                        @error('address')
                                            <span class="error">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 col-12 mb-3">
                                        <label>House No. <small class="red">* </small></label>

                                        <input type="text" id="houseNumber" name="houseNumber" value="{{ old('houseNumber', $user->address->houseNumber) }}" class="form-control @error('houseNumber') is-invalid @enderror" placeholder="Enter House Number">
                                        @error('houseNumber')
                                            <span class="error">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 col-12 mb-3">
                                        <label>Street <small class="red">* </small></label>
                                        <input type="text" id="street" name="street" value="{{ old('street', $user->address->street) }}" class="form-control @error('street') is-invalid @enderror" placeholder="Enter Street">

                                        @error('street')
                                            <span class="error">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 col-12 mb-3">
                                        <label>City <small class="red">* </small></label>
                                        <input type="text" id="city" name="city" value="{{ old('city', $user->address->city) }}" class="form-control @error('city') is-invalid @enderror" placeholder="Enter City">

                                        @error('city')
                                            <span class="error">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 col-12 mb-3">
                                        <label>Zipcode <small class="red">* </small></label>
                                        <input type="text" id="zipcode" name="zipcode" value="{{ old('zipcode', $user->address->zipcode) }}" class="form-control @error('zipcode') is-invalid @enderror" placeholder="Enter Zipcode">

                                        @error('zipcode')
                                            <span class="error">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <input type="hidden" id="latitude" name="latitude" value="{{ old('latitude', $user->address->latitude) }}">
                                    <input type="hidden" id="longitude" name="longitude" value="{{ old('longitude', $user->address->longitude) }}">
                                </div>
                            </div>
                        </div>
                        <div id="addressParts" hidden>
                            {{-- --}}
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="float-end">
                                    <button type="submit" class="btn btn-light bg-color20 color0 border-0  float-end save-draft">Save</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ asset('js/jquery.min.js') }}"></script>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}&libraries=places"></script>

    <script>
        $(document).ready(function() {
            $('#customerType').select2();

            // Code for Google Address Auto Complete
            var input = document.getElementById('address');
            autocomplete = new google.maps.places.Autocomplete(input);

            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                var place = autocomplete.getPlace();

                $('#latitude').val(place.geometry.location.lat());
                $('#longitude').val(place.geometry.location.lng());

                document.getElementById('addressParts').innerHTML = place.adr_address;

                $('#houseNumber').val(place.address_components[0]['long_name']);
                $('#street').val(place.address_components[1]['long_name']);

                if (document.getElementsByClassName('region')[0]) {
                    $('#city').val(document.getElementsByClassName('locality')[0].innerText);
                }

                if (document.getElementsByClassName('postal-code')[0]) {
                    $('#zipcode').val(document.getElementsByClassName('postal-code')[0].innerText);
                }

                $('#address-loader').addClass('d-none');
            });
            // End

            $('#address').on('input', function() {
                if ($('#address').val() != '') {
                    $('#address-loader').removeClass('d-none');
                } else {
                    $('#address-loader').addClass('d-none');
                }
            });

            $('#address').on('blur', function() {
                $('#address-loader').addClass('d-none');
            });
        });
    </script>

@endsection