@extends('layouts.app')

@section('title', 'Company Profile & GST Settings')
@section('page_title', 'Business Profile & GST Place of Origin')

@section('content')
<div class="container-fluid p-0" style="max-width: 950px;">
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white py-3">
            <h5 class="mb-0 fw-bold"><i class="bi bi-building text-primary me-2"></i> Company Profile & GST Billing Settings</h5>
            <small class="text-muted">The State Code selected here defines your business's <strong>Place of Origin</strong> for determining Intra-State (CGST+SGST) vs Inter-State (IGST) tax billing.</small>
        </div>
        <div class="card-body p-4">
            <form action="{{ route('settings.update') }}" method="POST">
                @csrf

                <!-- Basic Profile -->
                <h6 class="fw-bold text-uppercase text-primary small mb-3 border-bottom pb-2">Business Identity</h6>
                <div class="row g-3 mb-4">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Company / Legal Name <span class="text-danger">*</span></label>
                        <input type="text" name="company_name" class="form-control" value="{{ old('company_name', $settings->company_name) }}" required>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Trade / Brand Name</label>
                        <input type="text" name="trade_name" class="form-control" value="{{ old('trade_name', $settings->trade_name) }}">
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Company GSTIN (15 Digits)</label>
                        <input type="text" name="gstin" id="companyGstin" maxlength="15" class="form-control font-monospace text-uppercase" value="{{ old('gstin', $settings->gstin) }}">
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-semibold">PAN Number (10 Digits)</label>
                        <input type="text" name="pan" id="companyPan" maxlength="10" class="form-control font-monospace text-uppercase" value="{{ old('pan', $settings->pan) }}">
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Email Address</label>
                        <input type="email" name="email" class="form-control" value="{{ old('email', $settings->email) }}">
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Phone / Mobile</label>
                        <input type="text" name="phone" class="form-control" value="{{ old('phone', $settings->phone) }}">
                    </div>
                </div>

                <!-- Location & GST State of Origin -->
                <h6 class="fw-bold text-uppercase text-primary small mb-3 border-bottom pb-2">Registered Place of Business (Place of Origin)</h6>
                <div class="row g-3 mb-4">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Registered State & 2-Digit GST Code <span class="text-danger">*</span></label>
                        <select name="state_code" id="companyStateSelect" class="form-select border-primary" required>
                            @foreach($states as $code => $name)
                                <option value="{{ $code }}" {{ old('state_code', $settings->state_code) == $code ? 'selected' : '' }}>
                                    [{{ $code }}] {{ $name }}
                                </option>
                            @endforeach
                        </select>
                        <small class="text-primary fw-semibold">Used as base state to detect Intra-State vs Inter-State supply.</small>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-semibold">City</label>
                        <input type="text" name="city" class="form-control" value="{{ old('city', $settings->city) }}">
                    </div>

                    <div class="col-md-8">
                        <label class="form-label fw-semibold">Street Address</label>
                        <input type="text" name="address" class="form-control" value="{{ old('address', $settings->address) }}">
                    </div>

                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Pincode</label>
                        <input type="text" name="pincode" class="form-control" value="{{ old('pincode', $settings->pincode) }}">
                    </div>
                </div>

                <!-- Banking Details for Invoices -->
                <h6 class="fw-bold text-uppercase text-primary small mb-3 border-bottom pb-2">Bank Details for Invoices</h6>
                <div class="row g-3 mb-4">
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Bank Name</label>
                        <input type="text" name="bank_name" class="form-control" value="{{ old('bank_name', $settings->bank_name) }}" placeholder="e.g. HDFC Bank Ltd">
                    </div>

                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Account Number</label>
                        <input type="text" name="account_no" class="form-control font-monospace" value="{{ old('account_no', $settings->account_no) }}">
                    </div>

                    <div class="col-md-4">
                        <label class="form-label fw-semibold">IFSC Code</label>
                        <input type="text" name="ifsc_code" class="form-control font-monospace text-uppercase" value="{{ old('ifsc_code', $settings->ifsc_code) }}">
                    </div>
                </div>

                <!-- Invoice Prefixes & Terms -->
                <h6 class="fw-bold text-uppercase text-primary small mb-3 border-bottom pb-2">Invoice Configuration & Terms</h6>
                <div class="row g-3 mb-4">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Sales Invoice Prefix <span class="text-danger">*</span></label>
                        <input type="text" name="invoice_prefix" class="form-control font-monospace" value="{{ old('invoice_prefix', $settings->invoice_prefix) }}" required>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Purchase Bill Prefix <span class="text-danger">*</span></label>
                        <input type="text" name="purchase_prefix" class="form-control font-monospace" value="{{ old('purchase_prefix', $settings->purchase_prefix) }}" required>
                    </div>

                    <div class="col-12">
                        <label class="form-label fw-semibold">Standard Terms & Conditions (Prints on Invoices)</label>
                        <textarea name="terms" rows="4" class="form-control">{{ old('terms', $settings->terms) }}</textarea>
                    </div>
                </div>

                <div class="d-flex justify-content-end">
                    <button type="submit" class="btn btn-primary px-5 fw-bold">
                        <i class="bi bi-check2-circle me-1"></i> Save Company Settings
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const gstinInput = document.getElementById('companyGstin');
        const stateSelect = document.getElementById('companyStateSelect');
        const panInput = document.getElementById('companyPan');

        gstinInput.addEventListener('input', function() {
            const val = this.value.trim().toUpperCase();
            if (val.length >= 2) {
                const code = val.substring(0, 2);
                if (stateSelect.querySelector(`option[value="${code}"]`)) {
                    stateSelect.value = code;
                }
            }
            if (val.length >= 12 && !panInput.value) {
                panInput.value = val.substring(2, 12);
            }
        });
    });
</script>
@endpush