@extends('layouts.app')
@section('title', 'Warehouses')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item active">Warehouses</li>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Warehouses</h1>
        <p class="page-subtitle">Define warehouses, zones, racks and bins for stock tracking</p>
    </div>
</div>

<div class="row g-4">
    {{-- Add Form --}}
    <div class="col-12 col-xl-4">
        <div class="card">
            <div class="card-header fw-semibold">
                <i class="bi bi-plus-circle me-2 text-primary"></i>Add Location
            </div>
            <div class="card-body">
                @if(auth()->user()->hasPermission('inventory','create'))
                <form method="POST" action="{{ route('inventory.warehouses.store') }}">
                @csrf
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label fw-semibold">Name <span class="text-danger">*</span></label>
                        <input type="text" name="name"
                               class="form-control @error('name') is-invalid @enderror"
                               value="{{ old('name') }}" placeholder="e.g. Main Warehouse" required autofocus>
                        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">Code</label>
                        <input type="text" name="code" class="form-control"
                               value="{{ old('code') }}" placeholder="e.g. WH01">
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">Type <span class="text-danger">*</span></label>
                        <select name="type" class="form-select" required>
                            <option value="warehouse" {{ old('type','warehouse')==='warehouse' ? 'selected':'' }}>Warehouse</option>
                            <option value="zone"      {{ old('type')==='zone'      ? 'selected':'' }}>Zone</option>
                            <option value="rack"      {{ old('type')==='rack'      ? 'selected':'' }}>Rack</option>
                            <option value="bin"       {{ old('type')==='bin'       ? 'selected':'' }}>Bin</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-semibold">Parent Location</label>
                        <select name="parent_id" class="form-select select2">
                            <option value="">— Top Level —</option>
                            @foreach($warehouses as $wh)
                                <option value="{{ $wh->id }}" {{ old('parent_id') == $wh->id ? 'selected':'' }}>
                                    {{ str_repeat('›  ', $wh->depth) }}{{ $wh->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-semibold">Address</label>
                        <textarea name="address" class="form-control" rows="2"
                                  placeholder="Physical address (optional)">{{ old('address') }}</textarea>
                    </div>
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="bi bi-plus-circle me-1"></i>Add Location
                        </button>
                    </div>
                </div>
                </form>
                @endif
            </div>
        </div>
    </div>

    {{-- Warehouse Tree --}}
    <div class="col-12 col-xl-8">
        <div class="card">
            <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
                <span><i class="bi bi-building me-2 text-primary"></i>Warehouse Locations</span>
                <span class="badge bg-light text-dark border">{{ $warehouses->count() }} locations</span>
            </div>
            <div class="card-body p-0">
                @if(count($tree) === 0)
                <div class="text-center py-5 text-muted">
                    <i class="bi bi-building display-5 d-block mb-2"></i>
                    No warehouses yet. Add your first warehouse.
                </div>
                @else
                <div class="table-responsive">
                    <table class="table table-hover mb-0" style="min-width:400px">
                        <thead class="table-light">
                            <tr>
                                <th>Name</th>
                                <th class="d-none d-sm-table-cell" style="width:80px">Code</th>
                                <th style="width:90px">Type</th>
                                <th style="width:80px">Status</th>
                                <th class="text-end pe-3" style="width:80px">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @include('inventory.warehouses._tree', ['items' => $tree, 'level' => 0])
                        </tbody>
                    </table>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Edit Modal --}}
<div class="modal fade" id="editWhModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold"><i class="bi bi-pencil me-2 text-primary"></i>Edit Location</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body pt-2">
                <form method="POST" id="editWhForm">
                @csrf @method('PUT')
                <div class="row g-3">
                    <div class="col-8">
                        <label class="form-label fw-semibold">Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="ewhName" class="form-control" required>
                    </div>
                    <div class="col-4">
                        <label class="form-label fw-semibold">Code</label>
                        <input type="text" name="code" id="ewhCode" class="form-control">
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-semibold">Type</label>
                        <select name="type" id="ewhType" class="form-select">
                            <option value="warehouse">Warehouse</option>
                            <option value="zone">Zone</option>
                            <option value="rack">Rack</option>
                            <option value="bin">Bin</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-semibold">Address</label>
                        <textarea name="address" id="ewhAddress" class="form-control" rows="2"></textarea>
                    </div>
                    <div class="col-12">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1" id="ewhActive">
                            <label class="form-check-label" for="ewhActive">Active</label>
                        </div>
                    </div>
                </div>
                </form>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary px-4"
                        onclick="document.getElementById('editWhForm').submit()">Save</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('.btn-edit-wh').forEach(btn => {
    btn.addEventListener('click', function() {
        document.getElementById('editWhForm').action    = this.dataset.url;
        document.getElementById('ewhName').value        = this.dataset.name;
        document.getElementById('ewhCode').value        = this.dataset.code || '';
        document.getElementById('ewhType').value        = this.dataset.type;
        document.getElementById('ewhAddress').value     = this.dataset.address || '';
        document.getElementById('ewhActive').checked    = this.dataset.active === '1';
        new bootstrap.Modal(document.getElementById('editWhModal')).show();
    });
});
</script>
@endpush