@extends('admin.layouts.master')

@section('title', 'Profile')

@push('styles')
<style>
    .custom-image-preview {
        width: 140px;
        height: 140px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        border-radius: 0.5rem;
        border: 3px solid #ffffff;
        background-color: #f5f1ec;
        box-shadow: 0 0.35rem 1rem rgba(36, 28, 22, 0.08);
    }
    .tom-image-actions .btn-circle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background-color: #ffffff;
        box-shadow: 0 0.15rem 0.75rem rgba(0, 0, 0, 0.1);
        cursor: pointer;
        border: 1px solid #eff2f5;
        padding: 0;
        color: #495057;
    }
    .tom-image-actions .btn-circle:hover {
        background-color: #f4f6f8;
        transform: scale(1.08);
    }
    .tom-image-actions .btn-circle .ti {
        font-size: 0.85rem;
        line-height: 1;
    }
    .tom-profile-card .card-header {
        background: transparent;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
</style>
@endpush

@section('content')
    @php
        $pic = admin_profile_pic_url($user, url('uploads/noimage.png'));
        $defaultPic = url('uploads/noimage.png');
    @endphp

    @include('admin.partials.page-header', [
        'title' => 'Profile',
        'crumbs' => [
            ['label' => 'Settings', 'url' => route('admin.profile')],
            ['label' => 'Profile'],
        ],
    ])

    <div class="card tom-profile-card shadow-sm border-0 mt-3">
        <div class="card-header py-3">
            <h5 class="card-title mb-0">Profile Details</h5>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('admin.profile.update') }}" enctype="multipart/form-data" id="profileForm">
                @csrf
                <input type="hidden" name="id" id="profile_id" value="{{ $user->id }}">
                <input type="hidden" name="avatar_remove" id="avatar_remove" value="0">

                <div class="row g-4">
                    <div class="col-md-3 col-lg-2">
                        <label class="form-label d-block fw-semibold mb-3">Profile Image</label>
                        <div class="position-relative d-inline-block tom-image-actions">
                            <div class="custom-image-preview border shadow-sm"
                                 id="imagePreview"
                                 style="background-image: url('{{ $pic }}');"></div>

                            <label class="btn-circle position-absolute top-0 end-0"
                                   for="imageUpload"
                                   style="transform: translate(40%, -40%);"
                                   data-bs-toggle="tooltip"
                                   title="Change Image">
                                <i class="ti ti-pencil"></i>
                            </label>

                            <button type="button"
                                    class="btn-circle position-absolute bottom-0 end-0"
                                    id="removeImageBtn"
                                    style="transform: translate(40%, 40%);"
                                    data-bs-toggle="tooltip"
                                    title="Remove Image">
                                <i class="ti ti-trash text-danger"></i>
                            </button>

                            <input type="file"
                                   name="profile_pic"
                                   id="imageUpload"
                                   accept=".jpg,.jpeg,.png,.gif,image/*"
                                   class="d-none"
                                   data-label="Profile Image">
                        </div>
                    </div>

                    <div class="col-md-9 col-lg-10">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">User Name <span class="text-danger">*</span></label>
                                <input type="text" name="user_name" class="form-control" placeholder="Enter user name" value="{{ old('user_name', $user->user_name) }}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Contact Person <span class="text-danger">*</span></label>
                                <input type="text" name="contact_person" class="form-control" placeholder="Enter contact person" value="{{ old('contact_person', $user->contact_person) }}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Funeral Home Name</label>
                                <input type="text" name="funeral_home_name" class="form-control" placeholder="Enter funeral home name" value="{{ old('funeral_home_name', $user->funeral_home_name) }}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Email <span class="text-danger">*</span></label>
                                <input type="email" name="email" id="email" class="form-control" placeholder="Enter email" value="{{ old('email', $user->email) }}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Mobile</label>
                                <input type="text" name="mobile" class="form-control" placeholder="Enter mobile" value="{{ old('mobile', $user->mobile) }}" maxlength="10">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Address</label>
                                <textarea name="address" class="form-control" rows="3" placeholder="Enter address">{{ old('address', $user->address) }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-2">
                    <button type="submit" class="btn btn-primary">Update Profile</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    $(function () {
        var defaultPic = @json($defaultPic);

        $(document).on('change', '#imageUpload', function () {
            var file = this.files && this.files[0];
            if (! file) {
                return;
            }
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#imagePreview').css('background-image', "url('" + e.target.result + "')");
                $('#avatar_remove').val(0);
            };
            reader.readAsDataURL(file);
            if ($('#imageUpload').valid) {
                $('#imageUpload').valid();
            }
        });

        $(document).on('click', '#removeImageBtn', function () {
            $('#imageUpload').val('');
            $('#imagePreview').css('background-image', "url('" + defaultPic + "')");
            $('#avatar_remove').val(1);
        });

        $('[data-bs-toggle="tooltip"]').each(function () {
            new bootstrap.Tooltip(this, { trigger: 'hover focus' });
        });

        $('#profileForm').validate({
            ignore: [],
            rules: {
                user_name: { required: true },
                contact_person: { required: true },
                email: {
                    required: true,
                    email: true,
                    remote: tomValidateRemoteEmail(@json(route('admin.subadmin.check-email')), {
                        id: function () { return $('#profile_id').val(); }
                    })
                },
                mobile: { mobile10: true },
                profile_pic: { extension: 'jpg,jpeg,png,gif' }
            },
            messages: {
                email: { remote: 'Email already registered' },
                profile_pic: { extension: 'Only jpg, jpeg, png, gif allowed' }
            },
            errorPlacement: function (error, element) {
                if (element.attr('id') === 'imageUpload') {
                    error.insertAfter(element.closest('.tom-image-actions'));
                } else {
                    error.insertAfter(element);
                }
            }
        });
    });
</script>
@endpush