@extends('layouts.public.app')

@section('title', 'My Profile | Chemical Wholesale')

@section('content')
    <div class="pb-4 userprofile">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-3">
                    @include('public.profile.account_nav')
                </div>
                <div class="col-lg-9">
                    <div class="cw-frontpage-title bg-white my-4">
                        <h4 class="fw-bold mb-0">My Profile</h4>
                        <p class="small">Manage your Chemical Wholesale Account Profile</p>
                    </div>
                    <div class="card border-0">
                        <div class="card-body">
                            <form action="{{ route('public.updateprofile') }}" method="POST" enctype="multipart/form-data"
                                id="profileform">
                                @csrf
                                <div class="row d-flex align-items-stretch">
                                    <div class="col-lg-5">

                                        <div class="user-img-container">
                                            <div class="profile-img">
                                                <img src="{{ @$user->userprofile->profile_image }}" alt="user photo"
                                                    id="userimage" onerror="this.src='/assets/img/default_user.png';">
                                            </div>
                                            <div class="upload-icon">
                                                <label for="userpic">
                                                    <img src="/assets/img/icons/camera.png" alt="">
                                                </label>
                                                <input type="file" id="userpic" name="userpic" hidden accept=".jpeg,.jpg,.png" />
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-lg-7">
                                        <div class="row pt-4 pt-lg-0">
                                            <input type="text" name="step" value="1" hidden="">
                                            <div class="col-lg-4">
                                                <div class="mb-3">
                                                    <label class="cwinput-label">First Name</label>
                                                    <input type="text" class="form-control cw-input"
                                                        name="firstname" placeholder="First Name" required
                                                        value="{{ @$user->first_name }}" maxlength="25" autofocus>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="mb-3">
                                                    <label class="cwinput-label">Middle Name (Optional)</label>
                                                    <input type="text" class="form-control cw-input"
                                                        name="middlename" placeholder="Middle Name (Optional)"
                                                        value="{{ @$user->middle_name }}" maxlength="25">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="mb-3">
                                                    <label class="cwinput-label">Last Name</label>
                                                    <input type="text" class="form-control cw-input"
                                                        name="lastname" placeholder="Last Name" required
                                                        value="{{ @$user->last_name }}" maxlength="25">
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label class="cwinput-label">Company Name
                                                    </label>
                                                    <div class="input-group">
                                                        <span class="input-group-text">
                                                            <i class="bi bi-briefcase"></i>
                                                        </span>
                                                        <input type="text" class="form-control cw-input"
                                                            name="company" placeholder="Company Name"
                                                            value="{{ @$user->userprofile->company }}" maxlength="50">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label class="cwinput-label">Email address</label>
                                                    
                                                    <div class="input-group">
                                                        <span class="input-group-text">
                                                            <i class="bi bi-envelope"></i>
                                                        </span>
                                                        <input type="email" class="form-control cw-input"
                                                            name="email" placeholder="Email Address" required value="{{ $user->email }}"
                                                            maxlength="100">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label class="cwinput-label">Phone Number</label>
                                                    <div class="input-group">
                                                        <span class="input-group-text">
                                                            <i class="bi bi-telephone"></i>
                                                        </span>
                                                        <input type="text"
                                                            onkeyup="this.value = this.value.replace(/[^0-9\s\-\(\)]/g, '')"
                                                            class="form-control cw-input" name="phone" maxlength="20"
                                                            placeholder="" required value="{{ $user->phone }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card mb-3 address-card">
                                            <div class="card-header">
                                                Address
                                            </div>
                                            <div class="card-body pb-0">
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3">
                                                            <input type="text" class="form-control cw-input"
                                                                name="address" placeholder="Address 1" required
                                                                value="{{ @$user->address }}" maxlength="100">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12">
                                                        <div class="mb-3">
                                                            <input type="text" class="form-control cw-input"
                                                                name="address_2" placeholder="Address 2"
                                                                value="{{ @$user->address_2 }}" maxlength="100">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="mb-3">
                                                            <label class="cwinput-label">City</label>
                                                            <input type="text" class="form-control cw-input"
                                                                name="city" placeholder="City" required
                                                                value="{{ @$user->city }}" maxlength="100">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="mb-3">
                                                            <label class="cwinput-label">State / Province</label>
                                                            <input type="text" class="form-control cw-input"
                                                                name="state" placeholder="State / Province" required
                                                                value="{{ @$user->state }}" maxlength="100">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="mb-3">
                                                            <label class="cwinput-label">ZIP Code</label>
                                                            <input type="text"
                                                                onkeyup="this.value=this.value.replace(/[^\d]/,'')"
                                                                class="form-control cw-input" name="zipcode"
                                                                maxlength="10" placeholder="ZIP Code" required
                                                                value="{{ @$user->zipcode }}">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="mb-3">
                                                            <label class="cwinput-label">Country</label>
                                                            <select name="country_id" id="country_id"
                                                                class="form-control form-select cw-input">
                                                                <option disabled>Select Country</option>
                                                                @foreach (Common::country() as $country)
                                                                    <option value="{{ $country['id'] }}"
                                                                        {{ $country['id'] == $user['country_id'] ? 'selected' : '' }}>
                                                                        {{ $country['name_en'] }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                @if ($errors->any())
                                                    <div class="alert alert-danger alert-dismissible fade show"
                                                        role="alert">
                                                        @foreach ($errors->all() as $error)
                                                            <p class="mb-0 small d-block">{{ $error }}</p>
                                                        @endforeach
                                                        <button type="button" class="btn-close p-3"
                                                            data-bs-dismiss="alert" aria-label="Close"
                                                            style="background-color: transparent"></button>
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="col-lg-12 mt-1">
                                                @auth
                                                    <button class="btn-formpage-submit d-block" type="submit" id="confirm">
                                                        Save
                                                    </button>
                                                @endauth
                                                @guest
                                                    <p class="text-danger bg-light p-3 fw-bold">* Login to edit your profile
                                                    </p>
                                                @endguest
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('css')
@endpush
@push('js')
    <script src="{{ asset('assets/js/maxlength.js') }}"></script>
    <script>
        $('input[maxlength]').maxlength({
            alwaysShow: true,
            threshold: 10,
            warningClass: "maxlength",
            limitReachedClass: "maxlength-red"
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#userpic').on('change', function() {
                var userimage = document.getElementById('userimage');
                if (userimage) {
                    userimage.src = URL.createObjectURL(event.target.files[0]);
                }
            });
        })
    </script>
    <script>
        $('#profileform').submit(function(e) {
            var submitBtn = $('#confirm');
            submitBtn.html('<span class="spinner me-2"></span>Saving');
            setTimeout(function() {
                submitBtn.removeAttr('disabled');
                submitBtn.html('Save');
            }, 1000);
        });
    </script>
    <script>
        $(document).ready(function () {
            var autofocusElement = $('input[autofocus]').filter(function () {
            return $(this).val().length > 0;
            }).first();

            if (autofocusElement.length) {
            var autofocuslength = autofocusElement.val().length;
            autofocusElement[0].setSelectionRange(autofocuslength, autofocuslength);
            autofocusElement.focus();
            }
        });
    </script>
@endpush