@extends('layouts.front-end.app')

@section('title', auth('customer')->user()->name)

@section('content')
    <div class="container">
        <div class="cs_height_45 cs_height_lg_45"></div>
        <ol class="breadcrumb cs_fs_18 mb-0">
            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
            <li class="breadcrumb-item active">Details</li>
        </ol>
        <div class="cs_height_30 cs_height_lg_30"></div>
    </div>
    <div class="container">
        <div class="cs_account_wrap">
            @include('web-views.partials._profile-aside')
            <div class="cs_account_content">
                <div class="cs_account_card cs_radius_10">
                    <div class="cs_account_card_head cs_type_1">
                        <h3 class="cs_fs_18 mb-0">Account Details</h3>
                    </div>
                    <form action="{{ route('user-update', auth('customer')->user()->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="cs_plr_25">
                            <hr>
                            <div class="cs_height_25 cs_height_lg_25"></div>
                            <div class="row cs_gap_y_20">
                                <div class="col-lg-6">
                                    <label class="cs_medium">First Name <span>*</span></label>
                                    <input type="text" class="cs_form_field"
                                        value="{{ auth('customer')->user()->f_name }}" name="first_name">
                                    @error('first_name')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-lg-6">
                                    <label class="cs_medium">Last Name <span>*</span></label>
                                    <input type="text" class="cs_form_field"
                                        value="{{ auth('customer')->user()->l_name }}" name="last_name">
                                    @error('last_name')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-lg-6">
                                    <label class="cs_medium">Phone Number<span>*</span></label>
                                    <input type="text" class="cs_form_field"
                                        value="{{ auth('customer')->user()->phone }}" name="phone">
                                    @error('phone')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-lg-6">
                                    <label class="cs_medium">Email <span>*</span></label>
                                    <input type="text" class="cs_form_field"
                                        value="{{ auth('customer')->user()->email }}" name="email">
                                    @error('email')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-lg-12">
                                    <label class="cs_medium">Thumbnail</label>
                                    <input type="file" class="cs_form_field" name="image" accept=".jpg,.jpeg,.png">
                                    @error('image')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="cs_height_40 cs_height_lg_30"></div>
                            <h3 class="cs_fs_18 cs_semibold mb-0">Password Change</h3>
                            <div class="cs_height_15 cs_height_lg_15"></div>
                            <div class="row cs_gap_y_20">
                                <div class="col-lg-6">
                                    <label class="cs_medium">Current Password <span>*</span></label>
                                    <input type="password" class="cs_form_field" name="current_password" placeholder="Enter current password">
                                    @error('current_password')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-lg-6">
                                    <label class="cs_medium">New Password <span>*</span></label>
                                    <input type="password" class="cs_form_field" name="new_password" placeholder="Enter new password">
                                    @error('new_password')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="cs_height_30 cs_height_lg_30"></div>
                            <div>
                                <button type="submit" class="cs_btn cs_style_1 cs_type_1"><span>Save
                                        Changes</span></button>
                            </div>
                            <div class="cs_height_30 cs_height_lg_30"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="{{ asset('assets/back-end/js/croppie.js') }}"></script>
    <script>
        function checkPasswordMatch() {
            var password = $("#password").val();
            var confirmPassword = $("#confirm_password").val();
            $("#message").removeAttr("style");
            $("#message").html("");
            if (confirmPassword == "") {
                $("#message").attr("style", "color:black");
                $("#message").html("Please ReType Password");

            } else if (password == "") {
                $("#message").removeAttr("style");
                $("#message").html("");

            } else if (password != confirmPassword) {
                $("#message").html("Passwords do not match!");
                $("#message").attr("style", "color:red");
            } else if (confirmPassword.length <= 6) {
                $("#message").html("password Must Be 6 Character");
                $("#message").attr("style", "color:red");
            } else {

                $("#message").html("Passwords match.");
                $("#message").attr("style", "color:green");
            }

        }

        $(document).ready(function() {
            $("#confirm_password").keyup(checkPasswordMatch);

        });

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#blah').attr('src', e.target.result);
                };

                reader.readAsDataURL(input.files[0]); // convert to base64 string
            }
        }

        $("#files").change(function() {
            readURL(this);
        });
    </script>
@endpush