@extends('layouts.app')

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

@section('content')
    <!-- [ page-header ] start -->
    <div class="page-header">
        <div class="page-header-left d-flex align-items-center">
            <div class="page-header-title">
                <h4 class="fw-bolder mb-0">Create Business</h4>
            </div>
                
        </div>
        <div class="page-header-right ms-auto">
            <div class="page-header-right-items">
                <div class="d-flex align-items-center gap-2 page-header-right-items-wrapper">
                    <a href="javascript:void(0);" class="btn btn-primary"
                        onclick="document.getElementById('businessSetupForm').submit();">
                        <i class="feather-save me-2"></i>
                        <span>Save Business</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- [ page-header ] end -->
    <!-- [ Main Content ] start -->
    <div class="main-content">
        <div class="row">
            <div class="col-xxl-2 col-xl-6">
                <div class="content-sidebar content-sidebar-md" data-scrollbar-target="#psScrollbarInit">
                    <div class="content-sidebar-body">
                        <ul class="nav flex-column nxl-content-sidebar-item">
                            <li class="nav-item">
                                <a class="nav-link active" href="{{ route('business.index') }}">
                                    <i class="feather-airplay"></i>
                                    <span>General</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-xxl-10 col-xl-6">
                <div class="card border-top-0">
                    <div class="tab-content">
                        <div class="tab-pane fade show active p-4" id="overviewTab" role="tabpanel">  
                            <div class="content-area" data-scrollbar-target="#psScrollbarInit">
                                <div class="content-area-body">
                                    <div class="card mb-0">
                                        @if (session('success'))
                                            <div class="alert alert-success m-3">
                                                <i class="feather-check-circle me-2"></i>
                                                {{ session('success') }}
                                            </div>
                                        @endif

                                        @if (session('info'))
                                            <div class="alert alert-info m-3">
                                                <i class="feather-info me-2"></i>
                                                {{ session('info') }}
                                            </div>
                                        @endif

                                        @if (session('warning'))
                                            <div class="alert alert-warning m-3">
                                                <i class="feather-alert-triangle me-2"></i>
                                                {{ session('warning') }}
                                            </div>
                                        @endif

                                        <!-- Welcome Message -->
                                        <div class="alert alert-success m-3">
                                            <i class="feather-check-circle me-2"></i>
                                            <strong>Email Verified!</strong> Welcome {{ Auth::user()->name }}. Please complete your business profile to continue.
                                        </div>
                                        <!-- Business Setup Form -->
                                        <form action="{{ route('business.store') }}" method="POST" id="businessSetupForm" 
                                        enctype="multipart/form-data" class="space-y-4">
                                        @csrf
                                            <div class="card-body">
                                                <!-- Image Upload -->
                                                <div class="mb-5">
                                                    <div class="wd-100 ht-100 position-relative overflow-hidden border border-gray-2 rounded">
                                                        <img id="preview" src="{{ asset('assets/images/emptyImg.png') }}"
                                                            class="upload-pic img-fluid rounded h-100 w-100" alt="">
                                                        <div class="position-absolute start-50 top-50 end-0 bottom-0 translate-middle h-100 w-100 hstack align-items-center justify-content-center c-pointer upload-button">
                                                            <i class="feather feather-camera" aria-hidden="true"></i>
                                                        </div>
                                                        <input class="file-upload" type="file" name="image"
                                                            accept="image/*" onchange="previewImage(event)">
                                                    </div>
                                                </div>

                                                <div class="mb-5">
                                                    <label class="form-label">Name</label>
                                                    <input type="text" name="name" class="form-control"
                                                        placeholder="Business Name" value="{{ old('name') }}" required>
                                                    @error('name')
                                                        <div class="text-danger mt-2">{{ $message }}</div>
                                                    @enderror
                                                </div>

                                                <!-- Address -->
                                                <div class="mb-5">
                                                    <label class="form-label">Address</label>
                                                    <input type="text" name="address" class="form-control"
                                                        placeholder="Business Address" value="{{ old('address') }}">
                                                    @error('address')
                                                        <div class="text-danger mt-2">{{ $message }}</div>
                                                    @enderror
                                                </div>

                                                <!-- City -->
                                                <div class="mb-5">
                                                    <label class="form-label">City</label>
                                                    <input type="text" name="city" class="form-control"
                                                        placeholder="City" value="{{ old('city') }}">
                                                    @error('city')
                                                        <div class="text-danger mt-2">{{ $message }}</div>
                                                    @enderror
                                                </div>

                                                <!-- State -->
                                                <div class="mb-5">
                                                    <label class="form-label">State</label>
                                                    <input type="text" name="state" class="form-control"
                                                        placeholder="State" value="{{ old('state') }}">
                                                    @error('state')
                                                        <div class="text-danger mt-2">{{ $message }}</div>
                                                    @enderror
                                                </div>

                                                <!-- Zip -->
                                                <div class="mb-5">
                                                    <label class="form-label">Zip</label>
                                                    <input type="text" name="zip" class="form-control"
                                                        placeholder="Zip Code" value="{{ old('zip') }}">
                                                    @error('zip')
                                                        <div class="text-danger mt-2">{{ $message }}</div>
                                                    @enderror
                                                </div>

                                                <!-- Phone -->
                                                <div class="mb-5">
                                                    <label class="form-label">Phone</label>
                                                    <input type="text" name="phone" class="form-control"
                                                        placeholder="Phone Number" value="{{ old('phone') }}">
                                                    @error('phone')
                                                        <div class="text-danger mt-2">{{ $message }}</div>
                                                    @enderror
                                                </div>

                                                <div class="mb-5">
                                                    <label class="form-label">Common Company Email</label>
                                                    <input type="email" name="common_email" class="form-control"
                                                        placeholder="company@example.com" value="{{ old('common_email') }}">
                                                    @error('common_email')
                                                        <div class="text-danger mt-2">{{ $message }}</div>
                                                    @enderror
                                                </div>

                                                <!-- Website -->
                                                <div class="mb-5">
                                                    <label class="form-label">Website</label>
                                                    <input type="text" name="website" class="form-control"
                                                        placeholder="Website" value="{{ old('website') }}">
                                                    @error('website')
                                                        <div class="text-danger mt-2">{{ $message }}</div>
                                                    @enderror
                                                </div>

                                                <!-- Business Information -->
                                                <div class="mb-0">
                                                    <label class="form-label">Business Information</label>
                                                    <textarea name="business_information" class="form-control" cols="30" rows="10" 
                                                            placeholder="Business Information">{{ old('business_information') }}</textarea>
                                                    @error('business_information')
                                                        <div class="text-danger mt-2">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- [ Main Content ] end -->
@endsection

@section('scripts')
    <script>
        function previewImage(event) {
            const reader = new FileReader();
            reader.onload = function() {
                document.getElementById('preview').src = reader.result;
            }
            reader.readAsDataURL(event.target.files[0]);
        }
    </script>
@endsection
