@extends('users-area.layouts.app')
@section('title', 'Profile')

@section('content')
    <div class="card overflow-hidden">
        <div class="card-body p-0">
            <img src="{{ asset('users-area-template/images/backgrounds/profilebg.jpg') }}" alt="" class="img-fluid">
            <div class="row align-items-center">
                <div class="col-lg-3 order-lg-1 order-2"></div>
                <div class="col-lg-6 mt-n3 order-lg-2 order-1">
                    <div class="mt-n5">
                        <div class="d-flex align-items-center justify-content-center mb-2">
                            <div class="linear-gradient d-flex align-items-center justify-content-center rounded-circle" style="width: 110px; height: 110px;";>
                                <div class="border border-4 border-white d-flex align-items-center justify-content-center rounded-circle overflow-hidden" style="width: 100px; height: 100px;";>
                                    <label for="change-image">
                                        <img src="{{ isset($outlet) ? $outlet->profile_image ? asset('uploads/images/users/' . $outlet->profile_image) : asset('users-area-template/images/profile/user-1.jpg') : asset('users-area-template/images/profile/user-1.jpg') }}" onerror="this.src='{{ asset('users-area-template/images/profile/user-1.jpg') }}'" alt="" class="w-100 h-100 img-profile">
                                    </label>
                                </div>
                                <form action="" class="form-edit-image-profile" enctype="multipart/form-data">
                                    <input type="file" name="image" class="d-none" id="change-image" accept="image/*">
                                </form>
                            </div>
                            <div class="img-profile-loader d-none" style="position: absolute">
                                <div class="spinner-border spinner-border-sm text-white" role="status"></div>
                            </div>
                        </div>
                        <div class="text-center">
                            <h5 class="fs-5 mb-0 fw-semibold"><span class="text-outlet-name">{{ auth()->user()?->outlet->outlet_name }}</span> <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#edit-profile-modal"><small class="text-muted"><i class="ti ti-edit"></i></small></a></h5>
                            <p class="mb-0 fs-4 text-outlet-manager-name">{{ auth()->user()?->outlet->outlet_manager_name }}</p>
                            <p class="mb-0 fs-4 text-outlet-account-number">{{ auth()->user()?->outlet->outlet_account_number }}</p>
                            <p class="mb-0 fs-4 text-outlet-account-name">{{ auth()->user()?->outlet->outlet_account_name }}</p>
                        </div>
                    </div>
                    <div class="row p-3 p-md-0 p-md-3">
                        <div class="col-12 col-md-6 text-end">
                            <button class="btn btn-primary w-100 mb-2" data-bs-toggle="modal" data-bs-target="#edit-link-modal">Edit Link</button>
                        </div>
                        <div class="col-12 col-md-6 text-left">
                            <button class="btn btn-primary w-100 mb-2" data-bs-toggle="modal" data-bs-target="#change-theme-modal">Change Theme</button>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 order-last">
                </div>
            </div>
        </div>
    </div>
    <div class="tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="pills-followers" role="tabpanel" aria-labelledby="pills-followers-tab" tabindex="0">
            <div class="d-sm-flex align-items-center justify-content-between mt-3 mb-4">
                {{-- <h3 class="mb-3 mb-sm-0 fw-semibold d-flex align-items-center">Followers <span class="badge text-bg-secondary fs-2 rounded-4 py-1 px-2 ms-2">20</span></h3> --}}
            </div>
            <div class="row">
                <div class="col-md-6 col-xl-6">
                    <div class="card">
                        <div class="card-body p-4 d-flex align-items-center gap-3">
                            <span class="text-white d-flex align-items-center justify-content-center bg-success p-2 fs-4 rounded-circle" style="height: 40px;width:40px">
                                <i class="ti ti-brand-whatsapp"></i>
                            </span>
                            <div>
                                <h5 class="fw-semibold mb-0">Whatsapp</h5>
                                <span class="fs-2 d-flex align-items-center text-whatsapp">{{ $outlet->whatsapp }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-6">
                    <div class="card">
                        <div class="card-body p-4 d-flex align-items-center gap-3">
                            <span class="text-white d-flex align-items-center justify-content-center bg-warning p-2 fs-4 rounded-circle" style="height: 40px;width:40px">
                                <i class="ti ti-brand-instagram"></i>
                            </span>
                            <div>
                                <h5 class="fw-semibold mb-0">Instagram</h5>
                                <span class="fs-2 d-flex align-items-center text-instagram">{{ $outlet->instagram }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-6">
                    <div class="card">
                        <div class="card-body p-4 d-flex align-items-center gap-3">
                            <span class="text-white d-flex align-items-center justify-content-center bg-dark p-2 fs-4 rounded-circle" style="height: 40px;width:40px">
                                <i class="ti ti-brand-tiktok"></i>
                            </span>
                            <div>
                                <h5 class="fw-semibold mb-0">Tiktok</h5>
                                <span class="fs-2 d-flex align-items-center text-tiktok">{{ $outlet->tiktok }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-6">
                    <div class="card">
                        <div class="card-body p-4 d-flex align-items-center gap-3">
                            <span class="text-white d-flex align-items-center justify-content-center bg-danger p-2 fs-4 rounded-circle" style="height: 40px;width:40px">
                                <i class="ti ti-brand-youtube"></i>
                            </span>
                            <div>
                                <h5 class="fw-semibold mb-0">Youtube</h5>
                                <span class="fs-2 d-flex align-items-center text-youtube">{{ $outlet->youtube }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-6">
                    <div class="card">
                        <div class="card-body p-4 d-flex align-items-center gap-3">
                            <span class="text-white d-flex align-items-center justify-content-center bg-primary p-2 fs-4 rounded-circle" style="height: 40px;width:40px">
                                <i class="ti ti-brand-facebook"></i>
                            </span>
                            <div>
                                <h5 class="fw-semibold mb-0">Facebook</h5>
                                <span class="fs-2 d-flex align-items-center text-facebook">{{ $outlet->facebook }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-6">
                    <div class="card">
                        <div class="card-body p-4 d-flex align-items-center gap-3">
                            <span class="text-white d-flex align-items-center justify-content-center bg-secondary p-2 fs-4 rounded-circle" style="height: 40px;width:40px">
                                <i class="ti ti-world"></i>
                            </span>
                            <div>
                                <h5 class="fw-semibold mb-0">Website</h5>
                                <span class="fs-2 d-flex align-items-center text-website">{{ $outlet->website }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-6">
                    <div class="card">
                        <div class="card-body p-4 d-flex align-items-center gap-3">
                            <span class="text-white d-flex align-items-center justify-content-center bg-danger p-2 fs-4 rounded-circle" style="height: 40px;width:40px">
                                <i class="ti ti-brand-google"></i>
                            </span>
                            <div>
                                <h5 class="fw-semibold mb-0">Google Review</h5>
                                <span class="fs-2 d-flex align-items-center text-google-review">{{ $outlet->google_review }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="edit-profile-modal" tabindex="-1" aria-labelledby="edit-profile-modal" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header d-flex align-items-center">
                    <h4 class="modal-title" id="myLargeModalLabel">Edit Profile</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button>
                </div>
                <div class="modal-body">
                    <form action="" class="form-edit-profile" method="POST">
                        <div class="form-floating mb-3">
                            <input type="text" name="outlet_name" class="form-control value-outlet-name" value="{{ $outlet->outlet_name }}" placeholder="Outlet Name" style="text-transform:uppercase" required autocomplete="off">
                            <label><i class="ti ti-pencil-minus me-2 fs-4"></i>Outlet</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="text" name="outlet_manager_name" class="form-control value-outlet-manager-name" value="{{ $outlet->outlet_manager_name }}" placeholder="Outlet Manager Name" style="text-transform:uppercase" required autocomplete="off">
                            <label><i class="ti ti-pencil-minus me-2 fs-4"></i>Outlet Manager</label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light-danger btn-close-modal text-danger font-medium waves-effect text-start" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-light-primary btn-save-edit-profile text-primary font-medium waves-effect text-start"><i class="ti ti-device-floppy"></i> Save</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="edit-link-modal" tabindex="-1" aria-labelledby="edit-profile-modal" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header d-flex align-items-center">
                    <h4 class="modal-title" id="myLargeModalLabel">Edit Link</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button>
                </div>
                <div class="modal-body">
                    <form action="" class="form-edit-link" method="POST">
                        <div class="form-floating mb-3">
                            <input type="text" name="whatsapp" class="form-control value-whatsapp" value="{{ $outlet->whatsapp }}" placeholder="Whatsapp" autocomplete="off">
                            <label><i class="ti ti-brand-whatsapp me-2 fs-4"></i>Whatsapp</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="text" name="instagram" class="form-control value-instagram" value="{{ $outlet->instagram }}" placeholder="Instagram" autocomplete="off">
                            <label><i class="ti ti-brand-instagram me-2 fs-4"></i>Instagram</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="text" name="tiktok" class="form-control value-tiktok" value="{{ $outlet->tiktok }}" placeholder="Tiktok" autocomplete="off">
                            <label><i class="ti ti-brand-tiktok me-2 fs-4"></i>Tiktok</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="text" name="youtube" class="form-control value-youtube" value="{{ $outlet->youtube }}" placeholder="Youtube" autocomplete="off">
                            <label><i class="ti ti-brand-youtube me-2 fs-4"></i>Youtube</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="text" name="facebook" class="form-control value-facebook" value="{{ $outlet->facebook }}" placeholder="Facebook" autocomplete="off">
                            <label><i class="ti ti-brand-facebook me-2 fs-4"></i>Facebook</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="text" name="website" class="form-control value-website" value="{{ $outlet->website }}" placeholder="Website" autocomplete="off">
                            <label><i class="ti ti-world me-2 fs-4"></i>Website</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="text" name="google_review" class="form-control value-google-review" value="{{ $outlet->google_review }}" placeholder="Google Review" autocomplete="off">
                            <label><i class="ti ti-brand-google me-2 fs-4"></i>Google Review</label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light-danger btn-close-modal text-danger font-medium waves-effect text-start" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-light-primary btn-save-edit-link text-primary font-medium waves-effect text-start"><i class="ti ti-device-floppy"></i> Save</button>
                </div>
            </div>
        </div>
    </div>
    
    <div class="modal fade" id="change-theme-modal" tabindex="-1" aria-labelledby="change-theme-modal" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header d-flex align-items-center">
                    <h4 class="modal-title" id="myLargeModalLabel">Change Theme</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button>
                </div>
                <div class="modal-body">
                    <form action="" class="form-theme">
                        <div class="row">
                            @foreach ($themes as $theme)
                                <div class="col-4">
                                    <label for="{{ $theme->id }}">
                                        <input type="radio" name="theme_id" value="{{ $theme->id }}" @if ($theme->id == $outlet->theme_id) checked selected @endif class="form-check-input position-absolute ms-1 mt-1" id="{{ $theme->id }}">
                                        <img src="{{ asset('uploads/images/themes/thumb_' . $theme->background_image) }}" alt="" class="rounded-2 img-fluid mb-9">
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light-danger btn-close-modal text-danger font-medium waves-effect text-start" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-light-primary btn-save-theme text-primary font-medium waves-effect text-start"><i class="ti ti-device-floppy"></i> Save</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(function(){
            $('.form-edit-profile').on('submit', function() {
                const t = $(this)

                if (!t[0].checkValidity()) {
                    return t[0].reportValidity()
                }
                
                sendUpdateProfile(t)

                return false;
            })

            $('.btn-save-edit-profile').on('click', function() {
                $('.form-edit-profile').submit()
            })

            $('.form-edit-link').on('submit', function() {
                const t = $(this)

                if (!t[0].checkValidity()) {
                    return t[0].reportValidity()
                }
                
                sendUpdateProfile(t)

                return false;
            })

            $('.btn-save-edit-link').on('click', function() {
                $('.form-edit-link').submit()
            })

            $('.btn-save-theme').on('click', function() {
                $('.form-theme').submit()
            })

            $('.form-theme').on('submit', function() {
                const t = $(this)

                if (!t[0].checkValidity()) {
                    return t[0].reportValidity()
                }
                
                sendUpdateProfile(t)

                return false;
            })

            function sendUpdateProfile(form) {
                $.ajax({
                    url: `{{ route('users-area.profile.update') }}`,
                    type: "POST",
                    data: form.serialize(),
                    beforeSend: function(){
                        form.closest('.modal-content').find('.modal-footer .btn').prop('disabled', true)
                    },
                    success: function(data){
                        if (data.success) {
                            setProfileData(data.data)

                            $(`#${form.closest('.modal').attr('id')}`).modal('hide')
                            
                            toastr.success(`Profile updated successfully`, "Success")
                        }
                    },
                    complete: function(){
                        form.closest('.modal-content').find('.modal-footer .btn').prop('disabled', false)
                    },
                    error: function(xhr, status, error) {
                        if (xhr.responseJSON) {
                            if (xhr.responseJSON.errors) {
                                $.each(xhr.responseJSON.errors, function(i, item) {
                                    $('form').find(`input[name="${i}"],select[name="${i}"],textarea[name="${i}"]`).closest('div').append(`<small class="error-message text-danger">${item}</small>`)
                                })
                            } else {
                                toastr.error(`${xhr.responseJSON.message}`, "Error")
                            }
                        } else {
                            toastr.error(`Profile failed to update`, "Error")
                        }
                    }
                });
            }

            function setProfileData(data) {
                $('.text-outlet-name').text(data.outlet_name)
                $('.text-outlet-manager-name').text(data.outlet_manager_name)
                $('.text-outlet-account-number').text(data.outlet_account_number)
                $('.text-outlet-account-name').text(data.outlet_account_name)
                $('.text-whatsapp').text(data.whatsapp)
                $('.text-instagram').text(data.instagram)
                $('.text-youtube').text(data.youtube)
                $('.text-facebook').text(data.facebook)
                $('.text-tiktok').text(data.tiktok)
                $('.text-website').text(data.website)
                $('.text-google-review').text(data.google_review)

                $('.value-outlet-name').val(data.outlet_name)
                $('.value-outlet-manager-name').val(data.outlet_manager_name)
                $('.value-outlet-account-number').val(data.outlet_account_number)
                $('.value-whatsapp').val(data.whatsapp)
                $('.value-instagram').val(data.instagram)
                $('.value-youtube').val(data.youtube)
                $('.value-facebook').val(data.facebook)
                $('.value-tiktok').val(data.tiktok)
                $('.value-website').val(data.website)
                $('.value-google-review').val(data.google_review)
            }
        })
        
        $('#change-image').on('change', function() {
            readURL(this);
        });

        function readURL(input) {
            var url = input.value;
            var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
            if (input.files && input.files[0] && (ext == "png" || ext == "jpeg" || ext == "jpg" || ext == "webp" || ext == "gif")) {
                var reader = new FileReader();
        
                reader.onload = function(e) {
                    $('.img-profile').attr('src', e.target.result)
                }
                
                const formData = new FormData($('.form-edit-image-profile')[0]);

                $.ajax({
                    url: `{{ route('users-area.profile.update') }}`,
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    beforeSend: function(){
                        $('.img-profile-loader').removeClass('d-none')
                        $('.img-profile').css('opacity', '0.8')
                    },
                    success: function(data) {
                        if (data.success) {
                            $('.img-profile').attr('src', `{{ asset('uploads/images/users') }}/${data.data.profile_image}`)
                            toastr.success(`Profile image updated successfully`, "Success")
                        }
                    },
                    error: function(xhr) {
                        if (xhr.responseJSON) {
                            if (xhr.responseJSON.errors) {
                                $.each(xhr.responseJSON.errors, function(i, item) {
                                    $('form').find(`input[name="${i}"],select[name="${i}"],textarea[name="${i}"]`).closest('div').append(`<small class="error-message text-danger">${item}</small>`)
                                })
                            } else {
                                toastr.error(`${xhr.responseJSON.message}`, "Error")
                            }
                        } else {
                            toastr.error(`Profile image failed to update`, "Error")
                        }
                    },
                    complete: function() {
                        $('.img-profile-loader').addClass('d-none')
                        $('.img-profile').css('opacity', '1')
                    }
                })
        
                // reader.readAsDataURL(input.files[0]);
            } else if (!url) {
                $('.img-profile').attr('src', '{{ asset('users-area-template/images/profile/user-1.jpg') }}')
            } else {
                $('.img-profile-error-container').html('<small class="text-danger">Invalid image format</small>')
                $('.img-profile').attr('src', '{{ asset('users-area-template/images/profile/user-1.jpg') }}')
            }
        }
    </script>
@endpush