@extends('dashboard.layouts.master')
@section('title',__('backend.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 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> / {{ __('backend.edit_profile') }}
                    </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.name') !!} <span class="valid_field">*</span>
                            </label>
                            {!! Form::text('name',$users->name, array('placeholder' => '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.email') !!}
                            <span class="valid_field">*</span>
                            </label>
                            {!! Form::email('email',$users->email, array('placeholder' => '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>

                    <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' => 'Phone Number','class' => 'form-control','id'=>'phone_number', 'maxlength' => 15)) !!}
                            @if ($errors->has('phone_number'))
                                <span class="help-block">
                                    <span  style="color: red;" class='validate'>{{ $errors->first('phone_number') }}</span>
                                </span>
                            @endif
                        </div>
                    </div>
                    
                    </div>
                    <div class="row">
                        
                        <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">{!!  __('backend.Profile') !!}</label>
                                @if($users->photo != "")
                                <div class="images">
                                    <div id="user_photo" class="col-md-4 box p-a-xs">
                                        @php
                                        try {
                                            $photoPath = $users->user_type == 1 ? 'uploads/users/' : 'uploads/customer/';
                                            $photoUrl = Storage::disk('s3')->url($photoPath . $users->photo);
                                        } catch (\Exception $e) {
                                            $photoPath = $users->user_type == 1 ? 'uploads/users/' : 'uploads/customer/';
                                            $photoUrl = asset($photoPath).'/'.$users->photo;
                                        }
                                        @endphp
                                        <a target="_blank" href="{{ $photoUrl }}">
                                            <img src="{{ $photoUrl }}" class="img-responsive" style="width:100px !important ; height:100px !important;" alt="user">
                                        </a>
                                        <br>
                                        <div class="delete">
                                            <button type="button"
                                                    id="deletePhotoBtn"
                                                    class="delete-btn"
                                                    aria-label="Delete profile photo">
                                                <i class="fa fa-trash" aria-hidden="true"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <div id="undo" class="col-md-4 p-a-xs" style="display: none">
                                        <button type="button"
                                                id="undoDeleteBtn"
                                                class="btn btn-link p-0">
                                            <i class="material-icons" aria-hidden="true">&#xe166;</i>
                                            {!! __('backend.undoDelete') !!}
                                        </button>
                                    </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
                                <div>
                                    <small>
                                        <i class="material-icons">&#xe8fd;</i>
                                        {!!  __('backend.imagesTypes') !!}
                                    </small>
                                </div>
                                <div>
                                    <small>
                                        <i class="material-icons">&#xe8fd;</i>
                                        {!!  __('backend.imagesSize') !!}
                                    </small>
                                </div>
                            </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 () {
    document.getElementById('deletePhotoBtn').addEventListener('click', function () {
        document.getElementById('user_photo').style.display = 'none';
        document.getElementById('photo_delete').value = '1';
        document.getElementById('undo').style.display = 'block';
    });

    document.getElementById('undoDeleteBtn').addEventListener('click', function () {
        document.getElementById('user_photo').style.display = 'block';
        document.getElementById('photo_delete').value = '0';
        document.getElementById('undo').style.display = 'none';
    });

    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