@extends('layouts.master')
@section('body_id', 'vendor_profile_settings_page')
@section('content')

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <style>
        /* 🌟 MATCHING APP STYLE ARCHITECTURE */
        .premium-dashboard-core {
            background: #ffffff;
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            margin-bottom: 40px;
        }
        
        .elite-dashboard-header {
            border-bottom: 1px solid #e2e8f0;
            padding-bottom: 15px;
            margin-bottom: 30px;
        }

        .main-welcome-heading {
            font-size: 24px;
            font-weight: 700;
            color: #1e293b;
            margin: 0 0 4px 0;
            font-family: 'Playfair Display', serif;
        }

        .sub-welcome-caption {
            font-size: 13px;
            color: #64748b;
            margin: 0;
        }

        .profile-segment-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 24px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.02);
        }

        .segment-section-title {
            font-size: 15px;
            font-weight: 700;
            color: #4a6b82;
            margin-top: 0;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 1px solid #f1f5f9;
            padding-bottom: 10px;
        }

        .luxury-form-group {
            margin-bottom: 20px;
            position: relative;
        }

        .luxury-form-group label {
            font-size: 12px;
            font-weight: 600;
            color: #475569;
            margin-bottom: 8px;
            display: block;
            text-transform: uppercase;
            letter-spacing: 0.25px;
        }

        .profile-input-field {
            width: 100% !important;
            padding: 11px 14px !important;
            border: 1px solid #cbd5e1 !important;
            border-radius: 8px !important;
            font-size: 13px;
            color: #1e293b;
            background: #fafaf9 !important;
            outline: none;
            height: auto !important;
            box-sizing: border-box;
            transition: all 0.2s ease;
        }

        /* Live Visual Indicators */
        .profile-input-field.is-valid-live {
            border-color: #16a34a !important;
            background: #f0fdf4 !important;
        }

        .profile-input-field.is-invalid-live {
            border-color: #dc2626 !important;
            background: #fef2f2 !important;
        }

        .avatar-uploader-container {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 25px;
            background: #f8fafc;
            padding: 15px;
            border-radius: 10px;
            border: 1px dashed #cbd5e1;
        }

        .avatar-frame {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid #ffffff;
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
            background: #e2e8f0;
            flex-shrink: 0;
        }

        .avatar-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .btn-elite-save {
            padding: 10px 24px !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            color: #ffffff !important;
            background: #4a6b82 !important;
            border: none !important;
            border-radius: 8px !important;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(74, 107, 130, 0.15);
            transition: all 0.2s ease;
        }

        .btn-elite-save:hover {
            background: #385366 !important;
            transform: translateY(-1px);
        }

        .btn-elite-danger {
            background: #dc2626 !important;
            box-shadow: 0 2px 4px rgba(220, 38, 38, 0.15);
        }
        
        .btn-elite-danger:hover {
            background: #b91c1c !important;
        }

        .text-error-node {
            color: #b91c1c;
            font-size: 11px;
            margin-top: 5px;
            display: block;
            font-weight: 600;
        }
        
        .text-success-node {
            color: #16a34a;
            font-size: 11px;
            margin-top: 5px;
            display: block;
            font-weight: 600;
        }
    </style>

    <section class="vendor_dashboard_main_wrapper">
        <div class="container">
            <div class="row">
                
                @include('frontend.vendor.partials.sidebar')

                <div class="col-lg-9 col-md-8 col-sm-12 col-xs-12">
                    <div class="premium-dashboard-core">
                        
                        <div class="elite-dashboard-header clearfix">
                            <div class="header-left-greetings">
                                <h2 class="main-welcome-heading">Profile & Security Settings</h2>
                                <p class="sub-welcome-caption">Configure identity logging matrices, brand information parameters, and secure passwords elements.</p>
                            </div>
                        </div>

                        <div class="row style-content-forms-row">
                            
                            <div class="col-md-6 col-sm-12 col-xs-12">
                                <div class="profile-segment-card">
                                    <h3 class="segment-section-title"><i class="fa fa-user-circle-o"></i> Personal Information</h3>
                                    
                                    <form id="personalInfoForm" action="{{ route('vendor.profile.update') }}" method="POST" enctype="multipart/form-data">
                                        @csrf
                                        
                                        <div class="avatar-uploader-container">
                                            <div class="avatar-frame">
                                                @if(!empty($user->profile_picture) && file_exists(public_path('uploads/profile/' . $user->profile_picture)))
                                                    <img src="{{ asset('uploads/profile/' . $user->profile_picture) }}" alt="Vendor Avatar">
                                                @else
                                                    <img src="https://ui-avatars.com/api/?name={{ urlencode($user->full_name) }}&background=4a6b82&color=fff" alt="Vendor Avatar">
                                                @endif
                                            </div>
                                            <div style="flex: 1;">
                                                <label style="font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; display:block; margin-bottom:5px;">Change Avatar photo</label>
                                                <input type="file" id="avatarInput" name="profile_picture" class="profile-input-field" style="padding: 6px !important; font-size:12px;">
                                                <span id="avatarError" class="text-error-node"></span>
                                            </div>
                                        </div>

                                        <div class="luxury-form-group">
                                            <label>Full Name Reference</label>
                                           <input type="text" id="vendorName" name="name" class="profile-input-field" value="{{ old('name', $user->full_name) }}" placeholder="Enter Full Name" required>
                                           <span id="nameError" class="text-error-node"></span>
                                        </div>

                                        <div class="luxury-form-group">
                                            <label>Registered Email (Identity Account ID)</label>
                                            <input type="email" class="profile-input-field" value="{{ $user->email }}" disabled style="cursor: not-allowed; opacity: 0.65; background:#e2e8f0 !important;">
                                            <small class="text-muted" style="font-size: 11px; display: block; margin-top: 5px;"><i class="fa fa-lock"></i> Primary email endpoint cannot be altered for validation logs.</small>
                                        </div>

                                        <div class="luxury-form-group">
                                            <label>Contact Mobile Number</label>
                                            <input type="text" id="vendorPhone" name="phone" class="profile-input-field" value="{{ old('phone', $user->phone_number) }}" placeholder="Enter 10 Digit Mobile" required>
                                            <span id="phoneError" class="text-error-node"></span>
                                        </div>

                                        <div style="margin-top: 25px; padding-top: 10px;">
                                            <button type="submit" class="btn btn-elite-save"><i class="fa fa-save"></i> Save Account Data</button>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-12 col-xs-12">
                                <div class="profile-segment-card">
                                    <h3 class="segment-section-title"><i class="fa fa-shield"></i> Password & Encryption</h3>
                                    
                                    <form id="securityPasswordForm" action="{{ route('vendor.profile.password') }}" method="POST">
                                        @csrf
                                        
                                        <div class="luxury-form-group">
                                            <label>Current Account Password</label>
                                            <input type="password" id="currentPassword" name="current_password" class="profile-input-field" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;" required>
                                            <span id="currentPasswordError" class="text-error-node"></span>
                                        </div>

                                        <div class="luxury-form-group">
                                            <label>New Strong Password</label>
                                            <input type="password" id="newPassword" name="new_password" class="profile-input-field" placeholder="Minimum 8 characters" required>
                                            <span id="newPasswordError" class="text-error-node"></span>
                                        </div>

                                        <div class="luxury-form-group">
                                            <label>Confirm Retyped Password</label>
                                            <input type="password" id="confirmPassword" name="new_password_confirmation" class="profile-input-field" placeholder="Verify matching string characters" required>
                                            <span id="confirmPasswordError" class="text-error-node"></span>
                                        </div>

                                        <div style="margin-top: 25px; padding-top: 10px;">
                                            <button type="submit" class="btn btn-elite-save btn-elite-danger"><i class="fa fa-key"></i> Update Security Matrix</button>
                                        </div>
                                    </form>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>

            </div>
        </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
    $(document).ready(function() {
        
        // ==========================================
        // 🌟 LIVE REAL-TIME VALIDATION ENGINE LOOP
        // ==========================================

        // 1. Live Validation: Full Name Reference
        $('#vendorName').on('input', function() {
            let val = $(this).val().trim();
            if(val.length < 3) {
                $(this).addClass('is-invalid-live').removeClass('is-valid-live');
                $('#nameError').html('<i class="fa fa-warning"></i> Name must be at least 3 characters long.');
            } else {
                $(this).addClass('is-valid-live').removeClass('is-invalid-live');
                $('#nameError').text('');
            }
        });

        // 2. Live Validation: Mobile Contact Number
        $('#vendorPhone').on('input', function() {
            let val = $(this).val().replace(/[^0-9]/g, ''); // Allow digits only
            $(this).val(val);
            
            if(val.length !== 10) {
                $(this).addClass('is-invalid-live').removeClass('is-valid-live');
                $('#phoneError').html('<i class="fa fa-warning"></i> Phone must be exact 10 digits number.');
            } else {
                $(this).addClass('is-valid-live').removeClass('is-invalid-live');
                $('#phoneError').text('');
            }
        });

        // 3. Live Validation: Avatar File Extension Check
        $('#avatarInput').on('change', function() {
            let file = this.files[0];
            if(file) {
                let fileType = file.type;
                let validTypes = ['image/jpeg', 'image/png', 'image/jpg'];
                if(!validTypes.includes(fileType)) {
                    $(this).addClass('is-invalid-live').removeClass('is-valid-live');
                    $('#avatarError').html('<i class="fa fa-warning"></i> Allowed standard formats: JPEG, JPG, PNG only.');
                } else if(file.size > 2 * 1024 * 1024) {
                    $(this).addClass('is-invalid-live').removeClass('is-valid-live');
                    $('#avatarError').html('<i class="fa fa-warning"></i> File size is too large (Max 2MB allocated).');
                } else {
                    $(this).addClass('is-valid-live').removeClass('is-invalid-live');
                    $('#avatarError').text('');
                }
            }
        });

        // 4. Live Validation: New Password Strength Checker
        $('#newPassword').on('input', function() {
            let pass = $(this).val();
            if(pass.length < 8) {
                $(this).addClass('is-invalid-live').removeClass('is-valid-live');
                $('#newPasswordError').html('<i class="fa fa-warning"></i> Naya password kam se kam 8 digits ka rakhein.');
            } else {
                $(this).addClass('is-valid-live').removeClass('is-invalid-live');
                $('#newPasswordError').text('');
            }
            // Retrigger match confirmation if confirm field is already typed
            if($('#confirmPassword').val().length > 0) { $('#confirmPassword').trigger('input'); }
        });

        // 5. Live Validation: Password Match Confirm String
        $('#confirmPassword').on('input', function() {
            let confirmPass = $(this).val();
            let newPass = $('#newPassword').val();

            if(confirmPass !== newPass) {
                $(this).addClass('is-invalid-live').removeClass('is-valid-live');
                $('#confirmPasswordError').html('<i class="fa fa-warning"></i> Passwords do not match! Check characters.');
            } else if(confirmPass.length < 8) {
                $(this).addClass('is-invalid-live').removeClass('is-valid-live');
                $('#confirmPasswordError').html('<i class="fa fa-warning"></i> Retyped match validation string too short.');
            } else {
                $(this).addClass('is-valid-live').removeClass('is-invalid-live');
                $('#confirmPasswordError').html('<span class="text-success-node"><i class="fa fa-check-circle"></i> Passwords matched successfully!</span>');
            }
        });


        // ==========================================
        // 🌟 SUBMIT SECURITY LOCK USING SWEETALERT
        // ==========================================

        // Handler 1: Personal Info Submission Validation
        $('#personalInfoForm').on('submit', function(e) {
            let nameField = $('#vendorName');
            let phoneField = $('#vendorPhone');
            let hasError = false;

            if(nameField.val().trim().length < 3 || phoneField.val().trim().length !== 10 || $('.avatar-uploader-container .is-invalid-live').length > 0) {
                e.preventDefault();
                hasError = true;
                
                Swal.fire({
                    title: 'Form Validation Error!',
                    text: 'Kindly rectify live high-lighted validation parameters errors before submitting updates.',
                    icon: 'warning',
                    confirmButtonColor: '#4a6b82'
                });
            }

            if(!hasError) {
                Swal.fire({
                    title: 'Processing Updates...',
                    allowOutsideClick: false,
                    didOpen: () => { Swal.showLoading(); }
                });
            }
        });

        // Handler 2: Password Form Submission Validation
        $('#securityPasswordForm').on('submit', function(e) {
            let curPass = $('#currentPassword').val();
            let newPass = $('#newPassword').val();
            let confPass = $('#confirmPassword').val();
            let hasError = false;

            if(newPass.length < 8 || newPass !== confPass || curPass.length === 0) {
                e.preventDefault();
                hasError = true;

                Swal.fire({
                    title: 'Security Mismatch Alert!',
                    text: 'Please cross-verify that the passwords fields comply with minimum 8 digits and match perfectly.',
                    icon: 'error',
                    confirmButtonColor: '#dc2626'
                });
            }

            if(!hasError) {
                Swal.fire({
                    title: 'Encrypting Credentials...',
                    allowOutsideClick: false,
                    didOpen: () => { Swal.showLoading(); }
                });
            }
        });
    });
    </script>

    @if(session('success'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    title: 'System Success!',
                    text: "{{ session('success') }}",
                    icon: 'success',
                    confirmButtonColor: '#4a6b82',
                    timer: 3500
                });
            });
        </script>
    @endif

    @if($errors->any())
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    title: 'Server Rejected Update!',
                    text: "{{ $errors->first() }}",
                    icon: 'error',
                    confirmButtonColor: '#dc2626'
                });
            });
        </script>
    @endif

@endsection