@extends('dashboard.layouts.master')
@section('title','Edit Profile')
@section('content')
    <style>
        .edit-user .form-group .images #user_photo .delete { margin: 0 !important;}
        .edit-user .form-group .images #user_photo .delete a {
            margin: 0 !important;
            background-image: url(../assets/dashboard/images/icon-cross-round.svg) !important;
            background-repeat: no-repeat !important;
            background-position: center !important;
            background-size: contain !important;
            width: 18px;
            height: 18px;
            padding: 0;
        }
        .delete {
            position: absolute;
            top: -8px;
            right: -8px;
            width: 18px;
            height: 18px;
        }
        .edit-user .form-group .images #user_photo .delete a {
            margin: 0;
            background: transparent;
            border: 0;
        }
        .edit-user .form-group .images #user_photo .delete a, .edit-user .form-group .images #user_photo .delete a:hover {
            background: transparent;
            border: 0;
            padding: 0;
        }
    </style>

    <div class="padding p-30 edit-package edit-user">
        <div class="box">
            <!-- <div class="box-header p-x-0 p-t-0"> -->
            <div class="box-header m-b-2">
                <div class="box-header-left">
                    <h3><i class="material-icons">&#xe3c9;</i> Edit Profile </h3>
                    <small>
                        <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> / Edit Profile
                        <!-- <a href="javascript:void(0)">Edit Profile</a> -->
                    </small>
                </div>
                <div class="box-header-right">
                    <div class="box-tool">
                        <ul class="nav">
                            <li class="nav-item inline">
                                <a class="nav-link" href="{{route('users')}}">
                                    <i class="material-icons md-18">×</i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="box-body">
                {{Form::open(['route'=>['usersUpdate',$Users->id],'method'=>'POST', 'files' => true, 'id' => 'editProfileForm'])}}

                <div class="row">
                    <div class="col-lg-4 col-md-6">
                        <div class="form-group">
                            <label for="name" class="form-control-label">{!!  __('backend.fullName') !!} <span class="valid_field">*</span>
                            </label>
                            {!! Form::text('name',$Users->name, array('placeholder' => 'Enter full name','class' => 'form-control','id'=>'name')) !!}
                            @if ($errors->has('name'))
                                <span class="help-block">
                                    <span  style="color: red;" class='validate'>{{ $errors->first('name') }}</span>
                                </span>
                            @endif
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <div class="form-group">
                            <label for="email" class="form-control-label">{!!  __('backend.loginEmail') !!} 
                            {{-- <span class="valid_field">*</span> --}}
                            </label>
                            {!! Form::email('email',$Users->email, array('placeholder' => 'Enter Login email','class' => 'form-control','id'=>'email')) !!}
                            @if ($errors->has('email'))
                                <span class="help-block">
                                    <span  style="color: red;" class='validate'>{{ $errors->first('email') }}</span>
                                </span>
                            @endif
                        </div>
                    </div>

                    @if($Users->type!=1)
                    <div class="col-lg-4 col-md-6">
                        <div class="form-group">
                            <label for="phone_number" class="form-control-label">{!!  __('backend.phone') !!} <span class="valid_field">*</span>
                            </label>
                            {!! Form::text('phone_number',$Users->phone, array('placeholder' => '','class' => 'form-control','id'=>'phone_number')) !!}
                            @if ($errors->has('phone_number'))
                                <span class="help-block">
                                    <span  style="color: red;" class='validate'>{{ $errors->first('phone_number') }}</span>
                                </span>
                            @endif
                        </div>
                    </div>
                    @endif

                    {{--<div class="form-group row">
                        <label for="password"
                            class="col-xl-2 form-control-label">{!!  __('backend.loginPassword') !!}
                        </label>
                        <div class="col-xl-10">
                            <input type="password" name="password" class="form-control" autocomplete="new-password">
                        </div>
                    </div>--}}

                    <div class="col-xl-12 col-lg-12 col-md-12">
                        <div class="form-group" style="display:inline-block;">
                            <label for="photo_file" class="form-control-label">Profile Photo</label>
                            @if($Users->photo != "")
                            <div class="images">
                                <div id="user_photo" class="col-md-4 box p-a-xs">
                                    @php
                                        $photoPath = $Users->type == 1 ? 'uploads/users/' : 'uploads/customer/';
                                        if (file_exists(public_path($photoPath . $Users->photo))) {
                                            $photoUrl = asset($photoPath . $Users->photo);
                                        } else {
                                            try {
                                                if (!empty(env('AWS_BUCKET')) && Storage::disk('s3')->exists($photoPath . $Users->photo)) {
                                                    $photoUrl = Storage::disk('s3')->url($photoPath . $Users->photo);
                                                } else {
                                                    $photoUrl = asset($photoPath . $Users->photo);
                                                }
                                            } catch (\Exception $e) {
                                                $photoUrl = asset($photoPath . $Users->photo);
                                            }
                                        }
                                    @endphp
                                    <a target="_blank" href="{{ $photoUrl }}">
                                        <img src="{{ $photoUrl }}" class="img-responsive" style="width:100px !important ; height:100px !important;">
                                    </a>
                                    <br>
                                    <div class="delete">
                                        <!-- <a onclick="document.getElementById('user_photo').style.display='none';document.getElementById('photo_delete').value='1';document.getElementById('undo').style.display='block';" class="solid-button">{!!  __('backend.delete') !!}</a> -->
                                        <a onclick="document.getElementById('user_photo').style.display='none';document.getElementById('photo_delete').value='1';document.getElementById('undo').style.display='block';"></a>
                                    </div>
                                </div>

                                <div id="undo" class="col-md-4 p-a-xs" style="display: none">
                                    <a onclick="document.getElementById('user_photo').style.display='block';document.getElementById('photo_delete').value='0';document.getElementById('undo').style.display='none';">
                                        <i class="material-icons">&#xe166;</i> {!!  __('backend.undoDelete') !!}
                                    </a>
                                </div>

                                {!! Form::hidden('photo_delete','0', array('id'=>'photo_delete')) !!}
                            </div>
                            @endif

                            <input type="file" name="profile_picture" id="profile_picture" class="form-control m-b-1" accept="image/png, image/jpg, image/jpeg">

                            <span id="profile_picture_error" class="help-block mt-2 mb-2" style="color:red; display:none;"></span>

                            @if ($errors->has('profile_picture'))
                                <span class="help-block mt-2 mb-2">
                                    <span style="color: red;" class='validate'>{{ $errors->first('profile_picture') }}</span>
                                </span>
                            @endif

                            <small>
                                <i class="material-icons">&#xe8fd;</i>
                                {!!  __('backend.imagesTypes') !!}
                            </small>
                        </div>
                    </div>


                    <div class="col-xl-12 col-lg-12 col-md-12 m-t-md">
                        <div class="form-group">
                            <button type="submit" class="solid-button m-r-1">{!! __('backend.update') !!}</button>
                            <a href="{{route('adminHome')}}" class="border-btn">{!! __('backend.cancel') !!}</a>
                        </div>
                    </div>
                </div>
                {{Form::close()}}
            </div>
        </div>
    </div>
@endsection
@push('after-scripts')
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
    const fileInput = document.getElementById('profile_picture');
    const errorDisplay = document.getElementById('profile_picture_error');
    const form = document.getElementById('editProfileForm');

    const MAX_SIZE_MB = 2;
    const maxSize = MAX_SIZE_MB * 1024 * 1024;
    const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png'];

    fileInput.addEventListener('change', function () {
        const file = this.files[0];

        // Reset error display
        errorDisplay.textContent = '';
        errorDisplay.style.display = 'none';

        if (file) {
            if (!allowedTypes.includes(file.type)) {
                errorDisplay.textContent = "Only JPG, JPEG, or PNG images are allowed.";
                errorDisplay.style.display = 'block';
                this.value = ''; // Clear file
                return;
            }

            if (file.size > maxSize) {
                errorDisplay.textContent = `File too large. Maximum allowed size is ${MAX_SIZE_MB}MB.`;
                errorDisplay.style.display = 'block';
                this.value = ''; // Clear file
            }
        }
    });

    form.addEventListener('submit', function (e) {
        const file = fileInput.files[0];

        // If error is still visible or invalid file present, prevent form submission
        if ((file && !allowedTypes.includes(file.type)) || (file && file.size > maxSize) || errorDisplay.style.display === 'block') {
            e.preventDefault(); // Stop form submission
            errorDisplay.textContent = "Please fix the file upload issue before submitting.";
            errorDisplay.style.display = 'block';
        }
    });
});
</script>
@endpush