@extends('admin.layout.index')

@section('title', 'Settings')

@section('content')
<div class="row mb-3">
    <div class="col-12">
        <h4 class="mb-0">Settings</h4>
        <p class="text-muted mb-0">Manage your account settings and preferences.</p>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <ul class="nav nav-pills nav-justified mb-3" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#changePassword" role="tab">
                            <span class="d-block d-sm-none"><i class="ri-lock-password-line"></i></span>
                            <span class="d-none d-sm-block">Change Password / Social Links</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#privacyPolicy" role="tab">
                            <span class="d-block d-sm-none"><i class="ri-shield-check-line"></i></span>
                            <span class="d-none d-sm-block">Privacy Policy</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#termsConditions" role="tab">
                            <span class="d-block d-sm-none"><i class="ri-file-list-3-line"></i></span>
                            <span class="d-none d-sm-block">Terms &amp; Conditions</span>
                        </a>
                    </li>
                </ul>

                <div class="tab-content">
                    <!-- Change Password / Social Links Tab -->
                    <div class="tab-pane active" id="changePassword" role="tabpanel">
                        <div class="row">
                            <div class="col-lg-8">
                                <div class="card border">
                                    <div class="card-header bg-light">
                                        <h5 class="card-title mb-0">Change Password</h5>
                                    </div>
                                    <div class="card-body">
                                        <form>
                                            <div class="mb-3">
                                                <label class="form-label">Old Password <span class="text-danger">*</span></label>
                                                <div class="position-relative auth-pass-inputgroup">
                                                    <input type="password" class="form-control pe-5 password-input" placeholder="Enter current password" id="oldPassword">
                                                    <button class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon" type="button" id="password-addon">
                                                        <i class="ri-eye-fill align-middle"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">New Password <span class="text-danger">*</span></label>
                                                <div class="position-relative auth-pass-inputgroup">
                                                    <input type="password" class="form-control pe-5 password-input" placeholder="Enter new password" id="newPassword">
                                                    <button class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon" type="button" id="password-addon-new">
                                                        <i class="ri-eye-fill align-middle"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">Confirm Password <span class="text-danger">*</span></label>
                                                <div class="position-relative auth-pass-inputgroup">
                                                    <input type="password" class="form-control pe-5 password-input" placeholder="Confirm new password" id="confirmPassword">
                                                    <button class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon" type="button" id="password-addon-confirm">
                                                        <i class="ri-eye-fill align-middle"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <a href="#" class="text-muted">Forgot Password ?</a>
                                            </div>
                                            <div class="d-flex gap-2">
                                                <button type="button" class="btn btn-primary">Change Password</button>
                                                <button type="button" class="btn btn-light">Cancel</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="card border h-100">
                                    <div class="card-header bg-light">
                                        <h5 class="card-title mb-0">Social Links</h5>
                                    </div>
                                    <div class="card-body">
                                        <form>
                                            <div class="mb-3">
                                                <label class="form-label">Website</label>
                                                <input type="url" class="form-control" placeholder="https://your-site.com">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">Facebook</label>
                                                <input type="url" class="form-control" placeholder="https://facebook.com/yourpage">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">Twitter / X</label>
                                                <input type="url" class="form-control" placeholder="https://x.com/yourhandle">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">LinkedIn</label>
                                                <input type="url" class="form-control" placeholder="https://linkedin.com/company/yourcompany">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">Instagram</label>
                                                <input type="url" class="form-control" placeholder="https://instagram.com/yourprofile">
                                            </div>
                                            <button type="button" class="btn btn-primary w-100">Save Social Links</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Privacy Policy Tab -->
                    <div class="tab-pane" id="privacyPolicy" role="tabpanel">
                        <div class="row">
                            <div class="col-12">
                                <div class="card border">
                                    <div class="card-header bg-light">
                                        <h5 class="card-title mb-0">Privacy Policy</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label class="form-label fw-semibold">Policy Content</label>
                                            <textarea class="form-control" rows="16" placeholder="Enter Privacy Policy text here...">1. Information We Collect
We collect information you provide directly (account, support, usage) and technical data (device, logs, approximate location).

2. How We Use Information
Operate and improve services, send updates, support requests, security, and analytics.

3. Sharing
No selling of personal data. Shared only with consent, legal requirements, or service providers under contract.

4. Security
We apply technical and organizational controls but cannot guarantee absolute security.

5. Your Rights
Access, correct, delete, export, or object to processing where applicable.

6. Location Data
Used only for travel safety features; retained for limited periods.

7. Children
Not intended for under 13. Contact us to remove any such data.

8. Changes
We may update; continued use means acceptance.</textarea>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label fw-semibold">Last Updated</label>
                                            <input type="text" class="form-control" value="June 12, 2024">
                                        </div>
                                        <div class="text-end">
                                            <button type="button" class="btn btn-primary">Save Changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Terms & Conditions Tab -->
                    <div class="tab-pane" id="termsConditions" role="tabpanel">
                        <div class="row">
                            <div class="col-12">
                                <div class="card border">
                                    <div class="card-header bg-light">
                                        <h5 class="card-title mb-0">Terms &amp; Conditions</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label class="form-label fw-semibold">Terms Content</label>
                                            <textarea class="form-control" rows="16" placeholder="Enter Terms &amp; Conditions text here...">1. Acceptance
Use of the service constitutes acceptance of these terms.

2. Fair Use
Do not misuse, attempt unauthorized access, or disrupt service.

3. Responsibilities
Keep your credentials secure and inform us of any breach.

4. Availability
Service may be interrupted for maintenance or incidents.

5. Liability
We are not liable for indirect or consequential damages to the extent permitted by law.

6. Updates
We may update these terms; continued use means acceptance.

7. Contact
Questions: legal@lusyi.com</textarea>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label fw-semibold">Last Updated</label>
                                            <input type="text" class="form-control" value="June 12, 2024">
                                        </div>
                                        <div class="text-end">
                                            <button type="button" class="btn btn-primary">Save Changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('custom-script')
<script>
    $(document).ready(function() {
        // Password visibility toggle
        $('.password-addon').on('click', function() {
            var input = $(this).siblings('input');
            var icon = $(this).find('i');
            
            if (input.attr('type') === 'password') {
                input.attr('type', 'text');
                icon.removeClass('ri-eye-fill').addClass('ri-eye-off-fill');
            } else {
                input.attr('type', 'password');
                icon.removeClass('ri-eye-off-fill').addClass('ri-eye-fill');
            }
        });

        $('#password-addon-new').on('click', function() {
            var input = $('#newPassword');
            var icon = $(this).find('i');
            
            if (input.attr('type') === 'password') {
                input.attr('type', 'text');
                icon.removeClass('ri-eye-fill').addClass('ri-eye-off-fill');
            } else {
                input.attr('type', 'password');
                icon.removeClass('ri-eye-off-fill').addClass('ri-eye-fill');
            }
        });

        $('#password-addon-confirm').on('click', function() {
            var input = $('#confirmPassword');
            var icon = $(this).find('i');
            
            if (input.attr('type') === 'password') {
                input.attr('type', 'text');
                icon.removeClass('ri-eye-fill').addClass('ri-eye-off-fill');
            } else {
                input.attr('type', 'password');
                icon.removeClass('ri-eye-off-fill').addClass('ri-eye-fill');
            }
        });
    });
</script>
@endpush