@extends('backend.app')


@section('title', 'Create owner')

@push('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css" />
    <style>
        /* .dropify-wrapper {
                                                                                            height: inherit !important;
                                                                                        } */
    </style>

    <style>
        .image-preview {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .image-preview img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 8px;
            border: 2px solid #e1e1e1;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .image-preview img:hover {
            transform: scale(1.1);
        }
    </style>
    <style>
        .upload-area {
            border: 2px dashed #cbd5e1;
            border-radius: 12px;
            background: #f8fafc;
            transition: all 0.3s ease;
        }

        .upload-area:hover {
            border-color: #3b82f6;
            background: #eff6ff;
        }

        .upload-area.dragover {
            border-color: #3b82f6;
            background: #dbeafe;
            transform: scale(1.02);
        }

        .upload-label {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            cursor: pointer;
            color: #64748b;
            margin: 0;
        }

        .upload-label svg {
            color: #3b82f6;
        }

        .image-preview-container {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .image-preview-item {
            position: relative;
            width: 100%;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease;
            background: #fff;
        }

        .image-preview-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .image-preview-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }

        .image-remove-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(239, 68, 68, 0.95);
            color: white;
            border: none;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 18px;
            line-height: 1;
            padding: 0;
        }

        .image-remove-btn:hover {
            background: #dc2626;
            transform: scale(1.1);
        }

        .image-filename {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
            color: white;
            padding: 12px;
            font-size: 13px;
            font-weight: 500;
        }
    </style>

    <style>
        .card {
            border: 1px solid #e2e8f0;
            border-radius: 12px;
        }

        .card-header {
            border-bottom: 1px solid #e2e8f0;
            border-radius: 12px 12px 0 0 !important;
        }

        .form-label {
            color: #334155;
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
        }

        .form-control {
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            padding: 0.625rem 0.875rem;
            font-size: 0.95rem;
            transition: all 0.2s ease;
        }

        .form-control:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .form-control-lg {
            padding: 0.75rem 1rem;
            font-size: 1rem;
        }

        .form-control::placeholder {
            color: #94a3b8;
        }

        textarea.form-control {
            resize: vertical;
            min-height: 100px;
        }

        .form-text {
            display: block;
            margin-top: 0.375rem;
            font-size: 0.875rem;
        }

        .badge {
            font-size: 0.75rem;
            font-weight: 500;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
        }

        .shadow-sm {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        }

        .input-group .btn-outline-secondary {
            border-color: #cbd5e1;
            color: #64748b;
        }

        .input-group .btn-outline-secondary:hover {
            background-color: #f1f5f9;
            border-color: #cbd5e1;
            color: #475569;
        }

        .btn-primary {
            background-color: #3b82f6;
            border-color: #3b82f6;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .btn-primary:hover {
            background-color: #2563eb;
            border-color: #2563eb;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }

        .btn-light {
            background-color: #f8fafc;
            border: 1px solid #e2e8f0;
            color: #475569;
            font-weight: 500;
        }

        .btn-light:hover {
            background-color: #f1f5f9;
            border-color: #cbd5e1;
        }
    </style>
@endpush

@section('content')
    <div class="row">
        <div class="col-lg-12 col-md-12 col-12">
            <!-- Page header -->
            <div class="mb-5">
                <h3 class="mb-0 ">Create Owner</h3>
            </div>
        </div>
    </div>
    <form action="{{ route('owner.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="row">
            <div class="col-lg-8 col-12">
                <div class="card mb-4 shadow-sm">
                    <div class="card-header bg-white py-3">
                        <h5 class="mb-0 fw-semibold">Owner Information</h5>
                    </div>
                    <div class="card-body p-4">

                        {{-- Name --}}
                        <div class="mb-4">
                            <label class="form-label fw-semibold">
                                Full Name <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control form-control-lg" name="name"
                                placeholder="Enter owner's full name" value="{{ old('name', $owner->name ?? '') }}"
                                required>
                            <small class="form-text text-muted">This will be displayed publicly</small>
                        </div>

                        {{-- About --}}
                        <div class="mb-4">
                            <label class="form-label fw-semibold">
                                About Owner
                                <span class="badge bg-secondary ms-2">Optional</span>
                            </label>
                            <textarea name="about_me" class="form-control" rows="5"
                                placeholder="Tell us about yourself, your background, experience, and interests...">{{ old('about_me', $owner->about_me ?? '') }}</textarea>
                            <small class="form-text text-muted">Share your story with your audience</small>
                        </div>

                        {{-- Description --}}
                        <div class="mb-4">
                            <label class="form-label fw-semibold">
                                Short Description
                                <span class="badge bg-secondary ms-2">Optional</span>
                            </label>
                            <textarea name="description" class="form-control" rows="4"
                                placeholder="A brief tagline or summary (max 200 characters)" maxlength="200">{{ old('description', $owner->description ?? '') }}</textarea>
                            <div class="d-flex justify-content-between">
                                <small class="form-text text-muted">This appears in preview cards</small>
                                <small class="form-text text-muted" id="charCount">0/200</small>
                            </div>
                        </div>

                        {{-- Email --}}
                        <div class="mb-4">
                            <label class="form-label fw-semibold">
                                Email Address <span class="text-danger">*</span>
                            </label>
                            <input type="email" class="form-control" name="email" placeholder="owner@example.com"
                                value="{{ old('email', $owner->email ?? '') }}" required>
                            <small class="form-text text-muted">Used for login and notifications</small>
                        </div>

                        {{-- Phone --}}
                        <div class="mb-4">
                            <label class="form-label fw-semibold">
                                Phone Number <span class="text-danger">*</span>
                            </label>
                            <input type="tel" class="form-control" name="phone" placeholder="+1 (555) 123-4567"
                                value="{{ old('phone', $owner->phone ?? '') }}" required>
                            <small class="form-text text-muted">Contact phone number</small>
                        </div>

                        {{-- Password --}}
                        <div class="mb-4">
                            <label class="form-label fw-semibold">
                                Password <span class="text-danger">*</span>
                            </label>
                            <div class="input-group">
                                <input type="password" class="form-control" name="password" id="password"
                                    placeholder="Enter secure password" {{ isset($owner) ? '' : 'required' }}>
                                <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                                        stroke="currentColor" stroke-width="2">
                                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                        <circle cx="12" cy="12" r="3"></circle>
                                    </svg>
                                </button>
                            </div>
                            <small class="form-text text-muted">
                                {{ isset($owner) ? 'Leave blank to keep current password' : 'Minimum 8 characters' }}
                            </small>
                        </div>

                        {{-- Confirm Password --}}
                        <div class="mb-4">
                            <label class="form-label fw-semibold">
                                Confirm Password <span class="text-danger">*</span>
                            </label>
                            <div class="input-group">
                                <input type="password" class="form-control" name="password_confirmation"
                                    id="passwordConfirm" placeholder="Re-enter password"
                                    {{ isset($owner) ? '' : 'required' }}>
                                <button class="btn btn-outline-secondary" type="button" id="togglePasswordConfirm">
                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                                        stroke="currentColor" stroke-width="2">
                                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                        <circle cx="12" cy="12" r="3"></circle>
                                    </svg>
                                </button>
                            </div>
                            <small class="form-text text-muted">Must match the password above</small>
                        </div>

                        {{-- Social Profile --}}
                        <div class="mb-0">
                            <label class="form-label fw-semibold">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                                    stroke="currentColor" stroke-width="2" class="me-1">
                                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
                                    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
                                </svg>
                                Social Profile Link
                                <span class="badge bg-secondary ms-2">Optional</span>
                            </label>
                            <input type="url" class="form-control" name="social_profile"
                                placeholder="https://twitter.com/yourprofile or https://linkedin.com/in/yourprofile"
                                value="{{ old('social_profile', $owner->social_profile ?? '') }}">
                            <small class="form-text text-muted">Add your primary social media profile URL</small>
                        </div>

                    </div>
                </div>

                {{-- Submit Button --}}
                <div class="card shadow-sm">
                    <div class="card-body p-4">
                        <div class="d-flex gap-3 justify-content-end">

                            <button type="submit" class="btn btn-primary px-5">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                                    stroke="currentColor" stroke-width="2" class="me-2">
                                    <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
                                    <polyline points="17 21 17 13 7 13 7 21"></polyline>
                                    <polyline points="7 3 7 8 15 8"></polyline>
                                </svg>
                                Save Owner
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-12">
                {{-- Avatar --}}
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="form-group mb-3">
                            <label class="form-label fw-bold mb-2">Avatar</label>
                            <input class="form-control dropify" type="file" name="avatar"
                                data-default-file="{{ isset($owner->avatar) ? asset('uploads/users/avatars/' . $owner->avatar) : '' }}">
                        </div>

                        {{-- Cover Images --}}
                        <div class="form-group">
                            <label class="form-label fw-bold mb-2">Cover Images</label>

                            {{-- Upload Button --}}
                            <div class="upload-area" id="uploadArea">
                                <input class="d-none" type="file" name="images[]" id="coverImages" multiple
                                    accept="image/*">
                                <label for="coverImages" class="upload-label">
                                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none"
                                        stroke="currentColor" stroke-width="2">
                                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                        <polyline points="17 8 12 3 7 8"></polyline>
                                        <line x1="12" y1="3" x2="12" y2="15"></line>
                                    </svg>
                                    <span class="d-block mt-2 fw-semibold">Click to upload images</span>
                                    <span class="small text-muted">or drag and drop</span>
                                </label>
                            </div>

                            {{-- Preview Container --}}
                            <div id="coverPreview" class="image-preview-container mt-3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>


@endsection

@push('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"></script>

    <script>
        $('.dropify').dropify();
    </script>

    <script>
        (function() {
            const fileInput = document.getElementById('coverImages');
            const previewContainer = document.getElementById('coverPreview');
            const uploadArea = document.getElementById('uploadArea');
            let selectedFiles = [];

            // Handle file selection
            fileInput.addEventListener('change', function(event) {
                handleFiles(event.target.files);
            });

            // Drag and drop handlers
            uploadArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                uploadArea.classList.add('dragover');
            });

            uploadArea.addEventListener('dragleave', function(e) {
                e.preventDefault();
                uploadArea.classList.remove('dragover');
            });

            uploadArea.addEventListener('drop', function(e) {
                e.preventDefault();
                uploadArea.classList.remove('dragover');
                handleFiles(e.dataTransfer.files);
            });

            function handleFiles(files) {
                Array.from(files).forEach(file => {
                    if (!file.type.startsWith('image/')) return;

                    selectedFiles.push(file);
                    createPreview(file, selectedFiles.length - 1);
                });
            }

            function createPreview(file, index) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    const previewItem = document.createElement('div');
                    previewItem.className = 'image-preview-item';
                    previewItem.dataset.index = index;

                    previewItem.innerHTML = `
                    <img src="${e.target.result}" alt="${file.name}">
                    <button type="button" class="image-remove-btn" onclick="removeImage(${index})">×</button>
                    <div class="image-filename">${file.name}</div>
                `;

                    previewContainer.appendChild(previewItem);
                };

                reader.readAsDataURL(file);
            }

            window.removeImage = function(index) {
                // Remove from array
                selectedFiles.splice(index, 1);

                // Update file input
                const dt = new DataTransfer();
                selectedFiles.forEach(file => dt.items.add(file));
                fileInput.files = dt.files;

                // Rebuild preview
                previewContainer.innerHTML = '';
                selectedFiles.forEach((file, idx) => createPreview(file, idx));
            };
        })();
    </script>


    <script>
        // Character counter for description
        const descriptionField = document.querySelector('textarea[name="description"]');
        const charCount = document.getElementById('charCount');

        if (descriptionField && charCount) {
            function updateCount() {
                const length = descriptionField.value.length;
                charCount.textContent = `${length}/200`;
                charCount.style.color = length > 190 ? '#ef4444' : '#64748b';
            }

            descriptionField.addEventListener('input', updateCount);
            updateCount(); // Initial count
        }

        // Toggle password visibility
        document.getElementById('togglePassword')?.addEventListener('click', function() {
            const passwordField = document.getElementById('password');
            const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordField.setAttribute('type', type);
        });

        document.getElementById('togglePasswordConfirm')?.addEventListener('click', function() {
            const passwordField = document.getElementById('passwordConfirm');
            const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordField.setAttribute('type', type);
        });
    </script>
@endpush