@extends('layouts.admin')

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

@section('content')
<!-- Error and Success Messages -->
@if (session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="bi bi-exclamation-triangle me-2"></i>
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

@if (session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="bi bi-check-circle me-2"></i>
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

@if ($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="bi bi-exclamation-triangle me-2"></i>
        <strong>Please fix the following errors:</strong>
        <ul class="mb-0 mt-2">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-1 text-gray-800 font-weight-bold">Create New Mall</h1>
        <p class="text-muted mb-0">Add a new mall to the platform</p>
    </div>
    <div>
        <a href="{{ route('admin.malls.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>
            Back to List
        </a>
    </div>
</div>

<!-- Create Mall Form -->
<div class="row">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0 py-3">
                <h5 class="card-title mb-0 fw-bold">Basic Mall Information</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.malls.store') }}" method="POST" enctype="multipart/form-data" id="mall-form">
                    @csrf
                    
                    <!-- Debug Information (remove in production) -->
                    @if(app()->environment('local'))
                        <div class="alert alert-info mb-3">
                            <small>
                                <strong>Debug Info:</strong><br>
                                CSRF Token: {{ csrf_token() }}<br>
                                Form Action: {{ route('admin.malls.store') }}<br>
                                User: {{ auth()->user()->name ?? 'Not logged in' }} (ID: {{ auth()->id() ?? 'N/A' }})
                            </small>
                            <hr>
                            <button type="button" class="btn btn-sm btn-outline-info" onclick="testCSRF()">
                                Test CSRF Token
                            </button>
                        </div>
                    @endif

                    <div class="row g-3">
                        <!-- Mall Name -->
                        <div class="col-md-6">
                            <label for="name" class="form-label">Mall Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                   id="name" name="name" value="{{ old('name') }}" required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Description -->
                        <div class="col-12">
                            <label for="description" class="form-label">Description <span class="text-danger">*</span></label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" name="description" rows="4" required>{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Address -->
                        <div class="col-12">
                            <label for="address" class="form-label">Address <span class="text-danger">*</span></label>
                            <textarea class="form-control @error('address') is-invalid @enderror" 
                                      id="address" name="address" rows="2" required>{{ old('address') }}</textarea>
                            @error('address')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Phone and Email -->
                        <div class="col-md-6">
                            <label for="phone" class="form-label">Phone Number <span class="text-danger">*</span></label>
                            <input type="tel" class="form-control @error('phone') is-invalid @enderror" 
                                   id="phone" name="phone" value="{{ old('phone') }}" required>
                            @error('phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label for="email" class="form-label">Email Address <span class="text-danger">*</span></label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                   id="email" name="email" value="{{ old('email') }}" required>
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Website -->
                        <div class="col-md-6">
                            <label for="website" class="form-label">Website</label>
                            <input type="url" class="form-control @error('website') is-invalid @enderror" 
                                   id="website" name="website" value="{{ old('website') }}" 
                                   placeholder="https://example.com">
                            @error('website')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Mall Logo -->
                        <div class="col-md-6">
                            <label for="logo" class="form-label">Mall Logo</label>
                            <input type="file" class="form-control @error('logo') is-invalid @enderror" 
                                   id="logo" name="logo" accept="image/*">
                            <div class="form-text">Upload mall logo (JPG, PNG, max 2MB)</div>
                            @error('logo')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Cover Image -->
                        <div class="col-12">
                            <label for="cover_image" class="form-label">Cover Image</label>
                            <input type="file" class="form-control @error('cover_image') is-invalid @enderror" 
                                   id="cover_image" name="cover_image" accept="image/*">
                            <div class="form-text">Upload mall cover image (JPG, PNG, max 5MB) - This will be the main image shown on mall listings</div>
                            @error('cover_image')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Mall Owner -->
                        <div class="col-md-6">
                            <label for="user_id" class="form-label">Mall Owner <span class="text-danger">*</span></label>
                            <select class="form-select @error('user_id') is-invalid @enderror" id="user_id" name="user_id" required>
                                <option value="">Select Owner</option>
                                @if(isset($users))
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}" {{ old('user_id') == $user->id ? 'selected' : '' }}>
                                            {{ $user->name }} ({{ $user->email }}) - {{ ucfirst($user->role ?? 'User') }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                            @error('user_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            @if(!isset($users))
                                <div class="form-text text-warning">
                                    <i class="bi bi-exclamation-triangle"></i> User data not available. Please contact administrator.
                                </div>
                            @endif
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <!-- Mall Details Card -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white border-0 py-3">
                <h5 class="card-title mb-0 fw-bold">Mall Details</h5>
            </div>
            <div class="card-body">
                <div class="row g-3" form="mall-form">
                    <!-- Mall Type -->
                    <div class="col-12">
                        <label for="mall_type" class="form-label">Mall Type</label>
                        <select class="form-select @error('mall_type') is-invalid @enderror" id="mall_type" name="mall_type" form="mall-form">
                            <option value="community" {{ old('mall_type', 'community') == 'community' ? 'selected' : '' }}>Community Mall</option>
                            <option value="regional" {{ old('mall_type') == 'regional' ? 'selected' : '' }}>Regional Mall</option>
                            <option value="super_regional" {{ old('mall_type') == 'super_regional' ? 'selected' : '' }}>Super Regional Mall</option>
                            <option value="lifestyle" {{ old('mall_type') == 'lifestyle' ? 'selected' : '' }}>Lifestyle Center</option>
                            <option value="outlet" {{ old('mall_type') == 'outlet' ? 'selected' : '' }}>Outlet Mall</option>
                            <option value="strip" {{ old('mall_type') == 'strip' ? 'selected' : '' }}>Strip Mall</option>
                        </select>
                        @error('mall_type')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Mall Category -->
                    <div class="col-12">
                        <label for="mall_category" class="form-label">Mall Category</label>
                        <select class="form-select @error('mall_category') is-invalid @enderror" id="mall_category" name="mall_category" form="mall-form">
                            <option value="indoor" {{ old('mall_category', 'indoor') == 'indoor' ? 'selected' : '' }}>Indoor Mall</option>
                            <option value="outdoor" {{ old('mall_category') == 'outdoor' ? 'selected' : '' }}>Outdoor Mall</option>
                            <option value="mixed" {{ old('mall_category') == 'mixed' ? 'selected' : '' }}>Mixed (Indoor/Outdoor)</option>
                        </select>
                        @error('mall_category')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Total Floors -->
                    <div class="col-md-6">
                        <label for="total_floors" class="form-label">Total Floors</label>
                        <input type="number" class="form-control @error('total_floors') is-invalid @enderror" 
                               id="total_floors" name="total_floors" value="{{ old('total_floors', 1) }}" 
                               min="1" max="20" form="mall-form">
                        @error('total_floors')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Total Stores -->
                    <div class="col-md-6">
                        <label for="total_stores" class="form-label">Total Stores</label>
                        <input type="number" class="form-control @error('total_stores') is-invalid @enderror" 
                               id="total_stores" name="total_stores" value="{{ old('total_stores', 0) }}" 
                               min="0" form="mall-form">
                        @error('total_stores')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Opening and Closing Times -->
                    <div class="col-md-6">
                        <label for="opening_time" class="form-label">Opening Time</label>
                        <input type="time" class="form-control @error('opening_time') is-invalid @enderror" 
                               id="opening_time" name="opening_time" value="{{ old('opening_time', '09:00') }}" form="mall-form">
                        @error('opening_time')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <label for="closing_time" class="form-label">Closing Time</label>
                        <input type="time" class="form-control @error('closing_time') is-invalid @enderror" 
                               id="closing_time" name="closing_time" value="{{ old('closing_time', '22:00') }}" form="mall-form">
                        @error('closing_time')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <!-- Mall Manager Card -->
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0 py-3">
                <h5 class="card-title mb-0 fw-bold">Mall Manager (Optional)</h5>
            </div>
            <div class="card-body">
                <div class="row g-3" form="mall-form">
                    <!-- Manager Name -->
                    <div class="col-12">
                        <label for="mall_manager_name" class="form-label">Manager Name</label>
                        <input type="text" class="form-control @error('mall_manager_name') is-invalid @enderror" 
                               id="mall_manager_name" name="mall_manager_name" value="{{ old('mall_manager_name') }}" form="mall-form">
                        @error('mall_manager_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Manager Phone -->
                    <div class="col-12">
                        <label for="mall_manager_phone" class="form-label">Manager Phone</label>
                        <input type="tel" class="form-control @error('mall_manager_phone') is-invalid @enderror" 
                               id="mall_manager_phone" name="mall_manager_phone" value="{{ old('mall_manager_phone') }}" form="mall-form">
                        @error('mall_manager_phone')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Manager Email -->
                    <div class="col-12">
                        <label for="mall_manager_email" class="form-label">Manager Email</label>
                        <input type="email" class="form-control @error('mall_manager_email') is-invalid @enderror" 
                               id="mall_manager_email" name="mall_manager_email" value="{{ old('mall_manager_email') }}" form="mall-form">
                        @error('mall_manager_email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Form Buttons -->
<div class="row mt-4">
    <div class="col-12">
        <div class="d-flex justify-content-end gap-2">
            <a href="{{ route('admin.malls.index') }}" class="btn btn-outline-secondary">
                <i class="bi bi-x-circle me-1"></i>
                Cancel
            </a>
            <button type="submit" class="btn btn-primary" form="mall-form">
                <i class="bi bi-check-circle me-1"></i>
                Create Mall
            </button>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
// Test CSRF token function
function testCSRF() {
    fetch('{{ route("admin.malls.store") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            test: true
        })
    })
    .then(response => {
        console.log('CSRF Test Response Status:', response.status);
        return response.text();
    })
    .then(data => {
        console.log('CSRF Test Response:', data);
        if (data.includes('login') || data.includes('logout')) {
            alert('CSRF Test FAILED - You were logged out!');
        } else {
            alert('CSRF Test PASSED - Token is working');
        }
    })
    .catch(error => {
        console.error('CSRF Test Error:', error);
        alert('CSRF Test ERROR: ' + error.message);
    });
}

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('mall-form');
    const submitBtn = document.querySelector('button[type="submit"]');
    
    if (form && submitBtn) {
        // Add form validation and debugging
        form.addEventListener('submit', function(e) {
            console.log('Form submission started');
            
            // Check required fields
            const requiredFields = form.querySelectorAll('[required]');
            let hasErrors = false;
            
            requiredFields.forEach(field => {
                if (!field.value.trim()) {
                    console.log('Missing required field:', field.name);
                    hasErrors = true;
                }
            });
            
            if (hasErrors) {
                e.preventDefault();
                alert('Please fill in all required fields before submitting.');
                return;
            }
            
            // Disable submit button to prevent double submission
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="bi bi-spinner-border me-1"></i> Creating...';
            
            // Log form data for debugging
            const formData = new FormData(form);
            console.log('Form data being submitted:');
            for (let [key, value] of formData.entries()) {
                console.log(key + ':', value);
            }
        });
        
        console.log('Mall creation form initialized successfully');
    } else {
        console.error('Mall form or submit button not found');
    }
});
</script>
@endsection