@extends('layouts.app')

@section('title', 'General Settings')

@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">Settings</h4>
            </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>
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('email-setting') }}">
                                    <i class="feather-mail"></i>
                                    <span>Email</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('integrations.index') }}">
                                    <i class="feather-share-2"></i>
                                    <span>Integrations</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 ($businesses->isEmpty())
                                            <!-- Form to create a new business -->
                                            <form action="{{ route('business.store') }}" method="POST"
                                                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>

                                                    <!-- Name -->
                                                    <div class="mb-5">
                                                        <label class="form-label">Name</label>
                                                        <input type="text" name="name" class="form-control"
                                                            placeholder="Business Name" required>
                                                    </div>

                                                    <!-- Address -->
                                                    <div class="mb-5">
                                                        <label class="form-label">Address</label>
                                                        <input type="text" name="address" class="form-control"
                                                            placeholder="Business Address">
                                                    </div>

                                                    <!-- City -->
                                                    <div class="mb-5">
                                                        <label class="form-label">City</label>
                                                        <input type="text" name="city" class="form-control"
                                                            placeholder="City">
                                                    </div>

                                                    <!-- State -->
                                                    <div class="mb-5">
                                                        <label class="form-label">State</label>
                                                        <input type="text" name="state" class="form-control"
                                                            placeholder="State">
                                                    </div>

                                                    <!-- Zip -->
                                                    <div class="mb-5">
                                                        <label class="form-label">Zip</label>
                                                        <input type="text" name="zip" class="form-control"
                                                            placeholder="Zip Code">
                                                    </div>

                                                    <!-- Phone -->
                                                    <div class="mb-5">
                                                        <label class="form-label">Phone</label>
                                                        <input type="text" name="phone" class="form-control"
                                                            placeholder="Phone Number">
                                                    </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') }}">
                                                    </div>

                                                    <!-- Website -->
                                                    <div class="mb-5">
                                                        <label class="form-label">Website</label>
                                                        <input type="text" name="website" class="form-control"
                                                            placeholder="Website">
                                                    </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"></textarea>
                                                    </div>

                                                    <!-- Submit Button -->
                                                    <div class="mt-4">
                                                        <button type="submit" class="btn btn-primary">Submit</button>
                                                    </div>
                                                </div>
                                            </form>
                                        @else
                                            @foreach ($businesses as $business)
                                                <!-- Form to update an existing business -->
                                                <form action="{{ route('business.update', $business->id) }}" method="POST"
                                                    enctype="multipart/form-data" class="space-y-4">
                                                    @csrf
                                                    @method('PUT')

                                                    <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('storage/' . $business->image) }}"
                                                                    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>

                                                        <!-- Name -->
                                                        <div class="mb-5">
                                                            <label class="form-label">Name</label>
                                                            <input type="text" name="name" class="form-control"
                                                                placeholder="Business Name"
                                                                value="{{ old('name', $business->name) }}" required>
                                                        </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', $business->address) }}">
                                                        </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', $business->city) }}">
                                                        </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', $business->state) }}">
                                                        </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', $business->zip) }}">
                                                        </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', $business->phone) }}">
                                                        </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', $business->common_email) }}">
                                                        </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', $business->website) }}">
                                                        </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">{{ old('business_information', $business->business_information) }}</textarea>
                                                        </div>

                                                        <!-- Submit Button -->
                                                        <div class="mt-4">
                                                            <button type="submit" class="btn btn-primary">Update</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- [ Main Content ] end -->
@endsection
