@extends('layouts.app')

@section('page_title', 'Fuel Price Schedule')

@section('content')
    @include('components.table-component', [
        'pageTitle' => 'Fuel Price Schedule',
        'data' => $schedules ?? [],
        'columns' => [
            ['name' => 'Station', 'key' => 'station_name', 'sortable' => true],
            ['name' => 'Fuel Type', 'key' => 'fuel_type', 'sortable' => true],
            ['name' => 'Current Price', 'key' => 'current_price', 'sortable' => true],
            ['name' => 'New Price', 'key' => 'new_price', 'sortable' => true],
            ['name' => 'Schedule Date', 'key' => 'schedule_date', 'sortable' => true],
            ['name' => 'Status', 'key' => 'status', 'sortable' => true],
            ['name' => 'Created By', 'key' => 'created_by', 'sortable' => true],
            ['name' => 'Created At', 'key' => 'created_at', 'sortable' => true]
        ],
        'allFields' => [
            ['name' => 'Station', 'key' => 'station_id', 'type' => 'select', 'options' => $stations ?? [], 'required' => true],
            ['name' => 'Fuel Type', 'key' => 'fuel_type', 'type' => 'select', 'options' => $fuelTypes ?? [], 'required' => true],
            ['name' => 'New Price', 'key' => 'new_price', 'type' => 'number', 'step' => '0.01', 'required' => true],
            ['name' => 'Schedule Date', 'key' => 'schedule_date', 'type' => 'datetime-local', 'required' => true],
            ['name' => 'Status', 'key' => 'status', 'type' => 'select', 'options' => ['Pending', 'Completed', 'Cancelled'], 'required' => true],
            ['name' => 'Remarks', 'key' => 'remarks', 'type' => 'textarea', 'required' => false]
        ],
        'actions' => ['edit', 'view', 'delete', 'cancel'],
        'showAddButton' => true,
        'addButtonUrl' => route('fuel-price-schedule.create'),
        'showCheckboxes' => true,
        'showBatchDelete' => true,
        'showEditModal' => true,
        'showViewModal' => true,
        'baseRoute' => 'fuel-price-schedule'
    ])
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    const dataTable = initializeDataTable({
        route: '{{ route("fuel-price-schedule.data") }}',
        columns: [
            { data: 'station_name' },
            { data: 'fuel_type' },
            { 
                data: 'current_price',
                render: function(data) {
                    return new Intl.NumberFormat('en-PH', {
                        style: 'currency',
                        currency: 'PHP'
                    }).format(data);
                }
            },
            { 
                data: 'new_price',
                render: function(data) {
                    return new Intl.NumberFormat('en-PH', {
                        style: 'currency',
                        currency: 'PHP'
                    }).format(data);
                }
            },
            { 
                data: 'schedule_date',
                render: function(data) {
                    return moment(data).format('YYYY-MM-DD HH:mm:ss');
                }
            },
            { 
                data: 'status',
                render: function(data) {
                    const colors = {
                        'Pending': 'warning',
                        'Completed': 'success',
                        'Cancelled': 'danger'
                    };
                    return `<span class="badge badge-${colors[data]}">${data}</span>`;
                }
            },
            { data: 'created_by' },
            { 
                data: 'created_at',
                render: function(data) {
                    return moment(data).format('YYYY-MM-DD HH:mm:ss');
                }
            }
        ],
        order: [[4, 'asc']] // Sort by schedule_date by default
    });

    // Handle form submissions
    handleFormSubmission({
        addRoute: '{{ route("fuel-price-schedule.store") }}',
        editRoute: '{{ route("fuel-price-schedule.update", ":id") }}',
        deleteRoute: '{{ route("fuel-price-schedule.destroy", ":id") }}',
        dataTable: dataTable,
        validation: {
            station_id: {
                required: true
            },
            fuel_type: {
                required: true
            },
            new_price: {
                required: true,
                number: true,
                min: 0
            },
            schedule_date: {
                required: true,
                date: true,
                min: function() {
                    return moment().format('YYYY-MM-DDTHH:mm');
                }
            }
        },
        customButtons: [
            {
                text: 'Cancel Schedule',
                action: function(data) {
                    if (confirm('Are you sure you want to cancel this schedule?')) {
                        $.ajax({
                            url: '{{ route("fuel-price-schedule.cancel", ":id") }}'.replace(':id', data.id),
                            type: 'POST',
                            success: function(response) {
                                toastr.success('Schedule cancelled successfully');
                                dataTable.ajax.reload();
                            },
                            error: function(xhr) {
                                toastr.error('Failed to cancel schedule');
                            }
                        });
                    }
                },
                visible: function(data) {
                    return data.status === 'Pending';
                },
                className: 'btn-danger'
            }
        ]
    });

    // Add date range filter
    $('#date-range').daterangepicker({
        ranges: {
            'Today': [moment(), moment()],
            'Tomorrow': [moment().add(1, 'days'), moment().add(1, 'days')],
            'Next 7 Days': [moment(), moment().add(6, 'days')],
            'Next 30 Days': [moment(), moment().add(29, 'days')],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Next Month': [moment().add(1, 'month').startOf('month'), moment().add(1, 'month').endOf('month')]
        }
    }, function(start, end) {
        dataTable.ajax.reload();
    });

    // Station change handler
    $(document).on('change', '#station_id', function() {
        const stationId = $(this).val();
        if (stationId) {
            $.get('{{ route("stations.fuel-prices", ":id") }}'.replace(':id', stationId), function(data) {
                const fuelTypeSelect = $('#fuel_type');
                const currentPrice = data.find(item => item.fuel_type === fuelTypeSelect.val())?.price || 0;
                $('#current_price').val(currentPrice);
            });
        }
    });

    // Fuel type change handler
    $(document).on('change', '#fuel_type', function() {
        const stationId = $('#station_id').val();
        const fuelType = $(this).val();
        if (stationId && fuelType) {
            $.get('{{ route("stations.fuel-prices", ":id") }}'.replace(':id', stationId), function(data) {
                const currentPrice = data.find(item => item.fuel_type === fuelType)?.price || 0;
                $('#current_price').val(currentPrice);
            });
        }
    });
});
</script>
@endpush

@push('styles')
<style>
.badge {
    font-size: 0.875rem;
    padding: 0.375rem 0.5rem;
}
.price-change {
    font-weight: bold;
}
.price-increase {
    color: #dc3545;
}
.price-decrease {
    color: #28a745;
}
</style>
@endpush