@extends('front.layout.layout')

@section('content')
<section class="content-header">
    <div class="container">
        <div class="row mt-4">
            <div class="col-sm-6">
                <h1> Business Profile</h1>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container">

        <div class="row">
            <div class="col-md-10">
                <div class="card">
                    <!-- Update Business Form -->
                    <form action="{{ route('business.update', $business->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="card-body">
                            <div class="row">
                                <!-- Business Name -->
                                <div class="col-md-6">
                                    <div class="form-group mb-4">
                                        <label for="name">Business Name</label>
                                        <input
                                            type="text"
                                            name="name"
                                            class="form-control @error('name') is-invalid @enderror"
                                            value="{{ old('name', $business->name) }}"
                                            required>
                                        @error('name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Business Logo -->
                                <div class="col-md-6">
                                    <div class="form-group mb-4">
                                        <label for="logo">Business Logo</label>
                                        <input
                                            type="file"
                                            name="logo"
                                            class="form-control"
                                            accept="image/*"
                                            onchange="previewImage(event)">
                                    </div>
                                </div>

                                <!-- Phone -->
                                <div class="col-md-6">
                                    <div class="form-group mb-4">
                                        <label for="phone">Phone</label>
                                        <input 
    type="tel" 
    placeholder="Phone" 
    name="phone"
    pattern="^(\+92|92|0)3[0-9]{9}$" 
    title="Phone number must start with +92, 92, or 0 followed by 3xx and 9 digits" 
    class="@error('phone') is-invalid @enderror form-control" 
    value="{{ old('phone', $business->phone) }}" required>

                                    </div>
                                </div>

                                <!-- Website -->
                                <div class="col-md-6">
                                    <div class="form-group mb-4">
                                        <label for="website">Website</label>
                                        <input
                                            type="text"
                                            name="website"
                                            class="form-control @error('website') is-invalid @enderror"
                                            value="{{ old('website', $business->website) }}">
                                        @error('website')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Address -->
                                <div class="col-md-6">
                                    <div class="form-group mb-4">
                                        <label for="address">Address</label>
                                        <textarea
                                            name="address"
                                            id="address"
                                            class="form-control"
                                            cols="30"
                                            rows="5">{{ old('address', $business->address) }}</textarea>
                                    </div>
                                </div>

                                <!-- About -->
                                <div class="col-md-6">
                                    <div class="form-group mb-4">
                                        <label for="description">About</label>
                                        <textarea
                                            name="description"
                                            id="description"
                                            class="form-control"
                                            cols="30"
                                            rows="5">{{ old('description', $business->description) }}</textarea>
                                    </div>
                                </div>

                                <!-- Profile Socials -->
                                <h5 class="col-12">Profile Socials</h5>
                                <div class="col-md-6">
                                    <div class="form-group mb-4">
                                        <label for="facebook">Facebook</label>
                                        <input
                                            type="text"
                                            name="facebook"
                                            class="form-control"
                                            value="{{ $socials['facebook'] ?? '' }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-4">
                                        <label for="instagram">Instagram</label>
                                        <input
                                            type="text"
                                            name="instagram"
                                            class="form-control"
                                            value="{{ $socials['instagram'] ?? '' }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-4">
                                        <label for="youtube">YouTube</label>
                                        <input
                                            type="text"
                                            name="youtube"
                                            class="form-control"
                                            value="{{ $socials['youtube'] ?? '' }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-4">
                                        <label for="twitter">Twitter</label>
                                        <input
                                            type="text"
                                            name="twitter"
                                            class="form-control"
                                            value="{{ $socials['twitter'] ?? '' }}">
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">Update Business</button>
                        </div>
                    </form>

                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-md-2">
                <div class="card">
                    <div class="card-header">
                        <div>Profile</div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="preview-image">
                                    @isset($business->logo)
                                    <img id="preview" src="{{ Storage::url($business->logo) }}" style="height: 100px;"
                                        alt="Business Logo">
                                    @else
                                    <img id="preview" src="{{ asset('frontend/assets/images/default.png') }}"
                                        style="height: 100px;" alt="Default Logo">
                                    @endisset
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

<script>
    function previewImage(event) {
        const file = event.target.files[0];

        if (file && file.type.startsWith('image/')) {
            const reader = new FileReader();

            reader.onload = function(e) {
                document.getElementById('preview').src = e.target.result;
            };

            reader.readAsDataURL(file);
        } else {
            alert("Please select an image file.");
            event.target.value = '';
        }
    }
</script>