@extends('layouts.app')

@section('page_title', 'Fuel Price Update Logs')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Price Update History</h3>
                    <div class="card-tools">
                        <form class="form-inline">
                            <div class="input-group">
                                <input type="text" 
                                       class="form-control" 
                                       id="dateRange" 
                                       name="date_range" 
                                       value="{{ request('date_range') }}"
                                       placeholder="Select date range">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>Station</th>
                                    <th>Fuel Type</th>
                                    <th>Old Price</th>
                                    <th>New Price</th>
                                    <th>Change</th>
                                    <th>Update Type</th>
                                    <th>Updated By</th>
                                    <th>Updated At</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($logs ?? [] as $log)
                                    <tr>
                                        <td>{{ $log['station_name'] }}</td>
                                        <td>{{ $log['fuel_type'] }}</td>
                                        <td>{{ number_format($log['old_price'], 2) }}</td>
                                        <td>{{ number_format($log['new_price'], 2) }}</td>
                                        <td>
                                            @php
                                                $change = $log['new_price'] - $log['old_price'];
                                                $changeClass = $change > 0 ? 'text-danger' : ($change < 0 ? 'text-success' : 'text-secondary');
                                            @endphp
                                            <span class="{{ $changeClass }}">
                                                {{ $change > 0 ? '+' : '' }}{{ number_format($change, 2) }}
                                            </span>
                                        </td>
                                        <td>
                                            @php
                                                $typeClass = [
                                                    'manual' => 'info',
                                                    'scheduled' => 'warning',
                                                    'import' => 'primary'
                                                ][$log['update_type']] ?? 'secondary';
                                            @endphp
                                            <span class="badge bg-{{ $typeClass }}">
                                                {{ ucfirst($log['update_type']) }}
                                            </span>
                                        </td>
                                        <td>{{ $log['updated_by'] }}</td>
                                        <td>{{ \Carbon\Carbon::parse($log['updated_at'])->format('Y-m-d H:i:s') }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center">No update logs found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    @if(isset($logs) && count($logs) > 0)
                        <div class="mt-3">
                            {{ $logs->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Initialize DateRangePicker
    $('#dateRange').daterangepicker({
        autoUpdateInput: false,
        locale: {
            cancelLabel: 'Clear'
        }
    });

    $('#dateRange').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
    });

    $('#dateRange').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
    });

    // Initialize DataTable
    $('table').DataTable({
        order: [[7, 'desc']], // Sort by updated_at by default
        pageLength: 25,
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    });
});
</script>
@endpush

@push('styles')
<style>
.text-danger {
    color: #dc3545 !important;
}
.text-success {
    color: #28a745 !important;
}
.text-secondary {
    color: #6c757d !important;
}
</style>
@endpush