@extends('layouts.dashboard.app')
@section('title', 'Edit Profile | Chemical Wholesale')
@section('content')
    <div class="cw-content">
        <div class="container-fluid">
            <div class="cw-content-inner">
                <div class="cw-content-body">
                    <div class="cw-block-head cw-block-head-sm">
                        <div class="cw-block-between d-flex justify-content-between align-items-center">
                            <div class="cw-block-head-content">
                                <h3 class="cw-block-title page-title mb-0 d-flex align-items-center">
                                    My Profile
                                </h3>
                                <div class="cw-block-des text-soft mt-1">
                                    <p>Manage your Chemical Wholesale Account Profile.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    @include('layouts.dashboard.flash')
                    <form action="{{ route('admin.profile.update', $profile['uuid']) }}" method="POST" id="profileForm"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-lg-10">
                                <div class="card">
                                    <div class="card-body px-3">
                                        <div class="row d-flex align-items-stretch">
                                            <div class="col-lg-4">

                                                <div class="user-img-container">
                                                    <div class="profile-img">
                                                        <img src="{{ @$profile->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="profilepic"
                                                            class="profilepic" hidden />
                                                        <input type="hidden" name="cropprofilepic[]" id="base64">
                                                        <input type="hidden" name="cropprofilepic[]" id="orignalname">
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="col-lg-8">
                                                <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="form-label">First Name</label>
                                                            <input type="text" class="form-control onboarding-input"
                                                                name="first_name" placeholder="First Name" required
                                                                value="{{ ucfirst(@$profile->first_name) }}" maxlength="25" autofocus>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-4">
                                                        <div class="mb-3">
                                                            <label class="form-label">Middle Name (Optional)</label>
                                                            <input type="text" class="form-control onboarding-input"
                                                                name="middle_name" placeholder="Middle Name (Optional)"
                                                                value="{{ ucfirst(@$profile->middle_name) }}"
                                                                maxlength="25">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-4">
                                                        <div class="mb-3">
                                                            <label class="form-label">Last Name</label>
                                                            <input type="text" class="form-control onboarding-input"
                                                                name="last_name" placeholder="Last Name" required
                                                                value="{{ ucfirst(@$profile->last_name) }}" maxlength="25">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="mb-3">
                                                            <label class="form-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 onboarding-input"
                                                                    name="company" placeholder=""
                                                                    value="{{ @$profile->userprofile->company }}"
                                                                    maxlength="50">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="mb-3">
                                                            <label class="form-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 onboarding-input"
                                                                    name="email" placeholder="" required
                                                                    value="{{ $profile->email }}" maxlength="100">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="mb-3">
                                                            <label class="form-label">Phone Number</label>
                                                            <div class="input-group">
                                                                <span class="input-group-text">
                                                                    <i class="bi bi-briefcase"></i>
                                                                </span>
                                                                <input type="text"
                                                                    onkeyup="this.value = this.value.replace(/[^0-9\s\-\(\)]/g, '')"
                                                                    class="form-control onboarding-input" name="phone"
                                                                    maxlength="20" placeholder="" required
                                                                    value="{{ $profile->phone }}">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card mb-3 address-card">
                                                    <div class="card-header">
                                                        <span class="small">Address</span>
                                                    </div>
                                                    <div class="card-body pb-0 px-3">
                                                        <div class="row">
                                                            <div class="col-lg-12">
                                                                <div class="mb-3">
                                                                    <input type="text"
                                                                        class="form-control onboarding-input"
                                                                        name="address" placeholder="Address 1"
                                                                        required value="{{ @$profile->address }}"
                                                                        maxlength="100">
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-12">
                                                                <div class="mb-3">
                                                                    <input type="text"
                                                                        class="form-control onboarding-input"
                                                                        name="address_2" placeholder="Address 2"
                                                                        value="{{ @$profile->address_2 }}"
                                                                        maxlength="100">
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6">
                                                                <div class="mb-3">
                                                                    <label class="form-label">City</label>
                                                                    <input type="text"
                                                                        class="form-control onboarding-input"
                                                                        name="city" placeholder="City" required
                                                                        value="{{ @$profile->city }}" maxlength="100">
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6">
                                                                <div class="mb-3">
                                                                    <label class="form-label">State / Province</label>
                                                                    <input type="text"
                                                                        class="form-control onboarding-input"
                                                                        name="state" placeholder="State / Province"
                                                                        required value="{{ @$profile->state }}"
                                                                        maxlength="100">
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6">
                                                                <div class="mb-3">
                                                                    <label class="form-label">ZIP Code</label>
                                                                    <input type="text"
                                                                        onkeyup="this.value=this.value.replace(/[^\d]/,'')"
                                                                        class="form-control onboarding-input"
                                                                        name="zipcode" maxlength="10"
                                                                        placeholder="ZIP Code" required
                                                                        value="{{ @$profile->zipcode }}">
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6">
                                                                <div class="mb-3">
                                                                    <label class="form-label">Country</label>
                                                                    <select name="country_id" id="country_id"
                                                                        class="form-control form-select onboarding-input">
                                                                        <option disabled>Select Country</option>
                                                                        @foreach (Common::country() as $country)
                                                                            <option value="{{ $country['id'] }}"
                                                                                {{ $country['id'] == $profile['country_id'] ? 'selected' : '' }}>
                                                                                {{ $country['name_en'] }}
                                                                            </option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 mt-1">
                                                        @auth
                                                            <button class="btn-formpage-submit d-block" type="submit"
                                                                id="step1_confirm">
                                                                Update Profile
                                                            </button>
                                                        @endauth
                                                        @guest
                                                            <p class="text-danger bg-light p-3 fw-bold">* Login to edit your
                                                                profile
                                                            </p>
                                                        @endguest
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Biusiness Logo -->
    <div class="modal fade profilepiccrop" id="profilepiccrop" tabindex="-1" role="dialog"
        aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLabel">Business Logo Crop</h5>
                    <button type="button" class="close" data-dismiss="logocrop" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="img-container">
                        <div class="row">
                            <div class="col-md-8">
                                <img id="profileimage" src="/assets/img/noimg.jpg" style="max-width: 100%;">
                            </div>
                            <div class="col-md-4">
                                <div class="preview"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="crop">Crop</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('css')
    <link href="{{ asset('assets/dashboard/css/filepond.css') }}" rel="stylesheet" type="text/css" />
    <style>
        .btn-viewall {
            border-radius: 10px;
            border: 2px solid #4169e1;
            color: #fff;
            background-color: #4169e1;
            padding: 15px 25px;
            display: inline-block;
            text-align: center;
            font-weight: 700;
            font-size: 16px;
            transition: all 0.2s ease-in-out;
            align-items: center;
            cursor: pointer;
        }
    </style>
    <link href="{{ asset('assets/dashboard/css/cropper.css') }}" rel="stylesheet" type="text/css" />
@endpush
@push('js')
    <!-- Validation js for this page-->
    <script src="{{ asset('assets/dashboard/js/form-validation.js') }}"></script>
    <script src="{{ asset('assets/dashboard/js/filepond.js') }}"></script>
    <script src="{{ asset('assets/dashboard/js/cropper.js') }}"></script>
    <!-- End Validation js for this page-->
    <script>
        $('form').submit(function(e) {
            var submitBtn = $(this).find('button[type="submit"]');
            submitBtn.html('<span class="spinner me-2"></span>Saving');
            setTimeout(function() {
                submitBtn.removeAttr('disabled');
                submitBtn.html('Save');
            }, 1000);
        });
    </script>
    <script>
        FilePond.registerPlugin(FilePondPluginImagePreview, FilePondPluginFileValidateType);
        const input = document.querySelector('.fileupload');
        FilePond.create(input, {
            storeAsFile: true,
            acceptedFileTypes: ['image/jpeg', 'image/png', 'video/mp4', 'image/webp'],
        });
    </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>
    <!-- Crop JS -->
    <script>
        var $modal = $('#profilepiccrop');
        var image = document.getElementById('profileimage');
        var cropper;
        //Image Change Event
        $("body").on("change", ".profilepic", function(e) {
            var files = e.target.files;
            var done = function(url) {
                image.src = url;
                $modal.modal('show');
            };

            var reader;
            var file;
            var url;

            if (files && files.length > 0) {
                file = files[0];
                if (URL) {
                    done(URL.createObjectURL(file));
                } else if (FileReader) {
                    reader = new FileReader();
                    reader.onload = function(e) {
                        done(reader.result);
                    };
                    reader.readAsDataURL(file);
                }
            }
        });

        //Show Model Event
        $modal.on('shown.bs.modal', function() {
            cropper = new Cropper(image, {
                aspectRatio: 1,
                viewMode: 3,
                preview: '.preview',
                format: 'jpeg' | 'png',
            });
        }).on('hidden.bs.modal', function() {
            cropper.destroy();
            cropper = null;
        });

        //Crop Button Click Event
        $("#crop").click(function() {
            var filename = $('input[name=profilepic]').val().split('\\').pop();
            $("#orignalname").val(filename);
            canvas = cropper.getCroppedCanvas({
                width: 160,
                height: 160,
            });

            canvas.toBlob(function(blob) {
                url = URL.createObjectURL(blob);
                console.log(filename, url, blob.type.replace("image/", " "), blob);
                var reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onloadend = function() {
                    var base64data = reader.result;
                    $("#base64").val(base64data);
                    $("#userimage").show();
                    $("#userimage").attr("src", base64data);
                    $("#profilepiccrop").modal('toggle');
                }
            });
        });
    </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