@extends('layouts.app')
@section('body-class', 'page-order')

@section('content')
  <x-front-breadcrumb type="route" value="account.sells.index" title="{{ ('SELLING REQUEST') }}" />

  @hookinsert('account.sells_index.top')

  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-3">
        @include('shared.account-sidebar')
      </div>
      <div class="col-12 col-lg-9">
        <div class="account-card-box order-box">
          <div class="account-card-title d-flex justify-content-between align-items-center">
    <span class="fw-bold">Your Requests</span>
    
    <!-- Sell Your Products Button -->
    <a href="{{ front_route('sell.product') }}" 
       class="btn btn-success btn-lg px-4 py-3 ms-3" 
       style="background-color: #c9a627; color: white; border-color: #c9a627; padding: 12px 24px; margin-left: 15px;">
        Sell Your Products
    </a>
</div>


            
           
    <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>Quantity</td>
            <td>Grade/Condition</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>

              </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>


  </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