@extends('layouts.app')
@section('title', __('lang_v1.stock_transfers'))

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>@lang('lang_v1.stock_transfers')</h1>
</section>

<!-- Main content -->
<section class="content no-print">
    @component('components.filters', ['title' => __('report.filters')])
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('location_id',  __('purchase.business_location') . ':') !!}
                {!! Form::select('location_id', $business_locations, null, ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('lang_v1.all')]); !!}
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('status',  __('sale.status') . ':') !!}
                {!! Form::select('status', $statuses, null, ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('lang_v1.all')]); !!}
            </div>
        </div>
    @endcomponent
    @component('components.widget', ['class' => 'box-primary'])
        @slot('tool')
            <div class="box-tools">
                <a class="btn btn-block btn-primary" href="{{action([\App\Http\Controllers\StockTransferController::class, 'create'])}}">
                    <i class="fa fa-plus"></i> @lang('messages.add')</a>
            </div>
        @endslot
        <div class="table-responsive">
            <table class="table table-bordered table-striped" id="stock_transfer_table">
                <thead>
                    <tr>
                        <th>@lang('messages.date')</th>
                        <th>@lang('purchase.ref_no')</th>
                        <th>@lang('lang_v1.location_from')</th>
                        <th>@lang('lang_v1.location_to')</th>
                        <th>Driver</th>
                        <th>Vehicle</th>
                        <th>Dropoff Date & Time</th>
                        <th>Region</th>
                        <th>Waybill No</th>
                        <th>Mileage (KM)</th>
                        <th>@lang('sale.status')</th>
                        <th>@lang('lang_v1.shipping_charges')</th>
                        <th>@lang('stock_adjustment.total_amount')</th>
                        <th>@lang('purchase.additional_notes')</th>
                        <th class="notexport">@lang('messages.action')</th>
                    </tr>
                </thead>
            </table>
        </div>
    @endcomponent
</section>

<!-- Print Modal -->
<div class="modal fade" id="print_modal" tabindex="-1" role="dialog" aria-labelledby="printModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="printModalLabel">@lang('messages.print')</h4>
            </div>
            <div class="modal-body" id="print_content">
                <!-- Print content will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="window.print();"><i class="fas fa-print"></i> @lang('messages.print')</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">@lang('messages.close')</button>
            </div>
        </div>
    </div>
</div>

@stop

@section('javascript')
<script type="text/javascript">
    $(document).ready(function() {
        // DataTable initialization
        var stock_transfer_table = $('#stock_transfer_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{action([\App\Http\Controllers\StockTransferController::class, 'index'])}}",
                data: function(d) {
                    if($('#location_id').length) {
                        d.location_id = $('#location_id').val();
                    }
                    if($('#status').length) {
                        d.status = $('#status').val();
                    }
                },
                error: function(xhr, error, thrown) {
                    console.error('DataTables Ajax Error:', error);
                    console.error('Details:', thrown);
                    console.error('Response:', xhr.responseText);
                }
            },
            columnDefs: [{
                targets: [11],
                orderable: false,
                searchable: false,
            }],
            aaSorting: [[0, 'desc']],
            columns: [
                { data: 'transaction_date', name: 'transaction_date' },
                { data: 'ref_no', name: 'ref_no' },
                { data: 'location_from', name: 'l1.name' },
                { data: 'location_to', name: 'l2.name' },
                { data: 'driver', name: 'driver' },
                { data: 'vehicle', name: 'vehicle' },
                { data: 'dropoff_datetime', name: 'dropoff_datetime' },
                { data: 'region', name: 'region' },
                { data: 'waybill_no', name: 'waybill_no' },
                { data: 'mileage', name: 'mileage' },
                { 
                    data: 'status',
                    name: 'status',
                    render: function(data, type, row) {
                        if (type === 'display') {
                            var statusColors = {
                                'pending': 'bg-yellow',
                                'in_transit': 'bg-blue',
                                'completed': 'bg-green',
                                'cancelled': 'bg-red'
                            };
                            
                            var html = '<div class="dropdown">';
                            html += '<button class="btn btn-xs dropdown-toggle ' + (statusColors[data] || '') + '" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">';
                            html += data + ' <span class="caret"></span>';
                            html += '</button>';
                            html += '<ul class="dropdown-menu">';
                            
                            Object.keys(statusColors).forEach(function(status) {
                                if (status !== data) {
                                    html += '<li><a href="#" class="status-change" data-status="' + status + '" data-id="' + row.id + '">' + status + '</a></li>';
                                }
                            });
                            
                            html += '</ul></div>';
                            return html;
                        }
                        return data;
                    }
                },
                { data: 'shipping_charges', name: 'shipping_charges' },
                { data: 'final_total', name: 'final_total' },
                { data: 'additional_notes', name: 'additional_notes' },
                { 
                    data: 'action',
                    name: 'action',
                    render: function(data, type, row) {
                        var html = '<div class="btn-group">' +
                            '<button type="button" class="btn btn-info dropdown-toggle btn-xs" ' +
                            'data-toggle="dropdown" aria-expanded="false">' +
                            'Actions <span class="caret"></span><span class="sr-only">Toggle Dropdown</span>' +
                            '</button>' +
                            '<ul class="dropdown-menu dropdown-menu-left" role="menu">' +
                            '<li><a href="' + row.show_url + '"><i class="fas fa-eye"></i> View</a></li>';
                        
                        if (row.can_edit) {
                            html += '<li><a href="' + row.edit_url + '"><i class="fas fa-edit"></i> Edit</a></li>';
                        }
                        
                        html += '<li><a href="#" class="print-invoice" data-href="' + row.print_url + '">' +
                            '<i class="fas fa-print"></i> Print</a></li>';
                        
                        if (row.can_delete) {
                            html += '<li><a href="#" class="delete-stock-transfer" data-href="' + row.delete_url + '">' +
                                '<i class="fas fa-trash"></i> Delete</a></li>';
                        }
                        
                        html += '</ul></div>';
                        return html;
                    }
                }
            ],
            drawCallback: function(settings) {
                console.log('DataTables data:', settings.json);
            }
        });

        // Filter change handlers
        $('#location_id, #status').change(function() {
            console.log('Filter changed:', {
                location: $('#location_id').val(),
                status: $('#status').val()
            });
            stock_transfer_table.ajax.reload();
        });

        // Handle status messages
        @if(session('status'))
            @if(session('status.success'))
                toastr.success(@json(session('status.msg')));
            @else
                toastr.error(@json(session('status.msg')));
            @endif
            // Reload table after status message
            stock_transfer_table.ajax.reload();
        @endif

        // Delete functionality
        $(document).on('click', 'button.delete_stock_transfer', function() {
            swal({
                title: LANG.sure,
                icon: "warning",
                buttons: true,
                dangerMode: true,
            }).then((willDelete) => {
                if (willDelete) {
                    var href = $(this).data('href');
                    $.ajax({
                        method: "DELETE",
                        url: href,
                        dataType: "json",
                        success: function(result) {
                            if (result.success) {
                                toastr.success(result.msg);
                                stock_transfer_table.ajax.reload();
                            } else {
                                toastr.error(result.msg);
                            }
                        }
                    });
                }
            });
        });

        // Add status change handler
        $(document).on('click', '.status-change', function(e) {
            e.preventDefault();
            var link = $(this);
            var newStatus = link.data('status');
            var id = link.data('id');
            
            swal({
                title: LANG.sure,
                text: "Are you sure you want to change the status to '" + newStatus + "'?",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            }).then((willChange) => {
                if (willChange) {
                    $.ajax({
                        method: 'POST',
                        url: '/stock-transfers/update-status/' + id,
                        dataType: 'json',
                        data: {
                            status: newStatus,
                            _token: '{{csrf_token()}}'
                        },
                        success: function(result) {
                            if (result.success) {
                                toastr.success(result.msg);
                                stock_transfer_table.ajax.reload();
                            } else {
                                toastr.error(result.msg);
                            }
                        },
                        error: function() {
                            toastr.error(LANG.something_went_wrong);
                        }
                    });
                }
            });
        });

        // Handle print button click
        $(document).on('click', '.print-invoice', function(e) {
            e.preventDefault();
            var href = $(this).data('href');
            
            $.ajax({
                url: href,
                dataType: 'json',
                success: function(result) {
                    if (result.success == 1 && result.receipt.html_content != '') {
                        $('#print_content').html(result.receipt.html_content);
                        $('#print_modal').modal('show');
                    } else {
                        toastr.error(result.msg);
                    }
                },
                error: function(xhr, status, error) {
                    toastr.error('@lang("messages.something_went_wrong")');
                }
            });
        });
    });
</script>

<style type="text/css">
    @media print {
        .modal-dialog {
            width: 100%;
            margin: 0;
            padding: 0;
        }
        .modal-content {
            border: 0;
            border-radius: 0;
            box-shadow: none;
        }
        .modal-header,
        .modal-footer {
            display: none;
        }
        .modal-body {
            padding: 0;
        }
        .no-print {
            display: none;
        }
    }
</style>
@endsection

<!-- Add this div at the bottom of the page for print content -->
<div id="receipt_section" class="receipt_section"></div>