@extends($activeTemplate . 'layouts.master')
@section('content')
    <h5 class="dashboard-body__title">@lang('Settings')</h5>

    <div class="setting-wrapper__tab">
        <ul class="nav nav-pills mb-3 custom--tab tab-two" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="pills-details-tab" data-bs-toggle="pill" data-bs-target="#pills-details"
                    type="button" role="tab" aria-controls="pills-details" aria-selected="true">@lang('Personal details')
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-password-tab" data-bs-toggle="pill" data-bs-target="#pills-password"
                    type="button" role="tab" aria-controls="pills-password"
                    aria-selected="false">@lang('Password')</button>
            </li>
        </ul>
        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active" id="pills-details" role="tabpanel" aria-labelledby="pills-details-tab"
                tabindex="0">
                <div class="setting-wrapper">
                    <div class="setting-wrapper__top">
                        <div class="setting-wrapper__left">
                            <h6 class="setting-wrapper__title">@lang('Personal info')</h6>
                            <p class="setting-wrapper__desc">@lang('Update your photo and personal details here')</p>
                        </div>
                        <div class="setting-wrapper__right">
                            <button class="btn--base btn btn--sm submitBtn">@lang('Save')</button>
                        </div>
                    </div>
                    <div class="setting-wrapper__body">
                        <form action="#" method="POST" class="ajaxFormSubmit">
                            @csrf
                            <div class="setting-item">
                                <div class="setting-item__left">
                                    <p class="setting-item__title">@lang('Profile Photo')</p>
                                </div>
                                <div class="setting-item__right">
                                    <div class="inner-right align-items-center">
                                        <div class="setting-item__profile-thumb">
                                            <img class="profilePreview"
                                                src="{{ getImage(getFilePath('userProfile') . '/' . $user->image, getFileSize('userProfile')) }}"
                                                alt="@lang('Profile Image')">
                                        </div>
                                        <div class="setting-item__thumb-upload">
                                            <div class="form-group">
                                                <input type="file" name="image" id="profileImage" class="form--control"
                                                    accept="image/*" />
                                                <small class="text-muted">@lang('Allowed file types: jpg, jpeg, png. Max size: 2MB')</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-item__left">
                                    <p class="setting-item__title">@lang('Name')</p>
                                </div>
                                <div class="setting-item__right">
                                    <div class="row gy-4">
                                        <div class="col-sm-6">
                                            <input type="text" class="form--control" name="firstname"
                                                value="{{ $user->firstname }}" />
                                        </div>
                                        <div class="col-sm-6">
                                            <input type="text" class="form--control" name="lastname"
                                                value="{{ $user->lastname }}" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-item__left">
                                    <p class="setting-item__title">@lang('Email address')</p>
                                </div>
                                <div class="setting-item__right">
                                    <div class="row gy-4">
                                        <div class="col-sm-12">
                                            <input type="email" class="form--control" placeholder="@lang('Email address')"
                                                value="{{ $user->email }}" disabled />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-item__left">
                                    <p class="setting-item__title">@lang('Address')</p>
                                </div>
                                <div class="setting-item__right">
                                    <div class="row gy-4">
                                        <div class="col-sm-6">
                                            <input type="text" name="address" id="address" class="form--control"
                                                placeholder="@lang('Address')" value="{{ $user->address }}" />
                                        </div>
                                        <div class="col-sm-6">
                                            <input type="text" name="state" id="state" class="form--control"
                                                placeholder="@lang('State')" value="{{ $user->state }}" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-item__left">
                                    <p class="setting-item__title">@lang('Zip code')</p>
                                </div>
                                <div class="setting-item__right">
                                    <div class="row gy-4">
                                        <div class="col-sm-6">
                                            <input type="text" name="zip" id="zip" class="form--control"
                                                placeholder="@lang('Zip code')" value="{{ $user->zip }}" />
                                        </div>
                                        <div class="col-sm-6">
                                            <input type="text" name="city" id="city" class="form--control"
                                                placeholder="@lang('City')" value="{{ $user->city }}" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-item__left">
                                    <p class="setting-item__title">@lang('Country')</p>
                                </div>
                                <div class="setting-item__right">
                                    <div class="row gy-4">
                                        <div class="col-sm-12">
                                            <input type="text" name="country" id="country" class="form--control"
                                                placeholder="@lang('Country')" value="{{ $user->country_name }}"
                                                disabled />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-item__left">
                                    <p class="setting-item__title">@lang('Date of Birth')</p>
                                </div>
                                <div class="setting-item__right">
                                    <div class="row gy-4">
                                        <div class="col-sm-12">
                                            <input type="date" name="date_of_birth" id="date_of_birth"
                                                class="form--control" value="{{ $user?->date_of_birth ?? null }}" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            @include($activeTemplate . 'partials.settings.password')
        </div>
    </div>
@endsection

@push('style')
    <style>
        .setting-item__profile-thumb {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            overflow: hidden;
            position: relative;
            margin-right: 20px;
            border: 3px solid #e5e5e5;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .setting-item__profile-thumb:hover {
            border-color: #007bff;
            transform: scale(1.05);
        }

        .setting-item__profile-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.3s ease;
        }

        .setting-item__thumb-upload {
            flex: 1;
        }

        .setting-item__thumb-upload .form-group {
            margin-bottom: 0;
            position: relative;
        }

        .setting-item__thumb-upload input[type="file"] {
            padding: 10px;
            border: 2px dashed #ccc;
            border-radius: 8px;
            background: #f8f9fa;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .setting-item__thumb-upload input[type="file"]:hover {
            border-color: #007bff;
            background: #e9ecef;
        }

        .setting-item__thumb-upload small {
            display: block;
            margin-top: 8px;
            color: #6c757d;
            font-style: italic;
        }
    </style>
@endpush

@push('style-lib')
    <link rel="stylesheet" href="{{ asset($activeTemplateTrue . 'css/flatpickr.min.css') }}" />
@endpush

@push('script-lib')
    <script src="{{ asset($activeTemplateTrue . 'js/flatpickr.js') }}"></script>
@endpush

@push('script')
    <script>
        "use strict";

        $(document).ready(function() {
            $('[name="date_of_birth"]').flatpickr();

            $("#profileImage").change(function() {
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $(".ajaxFormSubmit .profilePreview").attr("src", e.target.result);
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            });

            $('.ajaxFormSubmit input').on('keypress', function(e) {
                if (e.which === 13) {
                    e.preventDefault();
                    $(this).closest('.ajaxFormSubmit').closest('.setting-wrapper').find('.submitBtn')
                        .trigger('click');
                }
            });

            $('.ajaxFormSubmit').on('submit', function(e) {
                e.preventDefault();

                const form = this;

                if (!form.checkValidity()) {
                    form.reportValidity();
                    return false;
                }

                var url = $(this).attr('action');
                var data = new FormData(this);
                var $form = $(this);
                var $submitBtn = $('.submitBtn');
                var originalBtnHtml = $submitBtn.html();

                $.ajax({
                    url: url,
                    data: data,
                    method: 'POST',
                    processData: false,
                    contentType: false,
                    beforeSend: function() {
                        $submitBtn.html('<i class="fas fa-spinner fa-spin"></i> Submitting...')
                            .prop('disabled', true);
                    },
                    success: function(response) {
                        if (response.success) {
                            if ($(form).hasClass('password')) {
                                form.reset();
                            }

                            notify('success', response.message);
                        } else {
                            notify('error', response.message || 'Something went wrong!');
                            if (response.errors) {
                                Object.keys(response.errors).forEach(function(key) {
                                    notify('error', response.errors[key][0]);
                                });
                            }
                        }
                    },
                    error: function(xhr) {
                        notify('error', 'Something went wrong!');
                    },
                    complete: function() {
                        $submitBtn.html(originalBtnHtml).prop('disabled', false);
                    }
                });
            });

            $(document).on('click', '.submitBtn', function(e) {
                e.preventDefault();
                var form = $(this).closest('.setting-wrapper__top').next('.setting-wrapper__body').find(
                    'form');
                if (form.length) {
                    form.submit();
                }
            });
        });
    </script>
@endpush