@extends('panel::layouts.app')
@section('body-class', '')

@section('title', ('Sell Request'))

@section('content')
<div class="card h-min-600">
  <div class="card-body">

    <x-panel-criteria :criteria="$criteria ?? []" :action="panel_route('sells.index')" />

    @if ($sells->count())
    <div class="table-responsive">
      <table class="table align-middle">
        <thead>
          <tr>
            <td>{{ __('panel/common.id') }}</td>
            <td>Product name</td>
            <td>Category</td>
            <td>Subcategory</td>
            <td>Variety/type</td>
            <td>Grade/Condition</td>
            <td>Quantity</td>
            <td>Product Description</td>
            <td>First Name</td>
            <td>Last Name</td>
            <td>Email</td>
            <td>Phone number</td>
            <td>Status</td>
            <td>Comment</td>
            <td>{{ __('panel/common.actions') }}</td>
          </tr>
        </thead>
        <tbody>
          @foreach($sells as $item)
            <tr>
              <td>{{ $item->id }}</td>
              <td>{{ $item->product }}</td>
              <td>{{ $item->category }}</td>
              <td>{{ $item->subcategory }}</td>
              <td>{{ $item->variety }}</td>
              <td>{{ $item->grade }}</td>
              <td>{{ $item->quantity }}</td>
              <td>{{ $item->description }}</td>
              <td>{{ $item->name }}</td>
              <td>{{ $item->last_name }}</td>
              <td>{{ $item->email }}</td>
              <td>{{ $item->phone }}</td>
              <td>
                @if($item->status == 'approved')
                  <span class="badge bg-success">Approved</span>
                @else
                  <span class="badge bg-warning">Pending</span>
                @endif
              </td>
              <td>{{ $item->comment ?? 'No comment' }}</td>
              <td>
                <a href="{{ panel_route('sells.show', [$item->id]) }}" class="btn btn-sm btn-outline-primary">
                    {{ __('panel/common.view') }}
                </a>
                <!-- Comment Button -->
                <button class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#commentModal" 
                        data-id="{{ $item->id }}" data-comment="{{ $item->comment ?? '' }}">
                    Comment
                </button>

                <!-- Approve Button -->
                @if($item->status != 'approved')
                <button class="btn btn-sm btn-success approve-btn" data-id="{{ $item->id }}">
                    Approve
                </button>
                @endif
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>

    <!-- Comment Modal -->
    <div class="modal fade" id="commentModal" tabindex="-1" aria-labelledby="commentModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="commentModalLabel">Add Comment</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="sell_id">
                    <label for="comment">Comment:</label>
                    <textarea class="form-control" id="comment" rows="3"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="saveComment">Save Comment</button>
                </div>
            </div>
        </div>
    </div>

    @else
    <x-common-no-data />
    @endif
  </div>
</div>
@endsection

@push('footer')
<script>
    $(document).ready(function() {
        // Handle Comment Button Click (Opens Modal)
        $('#commentModal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var sellId = button.data('id');
            var existingComment = button.data('comment');

            $('#sell_id').val(sellId);
            $('#comment').val(existingComment);
        });

        // Save Comment AJAX
        $('#saveComment').click(function() {
            var sellId = $('#sell_id').val();
            var comment = $('#comment').val();

            $.ajax({
                url: '{{ panel_route("sells.comment") }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    id: sellId,
                    comment: comment
                },
                success: function(response) {
                    alert('Comment saved successfully!');
                    location.reload();
                },
                error: function(error) {
                    alert('Error saving comment!');
                }
            });
        });

        // Approve Button Click (AJAX Request)
        $('.approve-btn').click(function() {
            var sellId = $(this).data('id');

            $.ajax({
                url: '{{ panel_route("sells.approve") }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    id: sellId
                },
                success: function(response) {
                    alert('Sell request approved successfully!');
                    location.reload();
                },
                error: function(error) {
                    alert('Error approving sell request!');
                }
            });
        });
    });
</script>
@endpush