@extends('layouts.admin')

@section('content')
<div class="card">
    <div class="card-header">
        <strong>{{ trans('global.reminder_product_receipt') }}</strong>
    </div>

    <div class="card-body">
        {{-- Tabs --}}
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link {{ $type == 'seller' ? 'active' : '' }}" href="#seller">{{ trans('global.seller') }}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ $type == 'buyer' ? 'active' : '' }}" href="#buyer">{{ trans('global.buyer') }}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ $type == 'shipped' ? 'active' : '' }}" href="#shipped">{{ trans('global.shipped') }}</a>
            </li>
        </ul>

        <div class="table-responsive mt-3">
            <table class="table table-bordered table-striped" id="pendingReceiptsTable">
                <thead>
                    <tr>
                        <th>{{ trans('cruds.follow_up.fields.sku') }}</th>
                        <th>{{ trans('cruds.follow_up.fields.product_name') }}</th>
                        <th>{{ trans('cruds.follow_up.fields.price') }}</th>
                        <th>{{ trans('cruds.follow_up.fields.type') }}</th>
                        <th>{{ trans('cruds.follow_up.fields.buyer_name') }}</th>
                        <th>{{ trans('cruds.follow_up.fields.buyer_mobile_number') }}</th>
                        <th>{{ trans('cruds.follow_up.fields.seller_name') }}</th>
                        <th>{{ trans('cruds.follow_up.fields.seller_mobile_number') }}</th>
                        <th>{{ trans('cruds.follow_up.fields.status') }}</th>
                        <th>{{ trans('cruds.follow_up.fields.action') }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<!-- Message Modal -->
<div class="modal fade" id="messageModal" tabindex="-1" aria-labelledby="messageModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form id="messageForm">
      @csrf
      <input type="hidden" name="product_id" id="modal_product_id">
      <input type="hidden" name="seller_id" id="modal_seller_id">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{{ trans('global.send_message_to_seller') }}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">X</button>
        </div>
        <div class="modal-body">
          <textarea name="message" id="message_text" rows="5" class="form-control" placeholder="Write your message here..." required></textarea>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">{{ trans('global.send_message') }}</button>
        </div>
      </div>
    </form>
  </div>
</div>

@endsection

@section('scripts')
@parent
<script>
$(function () {
    let currentType = "{{ $type }}";

    // $('#pendingReceiptsTable').DataTable({
     let dtOverrideGlobals = {
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('admin.products.reminder_product_receipt') }}",
            data: function (d) {
                d.type = currentType; // dynamic tab value
            }
        },
        columns: [
            { data: 'sku', name: 'sku' },
            { data: 'product_name', name: 'product_name' },
            { data: 'price', name: 'price' },
            { data: 'product_type', name: 'product_type' },
            { data: 'buyer_name', name: 'buyer_name' },
            { data: 'buyer_mobile_number', name: 'buyer_mobile_number' },
            { data: 'seller_name', name: 'seller_name' },
            { data: 'seller_mobile_number', name: 'seller_mobile_number' },
            { data: 'status', name: 'status', orderable: false, searchable: false },
            { data: 'action', name: 'action', orderable: false, searchable: false }
        ]
    };

    let table = $('#pendingReceiptsTable').DataTable($.extend(true, dtOverrideGlobals, {
        initComplete: function () {
            toggleOrderIdColumn(); // SAFE now
        }
    }));

    // Reload table when tab clicked
    $('.nav-link').on('click', function (e) {
        e.preventDefault();

        // Remove active from all tabs
        $('.nav-link').removeClass('active');

        // Add active to clicked tab
        $(this).addClass('active');

        currentType = $(this).attr('href').replace('#', '');

        toggleOrderIdColumn();

        table.ajax.reload();
    });

    /* ================================
        SHOW / HIDE ORDER ID COLUMN
    ================================ */
    function toggleOrderIdColumn() {
        if (!table) return;

        if (currentType === 'shipped') {
            table.column(8).visible(false); // show Status
        } else {
            table.column(8).visible(true); // hide Status
        }
    }

    $(document).on('click', '.reminder', function () {
        const productId = $(this).data('product-id');
        const sellerId = $(this).data('seller-id');

        $('#messageModal').modal('show');
        
        $('#modal_product_id').val(productId);
        $('#modal_seller_id').val(sellerId);
    });

    $(document).on('click', '.btn-close', function () {
        $('#messageModal').modal('hide');
        $('#messageForm')[0].reset();
    });

    $(document).on('submit', '#messageForm', function (e) {
        e.preventDefault();

        $.ajax({
            url: "{{ route('admin.products.admin_send_message_to_seller') }}",
            method: "POST",
            data: $(this).serialize(),
            success: function (response) {
                alert('Message sent successfully!');
                $('#messageModal').modal('hide');
                $('#messageForm')[0].reset();
            },
            error: function () {
                alert("{{ trans('global.something_went_wrong') }}");
            }
        });
    });
});
</script>
@endsection