@extends('user.layouts.main')

@push('style')
<!-- Flatpickr CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
{{-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" /> --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" integrity="sha256-FdatTf20PQr/rWg+cAKfl6j4/IY3oohFAJ7gVC3M34E=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4.min.css">
{{-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" /> --}}
<style>
    /* .select2-container--bootstrap4 .select2-selection--multiple {
        min-height: calc(2.5em + 0.75rem + -3px) !important;
    } */
    .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
        border: none !important;
    }
    .select2-container .select2-search--inline .select2-search__field {
        height:3px !important;
    }
    span.select2-search.select2-search--inline {
    display: none !important;
}
</style>
@endpush

@section('contents')
    <div class="dashboard_wrapper border_start p-3">
        <div class="card border-0">
            <div class="card-header bg-white">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="card-title my-2"> Profile Edit </h5>
                    <a href="{{route('user.service')}}" class="btn btn-sm btn-primary border-0"> Back </a>
                </div>
            </div>
            <div class="card-body">
                <div class="mb-4">
                    @if ($user->user_type == '2' || $user->user_type == '3')
                        @if ($user->is_verified_seller == 1)
                            <div class="alert alert-success alert-dismissible fade show" role="alert" id="success-alert">
                                <strong>Your account is verified now!</strong>
                            </div>
                        @elseif ($user->is_verified_seller == 2)
                            @if ($user->request_for_verification == '2')
                                <div class="alert alert-warning" role="alert">
                                    <strong>Your account verification is in progress.</strong>
                                    <p class="m-0">Your profile information has been submitted. Please wait for admin approval.</p>
                                </div>
                            @else
                                <div class="alert alert-danger" role="alert">
                                    <strong>Your Account Verification Request Has Been Rejected.</strong>
                                    <p class="m-0"><strong>Reason for rejection:</strong> {{ $user->reject_reason ?? 'No reason provided.' }}</p>
                                    <p class="m-0">Please update your profile properly and submit it again for review</p>
                                </div>
                            @endif
                        @elseif ($user->is_verified_seller == 0)
                            @if ($user->request_for_verification == '1')
                                <div class="alert alert-warning" role="alert">
                                    <strong>Your account verification is in progress.</strong>
                                    <p class="m-0">Your profile information has been submitted. Please wait for admin approval.</p>
                                </div>
                            @else
                                <div class="alert alert-warning" role="alert">
                                    <strong>Your account is not verified.</strong>
                                    <p class="m-0">Please complete your profile and submit it for verification.</p>
                                </div>
                            @endif
                        @endif
                    @endif
                </div>
                <div class="user_wrapper">
                    <form action="{{route('user.updateProvider', $user->id)}}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-12 position-relative pro-form-title mt-2">
                                <h3 class="fs-6 fw-bold">
                                    <span> Basic Information </span>
                                </h3>
                            </div>

                            <div class="col-6 mb-3" style="">
                                <div class="position-relative mb-3" style="z-index: 1">
                                    <img class="bg-white" id="previewImage" src="{{ $user->image ? asset($user->image) : asset('assets/images/default-user.png') }}" alt="Default Image" height="150" style="">
                                </div>
                                <div class="d-flex justify-content-between align-items-end">
                                    <div class="w-100 pe-3">
                                        <label class="form-label" for="imageInput">
                                            Upload Profile Image <span class="text-danger">*</span>
                                        </label>
                                        <input class="form-control" type="file" name="image" id="imageInput" accept="image/*" @if (!$user->image) required @endif>
                                    </div>

                                </div>
                            </div>
                            <div class="col-6 mb-3">
                                <div class="position-relative mb-3" style="z-index: 1">
                                    <img class="bg-white" id="coverImagePreview" src="{{ $user->cover_image ? asset($user->cover_image) : asset('assets/images/default-user.png') }}" alt="Default Image" height="150" style="">
                                </div>
                                <div class="d-flex justify-content-between align-items-end">

                                    <div class="w-100 pe-3">
                                        <label class="form-label" for="cover_image">
                                            Upload Cover Image <span class="text-danger">*</span>
                                        </label>
                                        <input class="form-control" type="file" name="cover_image" id="coverimageInput" accept="image/*" @if (!$user->cover_image) required @endif>
                                    </div>

                                </div>
                            </div>

                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="name">
                                    Name
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="name" value="{{$user->name ?? ''}}"  id="name" placeholder="Enter your name" required>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="email">
                                    Email
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input type="email" class="form-control" name="email" value="{{$user->email ?? ''}}" id="name" placeholder="Enter your email" required>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="phone">
                                    Mobile Number
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="phone" value="{{old('phone', $user->phone ?? '')}}" id="number" placeholder="Enter your name" required>
                                </div>
                            </div>
                            {{-- <div class="col-md-4 mb-3">
                                <label class="form-label">
                                    Date of Birth
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="date_of_birth" id="datepick" value="{{ old('date_of_birth', $user->date_of_birth ? date('d-m-Y', strtotime($user->date_of_birth)) : '') }}" placeholder="dd-mm-yy">
                                    <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Select Your Date of Birth">
                                       <i class="fa-solid fa-circle-question"></i>
                                    </span>
                                </div>
                            </div> --}}
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="post_code">
                                    Post Code
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="post_code" value="{{ old('post_code', $user->post_code ?? '') }}" id="post_code" placeholder="Enter your post code" required>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="state">
                                    State
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="state" value="{{ old('state', $user->state ?? '') }}" id="state" placeholder="Enter your post state" required>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="select_city">
                                    Select City
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <select name="city_id" id="select_city" class="form-control" required>
                                        <option value="" class="d-none">Select City</option>
                                        @foreach ($cities as $item)
                                            <option value="{{$item->id}}" {{ old('city_id', $user->city_id) == $item->id ? 'selected' : '' }}> {{$item->name}} </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="address">
                                    Address
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="address" value="{{ old('address', $user->address ?? '') }}" id="address" placeholder="Enter your current location" required>
                                </div>
                            </div>

                            @php
                                // $subcat = $user->subCategory_id ? json_decode($user->subCategory_id, true) : [];
                                // $subcat = old('sub_cat_id', $user->subCategory_id ? ($user->subCategory_id) : []);
                                // $subcat = json_decode($user->subCategory_id, true) ?? [];
                                $subcat = is_string($user->subCategory_id)
                                        ? json_decode($user->subCategory_id, true) ?? []
                                        : (is_array($user->subCategory_id) ? $user->subCategory_id : []);

                            @endphp
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="sub_cat_id">
                                    Working Area
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <select name="sub_cat_id[]" class="form-select" id="select_subcat" multiple required>
                                        @foreach ($sub_cats as $item)
                                            <option value="{{ $item->id }}"  @if(in_array($item->id, $subcat)) selected @endif>{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="short_description">Short Description (<small id="charCount" class="text-muted">0/250 characters used</small>)</label>
                                <textarea class="form-control" name="short_description" id="short_description" cols="10" rows="3" maxlength="250">{{ old('short_description', $user->short_description ?? '') }}</textarea>

                            </div>

                            {{-- <div class="col-12 position-relative pro-form-title mt-2">
                                <h3 class="fs-6 fw-bold">
                                    <span> Home Service Info </span>
                                </h3>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="address">
                                    Home Service Charges
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="address" id="address" placeholder="Enter your service charges">
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="address">
                                    Home Service Staff Arrival Day
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="address" id="address" placeholder="Enter the Day of Staff Arrival for Home Service">
                                </div>
                            </div> --}}

                            <div class="col-12 position-relative pro-form-title mt-2">
                                <h3 class="fs-6 fw-bold"> <span>Account Info</span> </h3>
                            </div>

                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="account_name">
                                    Account Name
                                </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="account_name" value="{{old('account_name', $user->account_name ?? '')}}" id="account_name" placeholder="Enter your Account Name">
                                </div>
                            </div>

                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="account_number">
                                    Account Number
                                </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="account_number" value="{{old('account_number', $user->account_number ?? '')}}" id="account_number" placeholder="Enter your account number">
                                </div>
                            </div>

                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="iban_account">
                                    IBAN Account
                                </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="iban_account" value="{{old('iban_account' ,$user->iban_account ?? '')}}" id="iban_account" placeholder="Enter your IBAN Account">
                                </div>
                            </div>

                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="short_code">
                                    Short Code
                                </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="short_code" value="{{old('short_code' ,$user->short_code)}}" id="short_code" placeholder="Enter your short code">
                                </div>
                            </div>

                            <div class="col-md-4 mb-3">
                                <label class="form-label" for="route">
                                    Routing Number
                                </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="route" value="{{old('route' ,$user->route ?? '')}}" id="route" placeholder="Enter your route">
                                </div>
                            </div>

                            @if (auth()->user()->user_type == '3')
                                <div class="col-12 position-relative pro-form-title mt-2">
                                    <h3 class="fs-6 fw-bold">
                                        <span> Commercial (Business Paper) </span>
                                    </h3>
                                </div>

                                <div class="col-12 mb-3">
                                    <h5 class="form-label">Upload Images <span class="text-danger">*</span></h5>
                                    <small class="text-muted d-block mb-2">
                                        Please upload a clear and legible business document such as a business license, certificate, or other relevant documents that prove your business identity.
                                    </small>
                                    <div class="input-business position-relative">
                                        <div class="image-uploader">
                                            <div class="uploaded"></div>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <div class="col-12">
                                <div class="transaction_btn text-center mt-4">
                                    @if ($user->user_type == '2' || $user->user_type == '3')
                                        @if ($user->is_verified_seller == 1)
                                            <button type="submit" class="btn btn-primary border-0"> Update Information </button>
                                        @elseif ($user->is_verified_seller == 2)
                                            @if ($user->request_for_verification == '2')
                                                <button type="submit" class="btn btn-primary border-0"> Update Information </button>
                                            @else
                                                <button type="submit" class="btn btn-danger border-0"> Re-submit Verification Request </button>
                                            @endif
                                        @elseif ($user->is_verified_seller == 0)
                                            @if ($user->request_for_verification == '1')
                                                <button type="submit" class="btn btn-primary border-0"> Update Information </button>
                                            @else
                                                <button type="submit" class="btn btn-primary border-0"> Request for Verification </button>
                                            @endif
                                        @endif
                                    @endif
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="mt-4 mb-4">
                    <h4 class="page_title">Change password</h4>
                </div>
                <form action="{{route('user.password.update')}}" method="post">
                    @csrf
                    @method('PUT')
                    <div class="row">
                        <div class="mb-3 col-md-6">
                            <label class="form-label d-block w-100">
                                Password <span class="text-danger">*</span>
                            </label>
                            <div class="input-group input-group-flat">
                                <input type="password" name="password" id="password-field"
                                       class="form-control shadow-none @error('password') border-danger @enderror"
                                       placeholder="Password (at least 6 characters)" autocomplete="off"
                                       required>

                                <span class="input-group-text bg-transparent">
                                    <a href="javascript:void(0)"
                                       class="link-secondary fa fa-fw fa-eye field-icon toggle-password"
                                       toggle="#password-field">
                                    </a>
                                </span>
                            </div>
                                @error('password')
                                <span class="text-danger">{{$message}}</span>
                                @enderror
                        </div>
                        <div class="mb-3 col-md-6">
                            <label class="form-label d-block w-100">
                                Confirm Password <span class="text-danger">*</span>
                            </label>
                            <div class="input-group input-group-flat">
                                <input type="password" name="password_confirmation" id="confirm-toggle-password"
                                       class="form-control shadow-none @error('password_confirmation') border-danger @enderror"
                                       placeholder="Confirm password" autocomplete="off"
                                       required>

                                <span class="input-group-text bg-transparent">
                                    <a href="javascript:void(0)"
                                       class="link-secondary fa fa-fw fa-eye field-icon toggle-password"
                                       toggle="#confirm-toggle-password">
                                    </a>
                                </span>
                            </div>
                                @error('password_confirmation')
                                <span class="text-danger">{{$message}}</span>
                                @enderror
                        </div>
                        <div>
                            <button type="submit" class="btn btn-secondary btn-sm py-21">Change password</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection


@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <!-- Flatpickr JS -->
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        document.getElementById('coverimageInput').addEventListener('change', function (event) {
            const file = event.target.files[0];
            const preview = document.getElementById('coverImagePreview');

            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    preview.src = e.target.result;
                };
                reader.readAsDataURL(file);
            } else {
                preview.src = "{{ asset('assets/images/default-user.png') }}";  // Default image if no file is selected
            }
        });

        document.addEventListener("DOMContentLoaded", function () {
            flatpickr("#datepick", {
                dateFormat: "d-m-Y",
                enableTime: false,
            });
        });
        $(function () {
            $('#select_subcat').each(function () {
                $(this).select2({
                theme: 'bootstrap4',
                // width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
                placeholder: $(this).data('placeholder'),
                allowClear: Boolean($(this).data('allow-clear')),
                closeOnSelect: !$(this).attr('multiple'),
                });
            });
        });

        let preloaded = [
                @foreach ($user->document as $item)
                    {
                        id: {{ $item->id }},
                        src: '{{ asset($item->image) }}'
                    },
                @endforeach

            ];
            $('.uploaded').imageUploader({
            preloaded: preloaded,
            preloadedInputName: 'old_images',
        });

        $('.uploaded-image').each(function(index) {
            $(this).find('input[name="old_images[]"]').val(preloaded[index].id);
        });

        $(document).ready(function() {
            const successAlert = $('#success-alert');
            const parentDiv = successAlert.closest('.mb-4');

            // Check if the message was already shown (sessionStorage-based)
            if (!sessionStorage.getItem('successMessageShown') && successAlert.length) {
                // Auto-hide the alert after 30 seconds
                setTimeout(function() {
                    parentDiv.fadeOut('slow');
                }, 30000); // 30 seconds

                // Mark the message as shown in sessionStorage
                sessionStorage.setItem('successMessageShown', 'true');
            } else {
                parentDiv.hide(); // Hide parent div if already shown
            }
        });

        $(document).ready(function() {
            const maxLength = 250;
            const $shortDescription = $('#short_description');
            const $charCount = $('#charCount');

            // Function to update character count
            function updateCharacterCount() {
                const currentLength = $shortDescription.val().length;
                $charCount.text(`${currentLength}/${maxLength} characters used`);

                if (currentLength >= maxLength) {
                    $shortDescription.val($shortDescription.val().substring(0, maxLength));
                    $charCount.addClass('text-danger');
                    $charCount.removeClass('text-muted');
                } else {
                    $charCount.removeClass('text-danger').addClass('text-muted');
                }
            }

            // Initialize on page load
            updateCharacterCount();

            // Update count on input
            $shortDescription.on('input', updateCharacterCount);
        });

    </script>
@endpush