@extends('layouts.app')

@section('title', 'Business Profile — ' . config('app.name'))

@section('header')
    <h2 class="h5 fw-semibold mb-0">{{ __('Business Profile') }}</h2>
@endsection

@section('content')
    <div class="hp-container">
        @if (session('status') === 'profile-updated')
            <div class="alert alert-success">Profile updated.</div>
        @endif

        @php
            $initials = strtoupper(substr($profile->business_name ?: auth()->user()->name, 0, 1));
        @endphp

        <div class="row g-4">
            <div class="col-lg-4">
                <div class="hp-card p-4 text-center mb-3">
                    <span class="hp-avatar hp-avatar-lg mb-3" style="margin-inline:auto;">{{ $initials }}</span>
                    <h3 class="h6 fw-bold mb-1">{{ $profile->business_name ?: auth()->user()->name }}</h3>
                    <p class="text-muted small mb-2">{{ auth()->user()->email }}</p>
                    <span class="hp-badge hp-badge-{{ $profile->verification_status }}">{{ $profile->verification_status }}</span>
                    <hr>
                    <div class="text-start small">
                        <p class="d-flex justify-content-between mb-1"><span class="text-muted">Member since</span><span class="fw-semibold">{{ $profile->created_at->format('M Y') }}</span></p>
                        <p class="d-flex justify-content-between mb-1"><span class="text-muted">Experience</span><span class="fw-semibold">{{ $profile->experience_years ?? 0 }} yrs</span></p>
                        <p class="d-flex justify-content-between mb-0"><span class="text-muted">Service radius</span><span class="fw-semibold">{{ $profile->service_radius_km }} km</span></p>
                    </div>
                </div>
                <div class="hp-card p-3">
                    <p class="small text-muted mb-0">
                        &#128161; A complete profile with a clear bio and photo-verified documents gets matched with more customers.
                    </p>
                </div>
            </div>

            <div class="col-lg-8">
                <div class="hp-card p-4">
                    <form method="POST" action="{{ route('provider.profile.update') }}">
                        @csrf
                        @method('PATCH')

                        <p class="hp-section-title">Business details</p>
                        <div class="mb-3">
                            <x-input-label for="business_name" value="Business / Display name" />
                            <x-text-input id="business_name" name="business_name" :value="old('business_name', $profile->business_name)" required />
                            <x-input-error :messages="$errors->get('business_name')" />
                        </div>

                        <div class="mb-3">
                            <x-input-label for="bio" value="Bio / About" />
                            <textarea id="bio" name="bio" rows="3" class="form-control">{{ old('bio', $profile->bio) }}</textarea>
                        </div>

                        <div class="mb-4">
                            <x-input-label for="experience_years" value="Years of experience" />
                            <x-text-input id="experience_years" type="number" min="0" max="60" name="experience_years" :value="old('experience_years', $profile->experience_years)" />
                        </div>

                        <p class="hp-section-title">Location & coverage</p>
                        <div class="mb-3">
                            <x-input-label for="address_line" value="Address" />
                            <x-text-input id="address_line" name="address_line" :value="old('address_line', $profile->address_line)" required />
                            <x-input-error :messages="$errors->get('address_line')" />
                        </div>

                        <div class="row g-3 mb-3">
                            <div class="col-12 col-sm-4">
                                <x-input-label for="city" value="City" />
                                <x-text-input id="city" name="city" :value="old('city', $profile->city)" required />
                                <x-input-error :messages="$errors->get('city')" />
                            </div>
                            <div class="col-12 col-sm-4">
                                <x-input-label for="state" value="State" />
                                <x-text-input id="state" name="state" :value="old('state', $profile->state)" required />
                            </div>
                            <div class="col-12 col-sm-4">
                                <x-input-label for="pincode" value="Pincode" />
                                <x-text-input id="pincode" name="pincode" :value="old('pincode', $profile->pincode)" required />
                            </div>
                        </div>

                        <div class="mb-4">
                            <x-input-label for="service_radius_km" value="Service radius (km)" />
                            <x-text-input id="service_radius_km" type="number" min="1" max="100" name="service_radius_km" :value="old('service_radius_km', $profile->service_radius_km)" required />
                        </div>

                        <p class="hp-section-title">Payout details <span class="text-muted fw-normal" style="text-transform:none;letter-spacing:normal;">(optional)</span></p>
                        <div class="row g-3 mb-4">
                            <div class="col-12 col-sm-4">
                                <x-input-label for="bank_account_name" value="Account holder name" />
                                <x-text-input id="bank_account_name" name="bank_account_name" :value="old('bank_account_name', $profile->bank_account_name)" />
                            </div>
                            <div class="col-12 col-sm-4">
                                <x-input-label for="bank_account_number" value="Account number" />
                                <x-text-input id="bank_account_number" name="bank_account_number" :value="old('bank_account_number', $profile->bank_account_number)" />
                            </div>
                            <div class="col-12 col-sm-4">
                                <x-input-label for="bank_ifsc" value="IFSC" />
                                <x-text-input id="bank_ifsc" name="bank_ifsc" :value="old('bank_ifsc', $profile->bank_ifsc)" />
                            </div>
                        </div>

                        <x-primary-button>{{ __('Save Profile') }}</x-primary-button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection