@extends('layouts.app')

@section('title', 'Start Physical Audit - Pavitram Agroz')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-7">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-2">
                <li class="breadcrumb-item"><a href="{{ route('inventory.reconciliation.index') }}">Stock Reconciliation</a></li>
                <li class="breadcrumb-item active">New Audit</li>
            </ol>
        </nav>
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white py-3">
                <h4 class="card-title fw-bold mb-0">Start Physical Stock Reconciliation Audit</h4>
            </div>
            <div class="card-body p-4">
                <form method="POST" action="{{ route('inventory.reconciliation.store') }}" id="reconciliationForm">
                    @csrf

                    <div class="mb-3">
                        <label class="form-label fw-bold">Target Facility Type</label>
                        <div class="d-flex gap-3">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="location_type" id="type_warehouse" value="warehouse" checked onchange="toggleFacilityDropdown('warehouse')">
                                <label class="form-check-label fw-semibold" for="type_warehouse">
                                    Central Warehouse
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="location_type" id="type_store" value="store" onchange="toggleFacilityDropdown('store')">
                                <label class="form-check-label fw-semibold" for="type_store">
                                    Retail Store
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3" id="warehouseSelectGroup">
                        <label for="warehouse_id" class="form-label fw-bold">Select Warehouse</label>
                        <select name="warehouse_id" id="warehouse_id" class="form-select">
                            @foreach($warehouses as $wh)
                                <option value="{{ $wh->id }}">{{ $wh->name }} ({{ $wh->code }})</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3 d-none" id="storeSelectGroup">
                        <label for="store_id" class="form-label fw-bold">Select Retail Store</label>
                        <select name="store_id" id="store_id" class="form-select">
                            @foreach($stores as $st)
                                <option value="{{ $st->id }}">{{ $st->name }} ({{ $st->code }})</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="notes" class="form-label fw-semibold">Audit Purpose / Cycle Count Remarks</label>
                        <textarea name="notes" id="notes" rows="3" class="form-control" placeholder="e.g. Monthly comprehensive physical verification before quarter-end closing..."></textarea>
                    </div>

                    <div class="alert alert-info border-0 small">
                        <i class="bi bi-info-circle me-1"></i>
                        Starting an audit captures the expected physical stock baseline without locking down operations.
                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-4 pt-3 border-top">
                        <a href="{{ route('inventory.reconciliation.index') }}" class="btn btn-outline-secondary">Cancel</a>
                        <button type="submit" class="btn btn-primary px-4 fw-bold">Start Audit Session</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    function toggleFacilityDropdown(type) {
        document.getElementById('warehouseSelectGroup').classList.toggle('d-none', type !== 'warehouse');
        document.getElementById('storeSelectGroup').classList.toggle('d-none', type !== 'store');
    }
</script>
@endsection