@extends('layouts.superadmin')

@section('title', 'Stock Manage')
@section('page-title', 'Stock Manage')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">{{ ($__isViewOnly ?? false) ? 'StockCSV Data' : 'Upload StockCSV' }}</h5>
                        <div class="d-flex gap-2">
                            <form action="{{ route('location.stock.dump') }}" method="POST" onsubmit="return confirm('This will create a full backup (dump) of the Stocktable. Continue?');">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-outline-danger">
                                    <i class="fas fa-database"></i> Dump StockTable
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle"></i> {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    @if(session('errorDetails') && count(session('errorDetails')) > 0)
                        <div class="alert alert-warning" role="alert">
                            <div class="mb-3">
                                <h6 class="mb-0">
                                    <i class="fas fa-exclamation-triangle"></i> 
                                    Failed Rows ({{ session('errorCount') }} errors)
                                </h6>
                            </div>
                            
                            <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                                <table class="table table-sm table-bordered table-hover" id="errorTable">
                                    <thead class="table-light sticky-top">
                                        <tr>
                                            <th style="width: 80px;">Row #</th>
                                            <th>Row Data</th>
                                            <th style="width: 300px;">Error Reason</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach(session('errorDetails') as $error)
                                        <tr>
                                            <td class="text-center"><strong>{{ $error['row'] }}</strong></td>
                                            <td><code style="font-size: 11px;">{{ $error['data'] }}</code></td>
                                            <td class="text-danger">{{ $error['error'] }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            
                            <div class="mt-2">
                                <small class="text-muted">
                                    <i class="fas fa-info-circle"></i> 
                                    These rows were skipped. Fix the errors and re-upload the corrected file.
                                </small>
                            </div>
                        </div>
                    @endif

                    @if($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle"></i>
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <form action="{{ route('location.stock.upload') }}" method="POST" enctype="multipart/form-data" id="uploadForm">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="csv_file" class="form-label">Select CSV File</label>
                                    <input type="file" class="form-control" id="csv_file" name="csv_file" accept=".csv" required>
                                    <div class="form-text">
                                        Upload a CSV file containing Stockdata. Maximum file size: 5MB.
                                        File must include a <code>status</code> column with values: <code>new</code>, <code>update</code>, or <code>delete</code>.
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary" id="uploadBtn">
                                    <i class="fas fa-upload"></i> Upload CSV
                                </button>
                            </div>
                        </div>
                    </form>

                    
                </div>
            </div>
        </div>
    </div>

    @if(isset($recentUploads) && count($recentUploads) > 0)
    <div class="row mt-4">
        <div class="col-lg-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Recent Uploads</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>ID</th>
                                    <th>Invoice Number</th>
                                    <th>Part No</th>
                                    <th>Quantity</th>
                                    <th>Rack</th>
                                    <th>Created At</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($recentUploads as $upload)
                                <tr>
                                    <td>{{ $upload->id }}</td>
                                    <td>{{ $upload->invoice_number }}</td>
                                    <td>{{ $upload->part_no }}</td>
                                    <td>{{ $upload->transfer_qty }}</td>
                                    <td>{{ $upload->rack }}</td>
                                    <td>{{ $upload->created_at }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

@push('styles')
<style>
.table-responsive {
    position: relative;
}
.sticky-top {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f8f9fa !important;
}
#errorTable {
    margin-bottom: 0;
}
#errorTable tbody tr:hover {
    background-color: #fff3cd !important;
}
</style>
@endpush

@push('scripts')
<script>
document.getElementById('uploadForm').addEventListener('submit', function() {
    const btn = document.getElementById('uploadBtn');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Uploading...';
});
</script>
@endpush
@endsection