@extends('layouts.app')
@section('title', 'Company · Settings')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('settings.index') }}">Settings</a></li>
    <li class="breadcrumb-item active" aria-current="page">Company</li>
@endsection

@section('content')
    <x-layout.page-header title="Company details" subtitle="Appears on invoices, quotes and reports." icon="building" />
    @include('pages.settings._tabs', ['active' => 'company'])

    <form method="POST" action="{{ route('settings.company.update') }}" enctype="multipart/form-data" class="settings-form">
        @csrf
        @method('PUT')

        <x-ui.card title="Business identity" icon="card-heading">
            <div class="row g-3">
                <div class="col-md-6">
                    <x-form.input name="name" label="Business name" :value="$company->name" required />
                </div>
                <div class="col-md-6">
                    <x-form.input name="legal_name" label="Legal name" :value="$company->legal_name" />
                </div>
                <div class="col-md-6">
                    <x-form.input name="owner_name" label="Owner name" :value="$company->owner_name" required />
                </div>
                <div class="col-md-3">
                    <x-form.input name="gstin" label="GSTIN" :value="$company->gstin" placeholder="15-char GSTIN" />
                </div>
                <div class="col-md-3">
                    <x-form.input name="pan" label="PAN" :value="$company->pan" />
                </div>
            </div>
        </x-ui.card>

        <x-ui.card title="Contact" icon="telephone">
            <div class="row g-3">
                <div class="col-md-4">
                    <x-form.input name="phone" label="Phone" :value="$company->phone" required type="tel" />
                </div>
                <div class="col-md-4">
                    <x-form.input name="email" label="Email" :value="$company->email" required type="email" />
                </div>
                <div class="col-md-4">
                    <x-form.input name="website" label="Website" :value="$company->website" type="url" />
                </div>
            </div>
        </x-ui.card>

        <x-ui.card title="Registered address" icon="geo-alt">
            <div class="row g-3">
                <div class="col-12">
                    <x-form.textarea name="address_line1" label="Street address" rows="2" :value="$company->address_line1" required />
                </div>
                <div class="col-md-4">
                    <x-form.input name="city" label="City" :value="$company->city" required />
                </div>
                <div class="col-md-4">
                    <x-form.input name="state" label="State" :value="$company->state" required />
                </div>
                <div class="col-md-2">
                    <x-form.input name="pincode" label="PIN" :value="$company->pincode" required />
                </div>
                <div class="col-md-2">
                    <x-form.input name="country" label="Country" :value="$company->country" required />
                </div>
            </div>
        </x-ui.card>

        <x-ui.card title="Branding" icon="palette2">
            <div class="row g-3">
                <div class="col-md-6">
                    <x-form.file name="logo" label="Replace logo" accept="image/*"
                        :preview="$company->logo_url" help="PNG/JPG/SVG, up to 2 MB." />
                </div>
                <div class="col-md-3">
                    <x-form.input name="brand_color" label="Brand color" type="color" :value="$company->brand_color" />
                </div>
            </div>
        </x-ui.card>

        <x-layout.sticky-save label="Save company details" :cancel-href="route('settings.index')" hint="Changes are audited." />
    </form>
@endsection