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

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>@lang('lang_v1.omni_channel_services')</h1>
    <br>
    {{-- @include('layouts.partials.search_settings') --}}
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-12">
        <!--  <pos-tab-container> -->
            <div class="col-md-12 pos-tab-container">
                <div class="col-sm-12 col-md-2 pos-tab-menu">
                    <div class="list-group">
                        {{-- <a href="#" class="list-group-item text-center">@lang('lang_v1.shipping_easy')</a> --}}
                        <a href="#" class="list-group-item text-center active">@lang('lang_v1.ship_station')</a>
                        {{-- <a href="#" class="list-group-item text-center">@lang('lang_v1.stamps.com')</a>                     --}}
                    </div>
                </div>
                <div class="col-sm-12 col-md-10 pos-tab">
                    <!-- tab 1 start -->
                    {{-- @include('business.partials.settings_shipping_easy') --}}
                    <!-- tab 1 end -->
                    <!-- tab 2 start -->
                    {{-- @include('business.partials.settings_ship_station') --}}
                    <!-- tab 2 end -->
                    <!-- tab 3 start -->
                    {{-- @include('business.partials.settings_stamps') --}}
                    <!-- tab 3 end -->
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div style="display: inline-flex; width: 100%;">
                <h3 style="width: 91%">ShipStation</h3> 
            </div>
        
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#tab-orders" data-toggle="tab" aria-expanded="true"><i class="fa fa-cubes" aria-hidden="true"></i> Orders</a>
                        </li>
                        <li>
                            <a href="#tab-shipments" data-toggle="tab" aria-expanded="true"><i class="fa fa-cubes" aria-hidden="true"></i> Shipments</a>
                        </li>
                        <li>
                            <a href="#tab-settings" data-toggle="tab" aria-expanded="true"><i class="fa fa-cog" aria-hidden="true"></i> @lang('messages.settings')</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab-orders">
                        @component('components.filters2', ['title' => __('report.filters'), 'id' => 'orders'])
                            <div class="row">
                                <div class="col-xs-12 col-sm-6 col-md-3">
                                    <div class="form-group">
                                        {!! Form::label('orders_status', 'Status:') !!}
                                        {!! Form::text('status', request('status'), ['class' => 'form-control', 'placeholder' => 'Status', 'id' => 'orders_status']) !!}
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-6 col-md-3">
                                    <div class="form-group">
                                        {!! Form::label('orders_customer_email', 'Customer Email:') !!}
                                        {!! Form::email('customer_email', request('customer_email'), ['class' => 'form-control', 'placeholder' => 'Email', 'id' => 'orders_customer_email']) !!}
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-6 col-md-3">
                                    <div class="form-group">
                                        {!! Form::label('orders_start_date', 'Start Date:') !!}
                                        {!! Form::date('start_date', request('start_date'), ['class' => 'form-control', 'id' => 'orders_start_date']) !!}
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-6 col-md-3">
                                    <div class="form-group">
                                        {!! Form::label('orders_end_date', 'End Date:') !!}
                                        {!! Form::date('end_date', request('end_date'), ['class' => 'form-control', 'id' => 'orders_end_date']) !!}
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <button type="button" id="btn_filter_orders" class="btn btn-primary">@lang('messages.filter')</button>
                                    <a href="{{ route('shipping_integration.orders', ['export' => 'csv']) }}" 
                                        id="export_orders_csv" 
                                        data-url="{{ route('shipping_integration.orders') }}" 
                                        class="btn btn-default">Export CSV
                                    </a>
                                </div>
                            </div>
                        @endcomponent

                        <table class="table table-bordered table-striped hide-footer ajax_view" id="orders_table" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th>@lang('messages.actions')</th>
                                    <th>Order #</th>
                                    <th>Status</th>
                                    <th>Order Date</th>
                                    <th>Customer Email</th>
                                    <th>Total</th>
                                    <th>@lang('messages.view')</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="tab-pane" id="tab-shipments">
                        @component('components.filters2', ['title' => __('report.filters'), 'id' => 'shipments'])
                            <div class="col-md-3">
                                <div class="form-group">
                                    {!! Form::label('shipment_status', 'Status:') !!}
                                    {!! Form::text('status', request('status'), ['class' => 'form-control', 'placeholder' => 'Status', 'id' => 'shipment_status']) !!}
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    {!! Form::label('shipment_customer_email', 'Customer Email:') !!}
                                    {!! Form::email('customer_email', request('customer_email'), ['class' => 'form-control', 'placeholder' => 'Email', 'id' => 'shipment_customer_email']) !!}
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    {!! Form::label('shipment_start_date', 'Start Date:') !!}
                                    {!! Form::date('start_date', request('start_date'), ['class' => 'form-control', 'id' => 'shipment_start_date']) !!}
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    {!! Form::label('shipment_end_date', 'End Date:') !!}
                                    {!! Form::date('end_date', request('end_date'), ['class' => 'form-control', 'id' => 'shipment_end_date']) !!}
                                </div>
                            </div>
                            <div class="col-md-12">
                                <button type="button" id="btn_filter_shipments" class="btn btn-primary">@lang('messages.filter')</button>
                                <a href="{{ route('shipping_integration.shipments', ['export' => 'csv']) }}" 
                                    id="export_shipments_csv" 
                                    data-url="{{ route('shipping_integration.shipments') }}" 
                                    class="btn btn-default">Export CSV
                                </a>
                            </div>
                        @endcomponent
                        <table class="table table-bordered table-striped hide-footer ajax_view" id="shipments_table" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th>@lang('messages.actions')</th>
                                    <th>Order #</th>
                                    <th>Carrier</th>
                                    <th>Tracking</th>
                                    <th>Status</th>
                                    <th>Shipped At</th>
                                    <th>@lang('messages.view')</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="tab-pane" id="tab-settings">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul class="list-unstyled">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <form method="POST" action="{{ route('shipping_integration.settings.save') }}" id="shipstation_settings_form">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="shipstation_api_key">Client Key</label>
                                        <input type="text" name="shipstation_api_key" id="shipstation_api_key" class="form-control" value="{{ old('shipstation_api_key', $shipstationConfig['api_key']) }}" placeholder="Enter ShipStation Client Key">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="shipstation_api_secret">Client Secret</label>
                                        <input type="text" name="shipstation_api_secret" id="shipstation_api_secret" class="form-control" value="{{ old('shipstation_api_secret', $shipstationConfig['api_secret']) }}" placeholder="Enter ShipStation Client Secret">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="shipstation_webhook_secret">Webhook Secret</label>
                                        <input type="text" name="shipstation_webhook_secret" id="shipstation_webhook_secret" class="form-control" value="{{ old('shipstation_webhook_secret', $shipstationConfig['webhook_secret']) }}" placeholder="Enter ShipStation Webhook Secret">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="shipstation_store_id">Store ID</label>
                                        <input type="text" name="shipstation_store_id" id="shipstation_store_id" class="form-control" value="{{ old('shipstation_store_id', $shipstationConfig['store_id']) }}" placeholder="Enter Store ID">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="shipstation_base_url">Base URL</label>
                                        <input type="url" name="shipstation_base_url" id="shipstation_base_url" class="form-control" value="{{ old('shipstation_base_url', $shipstationConfig['base_url']) }}" placeholder="https://ssapi.shipstation.com">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="shipstation_page_size">Page Size</label>
                                        <input type="number" min="1" max="500" name="shipstation_page_size" id="shipstation_page_size" class="form-control" value="{{ old('shipstation_page_size', $shipstationConfig['page_size']) }}" placeholder="100">
                                        <small class="help-block">Maximum number of records per API request (default 100).</small>
                                    </div>
                                </div>
                            </div>
                            <div class="text-right">
                                <button type="submit" class="btn btn-primary">@lang('messages.save')</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            {{-- <div class="col-sm-12">
                <button class="btn btn-danger pull-right" type="submit">@lang('business.update_settings')</button>
            </div> --}}
        </div>
    </div>

    <!-- Order View Modal -->
    <div class="modal fade" id="orderViewModal" tabindex="-1" role="dialog" aria-labelledby="orderViewModalLabel">
        <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="orderViewModalLabel">Order Details</h4>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-striped" id="orderViewSummary">
                            <tbody></tbody>
                        </table>
                    </div>
                    <h4>Items</h4>
                    <div class="table-responsive">
                        <table class="table table-bordered" id="orderViewItems">
                            <thead>
                                <tr>
                                    <th>SKU</th>
                                    <th>Name</th>
                                    <th class="text-right">Quantity</th>
                                    <th class="text-right">Unit Price</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <h4>Shipments</h4>
                    <div class="table-responsive">
                        <table class="table table-bordered" id="orderViewShipments">
                            <thead>
                                <tr>
                                    <th>Tracking #</th>
                                    <th>Status</th>
                                    <th>Shipped At</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <h4>Raw Payload</h4>
                    <pre class="pre-scrollable" id="orderViewPayload"></pre>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">@lang('messages.close')</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Order Update Modal -->
    <div class="modal fade" id="orderUpdateModal" tabindex="-1" role="dialog" aria-labelledby="orderUpdateModalLabel">
        <div class="modal-dialog" 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="orderUpdateModalLabel">Update Order</h4>
                </div>
                <form id="orderUpdateForm">
                    <div class="modal-body">
                        <div class="alert alert-danger d-none" id="order-update-errors"></div>
                        <div class="form-group">
                            <label for="order_update_status">Status</label>
                            <input type="text" class="form-control" name="order_status" id="order_update_status">
                        </div>
                        <div class="form-group">
                            <label for="order_update_date">Order Date</label>
                            <input type="date" class="form-control" name="order_date" id="order_update_date">
                        </div>
                        <div class="form-group">
                            <label for="order_update_customer_name">Customer Name</label>
                            <input type="text" class="form-control" name="customer_name" id="order_update_customer_name">
                        </div>
                        <div class="form-group">
                            <label for="order_update_customer_email">Customer Email</label>
                            <input type="email" class="form-control" name="customer_email" id="order_update_customer_email">
                        </div>
                        <div class="form-group">
                            <label for="order_update_total">Total</label>
                            <input type="number" step="0.01" class="form-control" name="total" id="order_update_total">
                        </div>
                        <div class="form-group">
                            <label for="order_update_notes">Notes</label>
                            <textarea class="form-control" name="notes" id="order_update_notes" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">@lang('messages.close')</button>
                        <button type="submit" class="btn btn-primary">@lang('messages.update')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Shipment View Modal -->
    <div class="modal fade" id="shipmentViewModal" tabindex="-1" role="dialog" aria-labelledby="shipmentViewModalLabel">
        <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="shipmentViewModalLabel">Shipment Details</h4>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-striped" id="shipmentViewSummary">
                            <tbody></tbody>
                        </table>
                    </div>
                    <h4>Associated Order</h4>
                    <div class="table-responsive">
                        <table class="table table-bordered" id="shipmentOrderSummary">
                            <tbody></tbody>
                        </table>
                    </div>
                    <h4>Raw Payload</h4>
                    <pre class="pre-scrollable" id="shipmentViewPayload"></pre>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">@lang('messages.close')</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Shipment Update Modal -->
    <div class="modal fade" id="shipmentUpdateModal" tabindex="-1" role="dialog" aria-labelledby="shipmentUpdateModalLabel">
        <div class="modal-dialog" 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="shipmentUpdateModalLabel">Update Shipment</h4>
                </div>
                <form id="shipmentUpdateForm">
                    <div class="modal-body">
                        <div class="alert alert-danger d-none" id="shipment-update-errors"></div>
                        <div class="form-group">
                            <label for="shipment_update_carrier">Carrier</label>
                            <input type="text" class="form-control" name="carrier_code" id="shipment_update_carrier">
                        </div>
                        <div class="form-group">
                            <label for="shipment_update_service">Service</label>
                            <input type="text" class="form-control" name="service_code" id="shipment_update_service">
                        </div>
                        <div class="form-group">
                            <label for="shipment_update_tracking">Tracking Number</label>
                            <input type="text" class="form-control" name="tracking_number" id="shipment_update_tracking">
                        </div>
                        <div class="form-group">
                            <label for="shipment_update_status">Status</label>
                            <input type="text" class="form-control" name="status" id="shipment_update_status">
                        </div>
                        <div class="form-group">
                            <label for="shipment_update_shipped_at">Shipped At</label>
                            <input type="datetime-local" class="form-control" name="shipped_at" id="shipment_update_shipped_at">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">@lang('messages.close')</button>
                        <button type="submit" class="btn btn-primary">@lang('messages.update')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<!-- /.content -->
@stop
@section('javascript')
<script type="text/javascript">
    var ordersTable;
    var shipmentsTable;

    function safeValue(value) {
        return value === null || typeof value === 'undefined' ? '' : value;
    }

    function escapeHtml(value) {
        return $('<div>').text(safeValue(value)).html();
    }

    function notifySuccess(message) {
        var text = message || '{{ __('messages.success') }}';
        if (typeof toastr !== 'undefined') {
            toastr.success(text.replace(/\n/g, '<br>'));
        } else {
            alert(text);
        }
    }

    function notifyError(message) {
        var text = message || '{{ __('messages.something_went_wrong') }}';
        if (typeof toastr !== 'undefined') {
            toastr.error(text.replace(/\n/g, '<br>'));
        } else {
            alert(text);
        }
    }

    function handleAjaxError(xhr, fallbackMessage) {
        if (xhr && xhr.responseJSON) {
            if (xhr.responseJSON.errors) {
                var messages = [];
                $.each(xhr.responseJSON.errors, function(_, value) {
                    messages = messages.concat(value);
                });
                notifyError(messages.join('\n'));
                return;
            }

            if (xhr.responseJSON.message) {
                notifyError(xhr.responseJSON.message);
                return;
            }
        }

        notifyError(fallbackMessage);
    }

    function showFormErrors(containerSelector, xhr) {
        var $container = $(containerSelector);
        var messages = [];

        if (xhr && xhr.responseJSON) {
            if (xhr.responseJSON.errors) {
                $.each(xhr.responseJSON.errors, function(_, value) {
                    messages = messages.concat(value);
                });
            } else if (xhr.responseJSON.message) {
                messages.push(xhr.responseJSON.message);
            }
        }

        if (!messages.length) {
            messages.push('{{ __('messages.something_went_wrong') }}');
        }

        $container.removeClass('d-none').html('<ul><li>' + messages.join('</li><li>') + '</li></ul>');
    }

    function populateOrderViewModal(data) {
        var order = data.order || {};
        var summaryRows = [
            ['Order #', safeValue(order.order_number)],
            ['Status', safeValue(order.order_status)],
            ['Order Date', safeValue(order.order_date)],
            ['Customer Name', safeValue(order.customer_name)],
            ['Customer Email', safeValue(order.customer_email)],
            ['Total', safeValue(order.total)],
            ['Currency', safeValue(order.currency)],
            ['Ship To', safeValue(order.ship_to_name)],
            ['Ship City', safeValue(order.ship_to_city)],
            ['Ship State', safeValue(order.ship_to_state)],
            ['Ship Postal Code', safeValue(order.ship_to_postal_code)],
            ['Notes', safeValue(order.notes)]
        ];

        var summaryHtml = '';
        summaryRows.forEach(function(row) {
            summaryHtml += '<tr><th>' + row[0] + '</th><td>' + escapeHtml(row[1]) + '</td></tr>';
        });
        $('#orderViewSummary tbody').html(summaryHtml);

        var items = Array.isArray(data.items) ? data.items : [];
        var itemsHtml = '';
        if (items.length) {
            items.forEach(function(item) {
                itemsHtml += '<tr>' +
                    '<td>' + escapeHtml(item.sku) + '</td>' +
                    '<td>' + escapeHtml(item.name) + '</td>' +
                    '<td class="text-right">' + escapeHtml(item.quantity) + '</td>' +
                    '<td class="text-right">' + escapeHtml(item.unit_price) + '</td>' +
                '</tr>';
            });
        } else {
            itemsHtml = '<tr><td colspan="4" class="text-center">No items found.</td></tr>';
        }
        $('#orderViewItems tbody').html(itemsHtml);

        var shipments = Array.isArray(data.shipments) ? data.shipments : [];
        var shipmentsHtml = '';
        if (shipments.length) {
            shipments.forEach(function(shipment) {
                shipmentsHtml += '<tr>' +
                    '<td>' + escapeHtml(shipment.tracking_number) + '</td>' +
                    '<td>' + escapeHtml(shipment.status) + '</td>' +
                    '<td>' + escapeHtml(shipment.shipped_at) + '</td>' +
                '</tr>';
            });
        } else {
            shipmentsHtml = '<tr><td colspan="3" class="text-center">No shipments found.</td></tr>';
        }
        $('#orderViewShipments tbody').html(shipmentsHtml);

        var payload = order.raw_payload ? JSON.stringify(order.raw_payload, null, 2) : 'N/A';
        $('#orderViewPayload').text(payload);
    }

    function populateShipmentViewModal(data) {
        var shipment = data.shipment || {};
        var summaryRows = [
            ['Tracking #', safeValue(shipment.tracking_number)],
            ['Carrier', safeValue(shipment.carrier_code)],
            ['Service', safeValue(shipment.service_code)],
            ['Status', safeValue(shipment.status)],
            ['Label URL', safeValue(shipment.label_url)],
            ['Shipped At', safeValue(shipment.shipped_at)]
        ];

        var summaryHtml = '';
        summaryRows.forEach(function(row) {
            summaryHtml += '<tr><th>' + row[0] + '</th><td>' + escapeHtml(row[1]) + '</td></tr>';
        });
        $('#shipmentViewSummary tbody').html(summaryHtml);

        var order = data.order || null;
        var orderHtml = '';
        if (order) {
            var orderRows = [
                ['Order #', safeValue(order.order_number)],
                ['Customer Email', safeValue(order.customer_email)]
            ];
            orderRows.forEach(function(row) {
                orderHtml += '<tr><th>' + row[0] + '</th><td>' + escapeHtml(row[1]) + '</td></tr>';
            });
        } else {
            orderHtml = '<tr><td colspan="2" class="text-center">No order information available.</td></tr>';
        }
        $('#shipmentOrderSummary tbody').html(orderHtml);

        var payload = shipment.raw_payload ? JSON.stringify(shipment.raw_payload, null, 2) : 'N/A';
        $('#shipmentViewPayload').text(payload);
    }

    function fillOrderUpdateForm(order) {
        $('#order_update_status').val(safeValue(order.order_status));
        $('#order_update_date').val(safeValue(order.order_date_for_edit));
        $('#order_update_customer_name').val(safeValue(order.customer_name));
        $('#order_update_customer_email').val(safeValue(order.customer_email));
        $('#order_update_total').val(safeValue(order.total));
        $('#order_update_notes').val(safeValue(order.notes));
    }

    function fillShipmentUpdateForm(shipment) {
        $('#shipment_update_carrier').val(safeValue(shipment.carrier_code));
        $('#shipment_update_service').val(safeValue(shipment.service_code));
        $('#shipment_update_tracking').val(safeValue(shipment.tracking_number));
        $('#shipment_update_status').val(safeValue(shipment.status));
        $('#shipment_update_shipped_at').val(safeValue(shipment.shipped_at_for_edit));
    }

    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var bigenable = $("input[type='radio'][name='shipping_easy_enable']:checked").val();
        var ship_stationenable = $("input[type='radio'][name='ship_station_enable']:checked").val();
        var wooenable = $("input[type='radio'][name='stamps_enable']:checked").val();

        if (bigenable == '1') {
            $('#shipping_easy_api_url, #shipping_easy_api_access_token, #shipping_easy_api_key, #shipping_easy_api_secret').css('display', 'block');
            $('#shipping_easy_space').addClass('col-sm-3');
        } else {
            $('#shipping_easy_api_url, #shipping_easy_api_access_token, #shipping_easy_api_key, #shipping_easy_api_secret').css('display', 'none');
            $('#shipping_easy_space').removeClass('col-sm-3');
        }

        if (ship_stationenable == '1') {
            $('#ship_station_api_url, #ship_station_api_access_token, #ship_station_api_key, #ship_station_api_secret').css('display', 'block');
            $('#ship_station_space').addClass('col-sm-3');
        } else {
            $('#ship_station_api_url, #ship_station_api_access_token, #ship_station_api_key, #ship_station_api_secret').css('display', 'none');
            $('#ship_station_space').removeClass('col-sm-3');
        }

        if (wooenable == '1') {
            $('#stamps_api_url, #stamps_api_access_token, #stamps_api_key, #stamps_api_secret').css('display', 'block');
            $('#stamps_space').addClass('col-sm-3');
        } else {
            $('#stamps_api_url, #stamps_api_access_token, #stamps_api_key, #stamps_api_secret').css('display', 'none');
            $('#stamps_space').removeClass('col-sm-3');
        }

        reset_orders_field();
        reset_shipments_field();

        ordersTable = $('#orders_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('shipping_integration.orders') }}",
                data: function (d) {
                    d.status = $('#orders_status').val();
                    d.customer_email = $('#orders_customer_email').val();
                    d.start_date = $('#orders_start_date').val();
                    d.end_date = $('#orders_end_date').val();
                }
            },
            columns: [
                { data: 'actions', name: 'actions', orderable: false, searchable: false },
                { data: 'order_number', name: 'order_number' },
                { data: 'order_status', name: 'order_status' },
                { data: 'order_date', name: 'order_date' },
                { data: 'customer_email', name: 'customer_email' },
                { data: 'total', name: 'total' },
                { data: 'view', name: 'view', orderable: false, searchable: false }
            ],
            dom: 'lfrtip',
            scrollX: true,
            scrollCollapse: true,
        });

        shipmentsTable = $('#shipments_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('shipping_integration.shipments') }}",
                data: function (d) {
                    d.status = $('#shipment_status').val();
                    d.customer_email = $('#shipment_customer_email').val();
                    d.start_date = $('#shipment_start_date').val();
                    d.end_date = $('#shipment_end_date').val();
                }
            },
            columns: [
                { data: 'actions', name: 'actions', orderable: false, searchable: false },
                { data: 'order_number', name: 'order.order_number' },
                { data: 'carrier_code', name: 'carrier_code' },
                { data: 'tracking_number', name: 'tracking_number' },
                { data: 'status', name: 'status' },
                { data: 'shipped_at', name: 'shipped_at' },
                { data: 'view', name: 'view', orderable: false, searchable: false }
            ],
            dom: 'lfrtip',
            scrollX: true,
            scrollCollapse: true,
        });

        $('#btn_filter_orders').on('click', function() {
            ordersTable.draw();
        });

        $('#btn_filter_shipments').on('click', function() {
            shipmentsTable.draw();
        });

        $('#export_orders_csv').on('mousedown', function() {
            updateExportLink('orders');
        });

        $('#export_shipments_csv').on('mousedown', function() {
            updateExportLink('shipments');
        });

        $('a[data-toggle="tab"]').on('shown.bs.tab', function() {
            $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
        });

        $(document).on('click', '.view-order', function() {
            var url = $(this).data('href');
            var title = $(this).data('title');
            $('#orderViewModalLabel').text(title ? 'Order Details - ' + title : 'Order Details');

            $.get(url)
                .done(function(response) {
                    populateOrderViewModal(response);
                    $('#orderViewModal').modal('show');
                })
                .fail(function(xhr) {
                    handleAjaxError(xhr, 'Unable to load order details.');
                });
        });

        $(document).on('click', '.view-shipment', function() {
            var url = $(this).data('href');
            var title = $(this).data('title');
            $('#shipmentViewModalLabel').text(title ? 'Shipment Details - ' + title : 'Shipment Details');

            $.get(url)
                .done(function(response) {
                    populateShipmentViewModal(response);
                    $('#shipmentViewModal').modal('show');
                })
                .fail(function(xhr) {
                    handleAjaxError(xhr, 'Unable to load shipment details.');
                });
        });

        $(document).on('click', '.update-order', function() {
            var fetchUrl = $(this).data('fetch');
            var actionUrl = $(this).data('href');
            $('#order-update-errors').addClass('d-none').empty();
            $('#orderUpdateForm').data('action', actionUrl);

            $.get(fetchUrl)
                .done(function(response) {
                    fillOrderUpdateForm(response.order || {});
                    $('#orderUpdateModal').modal('show');
                })
                .fail(function(xhr) {
                    handleAjaxError(xhr, 'Unable to load order details.');
                });
        });

        $(document).on('click', '.update-shipment', function() {
            var fetchUrl = $(this).data('fetch');
            var actionUrl = $(this).data('href');
            $('#shipment-update-errors').addClass('d-none').empty();
            $('#shipmentUpdateForm').data('action', actionUrl);

            $.get(fetchUrl)
                .done(function(response) {
                    fillShipmentUpdateForm(response.shipment || {});
                    $('#shipmentUpdateModal').modal('show');
                })
                .fail(function(xhr) {
                    handleAjaxError(xhr, 'Unable to load shipment details.');
                });
        });

        $(document).on('click', '.delete-order', function() {
            var url = $(this).data('href');
            var name = $(this).data('name') || 'this order';

            if (!confirm('Are you sure you want to delete ' + name + '?')) {
                return;
            }

            $.ajax({
                url: url,
                method: 'DELETE'
            }).done(function(response) {
                notifySuccess(response.message || 'ShipStation order deleted successfully.');
                ordersTable.ajax.reload(null, false);
            }).fail(function(xhr) {
                handleAjaxError(xhr, 'Unable to delete order.');
            });
        });

        $(document).on('click', '.delete-shipment', function() {
            var url = $(this).data('href');
            var name = $(this).data('name') || 'this shipment';

            if (!confirm('Are you sure you want to delete ' + name + '?')) {
                return;
            }

            $.ajax({
                url: url,
                method: 'DELETE'
            }).done(function(response) {
                notifySuccess(response.message || 'ShipStation shipment deleted successfully.');
                shipmentsTable.ajax.reload(null, false);
            }).fail(function(xhr) {
                handleAjaxError(xhr, 'Unable to delete shipment.');
            });
        });

        $('#orderUpdateForm').on('submit', function(e) {
            e.preventDefault();
            var actionUrl = $(this).data('action');
            $('#order-update-errors').addClass('d-none').empty();

            $.ajax({
                url: actionUrl,
                method: 'PUT',
                data: $(this).serialize()
            }).done(function(response) {
                $('#orderUpdateModal').modal('hide');
                notifySuccess(response.message || '{{ __('lang_v1.updated_success') }}');
                ordersTable.ajax.reload(null, false);
            }).fail(function(xhr) {
                showFormErrors('#order-update-errors', xhr);
            });
        });

        $('#shipmentUpdateForm').on('submit', function(e) {
            e.preventDefault();
            var actionUrl = $(this).data('action');
            $('#shipment-update-errors').addClass('d-none').empty();

            $.ajax({
                url: actionUrl,
                method: 'PUT',
                data: $(this).serialize()
            }).done(function(response) {
                $('#shipmentUpdateModal').modal('hide');
                notifySuccess(response.message || '{{ __('lang_v1.updated_success') }}');
                shipmentsTable.ajax.reload(null, false);
            }).fail(function(xhr) {
                showFormErrors('#shipment-update-errors', xhr);
            });
        });

        function updateExportLink(type) {
            var params = {};
            var exportLink;

            if (type === 'orders') {
                exportLink = $('#export_orders_csv');
                params = {
                    status: $('#orders_status').val(),
                    customer_email: $('#orders_customer_email').val(),
                    start_date: $('#orders_start_date').val(),
                    end_date: $('#orders_end_date').val()
                };
            } else if (type === 'shipments') {
                exportLink = $('#export_shipments_csv');
                params = {
                    status: $('#shipment_status').val(),
                    customer_email: $('#shipment_customer_email').val(),
                    start_date: $('#shipment_start_date').val(),
                    end_date: $('#shipment_end_date').val()
                };
            }

            var baseUrl = exportLink.data('url');
            var queryParams = new URLSearchParams();

            for (const key in params) {
                if (params[key]) {
                    queryParams.append(key, params[key]);
                }
            }

            queryParams.append('export', 'csv');
            var newHref = baseUrl + '?' + queryParams.toString();
            exportLink.attr('href', newHref);
        }
    });

    function reset_orders_field()
    {
        $('#orders_status').val('');
        $('#orders_customer_email').val('');
        $('#orders_start_date').val('');
        $('#orders_end_date').val('');
    }

    function reset_shipments_field()
    {
        $('#shipment_status').val('');
        $('#shipment_customer_email').val('');
        $('#shipment_start_date').val('');
        $('#shipment_end_date').val('');
    }

    function get_input(val, tipe) {
        if(val == '1') {
            if(tipe == 'bigcommerce') {
                $('#shipping_easy_api_url').css('display', 'block')
                $('#shipping_easy_api_access_token').css('display', 'block')
                $('#shipping_easy_api_key').css('display', 'block')
                $('#shipping_easy_api_secret').css('display', 'block')
                $('#shipping_easy_space').addClass('col-sm-3')
            }
            if(tipe == 'ship_station') {
                $('#ship_station_api_url').css('display', 'block')
                $('#ship_station_api_access_token').css('display', 'block')
                $('#ship_station_api_key').css('display', 'block')
                $('#ship_station_api_secret').css('display', 'block')
                $('#ship_station_space').addClass('col-sm-3')
            }
            if(tipe == 'stamps') {
                $('#stamps_api_url').css('display', 'block')
                $('#stamps_api_access_token').css('display', 'block')
                $('#stamps_api_key').css('display', 'block')
                $('#stamps_api_secret').css('display', 'block')
                $('#stamps_space').addClass('col-sm-3')
            }
        } else {
            if(tipe == 'bigcommerce') {
                $('#shipping_easy_api_url').css('display', 'none')
                $('#shipping_easy_api_access_token').css('display', 'none')
                $('#shipping_easy_api_key').css('display', 'none')
                $('#shipping_easy_api_secret').css('display', 'none')
                $('#shipping_easy_space').removeClass('col-sm-3')
            }
            if(tipe == 'ship_station') {
                $('#ship_station_api_url').css('display', 'none')
                $('#ship_station_api_access_token').css('display', 'none')
                $('#ship_station_api_key').css('display', 'none')
                $('#ship_station_api_secret').css('display', 'none')
                $('#ship_station_space').removeClass('col-sm-3')
            }
            if(tipe == 'stamps') {
                $('#stamps_api_url').css('display', 'none')
                $('#stamps_api_access_token').css('display', 'none')
                $('#stamps_api_key').css('display', 'none')
                $('#stamps_api_secret').css('display', 'none')
                $('#stamps_space').removeClass('col-sm-3')
            }
        }
    }
</script>
@endsection